LINEmessagingAPI
MessagingAPI
LIFF

LIFFとは何者なのか。秒でできる(かも)チュートリアル。


LIFFとは何者なのか

こんなやつ!!MessagingAPIと自作のWEBアプリを合体できるやつ!!

普通にブラウザを開くんじゃなくて、LINEアプリ上でWEB画面を表示できます。

IMG_7115A141A0D2-1.jpg


LIFFを使うメリット

LIFFを使うメリットはいくつかあって、個人的に大きいなと思うものを紹介します。

メリット

1
UXの向上
LINEアプリを移動することがないので、ユーザー的に幸せ♬

2
パーソナライズ
LINEのプロフィール情報をWEB上で取得できる。例えば、トプ画やプロフィール名をLIFF上で表示したりも簡単にできる

他にもメリットはありますが。。。

まあ、つまりはLIFFを使うと今までのMessagingAPIよりも良いサービスを提供できるってことですね。


LIFFを使うデメリット

デメリットっていうか、LIFFを使ってみるのを以下の理由で渋ってました。


  1. 学習コスト(SDKとかを使うのでわざわざ勉強するの面倒)

  2. サーバーを設置するの面倒

「1」は使ってみるとわかるのですが、結構簡単でした。SDKの部分は本当にシンプルでそこまで学習コストはかかりません。

「2」はぶっちゃけLIFFじゃなくてもWEBアプリなら必要なのでしょうがないですね。でもSDK自体がサーバー側で動かすものではなくてクライアント側で動かすもの。つまりAWS S3にHTMLファイルをポンっと置くだけで作れちゃいます。

つまり、これといったデメリットはありません!!試してみましょう!!


開発の流れ

それでは、超ざっくりLIFFを使う手順を紹介します。


  1. MessagingAPIでチャンネルを作成

  2. LIFFで使うWEBサイト(HTMLファイル)を設置します。

  3. 作成したチャンネルからLIFFを作成し、「2」で作成したWEBサイトと紐付けします。

  4. 終わり

ちなみに、「2」で作成したサイトではLINE社公式のLIFF用のSDKを使用します。


SDKの使い方とできること

簡単にSDKの使い方とできることを書いていきましょう。

使い方は簡単で、インストールとかは必要ないです。HTMLファイルに以下の1行を追加するだけで使うことができます。sdnってやつですね。

<script src="https://d.line-scdn.net/liff/1.0/sdk.js"></script>

そして、SDKでできること。

できること
メソッド

LINEのプロフィール取得をできる。プロフィール名とかトプ画とか
liff.getProfile()

他のURLを開く。LINE内でも外部ブラウザでも可能
liff.openWindow()

ユーザーの代わりにメッセをBotに送る
liff.sendMessages()

LIFFページを閉じる
liff.closeWindow()

一番使えそうなのは最初のプロフィール取得かな〜なんて思ってます。もっと知りたい方は公式のドキュメントをどうぞ


LIFFを体験してみる

公式のドキュメントだとHerokuを使ってるんだけど、わざわざサーバたてるものなあって渋ってたら閃きました。

AWSのS3でいけるんじゃん!!!

てことで、S3を使ってLIFFを開発していきたいと思います。

とはいえ、別にS3じゃなくてもファイルを置けてURLでアクセスできるとこならなんでも大丈夫です。

MessagingAPIをある程度使ったことがある方向けです。なので、チャンネル作成のやり方などの説明はしません。


コードをインストールしてS3に

ほぼ公式のをパクりましたが、私オリジナルで作成しました。cloneして使います。

$ git clone https://github.com/imajoriri/imajo-liff-starter.git

使うのは以下の3つのファイルです

index.html

index.js
style.css

これを同じフォルダのS3にあげて、公開します。

ちゃんと3つ公開してあげてね!!


MessagingAPIでLIFFを追加

適当にMessagingAPIのチャンネルを作成し、メニューのLIFFからLIFFアプリを作成します。

LINE_Developers.png

すると設定画面がでてくるので入力します。


  • 名前: LIFFテスト

  • サイズ: Tall

  • エンドポイント: S3にあげたindex.htmlのURLを入力

  • BLE feature: OFF

LINE_Developers.png

するとLIFF URLというものが作成されるのでメモします。

このURLをLINEアプリ上でクリックするだけでLIFFを開くことができます。

LINE_Developers.png


試してみる

では、Bot上で試してみましょう。

今、メモしたURLをスマホのLINEアプリで入力してクリックします。

IMG_7C3557A84AB7-1.jpg

すると、自分のトプ画と名前が表示されたLIFFが出現すると思います。

さらに他にボタンが3つあり、それぞれ以下の機能があります。試してみてください。


  • ブラウザを開く

  • LIFFを閉じる

  • BOTにメッセージを送る

IMG_9A1EBA58C141-1.jpg


参考

https://developers.line.biz/ja/docs/liff/getting-started/

https://developers.line.biz/ja/reference/liff/