LIFFアプリを開発メンバーの端末から動作確認できる環境を作る
私の所属する CX 事業本部 A チームではLIFF上で動作する LIFF アプリや LINE ミニアプリの開発案件を主に担っています。フロントエンドの開発は React などの一般的な Web 技術を利用しますが、サードパーティ製のライブラリの利用を検討する際や UI の表示確認の際に、LIFF ブラウザ 上でも正常に動作するか、また様々な OS やデバイス上でも正常に動作するか等の検証を行うため、検証端末からでも閲覧できるようにする必要があります。
本記事では開発メンバーに LIFF URL を配布しそれぞれの端末で動作確認をしてもらう環境の作成手順をまとめました。
English version of this article is also available here.
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 チャネルに招待する
非公開の 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も問題なく動作することがわかりました。
