Chapter 03

WebアプリのLIFFアプリ化

arahabica
arahabica
2022.01.17に更新

3.1 LIFFアプリ用新規チャネルを作成する

LINE DeveloperページへアクセスしてLINEログインしてください。

https://developers.line.biz/ja/

プロバイダー設定してない方は「新規プロバイダー作成」をクリックします。
LINE Provider

プロバイダー名は基本後から変更できないので本番運用する場合は注意してください。
最初の認証画面などで表示される値になります。
入力できたら「作成」ボタンをクリックします。

new LINE Channel

「LINEログイン」をクリックします。

LINEログイン

次に設定内容を入力していきます。

  • チャネルアイコン(任意)
    • アプリのアイコン
    • こだわりのない人はとりあえず、こちらの画像を設定してください。
  • チャネル名
    • アプリの名前
  • チャネル説明
    • 説明
  • アプリタイプ
    • ウェブアプリ
  • メールアドレス
    • 担当者のメールアドレス

LINE Setting 001

開発者契約を読んで、チェックして「作成」を押します。
create LINE Login

これで、新しいLINEチャネルが作成できました🎉

new LINE Login Channel

この時に発行されるチャネルIDを.envLINE_LOGIN_CHANNEL_IDに設定してください。

.env
LINE_LOGIN_CHANNEL_ID=66666666666

3.2 LIFFアプリの作成

次にLIFFタブをクリックして、[追加]ボタンをクリックします。

LIFF Tab

LIFFアプリ名とLIFFサイズを設定します。
アプリ名は基本的にはチャネル名と同名でいいと思います。
LIFFサイズは今回はTallを設定します。
TallにするとLIFFアプリがLINEアプリの8割ぐらいを覆うように表示されるようになります。

LIFF Setting001

更に、項目を埋めていきます。

  • エンドポイントURL
    • 前章で作成したGit PodのURL( https://***********.gitpod.io )を設定
  • Scope
    • profileをチェック
  • ボットリンク機能
    • On (Aggressive)をチェック

最後に[作成]を押してください。
LIFF Setting 002

これでLIFFアプリができました🎉

new LIFF Application

発行されたLIFF IDを.envLIFF_IDに設定してください。

.env
LIFF_ID=1651657361-Dm14EOyq

また、LIFF URLはこの後使うのでメモっておいてください。

3.3 公式アカウント用新規チャネルを作成する

次にLIFFアプリの入り口にあたるLINE公式アカウントを作っていきます。

まず、LINE Developerのページから新規チャネル作成をクリックします。

new LINE Channel 002

今度は、Messaging API をクリックします。
new LINE Messaging API

項目を入力してきます。

  • チャネルアイコン(任意)
    • アプリのアイコン
    • こだわりのない人はとりあえず、こちらの画像を設定してください。
  • チャネル名
    • 公式アカウントの名前
  • チャネル説明
       * 説明
  • 大業種
    • 今回はスタンプラリーなので、「旅行・エンタメ・レジャー」を選びます。
  • 小業種
    • 「環境協会・旅行ガイド」を選びます
  • メールアドレス
    • 担当者のメールアドレス

create LINE Messaging API Channel
規約を読んで、チェックして「作成」を押します。

Messaging API Channel

これで、公式アカウントとMessaging APIのチャネルが作成できました🎉

作成したチャネルのチャネルシークレットとチャネルアクセストークンと確認します。

チャネルシークレットはチャネル基本設定の下の方に記載があります。
Channel Secret

チャネルアクセストークンはMessaging API 基本設定の下の方に記載があります。
Channel Access Token001

Channel Access Token002

コピーしたチャネルシークレットとチャネルアクセストークンを.envLINE_CHANNEL_SECRETLINE_CHANNEL_TOKENに設定してください。

.env
LINE_CHANNEL_SECRET=2672495b25ca267afb99999c3a146fdf
LINE_CHANNEL_TOKEN=7f+/aLy+HbyTnU+xaDZDnJpOljK8zbJOv1z38AVmIBWbW6zplszXc2JDgPTgosysg/IS4OC+quv+RMhG4WUXuBQOCQdB3ohKp6OcG3+xWiCK5GnPEMZKoSOJSZHqoTnTA5vNvSoc/LPxRRwNAZXxBBu404t89/1O/w1cDnyilFU=

3.4 リッチメニューの作成

次に、公式アカウントのトップページに表示するリッチメニューを作っていきます。

設定は別のページで行うので、LINE Official Account Managerのリンクをクリックします。

RichMenu Link

[ホーム] > [トークルーム管理] > [リッチメニュー]の順に選択していきます。
[作成]を押します。

RichMenu Setting 001

また、項目を入力していきます。

  • タイトル
    • 管理画面で管理するためだけのものなので適当で
  • 表示期間
    • 2022/01/01 - 2024/01/01

RichMenu Setting 002

[テンプレートを選択]ボタンをクリックします。
choose template

左下のテンプレートを選択して、[選択]ボタンをクリックします。
choose template 02

次に、背景画像をアップロードします。
[背景画像をアップロード]をクリックします。
setting richmenu image

次のフォームに背景画像をアップロードしてください。
解像度は指定されているので気をつけてください。

upload richmenu image

今回はGitに入れてある下記の画像をアップロードしてください。

https://github.com/Arahabica/liff-rails-handson-2022/blob/main/resources/richmenu.png

次にアクションの設定をします。

RichMenu Action Setting

これで、リッチメニュー が作成できました🎉

created RichMenu

3.5 友だちになる

LINE Official Account Manager
[ホーム] > [友だち追加ガイド] > [QRコードを作成] の順で選択します。
表示されているQRコードから公式アカウント友達になってください。

LINE QR001

LINE QR002

リッチメニューをタップしてください。

LINE Official Account 001

下図のように表示されれば、成功です🎉

LINE Official Account 002

これで、2章で作成したWebアプリをLIFFアプリとして表示させることに成功しました。

ただ、まだ認証などの処理は入っていません。

次章ではいよいよ認証処理を追加していきます。