• トップ
  • ブログ一覧
  • 【第7回】Go言語(Golang)入門~HTMLテンプレート利用編~
  • 【第7回】Go言語(Golang)入門~HTMLテンプレート利用編~

    笹川(エンジニア)笹川(エンジニア)
    2019.10.23

    IT技術

    第7回~Go言語(Golang)入門~

    秋山笹川先生

    (株)ライトコードの笹川(ささがわ)です!

    今回は、前回に引き続き、TwitterAPI を利用していきます。

    そして、HTMLテンプレートでエゴサの結果を表示してみたいと思います!

    前回の記事はこちら

    featureImg2019.10.17【第6回】Go言語(Golang)入門~Twitter API利用編~第6回~Go言語(Golang)入門~笹川先生(株)ライトコードの笹川(ささがわ)です!先日、Twitterでアンケー...

    まずは基本的な使い方を覚えよう

    【echoドキュメント】
    https://echo.labstack.com/guide/templates

    上記の echoのドキュメント を参考に、簡単なHTMLテンプレートを作成してみます。

    hello.html の作成

    public/views/  に hello.html を作成します。

    1{{define "hello"}}Hello, {{.}}!{{end}}

    main.go

    次に、main.go にテンプレートの設定を記載します。

    1package main
    2
    3import (
    4    "html/template"
    5    "io"
    6    "net/http"
    7
    8    "github.com/labstack/echo"
    9)
    10
    11type Template struct {
    12    templates *template.Template
    13}
    14
    15func (t *Template) Render(w io.Writer, name string, data interface{}, c echo.Context) error {
    16    return t.templates.ExecuteTemplate(w, name, data)
    17}
    18
    19func Hello(c echo.Context) error {
    20    return c.Render(http.StatusOK, "hello", "World")
    21}
    22
    23func main() {
    24    e := echo.New()
    25    t := &Template{
    26        templates: template.Must(template.ParseGlob("public/views/*.html")),
    27    }
    28    e.Renderer = t
    29    e.GET("/hello", Hello)
    30
    31    e.Logger.Fatal(e.Start(":8000"))
    32}

    確認

    こちらで実行してみます。

    問題なく成功しました。

    受け取った値を出力

    このまま、GETパラメーターで受け取った値を出力してみます!

    Helloメソッドだけ修正し、 value  というパラメーターに付いてる値を出力するようにします。

    1func Hello(c echo.Context) error {
    2    value := c.QueryParam("value")
    3    return c.Render(http.StatusOK, "hello", value)
    4}

    確認

    http://localhost:8000/hello?value=Noriyuki

    でアクセスしてみます。

    無事に挨拶してくれました!

    これで受け口となる処理は、問題なさそうです。

    TwitterAPIから取得データを表示してみよう

    では、下記のような感じで、検索したツイートを表示してみたいと思います。

    構造体の用意

    まずは、API のレスポンスをパースするための構造体を用意します。

    1type TweetTempete struct {
    2    User string `json:"user"`
    3    Text string `json:"text"`
    4    ScreenName string `json:"screenName"`
    5    Id string `json:"id"`
    6    Date string `json:"date"`
    7    TweetId string `json:"tweetId"`
    8}

    テンプレート用htmlファイルを用意

    次に、テンプレート用のhtmlファイルを、public/views の直下に用意します。

    1<html>
    2
    3<body>
    4
    5  <blockquote class="twitter-tweet">
    6    <p lang="ja" dir="ltr">{{.Text}}</p>&mdash; {{.User}} (@{{.ScreenName}}) <a href='https://twitter.com/{{.Id}}/status/{{.TweetId}}'>{{.Date}}</a>
    7  </blockquote>
    8  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    9
    10</body>
    11
    12</html>

    TwitterAPIのリクエストからパース、テンプレートまでの当て込み

    次に、TwitterAPI のリクエストからパース、テンプレートまでの当て込みを実装します。

    TwitterAPI への接続は、前回の記事 か 笹川のリポジトリ を参考にしてみてください。

    1func Tweet(c echo.Context) error {
    2    value := c.QueryParam("value")
    3    api := twitter.ConnectTwitterApi()
    4    //検索
    5    searchResult, _ := api.GetSearch(`"` + value + `"`, nil)
    6    tweet := new(TweetTempete)
    7    for _, data := range searchResult.Statuses {
    8        tweet.Text = data.FullText
    9        tweet.User = data.User.Name
    10        tweet.Id = data.User.IdStr
    11        tweet.ScreenName = data.User.ScreenName
    12        tweet.Date = data.CreatedAt
    13        tweet.TweetId = data.IdStr
    14        break
    15    }
    16    return c.Render(http.StatusOK, "tweet.html", tweet)
    17}

    最後に、echo でルーティングしたら完了です。

    完成

    完成すると、下記のようになります。

    1package main
    2
    3import (
    4	"go_example/twitter"
    5    "html/template"
    6    "net/http"
    7    "github.com/labstack/echo"
    8    "io"
    9)
    10
    11func main() {
    12    e := echo.New()
    13    t := &Template{
    14        templates: template.Must(template.ParseGlob("public/views/*.html")),
    15    }
    16    e.Renderer = t
    17    e.GET("/tweet", tweet)
    18
    19    e.Logger.Fatal(e.Start(":8000"))
    20}
    21
    22func (t *Template) Render(w io.Writer, name string, data interface{}, c echo.Context) error {
    23    return t.templates.ExecuteTemplate(w, name, data)
    24}
    25
    26func tweet(c echo.Context) error {
    27    value := c.QueryParam("value")
    28    api := twitter.ConnectTwitterApi()
    29    //検索
    30    searchResult, _ := api.GetSearch(`"` + value + `"`, nil)
    31    tweet := new(TweetTempete)
    32    for _, data := range searchResult.Statuses {
    33        tweet.Text = data.FullText
    34        tweet.User = data.User.Name
    35        tweet.Id = data.User.IdStr
    36        tweet.ScreenName = data.User.ScreenName
    37        tweet.Date = data.CreatedAt
    38        tweet.TweetId = data.IdStr
    39        break
    40    }
    41    return c.Render(http.StatusOK, "tweet.html", tweet)
    42}
    43
    44type Template struct {
    45    templates *template.Template
    46}
    47
    48// TweetTempete はツイートの情報
    49type TweetTempete struct {
    50    User string `json:"user"`
    51    Text string `json:"text"`
    52    ScreenName string `json:"screenName"`
    53    Id string `json:"id"`
    54    Date string `json:"date"`
    55    TweetId string `json:"tweetId"`
    56}

    確認

    http://localhost:8000/tweet?value=Go Firestore

    でアクセスしてみると…

    はい、成功です!

    私のツイートがでてきました(笑)

    この調子で、検索したツイートが全部表示されるようにしてみましょう。

    配列をテンプレートに当て込んでみよう

    tweets.htmlの作成

    まずは、public/view に tweets.html を作成します。

    1<html>
    2<style type="text/css">
    3  .thum>* {
    4    float: left;
    5    margin-left: 10
    6  }
    7</style>
    8
    9<body>
    10  <div class="thum">
    11    {{range .}}
    12    <blockquote class="twitter-tweet">
    13      <p lang="ja" dir="ltr">{{.Text}}</p>&mdash; {{.User}} (@{{.ScreenName}}) <a
    14        href='https://twitter.com/{{.Id}}/status/{{.TweetId}}'>{{.Date}}</a>
    15    </blockquote>
    16    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    17    {{end}}
    18  </div>
    19</body>
    20
    21</html>

    テンプレートに値を渡す

    次に、先ほどと同じように、TwitterAPI から検索してデータを入れ込み、テンプレートに値を渡します。

    1func tweets(c echo.Context) error {
    2    value := c.QueryParam("value")
    3    api := twitter.ConnectTwitterApi()
    4    //検索
    5    searchResult, _ := api.GetSearch(`"` + value + `"`, nil)
    6    tweets := make([]*TweetTempete, 0)
    7    for _, data := range searchResult.Statuses {
    8        tweet := new(TweetTempete)
    9        tweet.Text = data.FullText
    10        tweet.User = data.User.Name
    11        tweet.Id = data.User.IdStr
    12        tweet.ScreenName = data.User.ScreenName
    13        tweet.Date = data.CreatedAt
    14        tweet.TweetId = data.IdStr
    15        tweets = append(tweets, tweet)
    16    }
    17
    18    return c.Render(http.StatusOK, "tweets.html", tweets)
    19}

    最後に echo でルーティングしたら完了です。

    完成

    完成すると、下記のようになります。

    1package main
    2
    3import (
    4	"go_example/twitter"
    5    "html/template"
    6    "net/http"
    7    "github.com/labstack/echo"
    8    "io"
    9)
    10
    11func main() {
    12    e := echo.New()
    13    t := &Template{
    14        templates: template.Must(template.ParseGlob("public/views/*.html")),
    15    }
    16    e.Renderer = t
    17    e.GET("/tweets", tweets)
    18
    19    e.Logger.Fatal(e.Start(":8000"))
    20}
    21
    22func (t *Template) Render(w io.Writer, name string, data interface{}, c echo.Context) error {
    23    return t.templates.ExecuteTemplate(w, name, data)
    24}
    25
    26func tweets(c echo.Context) error {
    27    value := c.QueryParam("value")
    28    api := twitter.ConnectTwitterApi()
    29    //検索
    30    searchResult, _ := api.GetSearch(`"` + value + `"`, nil)
    31    tweets := make([]*TweetTempete, 0)
    32    for _, data := range searchResult.Statuses {
    33        tweet := new(TweetTempete)
    34        tweet.Text = data.FullText
    35        tweet.User = data.User.Name
    36        tweet.Id = data.User.IdStr
    37        tweet.ScreenName = data.User.ScreenName
    38        tweet.Date = data.CreatedAt
    39        tweet.TweetId = data.IdStr
    40        tweets = append(tweets, tweet)
    41    }
    42
    43    return c.Render(http.StatusOK, "tweets.html", tweets)
    44}
    45
    46type Template struct {
    47    templates *template.Template
    48}
    49
    50// TweetTempete はツイートの情報
    51type TweetTempete struct {
    52    User string `json:"user"`
    53    Text string `json:"text"`
    54    ScreenName string `json:"screenName"`
    55    Id string `json:"id"`
    56    Date string `json:"date"`
    57    TweetId string `json:"tweetId"`
    58}

    確認

    http://localhost:8000/tweets?value=ライトコード

    でアクセスしてみると…

    それっぽいのがでました!

    成功です!

    なんと、全部、笹川の記事(笑)

    第8回へつづく!

    今回は、「HTMLテンプレート」と「TwitterAPI」の組み合わせで、前回の記事よりもリッチなTwitterクライアントを作ってみました。

    ちょっとしたWebアプリケーションならば、Go言語(Golang)でサクッとできちゃいますね!

    今回、作成したgoファイルはこちらのリポジトリにて管理しております。

    次回の記事はこちら

    featureImg2019.10.30【第8回】Go言語(Golang)入門~環境見直し編~第8回~Go言語(Golang)入門~笹川先生(株)ライトコードの笹川(ささがわ)です!前回は、TwitterAPI ...

    オススメのGo入門本

    Goプログラミング実践入門 標準ライブラリでゼロからWebアプリを作る
    Goプログラミング実践入門 標準ライブラリでゼロからWebアプリを作る

     

    こちらの記事もオススメ!

    featureImg2020.08.08Go言語 特集知識編人気急上昇中のGo言語(Golang)って何だ?実装編Go言語(Golang)入門...

    featureImg2020.07.17ライトコード的「やってみた!」シリーズ「やってみた!」を集めました!(株)ライトコードが今まで作ってきた「やってみた!」記事を集めてみました!※作成日が新し...

    第1回の記事はこちら

    featureImg2019.09.13【第1回】Go言語(Golang)入門~環境構築編~第1回~Go言語(Golang)を習得したい!~笹川先生(株)ライトコードでモバイルアプリケーション開発をしている笹川...

    笹川(エンジニア)

    笹川(エンジニア)

    おすすめ記事