Go言語（Golang）入門~第7回目~
笹川先生
（株）ライトコードの笹川（ささがわ）です！
今回は、前回に引き続き、TwitterAPI を利用していきます。
そして、HTMLテンプレートでエゴサの結果を表示してみたいと思います！
前回の記事はこちら
2019.10.17Go言語（Golang）入門~第6回目~ 笹川先生 （株）ライトコードの笹川（ささがわ）です！ 先日、Twitte...
まずは基本的な使い方を覚えよう
【echoドキュメント】
https://echo.labstack.com/guide/templates
上記の echoのドキュメント を参考に、簡単なHTMLテンプレートを作成してみます。
hello.html の作成
public/views/ に hello.html を作成します。
| {{define "hello"}}Hello, {{.}}!{{end}} |
main.go
次に、main.go にテンプレートの設定を記載します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | package main import ( "html/template" "io" "net/http" "github.com/labstack/echo" ) type Template struct { templates *template.Template } func (t *Template) Render(w io.Writer, name string, data interface{}, c echo.Context) error { return t.templates.ExecuteTemplate(w, name, data) } func Hello(c echo.Context) error { return c.Render(http.StatusOK, "hello", "World") } func main() { e := echo.New() t := &Template{ templates: template.Must(template.ParseGlob("public/views/*.html")), } e.Renderer = t e.GET("/hello", Hello) e.Logger.Fatal(e.Start(":8000")) } |
確認
こちらで実行してみます。
問題なく成功しました。
受け取った値を出力
このまま、GETパラメーターで受け取った値を出力してみます！
Helloメソッドだけ修正し、 value というパラメーターに付いてる値を出力するようにします。
| func Hello(c echo.Context) error { value := c.QueryParam("value") return c.Render(http.StatusOK, "hello", value) } |
確認
http://localhost:8000/hello?value=Noriyuki
でアクセスしてみます。
無事に挨拶してくれました！
これで受け口となる処理は、問題なさそうです。
では、下記のような感じで、検索したツイートを表示してみたいと思います。
構造体の用意
まずは、API のレスポンスをパースするための構造体を用意します。
| type TweetTempete struct { User string `json:"user"` Text string `json:"text"` ScreenName string `json:"screenName"` Id string `json:"id"` Date string `json:"date"` TweetId string `json:"tweetId"` } |
テンプレート用htmlファイルを用意
次に、テンプレート用のhtmlファイルを、 public/views の直下に用意します。
| <html> <body> <blockquote class="twitter-tweet"> <p lang="ja" dir="ltr">{{.Text}}</p>— {{.User}} (@{{.ScreenName}}) <a href='https://twitter.com/{{.Id}}/status/{{.TweetId}}'>{{.Date}}</a> </blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </body> </html> |
TwitterAPIのリクエストからパース、テンプレートまでの当て込み
次に、TwitterAPI のリクエストからパース、テンプレートまでの当て込みを実装します。
TwitterAPI への接続は、前回の記事 か 笹川のリポジトリ を参考にしてみてください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | func Tweet(c echo.Context) error { value := c.QueryParam("value") api := twitter.ConnectTwitterApi() //検索 searchResult, _ := api.GetSearch(`"` + value + `"`, nil) tweet := new(TweetTempete) for _, data := range searchResult.Statuses { tweet.Text = data.FullText tweet.User = data.User.Name tweet.Id = data.User.IdStr tweet.ScreenName = data.User.ScreenName tweet.Date = data.CreatedAt tweet.TweetId = data.IdStr break } return c.Render(http.StatusOK, "tweet.html", tweet) } |
最後に、echo でルーティングしたら完了です。
完成
完成すると、下記のようになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | package main import ( "go_example/twitter" "html/template" "net/http" "github.com/labstack/echo" "io" ) func main() { e := echo.New() t := &Template{ templates: template.Must(template.ParseGlob("public/views/*.html")), } e.Renderer = t e.GET("/tweet", tweet) e.Logger.Fatal(e.Start(":8000")) } func (t *Template) Render(w io.Writer, name string, data interface{}, c echo.Context) error { return t.templates.ExecuteTemplate(w, name, data) } func tweet(c echo.Context) error { value := c.QueryParam("value") api := twitter.ConnectTwitterApi() //検索 searchResult, _ := api.GetSearch(`"` + value + `"`, nil) tweet := new(TweetTempete) for _, data := range searchResult.Statuses { tweet.Text = data.FullText tweet.User = data.User.Name tweet.Id = data.User.IdStr tweet.ScreenName = data.User.ScreenName tweet.Date = data.CreatedAt tweet.TweetId = data.IdStr break } return c.Render(http.StatusOK, "tweet.html", tweet) } type Template struct { templates *template.Template } // TweetTempete はツイートの情報 type TweetTempete struct { User string `json:"user"` Text string `json:"text"` ScreenName string `json:"screenName"` Id string `json:"id"` Date string `json:"date"` TweetId string `json:"tweetId"` } |
確認
http://localhost:8000/tweet?value=Go Firestore
でアクセスしてみると…
はい、成功です！
私のツイートがでてきました（笑)
この調子で、検索したツイートが全部表示されるようにしてみましょう。
配列をテンプレートに当て込んでみよう
tweets.htmlの作成
まずは、 public/view に tweets.html を作成します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <html> <style type="text/css"> .thum>* { float: left; margin-left: 10 } </style> <body> <div class="thum"> {{range .}} <blockquote class="twitter-tweet"> <p lang="ja" dir="ltr">{{.Text}}</p>— {{.User}} (@{{.ScreenName}}) <a href='https://twitter.com/{{.Id}}/status/{{.TweetId}}'>{{.Date}}</a> </blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> {{end}} </div> </body> </html> |
テンプレートに値を渡す
次に、先ほどと同じように、TwitterAPI から検索してデータを入れ込み、テンプレートに値を渡します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | func tweets(c echo.Context) error { value := c.QueryParam("value") api := twitter.ConnectTwitterApi() //検索 searchResult, _ := api.GetSearch(`"` + value + `"`, nil) tweets := make([]*TweetTempete, 0) for _, data := range searchResult.Statuses { tweet := new(TweetTempete) tweet.Text = data.FullText tweet.User = data.User.Name tweet.Id = data.User.IdStr tweet.ScreenName = data.User.ScreenName tweet.Date = data.CreatedAt tweet.TweetId = data.IdStr tweets = append(tweets, tweet) } return c.Render(http.StatusOK, "tweets.html", tweets) } |
最後に echo でルーティングしたら完了です。
完成
完成すると、下記のようになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | package main import ( "go_example/twitter" "html/template" "net/http" "github.com/labstack/echo" "io" ) func main() { e := echo.New() t := &Template{ templates: template.Must(template.ParseGlob("public/views/*.html")), } e.Renderer = t e.GET("/tweets", tweets) e.Logger.Fatal(e.Start(":8000")) } func (t *Template) Render(w io.Writer, name string, data interface{}, c echo.Context) error { return t.templates.ExecuteTemplate(w, name, data) } func tweets(c echo.Context) error { value := c.QueryParam("value") api := twitter.ConnectTwitterApi() //検索 searchResult, _ := api.GetSearch(`"` + value + `"`, nil) tweets := make([]*TweetTempete, 0) for _, data := range searchResult.Statuses { tweet := new(TweetTempete) tweet.Text = data.FullText tweet.User = data.User.Name tweet.Id = data.User.IdStr tweet.ScreenName = data.User.ScreenName tweet.Date = data.CreatedAt tweet.TweetId = data.IdStr tweets = append(tweets, tweet) } return c.Render(http.StatusOK, "tweets.html", tweets) } type Template struct { templates *template.Template } // TweetTempete はツイートの情報 type TweetTempete struct { User string `json:"user"` Text string `json:"text"` ScreenName string `json:"screenName"` Id string `json:"id"` Date string `json:"date"` TweetId string `json:"tweetId"` } |
確認
http://localhost:8000/tweets?value=ライトコード
でアクセスしてみると…
それっぽいのがでました！
成功です！
なんと、全部、笹川の記事（笑）
さいごに
今回は、「HTMLテンプレート」と「TwitterAPI」の組み合わせで、前回の記事よりもリッチなTwitterクライアントを作ってみました。
ちょっとしたWebアプリケーションならば、Go言語（Golang）でサクッとできちゃいますね！
今回、作成したgoファイルはこちらのリポジトリにて管理しております。
関連記事
2019.09.13Go言語（Golang）を習得したい！ 笹川先生 （株）ライトコードでモバイルアプリケーション開発をしている笹川（ささが...
2019.09.17Go言語（Golang）を習得したい！～第2回～ （株）ライトコードの笹川（ささがわ）です。 前回に引き続き、今回もGo言語（Gol...
2019.09.26Go言語（Golang）入門～第3回目～ 笹川先生 （株）ライトコードの笹川（ささがわ）です。 今回でGo言語（G...
2019.10.02Go言語（Golang）入門～第4回目～ 笹川先生 （株）ライトコードの笹川（ささがわ）です 今回も、Go言語（G...
2019.10.09Go言語（Golang）入門~第5回目~ 笹川先生 （株）ライトコードの笹川（ささがわ）です！ 前回は、RESR ...
2019.10.17Go言語（Golang）入門~第6回目~ 笹川先生 （株）ライトコードの笹川（ささがわ）です！ 先日、Twitte...
一緒に働いてくれる仲間を募集しております！
ライトコードでは、仲間を募集しております！
当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。
また、ライトコードは現在、急成長中！だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております！
なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。
書いた人はこんな人
- 笹川 （社員）
- 新潟生まれ新潟育ち本業はモバイルアプリエンジニア。
日々、猫(犬)エンジニアとして活躍中！
IT技術2019.10.23【第7回】Go言語（Golang）入門～HTMLテンプレート利用編～
IT技術2019.10.17【第6回】Go言語（Golang）入門～Twitter API利用編～
IT技術2019.10.09【第5回】Go言語（Golang）入門～REST API実装編～
IT技術2019.10.02【第4回】Go言語（Golang）入門～REST API環境構築編～
