最近LINE BOOT AWARDの応募が終わりましたね。今回私もアプリを応募させていただきました。その際、せっかくなので6月に登場したLIFFを使ってアプリを作ってみました。

しかしながら2018/10/11 現状、PCの開発環境でLIFFをデバッグする良いツールがありませんので、いろいろとやり方を模索しました。

時間がない中やったのでもしかしたらもっと良い手法があるかもしれません。よい方法知ってる方いらっしゃれば教えていただけると幸いです！

LIFFとは

非常にざっくり言えば、「LINEのメッセージ画面上に表示できるブラウザ」。通常のブラウザとの違いとして、
戻る、進む、アドレス表示などの機能がなく、簡易的な構造になっています。代わりに、 画面切り替えがいらず、LINEのメッセージ画面を見ながらアプリを動かせる、アプリ上のjavascript等で生成したデータをメッセージとして送れるという点が特徴です。

LIFFの使い方は以下公式ページがわかりやすいので、この記事では補足的な情報だけ載せることにします。
Messaging APIの新機能LIFFの使い方を解説します。 : LINE Engineering Blog

開発環境にLIFFからアクセスする

まずは、開発環境で立ち上げたサーバーにアクセスしたいです。とはいえ、http://localhostは登録できません。登録しようとすると{"message":"Non https url"}というエラーがでます。こんなときはngrokを使うとhttpsでサーバーにアクセスできます。

ngrokのインストール

ngrokはこちらを参考にインストールします。
https://ngrok.com/download

macの場合、以下リンクでngrokをダウンロード $ curl https://bin.equinox.io/c/4VmDzA7iaHb/ngrok-stable-darwin-amd64.zip
zipを展開します。 $ unzip /path/to/ngrok.zip
出てきたngrokにpathを通します。 $ mv ngrok ~/path/to/bin

LIFFからサーバーにアクセス

まずローカルでサーバーの立ち上げ。例としてRailsを使います。
$ bin/rails s

railsはデフォルトだとhttp://localhost:3000でアクセスできます。そこで以下コマンド。
$ ngrok http 3000
すると、図のようにngrokがhttpsのURLを作ってくれます。これでLIFFに登録できますね。

LIFFにURLを登録します。

curl -XPOST \
-H "Authorization: Bearer <Access Token>" \
-H "Content-Type: application/json" \
-d '{
    "view": {
        "type": "tall",
        "url": "<先程のURL>"
    }
}' \
https://api.line.me/liff/v1/apps

これでローカルのサーバーを修正して、即LIFFで確認できるようになりました！

javascriptでliffのデバッグ

liff上ではjavascriptで機能作成をしました。liffではsendmessage()でliffアプリ上でメッセージ送信ができ、これを利用したいのですが、スマホのLINE上でしか動作確認できません。
毎回スマホのLINEで確認するのも時間的コストがかかるので、PC上で開発を完結させたいです。今回は単純にuserAgentで分岐させます。

liffアプリでユーザーIDを取り出す

今回のアプリではユーザーアカウントごとに日記を読み書きする方式にしたかったので、LIFFアプリ初期化時にアカウント情報、すなわちuserIdを取り出します。

LIFFアプリはnavigator.userAgentに「Line」が含まれているので、以下のようにしてPC上mock処理とLIFFアプリ上処理を使い分けます。以下、雑なコードで失礼します。

$(window).on('load', function(){

  if (navigator.userAgent.indexOf("Line") !== -1) {

    // liffアプリ処理
    liff.init(function (data) {
      var userId = data.context.userId;
      yourProcess(userId);
    }, function(error) {
      window.alert(error);
    });

  } else {

    // PC上の処理
    var userId = '<自分のuserId>'
    yourProcess(userId);
  }
});

※自分のuserIdはLINE Developersのアプリのチャンネル基本設定の、その他＞Your user IDから確認できます。

liffアプリのメッセージ送信をする

liff.sendMessages()でメッセージ送信ができます。こちらも同様です。

if (navigator.userAgent.indexOf("Line") !== -1) {

  // liffアプリ処理
  liff.sendMessages([
    {
      type: 'text',
      text: '<メッセージ>'
    }
  ]).then(function () {
    liff.closeWindow();
  });

} else {
  // PC上の処理
  console.log('complete sending')
}

MessagingAPIの新機能、LIFFアプリのデバッグ方法