3.1 LIFFアプリ用新規チャネルを作成する
LINE DeveloperページへアクセスしてLINEログインしてください。
プロバイダー設定してない方は「新規プロバイダー作成」をクリックします。
プロバイダー名は基本後から変更できないので本番運用する場合は注意してください。
最初の認証画面などで表示される値になります。
入力できたら「作成」ボタンをクリックします。
「LINEログイン」をクリックします。
次に設定内容を入力していきます。
- チャネルアイコン(任意)
- アプリのアイコン
- こだわりのない人はとりあえず、こちらの画像を設定してください。
- チャネル名
- アプリの名前
- チャネル説明
- 説明
- アプリタイプ
- ウェブアプリ
- メールアドレス
- 担当者のメールアドレス
開発者契約を読んで、チェックして「作成」を押します。
これで、新しいLINEチャネルが作成できました🎉
この時に発行されるチャネルIDを.envのLINE_LOGIN_CHANNEL_IDに設定してください。
LINE_LOGIN_CHANNEL_ID=66666666666
3.2 LIFFアプリの作成
次にLIFFタブをクリックして、［追加］ボタンをクリックします。
LIFFアプリ名とLIFFサイズを設定します。
アプリ名は基本的にはチャネル名と同名でいいと思います。
LIFFサイズは今回はTallを設定します。
TallにするとLIFFアプリがLINEアプリの8割ぐらいを覆うように表示されるようになります。
更に、項目を埋めていきます。
- エンドポイントURL
- 前章で作成したGit PodのURL( https://***********.gitpod.io )を設定
- Scope
- profileをチェック
- ボットリンク機能
- On (Aggressive)をチェック
最後に[作成]を押してください。
これでLIFFアプリができました🎉
発行されたLIFF IDを.envのLIFF_IDに設定してください。
LIFF_ID=1651657361-Dm14EOyq
また、LIFF URLはこの後使うのでメモっておいてください。
3.3 公式アカウント用新規チャネルを作成する
次にLIFFアプリの入り口にあたるLINE公式アカウントを作っていきます。
まず、LINE Developerのページから新規チャネル作成をクリックします。
今度は、Messaging API をクリックします。
項目を入力してきます。
- チャネルアイコン(任意)
- アプリのアイコン
- こだわりのない人はとりあえず、こちらの画像を設定してください。
- チャネル名
- 公式アカウントの名前
- チャネル説明
* 説明 - 大業種
- 今回はスタンプラリーなので、「旅行・エンタメ・レジャー」を選びます。
- 小業種
- 「環境協会・旅行ガイド」を選びます
- メールアドレス
- 担当者のメールアドレス
規約を読んで、チェックして「作成」を押します。
これで、公式アカウントとMessaging APIのチャネルが作成できました🎉
作成したチャネルのチャネルシークレットとチャネルアクセストークンと確認します。
チャネルシークレットはチャネル基本設定の下の方に記載があります。
チャネルアクセストークンはMessaging API 基本設定の下の方に記載があります。
コピーしたチャネルシークレットとチャネルアクセストークンを.envのLINE_CHANNEL_SECRETとLINE_CHANNEL_TOKENに設定してください。
LINE_CHANNEL_SECRET=2672495b25ca267afb99999c3a146fdf
LINE_CHANNEL_TOKEN=7f+/aLy+HbyTnU+xaDZDnJpOljK8zbJOv1z38AVmIBWbW6zplszXc2JDgPTgosysg/IS4OC+quv+RMhG4WUXuBQOCQdB3ohKp6OcG3+xWiCK5GnPEMZKoSOJSZHqoTnTA5vNvSoc/LPxRRwNAZXxBBu404t89/1O/w1cDnyilFU=
3.4 リッチメニューの作成
次に、公式アカウントのトップページに表示するリッチメニューを作っていきます。
設定は別のページで行うので、LINE Official Account Managerのリンクをクリックします。
[ホーム] > [トークルーム管理] > [リッチメニュー]の順に選択していきます。
[作成]を押します。
また、項目を入力していきます。
- タイトル
- 管理画面で管理するためだけのものなので適当で
- 表示期間
- 2022/01/01 - 2024/01/01
［テンプレートを選択］ボタンをクリックします。
左下のテンプレートを選択して、［選択］ボタンをクリックします。
次に、背景画像をアップロードします。
[背景画像をアップロード]をクリックします。
次のフォームに背景画像をアップロードしてください。
解像度は指定されているので気をつけてください。
今回はGitに入れてある下記の画像をアップロードしてください。
次にアクションの設定をします。
- タイプ
- リンク
- URL
- 3.2で生成されたLIFFのURLを指定する 例）https://liff.line.me/xxxxxxxxxx-xxxxxxxx
- アクションラベル
- 七福神巡り
これで、リッチメニュー が作成できました🎉
3.5 友だちになる
LINE Official Account Managerで
[ホーム] > [友だち追加ガイド] > [QRコードを作成] の順で選択します。
表示されているQRコードから公式アカウント友達になってください。
リッチメニューをタップしてください。
下図のように表示されれば、成功です🎉
これで、2章で作成したWebアプリをLIFFアプリとして表示させることに成功しました。
ただ、まだ認証などの処理は入っていません。
次章ではいよいよ認証処理を追加していきます。