BULB加藤です！みなさん、LINE開発の調子はいかがでしょうか。
このたびReactをLIFFアプリに乗せるというのを試してみたので、一連の流れをメモしておきます。
正直ぜんぜん難しいことはありません。ただ、公式リファレンスでは生のHTML/JSの例しかありませんでした。実際の開発ではReactやVueを用いることが多いと思われるので、パッとReact-LIFFを試したいときの参考にしていただければとおもいます。
LINE Developersからチャネルを作成
まずはLINE Developersのコンソールへログインし、アプリケーションからLINE APIへつながるためのチャネルを作成します。
LINE Developersコンソールはこちら。
コンソールのTOPから該当のプロバイダーを選択し、「新規チャネル作成」でチャネルを追加。
LIFFアプリをつくりたいので、チャネルの種類は「LINEログイン」を選択します。
続いてチャネルの設定画面。チャネル名やチャネルの説明など必須項目を入力。アプリタイプは、今回は「ウェブアプリ」を選択します。
この後LIFFの設定を進めていくことになりますが、一度コンソールから離れてHerokuにReactアプリケーションを用意します。
HerokuでCreate New App
Herokuにログインし、Newボタンから「Create New App」します。
適当なApp nameを設定してメモしておいてください。ここがReactアプリのデプロイ先となります。
Node.jsやHerokuCLIの設定が必要となります。こちらを参考にしてください。
ローカルでReactの環境構築をする
Reactアプリケーションの開発をするために、ローカルマシン上で環境構築をしていきます。
WebアプリケーションであればNext.jsやGatsbyを検討しますが、今回はお試しということもありCreate React App（ふつうのReactを簡単に立ち上げるやり方）で行きます。
チュートリアルに沿って開発環境をセットアップして「npm start」すると、localhost:3000でReactのスターターアプリケーションが立ち上がります。
LIFFの設定
LINEのコンソールに戻ってLIFFの設定をしていきます。
LIFFタブから「追加」
適当なLIFFアプリ名を入力、サイズはわかりやすくするためにFullかTallを選択しておきましょう。エンドポイントURLにはHerokuでつくったアプリケーションのURLを設定してください。（xxxxxxxx.herokuapp.comみたいなやつ）
この時点でLIFF IDが割り振られ、LINE上でLIFFが動作するようになります。
HerokuにReactをデプロイ
こちらを参考に、ターミナル上からReactアプリケーションをデプロイしていきましょう
流れ的にはこんなかんじ。
- Herokuにログイン
- Herokuのリモートをローカルリポジトリに追加
- heroku configでLIFF IDを紐付ける（.envでの管理が推奨）
- git push heroku master
ここまでできればLIFFの公開が完了します。
LIFFアプリを確認
コンソール内の「LIFF URL」にLINEのトークルームからアクセスすると、LIFFが立ち上がります。
このURLはエンドポイントにリダイレクトしてしまうためQR作成などができずスマホへの転送が面倒です。僕はLINEカメラのテキスト認識機能を使って読み込みました。
ひとりグループを作ってURLを貼る
タップするとLIFFアプリが立ち上がりました！通常であればLINEのwebブラウザが開きますが、LIFF設定がなされたURLのためLIFFアプリとして動作します。
今回はサイズを「Tall」にしました。
今回はお試しのためここまでとなりますが、これでReactを使った開発がLIFFでできるようになりました。飲食店の予約やモバイルオーダーなど、複雑な実装がしやすくなります。
ぜひ参考にしてください！
Discussion