• トップ
  • ブログ一覧
  • 【第7回】Go言語(Golang)入門~HTMLテンプレート利用編~
  • 【第7回】Go言語(Golang)入門~HTMLテンプレート利用編~

    笹川(エンジニア)笹川(エンジニア)
    2019.10.23

    IT技術

    第7回~Go言語(Golang)入門~

    秋山笹川先生

    (株)ライトコードの笹川(ささがわ)です!

    今回は、前回に引き続き、TwitterAPI を利用していきます。

    そして、HTMLテンプレートでエゴサの結果を表示してみたいと思います!

    前回の記事はこちら

    featureImg2019.10.17【第6回】Go言語(Golang)入門~Twitter API利用編~第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 にテンプレートの設定を記載します。

    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から取得データを表示してみよう

    では、下記のような感じで、検索したツイートを表示してみたいと思います。

    構造体の用意

    まずは、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>&mdash; {{.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>&mdash; {{.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ファイルはこちらのリポジトリにて管理しております。

    次回の記事はこちら

    featureImg2019.10.30【第8回】Go言語(Golang)入門~環境見直し編~第8回~Go言語(Golang)入門~笹川先生(株)ライトコードの笹川(ささがわ)です!前回は、TwitterAPI ...

    オススメのGo入門本

    Goプログラミング実践入門 標準ライブラリでゼロからWebアプリを作る
    Goプログラミング実践入門 標準ライブラリでゼロからWebアプリを作る

     

    こちらの記事もオススメ!

    featureImg2020.08.08Go言語 特集知識編人気急上昇中のGo言語(Golang)って何だ?実装編Go言語(Golang)入門...

    featureImg2020.07.17ライトコード的「やってみた!」シリーズ「やってみた!」を集めました!(株)ライトコードが今まで作ってきた「やってみた!」記事を集めてみました!※作成日が新し...

    第1回の記事はこちら

    featureImg2019.09.13【第1回】Go言語(Golang)入門~環境構築編~第1回~Go言語(Golang)を習得したい!~笹川先生(株)ライトコードでモバイルアプリケーション開発をしている笹川...

    ライトコードでは、エンジニアを積極採用中!

    ライトコードでは、エンジニアを積極採用しています!社長と一杯しながらお話しする機会もご用意しております。そのほかカジュアル面談等もございますので、くわしくは採用情報をご確認ください。

    採用情報へ

    笹川(エンジニア)
    笹川(エンジニア)
    Show more...

    おすすめ記事

    エンジニア大募集中!

    ライトコードでは、エンジニアを積極採用中です。

    特に、WEBエンジニアとモバイルエンジニアは是非ご応募お待ちしております!

    また、フリーランスエンジニア様も大募集中です。

    background