【第7回】Go言語（Golang）入門～HTMLテンプレート利用編～
2020.08.21
第7回～Go言語（Golang）入門～
笹川先生前回の記事はこちら
こちらの記事もオススメ！
まずは基本的な使い方を覚えよう
【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ファイルはこちらのリポジトリにて管理しております。
Go言語でのシステム開発依頼・お見積もりはこちらまでお願いします。
また、Go言語を扱えるエンジニアを積極採用中です！詳しくはこちらをご覧ください。
次回の記事はこちら
オススメのGo入門本
こちらの記事もオススメ！
第1回の記事はこちら
ライトコードよりお知らせ
にゃんこ師匠
ミツオカにゃんこ師匠ミツオカにゃんこ師匠ミツオカ一緒に働いてくれる仲間を募集しております！
ライトコードでは、仲間を募集しております！
当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。
また、ライトコードは現在、急成長中！だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております！
なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。
ライトコードでは一緒に働いていただける方を募集しております！
採用情報はこちら書いた人はこんな人
- 新潟生まれ新潟育ち本業はモバイルアプリエンジニア。
日々、猫(犬)エンジニアとして活躍中！
IT技術2020.03.24Androidのライブラリを作って公開してみた- IT技術2019.12.18【最終回】Go言語（Golang）入門～Twitterアプリ作成完了編～
- IT技術2019.12.12【第14回】Go言語（Golang）入門～Twitterアプリ作成編～
- IT技術2019.12.04【第13回】Go言語（Golang）入門～MySQL利用編～
関連記事
採用情報
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界はお前の手の中に・・・ /
モバイルエンジニア
\ サービスの守り神！ /
インフラエンジニア
\ センスで挑め！ /
UI/UXデザイナー
\ 世界を震撼させろ！ /
WEB開発ディレクター
\ 妄想野郎カモン！ /
ゲームプランナー
\ ゲーム好き集合ー！ /
ゲームエンジニア
