💡

【LINE】LIFFアプリをReactで動かす

3 min read

BULB加藤です!みなさん、LINE開発の調子はいかがでしょうか。

このたびReactをLIFFアプリに乗せるというのを試してみたので、一連の流れをメモしておきます。

正直ぜんぜん難しいことはありません。ただ、公式リファレンスでは生のHTML/JSの例しかありませんでした。実際の開発ではReactやVueを用いることが多いと思われるので、パッとReact-LIFFを試したいときの参考にしていただければとおもいます。

LINE Developersからチャネルを作成

まずはLINE Developersのコンソールへログインし、アプリケーションからLINE APIへつながるためのチャネルを作成します。

LINE Developersコンソールはこちら。

https://developers.line.biz/console/

コンソールのTOPから該当のプロバイダーを選択し、「新規チャネル作成」でチャネルを追加。


LIFFアプリをつくりたいので、チャネルの種類は「LINEログイン」を選択します。


続いてチャネルの設定画面。チャネル名やチャネルの説明など必須項目を入力。アプリタイプは、今回は「ウェブアプリ」を選択します。

この後LIFFの設定を進めていくことになりますが、一度コンソールから離れてHerokuにReactアプリケーションを用意します。

HerokuでCreate New App


Herokuにログインし、Newボタンから「Create New App」します。

適当なApp nameを設定してメモしておいてください。ここがReactアプリのデプロイ先となります。

Node.jsやHerokuCLIの設定が必要となります。こちらを参考にしてください。

https://github.com/line/line-liff-v2-starter/blob/master/README.ja.md#アプリをカスタマイズしてターミナル経由でherokuにデプロイする

ローカルでReactの環境構築をする

Reactアプリケーションの開発をするために、ローカルマシン上で環境構築をしていきます。

WebアプリケーションであればNext.jsやGatsbyを検討しますが、今回はお試しということもありCreate React App(ふつうのReactを簡単に立ち上げるやり方)で行きます。

https://ja.reactjs.org/docs/create-a-new-react-app.html#create-react-app

チュートリアルに沿って開発環境をセットアップして「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アプリケーションをデプロイしていきましょう

https://github.com/line/line-liff-v2-starter/blob/master/README.ja.md#アプリをカスタマイズしてターミナル経由でherokuにデプロイする

流れ的にはこんなかんじ。

  • 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

ログインするとコメントできます