【第7回】Go言語（Golang）入門～HTMLテンプレート利用編～

笹川（エンジニア）

【第7回】Go言語（Golang）入門～HTMLテンプレート利用編～

笹川（エンジニア）

2019.10.23

IT技術

Go言語

第7回～Go言語（Golang）入門～

笹川先生

（株）ライトコードの笹川（ささがわ）です！

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

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

前回の記事はこちら

2019.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から取得データを表示してみよう

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

今日入門編書いたけど、次のGolangの記事どんなのがいいかな

— 笹のり (@sasa_nss_app) September 5, 2019

構造体の用意

まずは、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}