【LINE/LIFF入門】LIFFでLINE公式アカウント（旧LINE＠）上に予約フォームを作成する（Go＆Heroku使用）

7533 ワード
Heroku Line JavaScript Go LIFF JavaScript テキストリンク

Go&Herokuを使わなくてもGitHub Pagesで簡単に実現可能です。
【LINE/LIFF入門】LIFFでLINE公式アカウント（旧LINE＠）上に予約フォームを作成する（GitHub Pages使用）

はじめに

こんな感じの作ります

使用技術

  • LIFF (LINE Front-end Framework)
  • Go
    • Goの勉強したかったのでGoにしましたが、バックエンドは何でもいいです
  • JavaScript, jQuery
  • Heroku
  • Git

ソースコードはこちら(GitHub)

LINE公式アカウント作成

こちらの公式HPを参考に作成します。

リッチメニュー設定

リッチメニュー用の画像を作成する

チャット画面下に表示されるバナーのことをリッチメニューというようです。
まずはリッチメニューに設定する画像をCanovaを使って作成します。
Canovaは素材が豊富で無料プランでもいい感じの画像が作れるので便利です。

リッチメニューを設定する

LINE Offical Account Manager上からいい感じに設定します。（適当）
PCからのみ設定することができ、スマホからは設定できないようです。
リンクは一旦適当なリンクを設定しておきます。
LIFFアプリを作成後にそのURLを設定します。


LIFFアプリ作成

チャネル作成

こちらの公式HPを参考にして、LINE Developersでチャネルを作成します。
LIFFを使うために基本的な情報を登録します。

コーディング

ディレクトリ構成

任意のディレクトリに作業用ディレクトリを以下の構成で作成します。
Go以外で試す場合は、index.htmlとstatic/があれば動作すると思います。

reservation/
|- static/
   |- liff.js
   |- index.js
|- vendor/
   |- vendor.json　// Heroku上でGoを動かすために必要
|- index.html
|- main.go

ソースコードは冒頭のGitHubを参照ください。

ハマりポイント

PORTの指定はport := os.Getenv("PORT")のように環境変数から取得します。
Herokuで実行する際はHeroku指定のPORT番号でListenする必要があるためです。

main.go
func main() {
    port := os.Getenv("PORT")
    fmt.Printf("Starting server at Port %s", port)
    http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("static/"))))
    http.HandleFunc("/", handler)
    http.ListenAndServe(fmt.Sprintf(":%s", port), nil)
}

Herokuにデプロイ

Herokuに関する説明は省略します。
HerokuでNew Appを作成した後に以下のコマンドを実行します。
HerokuのDeploy画面に表示されているコマンドのままです。

$ heroku login
$ cd reservation/
$ git init
$ heroku git:remote -a (自分のApp名)
$ git add .
$ git commit -am "make it better"
$ git push heroku master

デプロイ後にHerokuのURLにアクセスしてフォームが表示されれば成功です。

LIFFアプリをチャネルに追加

こちらの公式HPを参考にして、LIFFアプリがLINEやブラウザ上で動作できるようにするために、LIFFアプリをチャネルに追加します。
エンドポイントURLにはHerokuのURLを設定します。

動作確認

LINE Offical Account ManagerのリッチメニューのリンクをLIFFの設定画面に表示されているLIFF URLをに変更します。

LINE公式アカウントを自分のLINEの友だちに追加して試してみます。
冒頭のデモ画像のようになれば成功です。

おまけ

ローカルのサーバで動作確認をするにはngrokがとても便利です。
参考リンクを貼っておきます。

参考