LIFF アプリを量産するためのテンプレートを作った【LINE Front-end Framework】

LIFF v2.1 へのアップデート追従に伴い、記事の内容が一部古くなっています。該当箇所には注意書きを入れてありますのでご注意ください。

みなさん LIFF アプリ作ってますか？デバッグ辛くないですか？ということで、開発が楽になる Tips の紹介と、それを反映させた GitHub リポジトリーテンプレートを作成したのでその紹介をします。お品書きは次です。

• LIFF とはなにか
• GitHub リポジトリーテンプレート
• vConsole をインテグレーション
• LIFF SDK の .d.ts を追加（中）
• 楽にデバッグする

LIFF とはなにか

LINE Front-end Framework の略で、フロントエンド技術を用いて LINE アプリ上でアプリを作成することができるフレームワークです。 LINE 社から提供されており、 Web アプリを作成したことのある方なら LIFF アプリをサクッと作成することができるようになっています。イメージとしては公式から提供されている LINE ショップなどを思い浮かべてもらえるとわかりやすいかと思います。アクティブユーザー数 8,000 万人以上と言われている LINE 上で動作するので、幅広いユーザーに訴求可能です。もちろんアプリからユーザーへメッセージを送ることもできます。

GitHub リポジトリーテンプレートの紹介

最初にモノを紹介します。

https://github.com/classmethod/liff-app-template

GitHub リポジトリーテンプレートの機能を使っています。

GitHubでは既存のRepositoryをTemplateとして、新しいRepositoryを作成することができる

Use this template を押すだけで LIFF アプリを作成する土台が整うようにしています。使うための手順は README に記載してありますが、わかりにくい点などあったら教えてください。

vConsole のインテグレーション

LIFF v2.1 へのバージョンアップ追従に伴って、同じマシン上のブラウザーで開発可能となったため、 vConsole は必要なくなりました。Google Chrome 上の開発者ツールを使うことができるので開発効率が上がっています。

LIFF アプリは手元でデバッグ手段がありません。というのも SDK を初期化するために liff.init を呼び出す必要があるのですが、 LINE 社から提供されている公式アプリ上からの呼び出しでないとエラーになってしまうからです。

そこで vConsole という、 Chrome DevTools とほぼ同様の機能を Web アプリ上で実現してくれるパッケージを使用します。

https://github.com/Tencent/vConsole

vConsole は、先日開催された技術書典 7 で LINE API Experts の方々が頒布されていた LINE API HANDBOOK でも紹介がありました。

https://booth.pm/ja/items/1573526

今回作成したテンプレートでは、アプリのソースコードと一緒に webpack でひとつにバンドルする仕組みを入れています。次のように console.log の結果が見られたり、ネットワーク通信の状況などを見られるようになります。次はユーザー ID とアクセストークンをデバッグ用に出力している画像です。

バンドラーには webpack を使っていますが、これは vConsole が Parcel だとうまくバンドルできなかったためです。 Parcel 以外のバンドラーから選択する段階でなぜ webpack を選んだかというと、テンプレートとして公開するのでより汎用的に使えるものがいいかな、という思いで選択しました。

LIFF SDK の .d.ts を追加（中）

LIFF SDK の提供は uglify されたものが CDN から配信されているという状況です。

https://developers.line.biz/ja/docs/liff/developing-liff-apps/

TypeScripter 諸氏にはおわかりのとおり、型情報がありません。 @types にも定義がありませんでした。これでは TypeScript を用いて開発することができないので、自前で型付けしていきます。

https://github.com/classmethod/liff-app-template/blob/master/src/%40types/liff.d.ts

まだ init と getAccessToken しか定義していませんが、 API リファレンス に定義のための情報が載っていますので、今後アップデートの予定です。もちろんプルリクエストもお待ちしています！

らくらくデバッグ

LIFF v2.1 へのバージョンアップ追従に伴って、同じマシン上のブラウザーで開発可能となったため、 yarn hostコマンドを削除しています。

これも LINE API HANDBOOK で紹介されていた技なのですが、手元の開発用サーバーを ngrok というサービスで公開することで楽にデバッグできるようになります。そのための npm スクリプト yarn host も設定しているのですが、事前に ngrok の設定をする必要があります。事前に次を参照して設定しておいてください。

https://dashboard.ngrok.com/get-started

別々のウィンドウで次のコマンドを打ってみましょう。

• yarn dev
• yarn host

次のように、 yarn dev の結果が Compiled successfully 、 yarn host に Forwarding がふたつ表示されていればうまく動いています。

Forwarding の 2 つめにある、 https ではじまる URL を LIFF アプリのエンドポイントとして登録します。

これで設定は完了です。 LIFF URL を LINE アプリで開いてみましょう！！一点だけ注意点があります。 yarn host の実行ごとに Forwarding の URL が変わってしまいます。めんどくさいと思いますが現時点では都度登録をお願いします。今後、 LIFF API を叩いてここらへんも自動的にアップデートする予定です。

ちなみに LIFF URL をスマホでちまちま打つのはつらいので、 QR コードとして表示させてカメラで読み込むという手が使えます。その名もずばり qrcode という npm パッケージを使って QR コードをお手軽生成しましょう。

npm install -g qrcode
qrcode line://app/xxxxxxxxxxxxxxxxxxx

これで表示される QR コードを読み込めば、 LIFF デバッグ環境のできあがりです！！おつかれさまでした。

まとめ

このテンプレートを使うと LIFF アプリを量産できるようになります。開発自体は普通の Web アプリと同様ですので、このテンプレートに各種フレームワークやライブラリーを追加していってください。みんなでより便利なサービスを作っていきましょう！！