Engineerの研鑽

メインはプログラミング系ブログ(本の要約とかもします)

質問はCONTACTやコメントでお願い致します。

【LIFF(LINE Front-end Framework)】導入手順

こんにちは、ゆきぽんずです。

 

最近ふと、そういやLINEBOT系のサービスに触ってないなと思い、敢えて全く触ったことのないLIFF(LINE Front-end Framework)を使ってみました。

 

LIFF(LINE Front-end Framework)とは

LINE上で動くwebアプリのこと

LIFFの公式のドキュメントはこちら

LIFFの公式のドキュメント

それでは早速LIFFで遊んでいきましょう!

環境

PC : Mac (version 10.15.4)

LINE version 10.5.0

LIFF version 2

前提

  • スマホにはLINEが入っているものとします(笑)
  • heroku環境はあるものとします(まだ環境設定されていない方はこちらを参照してください :こちらのサイトがめっちゃシンプルに紹介してくれています mac heroku環境設定

設定手順

LIFFの導入の仕方は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の作成に移っていきます。

プロバイダ・チャネルの作成

まずプロバイダとチャネルを作成します。

 LINE Developersコンソール

上のリンクをクリックしていただくと以下の画面が表示されます。

LINEログイン

こちらのLog in with LINE accountをクリック

=> ご自身のLINEのログイン画面が表示されるのでログイン

=> ProvidersのCreateをクリック

=> Provider name(LIFF)を入力し、Createをクリック

 

provider設計

 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 Provider

 

LIFFを追加

Add a LIFF app

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をクリック

Add a LIFF app1

ラストスパートです。

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アプリケーションを作ってみました。

 

手間は多いですが、ここから色々と改良(改造)していけそうです。

 

少しでも多くの人の参考になれば幸いです。

 

それではまたいつか!