LIFFアプリを開発メンバーの端末から動作確認できる環境を作る

2021.03.12

私の所属する CX 事業本部 A チームではLIFF上で動作する LIFF アプリや LINE ミニアプリの開発案件を主に担っています。フロントエンドの開発は React などの一般的な Web 技術を利用しますが、サードパーティ製のライブラリの利用を検討する際や UI の表示確認の際に、LIFF ブラウザ 上でも正常に動作するか、また様々な OS やデバイス上でも正常に動作するか等の検証を行うため、検証端末からでも閲覧できるようにする必要があります。

本記事では開発メンバーに LIFF URL を配布しそれぞれの端末で動作確認をしてもらう環境の作成手順をまとめました。

LIFF で動作確認するまでの流れ

開発途中のアプリケーションを検証端末から試したい時は以下の流れで作成しています。

  • サンプルアプリケーションを作成
  • Amplify Console で Web アプリをデプロイ&ホスティング
  • LINE Developers コンソールにログインしプロバイダーを作成
  • 作成したプロバイダー下に LINE Login チャネルを作成
  • LINE Login 下に LIFF Application を作成
  • 開発メンバーを LIFF チャネルに招待する
  • モバイル端末から LIFF URL にアクセスして動作確認

サンプルアプリケーションを作成

今回はこちらで作成したサンプルアプリをデプロイしてみました

流れだけを確認したい方はcreate-react-appコマンドで 雛形アプリを作成して、LIFF アプリとしてデプロイしモバイル端末で閲覧できるところまでをゴールとする、でも良いと思います。

npx create-react-app sample_app --typescript

Amplify Console で Web アプリをデプロイ&ホスティング

LINE Developers Console上でページURLを指定するため、Webアプリケーションをインターネット上にデプロイする必要があります。今回はAmplify Consoleを利用します。

先ほど作成した React アプリを Amplify Console でデプロイ&ホスティングします。まずは先ほど作成した React のソースコードを Github レポジトリにプッシュしましょう。

Github にコードをコミットした後、AWS マネジメントコンソール > AWS Amplifyの画面で New app > Host web appを選択します。

次の画面で Github とブランチを選択して、そのほかの設定はそのままで進みSave and Deployを押下してください。

しばらくすると Amplify Console のダッシュボードからデプロイが完了したことが確認できるので、左下の URL から 画面を確認します。この URL を後ほど LINE Developer Console 上で LIFF の URL に指定します。

LINE Developers コンソールにログインしプロバイダーを作成

LINE Developers コンソールにログインして Providers の横の Create ボタンからプロバイダーを作成します。

作成したプロバイダー下に LINE Login チャネルを作成

プロバイダを作成後、チャネルを作成することができます。LINE Loginを以下の設定で作成します。

設定
Channel type LINE Login
Channel name 任意のチャネル名
Channel description チャネルの説明文
App types Web App

LINE Login 下に LIFF Application を作成

作成した LINE Login の LIFF タブを開き、Add ボタンから LIFF アプリを追加します。

以下の設定で LIFF アプリを追加してください。

設定 概要
LIFF app name SampleReactApp LIFF アプリの名前
Size Full LIFF アプリを開いた際の画面縦幅領域
Endpoint URL Amplify Console で Web アプリをデプロイした際に払い出された URL
Scopes Profile
Bot Link feature Off
Scan QR OFF liff.scanCode()機能の ON・OFF
Module Mode OFF

参考:LIFF アプリをチャネルに追加する

開発メンバーを LIFF チャネルに招待する

非公開の LINE Channel から LIFF アプリへアクセスするためにはRolesに 開発メンバーの LINE アカウントに紐付くメールアドレスを登録する必要があります。

RoleにはAdmin、Tester、Memberの三種類があり、Admin>Tester>Memberの順に権限が弱くなります。LIFFアプリにアクセスするためにはTesterまたはAdminのRoleを付与する必要があります。

登録メールアドレス宛に確認メールが飛ぶので承認するとここに Role が追加されます。

モバイル端末から LIFF URL にアクセスして動作確認

端末から LIFF URL にアクセスしてみます。LIFF ブラウザ上で先ほどデプロイしたサンプルアプリが閲覧できれば検証環境作成は完了です。LIFF の URL は LINE Developers Console の LIFF タブから確認できます。

認証画面が立ち上がるので、”許可する”を押下します。

無事に閲覧できました。

サンプルアプリで利用したreact-beautiful-dndも問題なく動作することがわかりました。