LINEのLIFFを使ってみて分かったLIFFの可能性
さて1ヶ月ぶりの更新です。
この1ヶ月なにをやってたかと言うと...
オフィスを引っ越ししていました!
五反田の雑居ビルから、代官山のオフィスへ引っ越しました。
以前よりだいぶキレイなオフィスです。
個人的にはトイレがウォッシュレットになったのが涙モノに嬉しいです(T T)
また社名もダックリングズから、弊社のサービス名である"maricuru"に変更しました。
LIFFとは
さてtechと関係ないお話はそこそこにしておいて...
最近はLINEのLIFFという仕組みを使って、予約システムを作ったりしていました。
新オフィスにはイベントスペースがあるのですが、そこで開催するイベントをLINE@上で予約するシステムになります。
LIFFとはLINE Front-end Framework の略で、要はLINE内でWebViewを動かすことができる仕組みになります。
LIFFの特徴
普通にURLでウェブページに飛ばせばよいのでは?と思っちゃいますが、以下のような特徴があります。
- LINEアプリから出ずにシームレスに操作できる
- Webページ内でのアクションをLINEのトーク画面にフィードバックしたりできる
- ユーザーのLINEアカウント情報をウェブページで利用できる
事例としては、アンケート、予約などのフォーム入力する系が多いですが、中にはシューティングゲームなんかもありました。
LIFFアプリを作ってみる
ざっくり以下のような流れになります。
- アカウントの作成
- LIFFで表示したいウェブページを作る(https必須)
- そのページをLIFFに登録する
ではLIFFアプリを作る流れを、追ってみましょう。
アカウントの作成
まずはアカウントの作成ですが、このアカウントのルールがややこしく躓きました。
弊社で運用していたLINE@アカウントにLIFF機能を追加したのですが、LIFFを使うにはMessaging APIを有効にする必要があります。
ここで注意しないといけないのは、Massaging APIを有効にすると「1:1トーク」や「LINE@アプリ」が使えくなります。
LINE@のアカウントのユースケースは主に2パターンあるようです。
Messaging API | 1:1トーク | bot利用 | 主なユースケース | LIFF利用 |
---|---|---|---|---|
無効 | ◯ | ☓ | 小店舗などが顧客とのコミュニケーションに | ☓ |
有効 | ☓ | ◯ | 大企業が顧客対応に。(クロネコヤマトとか) | ◯ |
LIFFを使いたい場合、後者のMessaging API有効のパターンに設定する必要があります。
LIFFで表示するWebページの作成
何らかのWebページを公開しましょう。
httpsが必須になります。
herokuなどを利用してもOKです。herokuならデフォルトでhttpsですね。
早速herokuでサンプルのページを作ってみました。
LIFF機能の細かい活用方法は後述します。
LIFFアプリの登録
続いてLIFFアプリを登録します。
まだ管理画面などは用意されていないようで、CLIからコマンドを叩いて登録しないといけません。
登録には先ほど作成したLINEアカウントの「アクセストークン」が必要になります。
LINE Developersコンソールのチャネル基本設定に記載されています。
先ほど作成したwebページのURLがhttps://hidden-ravine-56842.herokuapp.com/
だとします。
以下のコマンドを叩くとLIFFアプリが登録されます。
curl -XPOST \ -H "Authorization: Bearer 【アクセストークン】" \ -H "Content-Type: application/json" \ -d '{ "view": { "type": "tall", "url": "https://hidden-ravine-56842.herokuapp.com/" } }' \ https://api.line.me/liff/v1/apps
項目 | 内容 |
---|---|
type | compact、tall、full でLIFF画面のサイズを指定します |
url | 表示したいWebページのURLです |
実行すると、以下のようなレスポンスが返ってきます。
{"liffId":"160004001-Yt7Ef35HF"}
この場合
line://app/160004001-Yt7Ef35HF
がこのLIFFアプリのURLになります。
このURLをトーク画面内で叩くことでLIFFアプリを開くことが出来ます。
早速そのURLをLINEトーク内で叩いてみましょう。
先ほどのWebページがLIFFで表示できました!
LIFF SDKを使って色々する
ここまでだと単純にWebページをLINE内に表示したにすぎません。
LIFF SDKを利用することで LINEと連携した動作が色々可能になります。
LIFF SDKの初期化
headerなどでSDKを読み込んでおきましょう。
<script src="https://d.line-scdn.net/liff/1.0/sdk.js"></script>
liff.init() で初期化します。LIFF SDKの各種メソッドを実行する前に、まずこれを実行する必要があります。
liff.init();
トークにメッセージを送る
こんな感じでトーク画面にメッセージを送ることが出来ます。
注意点としては、このメッセージはユーザー側の方のメッセージになります。
liff.sendMessages([ { type: 'text', text: `予約が完了しました \n日時:${date} ` }])
プロフィールを取得する
こんな感じでLINEの表示名を取得できます。
liff.getProfile().then(function (profile) { window.alert(profile.displayName) });
他にも、ユーザーIDや画像URLも取得できます。
LIFFウィンドウを閉じる
liff.closeWindwo()
APIの詳細はこちらにあります。
maricuruでのLIFFの活用
社内イベントスペースで開催するイベントの予約フォームをLIFFで表示しています。
LINEアプリ内で完結して操作できるのはよいUXかと思いました。
LIFFの可能性
使ってみて感じたのは、まず
WebViewなので実装が簡単 、そして自由度が非常に高い、ということ。
今回は単純な予約フォームをrailsで組みましたが、ReactなりVueなりのフレームワークをゴリゴリ使ってよりインタラクティブなコンテンツをLINE内に組み込んだりも可能です。
また特にLIFF独自で覚えることも少ないので、過去のWeb開発のアセットがそのまま生きると思います。
逆に難点としてはデバッグがやりにくいことでしょうか、、
httpsの有効なサーバーにアップロードしないとLINE上での確認ができないので開発の効率はイマイチですね。