前回、LIFFの設定方法を説明しました。
今回はLIFFのスターターアプリを試してみます。
LIFFスターターアプリとは
LIFFスターターアプリとはLINE Developersのドキュメントにある通り「LIFFスターターアプリは、LIFFアプリの開発方法を理解するために開発された、LIFFアプリのサンプル」とのことです。
LINE Developersのドキュメントに 構築の仕方が紹介されていますが、私の作業の記録を残しておきます。
なお前回説明した設定が一通り完了している前提で進めます。前回の説明ではエンドポイントURLにとりあえずやっつけでGoogleのURLを貼り付けましたが、今回はスターターアプリを設定します。
Githubへ
LIFFスターターアプリのソースコードはGithubに格納されています。ソースコードをGithubから特定の環境にデプロイすることでスターターアプリを構築できます。
GithubのReadmeにHerokuと簡単に連携する方法が書かれているので私もそれに従ってやってみます。
上にもリンクを張ったLIFFスターターアプリのドキュメントからGithubのREADME.mdに行きます。
スターターアプリの構築の仕方が英語でなんやかんや書かれていますが、まずは”Deploy to Heroku”の紫のアイコンをクリックしましょう。
Herokuにデプロイ
上のGithubの画面で “Deploy to Heroku”を押すとHerokuの画面が開きます。もしHerokuのアカウントを持っていない場合、おそらくHerokuのアカウント作成の画面が表示されると思うのでここで新規作成します。
ちなみに私はこの時初めてHerokuのことを知りました。Herokuとはざっくりいうとアプリケーションサーバの環境を提供してくれるサービスだそうです。無料版と有料版とがありますが、今回のLIFFスターターアプリの構築に関しては無料版で十分です。なお読み方はそのままローマ字読みで「へろく」と読むのだそうです。ひょっとして「ヒーローク」と読んだりするのかなと思いましたが違いました。名前の由来が気になったり気にならなかったり。
話を戻しますが、 以下の画面で”App name”に任意の値を入力、”Choose a region”はデフォルトのままで”Deploy app”をクリックします。
これでGithubにあったLIFFスターターアプリのソースコードをHerokuの環境にデプロイできました。
さらに”Manage App”を押して続きの設定をします。
さらにHerokuに設定が必要です。
“Settings”タブを開き”Reveal Config Vars”をクリックします。
左側のキーに当たる項目に”MY_LIFF_ID”を入力、右の値の部分にLINE Developersの管理画面から取得したLIFF IDを入力しADDボタンを押します。
画面右上の”Open app”を押し、アプリが開くことを確認したらHerokuへのデプロイと設定は完了です。
アプリの画面のURLは後でLINE Developers管理画面での設定に使用するのでコピペできるようにしておきましょう。
LINE Developers管理画面での設定
LINE Developers管理画面を開き前回の投稿で設定したアプリの画面を開きLIFFのタブに移動します。対象のアプリをクリックし詳細画面を開きます。その画面にあるエンドポイントURLに上のスターターアプリのURLを入力し更新ボタンを押します。
LIFF URLをコピーしブラウザに張り付けて遷移するとアプリを起動できます。”Log in”ボタンを押すとLINEのログインができたり”Get Profile”ボタンを押すと自分のLINEのプロフィールを取得できたりします。
以上で完成です。
LINE公式アカウント内でどのように使えるかは後日この記事に追記します。