【第7回】Go言語(Golang)入門~HTMLテンプレート利用編~
IT技術
第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 にテンプレートの設定を記載します。
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>— {{.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>— {{.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}
確認
http://localhost:8000/tweets?value=ライトコード
でアクセスしてみると…
それっぽいのがでました!
成功です!
なんと、全部、笹川の記事(笑)
第8回へつづく!
今回は、「HTMLテンプレート」と「TwitterAPI」の組み合わせで、前回の記事よりもリッチなTwitterクライアントを作ってみました。
ちょっとしたWebアプリケーションならば、Go言語(Golang)でサクッとできちゃいますね!
今回、作成したgoファイルはこちらのリポジトリにて管理しております。
次回の記事はこちら
2019.10.30【第8回】Go言語(Golang)入門~環境見直し編~第8回~Go言語(Golang)入門~笹川先生(株)ライトコードの笹川(ささがわ)です!前回は、TwitterAPI ...
オススメのGo入門本
こちらの記事もオススメ!
2020.08.08Go言語 特集知識編人気急上昇中のGo言語(Golang)って何だ?実装編Go言語(Golang)入門...
2020.07.17ライトコード的「やってみた!」シリーズ「やってみた!」を集めました!(株)ライトコードが今まで作ってきた「やってみた!」記事を集めてみました!※作成日が新し...
第1回の記事はこちら
2019.09.13【第1回】Go言語(Golang)入門~環境構築編~第1回~Go言語(Golang)を習得したい!~笹川先生(株)ライトコードでモバイルアプリケーション開発をしている笹川...
ライトコードでは、エンジニアを積極採用中!
ライトコードでは、エンジニアを積極採用しています!社長と一杯しながらお話しする機会もご用意しております。そのほかカジュアル面談等もございますので、くわしくは採用情報をご確認ください。
採用情報へ
笹川(エンジニア)
新潟生まれ新潟育ち本業はモバイルアプリエンジニア。 日々、猫(犬)エンジニアとして活躍中!
おすすめ記事
移転したライトコード大阪オフィスを調査せよ!
広告メディア事業部
2024.04.03
日常
【GCP】BIG QUERYを触り程度に理解してみる
かねまさ(エンジニア)
2024.04.02
IT技術
【Android】Github ActionsでFirebase Test Labの実行を分散する
笹川(エンジニア)
2024.04.02
IT技術
【Next.js】App Router で使用できるキャッシュまとめ
モーリー(エンジニア)
2024.03.29
IT技術
GitHubActionsのランナーに触れてみた
こやまん(エンジニア)
2024.03.28
IT技術