こんにちは、ゆきぽんずです。
最近ふと、そういやLINEBOT系のサービスに触ってないなと思い、敢えて全く触ったことのないLIFF(LINE Front-end Framework)を使ってみました。
LINE上で動くwebアプリのこと
LIFFの公式のドキュメントはこちら
それでは早速LIFFで遊んでいきましょう!
環境
PC : Mac (version 10.15.4)
LINE version 10.5.0
LIFF version 2
前提
- スマホにはLINEが入っているものとします(笑)
- heroku環境はあるものとします(まだ環境設定されていない方はこちらを参照してください :こちらのサイトがめっちゃシンプルに紹介してくれています mac heroku環境設定)
設定手順
LIFFの導入の仕方はLIFFのドキュメントにほとんど書いてありますが、足りない部分も多いので補足しながら解説していきます。
herokuの設定
herokuが入っている状態であれば
ターミナルでheroku loginと入力 => Enterキー
ブラウザが勝手に立ち上がるのでログインをクリック
その後、以下のLIFFの参考URLに飛ぶ
https://github.com/line/line-liff-v2-starter/blob/master/README.md
Deploy to Herokuと書いてある紫色のボタンをクリック
(今回は導入編ということであえてgitのソースコードを落とすなどはしていません)
以下の画面が出現するので、App nameを設定
App name : liff-test-ver1
Deploy appをクリック
Deploy appボタンの下に以下の画像のようなものが生成されると、Deployが完了です。
その下のmanage appをクリックして、作成したappの管理画面にいきます。
=> 管理画面からSettingをクリック
=> 下にスクロールすると、取得したdomainを確認できます。
こちらを後で使うのでコピペしてメモ帳にでも貼り付けておいてください。
*herokuの設定はLIFFを作成してから少しいじるので、ブラウザは閉じないでそのままでお願いします。
それではLIFFの作成に移っていきます。
プロバイダ・チャネルの作成
まずプロバイダとチャネルを作成します。
上のリンクをクリックしていただくと以下の画面が表示されます。
こちらのLog in with LINE accountをクリック
=> ご自身のLINEのログイン画面が表示されるのでログイン
=> ProvidersのCreateをクリック
=> Provider name(LIFF)を入力し、Createをクリック
Providerは作成されたので、次にチャネルを作成します(optionalは入力していません)。
Channel type : LINE Login
Provider : LIFF
Channel name : LIFF Test
Channel description : LIFFのテストです。
App typesの両方にチェックを入れる
App types : ☑️ Web app
☑️ Mobile app
Email address : 自分のEmailを入力
利用規約のチェック
☑️ I have read and agree to the LINE Developers Agreement
Createをクリック
LIFFを追加
Addをクリック
Basic information
LIFF app name : LIFF Test
Size : Tall
Endpoint URL : 先ほど取得したherokuのdomainURLを記載
(私の場合 :https://liff-test-ver1.herokuapp.com/)
Scopes : ☑️ profile ☑️ openid
View all(クリック) : ☑️ chat_message.write
Bot link feature(なんでもいいですがNormalで) : On(Normal)
Options(どっちでもいいですが今回はオフのままで) : Scan QR
Createをクリック
ラストスパートです。
herokuの環境設定
最後にMY_LIFF_IDをherokuの環境変数に追加します。
https://liff.line.me/{ここがMY_LIFF_ID}
herokuでは以下のように設定
heroku => 先ほど作ったapp => setting
下にスクロールするとConfig Varsがあります
以上で設定は終了です。お疲れ様です。
ではではラインで動かしてみましょうか。
LIFF URL : https://liff.line.me/1654090583-vZX3wJa1
をLINEに張り付けてリンクをクリックしてみてください。
URLをクリックすると以下の画面が出るので、そのまま許可するをクリック
するとLIFFを動かせるようになります。
こちらからメッセージを送ったり、自分のLINEのプロフィールを確認できます!
QRコードはセキュリティ上の問題で今は使えなくしているようです。
また外部ブラウザとLINEブラウザでは仕様が違うようなので気をつけてください。
今日は一からLIFFを使ってwebアプリケーションを作ってみました。
手間は多いですが、ここから色々と改良(改造)していけそうです。
少しでも多くの人の参考になれば幸いです。
それではまたいつか!