maricuru tech blog

Hack The Wedding!! "株式会社maricuru"の技術ブログです

LINEのLIFFを使ってみて分かったLIFFの可能性

ワダ タカヒコ

さて1ヶ月ぶりの更新です。

この1ヶ月なにをやってたかと言うと...

オフィスを引っ越ししていました!

五反田の雑居ビルから、代官山のオフィスへ引っ越しました。

以前よりだいぶキレイなオフィスです。
個人的にはトイレがウォッシュレットになったのが涙モノに嬉しいです(T T)

f:id:wasan:20181020054001j:plain

また社名もダックリングズから、弊社のサービス名である"maricuru"に変更しました。

LIFFとは

さてtechと関係ないお話はそこそこにしておいて...
最近はLINEのLIFFという仕組みを使って、予約システムを作ったりしていました。

linecorp.com

新オフィスにはイベントスペースがあるのですが、そこで開催するイベントをLINE@上で予約するシステムになります。

LIFFとはLINE Front-end Framework の略で、要はLINE内でWebViewを動かすことができる仕組みになります。

LIFFの特徴

普通にURLでウェブページに飛ばせばよいのでは?と思っちゃいますが、以下のような特徴があります。

  • LINEアプリから出ずにシームレスに操作できる
  • Webページ内でのアクションをLINEのトーク画面にフィードバックしたりできる
  • ユーザーのLINEアカウント情報をウェブページで利用できる

事例としては、アンケート、予約などのフォーム入力する系が多いですが、中にはシューティングゲームなんかもありました。

LIFFアプリを作ってみる

ざっくり以下のような流れになります。

  1. アカウントの作成
  2. LIFFで表示したいウェブページを作る(https必須)
  3. そのページを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でサンプルのページを作ってみました。
f:id:wasan:20181020221032p:plain:w300

LIFF機能の細かい活用方法は後述します。

LIFFアプリの登録

続いてLIFFアプリを登録します。
まだ管理画面などは用意されていないようで、CLIからコマンドを叩いて登録しないといけません。

登録には先ほど作成したLINEアカウントの「アクセストークン」が必要になります。
LINE Developersコンソールのチャネル基本設定に記載されています。
f:id:wasan:20181020061256j:plain

先ほど作成した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で表示できました!

f:id:wasan:20181020221902p:plain:w300

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の詳細はこちらにあります。

LIFF APIリファレンス

maricuruでのLIFFの活用

社内イベントスペースで開催するイベントの予約フォームをLIFFで表示しています。
LINEアプリ内で完結して操作できるのはよいUXかと思いました。

f:id:wasan:20181023223601p:plain:w300

LIFFの可能性

使ってみて感じたのは、まず

WebViewなので実装が簡単 、そして自由度が非常に高い、ということ。

今回は単純な予約フォームをrailsで組みましたが、ReactなりVueなりのフレームワークをゴリゴリ使ってよりインタラクティブなコンテンツをLINE内に組み込んだりも可能です。
また特にLIFF独自で覚えることも少ないので、過去のWeb開発のアセットがそのまま生きると思います。

逆に難点としてはデバッグがやりにくいことでしょうか、、
httpsの有効なサーバーにアップロードしないとLINE上での確認ができないので開発の効率はイマイチですね。