はじめに
前回は「24 日目に LINE ミニアプリが完成する初心者 ── Day4. LIFF スターターアプリのデプロイ」と題して、LIFF スターターアプリを Netlify でデプロイしました。
Day5は、デプロイした LIFF スターターアプリを実際に LINE ミニアプリ化して動作確認を行っていきたいます。
今のところブラウザ上でしか LIFF スターターアプリを見ていないので、今回の初めてスマホ上で内容を見ることになると思います。
LINE ミニアプリ化するとは
今回タイトルが"スターターアプリを LINE ミニアプリ化する"としていますが、「LIFF アプリはまだ LINE ミニアプリじゃないの？」と思う人もいると思います。
現在デプロイまで完了した LIFF スターターアプリを外部ブラウザや LINE 内ブラウザで開けばページとして確認することは可能です。
ただ、まだ LINE ミニアプリとしては開くことはできないようになっています。
LINE ミニアプリとして開けるようにするためには Day2 でアカウント作成をした、LINE Developers に LIFF アプリを設定する必要があります。
以下から追加を行っていきましょう。
LIFF アプリの追加
以下の URL から LINE Developers のコンソール画面を開いていきましょう。
最近閲覧したチャネルということで、Day2 で作ったチャネルが表示されていると思いますので、クリックして中に入っていきましょう。
ダブで表示が切り替えられるようになっているので、LIFF というタブを選択していきます。
現在は「登録されている LIFF アプリはありません」と表示されるので、「追加」を押して登録を行っていきます。
LIFF アプリの情報を入力
ここで追加する LIFF アプリの内容を入力します。
入力する内容は以下の通りです。
| 項目 | 説明 | 筆者の設定 |
|---|---|---|
| LIFF アプリ名 | LINE ミニアプリの名前 | Mahalo Living |
| サイズ | Full/Tall/Compact から選択 | Full |
| エンドポイント URL | 前回デプロイした LIFF アプリの URL | https://mahaloliving.netlify.app/ |
| Scope | メソッド利用のために必要なスコープ | ☑︎profile ☑︎chat_message.write ☑︎openid |
| 友達追加オプション | 友達追加オプションの設定 | On (aggressive) |
| ScanQR（オプション） | QR コードを読み込む機能を利用するか | OFF |
| モジュールモード（オプション） | アクションボタンを非表示にするか | OFF |
サイズはそれぞれ画像の通り表示されます。
全ての入力が完了したら画面下の追加をクリックします。
追加が完了すると、LIFF IDとLIFF URLというものが表示されました。 これでLIFFアプリの追加は完了です！
LIFF ID の設定
LIFF アプリの追加が完了したら、発行された LIFF ID を Netlify に環境変数として設定していきます。
Netlify への環境変数の設定は CLI コマンドで実行していきます。
先ほど発行された LIFF ID をコピーして、line-liff-v2-starter ディレクトリ配下で以下のコマンドを実行しましょう。
$ netlify env:set LIFF_ID "Your LIFF ID"
Set environment variable LIFF_ID=xxxxxxxxxx-xxxxxxxxxx in the all context
環境変数が設定できたかどうかは Netlify のサイトから確認できます。
トップ画面から今回デプロイしたサイトをクリック。
Site configuration の中の Environment variables で確認できました。
再デプロイ
LIFF ID の環境変数設定が完了したら再度デプロイを行ってみましょう。
line-liff-v2-starter ディレクトリ配下で以下のコマンドを実行します。
$ netlify deploy --build --prod
これで LIFF アプリの LINE ミニアプリ化は完了です。
動作確認
LINE ミニアプリ化が完了したので、実際の LINE 画面で動作確認を行っていきましょう。
LIFF アプリを追加した際に LIFF ID と一緒に発行されていた LIFF URL を任意のトークルームに送信しましょう。
URL をクリックすると、認証の画面が表示されました。
「許可する」をクリックしてみます。
画面が表示されました！
分かっていたもののこうやって LINE で動くと感動ですね。
現段階では開発者以外の閲覧はできません。
別のアカウントで見たい場合は開発者としてチャネルに招待する必要があります。
まとめ
ここまでで、LIFF スターターアプリの LINE ミニアプリ化が完了しました。
次回は、今回機能開発の第一歩として資料請求フォームの作成を行っていきたいと思います。
残りは 19 日！
気になる方は是非フォローやカレンダー購読をお願いします