ローカル環境でも快適に LIFF の開発ができる liff-sdk-local を作りました

LINE LINE Messaging API LIFF

なぜ作ったのか

LIFF(LINE Front-end Framework) は SSL 対応した URL を元に LIFF URL(line://app/xxx)を生成することで使えるようになります。
その仕様で動作確認のしずらさを感じることがよくあり、どうしたらもっと開発効率があがるかなと考えていました。

解決策その1として liff-cli を去年作り、1年で約5,600回！ダウンロード(npm install liff)されています。

github.com

LIFF のリリース当初(2018/6) は LIFF URL の生成が LINE Messaging API を直接実行するしかなかったため、毎回ドキュメントの curl サンプルをコピペして実行していました。
今では LINE Developers Console にて LIFF を管理できる機能が追加されてたため、LIFF URL の生成は楽になりました。

LIFF URL 生成は楽になったものの
そもそも LIFF URL を生成せずに LIFF の開発できないんだっけ？
と考えて今回の liff-sdk-local を作りました。

github.com

なにが変わるのか

liff-sdk-local を使うことで次のように LIFF 開発が変わります！

今までの LIFF 開発
  1. LIFF SDK を導入、実装
  2. SSL 対応のサーバーにファイルをアップロード or ngrok などを使ってローカル環境を外部公開
  3. 2 で生成された URL を LINE Developers Console or LINE Messaging API を使い LIFF URL を生成
  4. 3 を LINE に送信して動作確認
これからの LIFF 開発
  1. LIFF SDK と liff-local-sdk を導入、実装
  2. ローカル環境で動作確認

liff-sdk-local 対応 API

以下の LIFF API に対応しています。

liff-sdk-local 使い方

  1. GitHub リポジトリより最新版をダウンロードしてください。
  2. dist/liff-sdk-local.min.js をプロジェクトに追加し、本家の LIFF SDK をコメントアウトしてください。
<!-- <script src="https://d.line-scdn.net/liff/1.0/sdk.js"></script> -->
<script src="path/to/liff-sdk-local.min.js"></script>
<script>
   liff.init(function(data) {
       // 処理...
   });
</script>

これで LIFF URL を生成せずにローカル環境で LIFF の動作確認ができます。

戻り値をカスタマイズする

各 API の戻り値はデフォルトでは LIFF API のドキュメントのサンプルと同じ値が返ります。

戻り値を変更するには window.liffSettings に設定してください。

<script>
   window.liffSettings = {
       userId: 'U12345',
   };
</script>
<!-- <script src="https://d.line-scdn.net/liff/1.0/sdk.js"></script> -->
<script src="path/to/liff-sdk-local.min.js"></script>
<script>
   liff.init(function(data) {
       console.log(data.context.userId); // 出力: U12345
   });
</script>

設定可能な戻り値は以下です。

  • userId
  • displayName
  • pictureUrl
  • statusMessage
  • accessToken
  • language
  • type
  • utouId
  • groupId
  • roomId
  • viewType

おまけ

9/22 に開催された技術書典 7 にて販売された LINE API HANDBOOK で第 4 章「LIFF 活用事例と開発 Tips の紹介」を書かきました！

booth.pm