##はじめに
先日、LINE内ブラウザで表示及び操作ができる、イベント企画アプリの共同開発に参加しました。
そこで今回はLIFFを用いてLINE内ブラウザでアプリを表示する手順を解説していきます。
以下のTweetに添付された動画が完成形です。
#私立探求学園 の #技求祭 にて #技求祭青組 はLineのLIFFを使って暇人マッチングアプリを作成しました:クラッカー:
— Nanaka/国際恋愛系エンジニア (@nanakaglucklich) September 5, 2020
メンバーみんながLineDevelopersのプラットフォームを使うのが初めてで要件定義にかなり四苦八苦しましたが、なんとか形になったものができて本当によかったです:うふふ:
みなさん、お疲れさまでした pic.twitter.com/AMbG3s4v8M
##前提条件
- アプリ自体は開発済みで、どこかしらにデプロイされている（今回はHerokuにデプロイしました）
- LINEアカウントとなるMessaging APIチャネルは作成されている
- LIFFアプリに遷移するためのリッチメニューは作成されている
##1.LINEログインチャネルの作成
LINE Developersのページを開きLINEログインします。
ログインできたらLIFFアプリを登録するためのLINEログインチャネルを作成します。
基本的にはMessaging APIと同じ要領で進めていきます。アプリタイプはウェブアプリを選択しましょう。
##2.LIFFアプリを登録
LINEログインチャネルにLIFFアプリを登録する手順です。
チャネル一覧よりLINEログインチャネルを選択し、LIFF→LIFFアプリを追加へと進みます。
今回はイベント新規投稿と、イベント一覧の二つのページのどちらかを選択して遷移できるような仕様にしたいのでLIFFアプリを二つ設定する必要があります。
設定項目がやや複雑なので順に解説していきます。
①アプリ名
まずはアプリ名ですが、こちらは実際に表示されるものではないので後から見てわかりやすいものであればなんでも構わないと思います。
②サイズはアプリを開くLINEブラウザのサイズのことです。Fullは画面いっぱい、Tallは8割くらい、Compactは半分くらいのブラウザサイズとなります。
③エンドポイントURL、こちらが最重要です。アプリのURLを入力するのですが、httpsであることが求められます。
また今回はHerokuにデプロイして取得した新規投稿ページ、一覧ページそれぞれのURLを入力します。
新規投稿ページURL入力例
一覧ページURL入力例
＊画像のURLは実在しないURLなので「有効なHTTPS URLを入力してください」と表示されています。
④スコープはLIFFアプリ内で認める動作を選択します。選択したからといって必ずその動作をアプリ内で実装しなければいけないということではないのですが、今回は今後の拡張も考えて全て選択しておきます。
⑤ボットリンク機能はLINEログインしたときにLINE公式アカウントを友だち追加するか否かの設定です。normalを選択するとLINEログインの同意画面にLINE公式アカウントを友だち追加するオプションが表示され、aggressiveを選択するとLIFFアプリの利用条件の同意画面の後に表示されます。
⑥ScanQRオプションをONにすると、LIFFアプリでQRコードリーダーを利用することができます。今回はオフにしておきます。
また、全ての項目が後から編集可能です。
同じ要領でもう一つLIFFアプリを追加しましょう。二つ目のLIFFアプリのエンドポイントURLはアプリの新規投稿ページと一覧ページのうち、一つ目で設定しなかった方を設定します。
これでLINEログインチャネルに新規投稿ページ、一覧ページの二つのLIFFアプリのURLが作成されました。
それぞれのURLをリッチメニューのリンクに入力すれば完成です。
また、MessagingAPIチャネル、リッチメニューの作成、リッチメニューへのURL入力は以下の記事を参考にしてください。