【第7回】Go言語（Golang）入門～HTMLテンプレート利用編～
2019.10.23
Go言語（Golang）入門~第7回目~
笹川先生前回の記事はこちら
Go言語（Golang）入門~第6回目~ 笹川先生 （株）ライトコードの笹川（ささがわ）です！ 先日、Twitte...
まずは基本的な使い方を覚えよう
【echoドキュメント】
https://echo.labstack.com/guide/templates
上記の echoのドキュメント を参考に、簡単なHTMLテンプレートを作成してみます。
hello.html の作成
public/views/ に hello.html を作成します。
1 | {{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 というパラメーターに付いてる値を出力するようにします。
1 2 3 4 | func Hello(c echo.Context) error { value := c.QueryParam("value") return c.Render(http.StatusOK, "hello", value) } |
確認
http://localhost:8000/hello?value=Noriyuki
でアクセスしてみます。
無事に挨拶してくれました！
これで受け口となる処理は、問題なさそうです。
TwitterAPIから取得データを表示してみよう
では、下記のような感じで、検索したツイートを表示してみたいと思います。
今日入門編書いたけど、次のGolangの記事どんなのがいいかな
— 笹のり (@sasa_nss_app) September 5, 2019
構造体の用意
まずは、API のレスポンスをパースするための構造体を用意します。
1 2 3 4 5 6 7 8 | 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 の直下に用意します。
1 2 3 4 5 6 7 8 9 10 11 12 | <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ファイルはこちらのリポジトリにて管理しております。
関連記事
Go言語（Golang）を習得したい！ 笹川先生 （株）ライトコードでモバイルアプリケーション開発をしている笹川（ささが...
Go言語（Golang）を習得したい！～第2回～
（株）ライトコードの笹川（ささがわ）です。 前回に引き続き、今回もGo言語（Gol...
Go言語（Golang）入門～第3回目～ 笹川先生 （株）ライトコードの笹川（ささがわ）です。 今回でGo言語（G...
Go言語（Golang）入門～第4回目～ 笹川先生 （株）ライトコードの笹川（ささがわ）です 今回も、Go言語（G...
Go言語（Golang）入門~第5回目~ 笹川先生 （株）ライトコードの笹川（ささがわ）です！ 前回は、RESR ...
Go言語（Golang）入門~第6回目~ 笹川先生 （株）ライトコードの笹川（ささがわ）です！ 先日、Twitte...
ライトコードよりお知らせ
にゃんこ師匠システム開発のご相談やご依頼はこちら
ミツオカライトコードの採用募集はこちら
にゃんこ師匠社長と一杯飲みながらお話してみたい方はこちら
ミツオカフリーランスエンジニア様の募集はこちら
にゃんこ師匠その他、お問い合わせはこちら
ミツオカお気軽にお問い合わせください！せっかくなので、別の記事もぜひ読んでいって下さいね！
一緒に働いてくれる仲間を募集しております！
ライトコードでは、仲間を募集しております！
当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。
また、ライトコードは現在、急成長中！だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております！
なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。
ライトコードでは一緒に働いていただける方を募集しております！
採用情報はこちら書いた人はこんな人
- 新潟生まれ新潟育ち本業はモバイルアプリエンジニア。
日々、猫(犬)エンジニアとして活躍中！
IT技術2019.12.18【最終回】Go言語（Golang）入門～Twitterアプリ作成完了編～- IT技術2019.12.12【第14回】Go言語（Golang）入門～Twitterアプリ作成編～
- IT技術2019.12.04【第13回】Go言語（Golang）入門～MySQL利用編～
- IT技術2019.11.27【第12回】Go言語（Golang）入門～MySQL接続編～
関連記事
採用情報
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界はお前の手の中に・・・ /
モバイルエンジニア
\ サービスの守り神！ /
インフラエンジニア
\ センスで挑め！ /
UI/UXデザイナー
\ 世界を震撼させろ！ /
WEB開発ディレクター
\ 妄想野郎カモン！ /
ゲームプランナー
\ ゲーム好き集合ー！ /
ゲームエンジニア
