【第7回】Go言語（Golang）入門～HTMLテンプレート利用編～
2021.12.20
第7回～Go言語（Golang）入門～
笹川先生前回の記事はこちら
第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 にテンプレートの設定を記載します。
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=ライトコード
でアクセスしてみると…
それっぽいのがでました！
成功です！
なんと、全部、笹川の記事（笑）
第8回へつづく！
今回は、「HTMLテンプレート」と「TwitterAPI」の組み合わせで、前回の記事よりもリッチなTwitterクライアントを作ってみました。
ちょっとしたWebアプリケーションならば、Go言語（Golang）でサクッとできちゃいますね！
今回、作成したgoファイルはこちらのリポジトリにて管理しております。
次回の記事はこちら
第8回～Go言語（Golang）入門～ 笹川先生 （株）ライトコードの笹川（ささがわ）です！ 前回は、Twitte...
オススメのGo入門本
こちらの記事もオススメ！
知識編
人気急上昇中のGo言語（Golang）って何だ？ 実装編
Go言語（Golang）入門
...
「やってみた！」を集めました！
（株）ライトコードが今まで作ってきた「やってみた！」記事を集めてみました！ ※作成日が新しい順に並べ...
第1回の記事はこちら
第1回～Go言語（Golang）を習得したい！～ 笹川先生 （株）ライトコードでモバイルアプリケーション開発をしている笹...
書いた人はこんな人
- 新潟生まれ新潟育ち本業はモバイルアプリエンジニア。
日々、猫(犬)エンジニアとして活躍中！
IT技術2022.04.18【Android】Webでよくみる入力Boxを手作り- IT技術2022.01.19【Android】SeekbarでスイッチなUIを作る
- IT技術2020.03.24Androidのライブラリを作って公開してみた
- IT技術2019.12.18【最終回】Go言語（Golang）入門～Twitterアプリ作成完了編～
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界を変える…！ /
Androidエンジニア
\ みんなが使うアプリを創る /
iOSエンジニア
