bot

LINEのLIFFアプリを登録する手順と簡単な実例

はじめに

LIFF(LINE Front-end Framework)はLINEのトークルーム上でWebアプリを呼び出してLINEと連携して動作するアプリのプラットフォームです。ここでは、このLIFFアプリを登録して実際に動作させるまでの手順をメモします。

作成するLIFFアプリの動作イメージ

実用的な意味はありませんが、以下のGIF画像のようにLINEのトークルーム上でLIFFアプリを起動するとGoogle検索のトップページが開きます。もちろんブラウザと同じように検索もできます。

上記を見てわかるとおり、このLIFFアプリは単純にGoogle検索のトップページを呼び出しています。このようにLIFFは任意のWebアプリをLINEのトークルーム上で呼び出してLINEと連携させることができます。上記の例は実用的ではありませんが、ここで作成するLIFFアプリの作成手順が分かれば、後は実際に自身でよりLIFFアプリならではのWebアプリを呼び出してLINEと連携させるなど、色々な応用に繋がると思います。

前提

LINE Developersにてプロバイダとチャンネルの作成、Messaging APIの設定が完了しているものとします。もしまだの方は以下の記事にまとめていますので必要な場合は見てみてください。

LINEボット作成に必要な準備まとめ(アクセストークン取得、Webhook設定)

LINEボットを作成するには、はじめにLINE Developersという開発者向けページで準備をする必要があります。ここではLINEボットを作成するために最低限必要となるアクセストークンの取得と、Webhookの設定までをメモします。

LIFFアプリの登録方法

まずはじめに、LIFFアプリを登録します。登録には以下の2つの方法があります。

  • LINE Developersの管理画面からの登録方法
  • コマンドでの登録方法

以降でそれぞれについて説明します。なお、LIFFアプリの登録には、LINEから呼び出したいWebアプリケーションのURLが必要になります。ここでは、テストとしてGoogle検索のトップページのURLを使用します。

LINE Developersの管理画面からの登録方法

LINE Developersにログインし、作成済のボットの設定画面に移ります。設定画面に、以下のように「LIFF」というタブがあるのでこれをクリックし。「LIFF」タブに「追加」というボタンがあるのでこれをクリックします。

「追加」ボタンをクリックすると、以下のようにLIFFアプリの設定画面が表示されます。ここで重要となるのは、「エンドポイントのURL」です。この「エンドポイントのURL」に、LINEから呼び出したいWebアプリケーションのURLを指定します。ここではテストとしてGoogle検索のトップページのURLを指定しています。

各項目の内容はそれぞれ以下になります。

  • 名前:LIFFアプリの名前です。自由に決めてOK
  • サイズ:LIFFアプリのサイズです。3サイズあります。それぞれどのぐらいの大きさになるかはこちらの公式ドキュメントに掲載されています。
  • エンドポイント URL:呼び出したいWebアプリケーションのURLです。

上記項目を入力後、「保存する」をクリックすると、以下のようにLIFFアプリが登録されます。編集したい場合は、「編集」ボタンをクリックします。なお、line://app/xxxxxx-xxxxxxのようなURLが「LIFF URL」でLIFFアプリのURLです。xxxxxx-xxxxxx部分は、登録したLIFFアプリ固有のIDです。この「LIFF URL」をLINEのトークルーム上で共有し、それをタップすればLIFFアプリが起動します。

LIFFアプリの起動方法

LIFF URLを開くことがLIFFアプリを起動することになります。よって、動作確認として、例えばLIFF URLを自分1人のグループ上でメッセージとして投稿し、タップしてみるとLIFFアプリが起動します。冒頭に載せたGIF画像と同じ動作をすると思います。
実際には、ボットにLIFF URLにリンクされたボタンなどを投稿させて、それをユーザにタップしてもらってLIFFアプリを起動するような流れが多いと思います。

コマンドでの登録方法

もしMacやLinuxを使用していてターミナル、端末がすぐに使用できる場合は、curlコマンドを使用してLIFFアプリを登録することもできます。
まず、新しくLIFFアプリを登録するには、以下のようにcurlコマンドを実行します。

curl -X POST https://api.line.me/liff/v1/apps \
-H "Authorization: Bearer YOUR_TOKEN" \
-H "Content-Type: application/json" \
-d '{
  "view":{
    "type":"YOUR_SIZE",
    "url":"YOUR_ENDPOINT_URL"
  }
}'

上記で各自置き換えが必要な点が以下3つです。

  • YOUR_TOKEN:LINE Developers上で作成したプロバイダのチャネルのアクセストークン
  • YOUR_SIZE:LIFFアプリのサイズです。compacttallfullのいずれかを指定できます。詳しくはこちらの公式ドキュメントに掲載されています。
  • YOUR_ENDPOINT_URL:エンドポイントのURLです。

例えば、前述したLINE Developersの管理画面での登録方法で説明したLIFFアプリと全く同じ場合は、以下のようになります。

curl -X POST https://api.line.me/liff/v1/apps \
-H "Authorization: Bearer YOUR_TOKEN" \
-H "Content-Type: application/json" \
-d '{
  "view":{
    "type":"compact",
    "url":"https://www.google.co.jp"
  }
}'

上記のcurlコマンドが成功すると、以下のように追加したLIFFアプリのIDがレスポンスとして返ってきます。このLIFF IDを使って、同じようにコマンドでLIFFアプリの削除、更新も可能です。

{"liffId":"xxxxxxx-xxxxxxxx"}

LIFFアプリを削除する

curlコマンドでDELETEを使用します。YOUR_LIFF_IDを自身のLIFFID、YOUR_TOKENを自身のアクセストークンに置き換えてください。

curl -X DELETE https://api.line.me/liff/v1/apps/YOUR_LIFF_ID \
-H "Authorization: Bearer YOUR_TOKEN"

LIFFアプリを更新する

curlコマンドでPUTを使用します。YOUR_LIFF_IDを自身のLIFFID、YOUR_TOKENを自身のアクセストークンに置き換えてください。あとは更新したいサイズ、エンドポイントを新たに指定します。

curl -X PUT https://api.line.me/liff/v1/apps/YOUR_LIFF_ID/view \
-H "Authorization: Bearer YOUR_TOKEN" \
-H "Content-Type: application/json" \
-d '{
  "type":"YOUR_NEW_SIZE",
   "url":"YOUR_NEW_ENDPOINT_URL"
}'

成功してもレスポンスは何も返ってきませんが、即座にLIFFアプリに反映されます。ただし、Androidではキャッシュされるため、Android自体を再起動するか、LINEのキャッシュを削除しなければLIFFアプリは更新されません。 

基本的に、以下の公式ドキュメントに全ての情報が掲載されているので、ぜひ見てみてください。

まとめ

LIFFアプリはLINEのトークルームから呼びだすことができ、わざわざブラウザを開いたりする必要がないため非常に便利です。また色々と応用したアプリを作成してメモします。

SPONSORED LINK

コメントを残す

メールアドレスが公開されることはありません。