LIFFとは何者なのか
こんなやつ！！MessagingAPIと自作のWEBアプリを合体できるやつ！！
普通にブラウザを開くんじゃなくて、LINEアプリ上でWEB画面を表示できます。
LIFFを使うメリット
LIFFを使うメリットはいくつかあって、個人的に大きいなと思うものを紹介します。
| メリット | ||
|---|---|---|
| 1 | UXの向上 | LINEアプリを移動することがないので、ユーザー的に幸せ♬ |
| 2 | パーソナライズ | LINEのプロフィール情報をWEB上で取得できる。例えば、トプ画やプロフィール名をLIFF上で表示したりも簡単にできる |
他にもメリットはありますが。。。
まあ、つまりはLIFFを使うと今までのMessagingAPIよりも良いサービスを提供できるってことですね。
LIFFを使うデメリット
デメリットっていうか、LIFFを使ってみるのを以下の理由で渋ってました。
- 学習コスト（SDKとかを使うのでわざわざ勉強するの面倒）
- サーバーを設置するの面倒
「1」は使ってみるとわかるのですが、結構簡単でした。SDKの部分は本当にシンプルでそこまで学習コストはかかりません。
「2」はぶっちゃけLIFFじゃなくてもWEBアプリなら必要なのでしょうがないですね。でもSDK自体がサーバー側で動かすものではなくてクライアント側で動かすもの。つまりAWS S3にHTMLファイルをポンっと置くだけで作れちゃいます。
つまり、これといったデメリットはありません！！試してみましょう!!
開発の流れ
それでは、超ざっくりLIFFを使う手順を紹介します。
- MessagingAPIでチャンネルを作成
- LIFFで使うWEBサイト(HTMLファイル）を設置します。
- 作成したチャンネルからLIFFを作成し、「2」で作成したWEBサイトと紐付けします。
- 終わり
ちなみに、「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アプリを作成します。
すると設定画面がでてくるので入力します。
- 名前: LIFFテスト
- サイズ: Tall
- エンドポイント: S3にあげた
index.htmlのURLを入力 - BLE feature: OFF
するとLIFF URLというものが作成されるのでメモします。
このURLをLINEアプリ上でクリックするだけでLIFFを開くことができます。
試してみる
では、Bot上で試してみましょう。
今、メモしたURLをスマホのLINEアプリで入力してクリックします。
すると、自分のトプ画と名前が表示されたLIFFが出現すると思います。
さらに他にボタンが3つあり、それぞれ以下の機能があります。試してみてください。
- ブラウザを開く
- LIFFを閉じる
- BOTにメッセージを送る
参考
https://developers.line.biz/ja/docs/liff/getting-started/
https://developers.line.biz/ja/reference/liff/