レバウェル開発部 アドベントカレンダー 11日目
レバウェル開発部の松浪です。 普段は介護事業の転職サイトを中心とした求職者向けサービスのバックエンド開発を担当しております。 今回は、LIFFの開発を始めるにあたって起きた特有の問題と、その対処法をまとめます。
LIFFとは
LIFFとは LINE Front-end Framework を略した呼称で、LINEが提供するWEBアプリのプラットフォームです。
LIFFには利用者の個人情報やLINEの連絡先を安全に取得できる機能などが実装されています。それを活用してWEBアプリの挙動に応じて求職者にメッセージを送るといったサービスを可能にします。
LINEアプリ内の組み込みブラウザのみで利用できる機能が多く、特に連絡先を取得する機能はLINEを用いたWEBサービスを構築したい理由と密接に結びついているケースが多く見られます。
LIFFのつらいところ
上述した事情により、LIFFの開発においては通常のWEB開発のほか、2点の問題に対処する必要があります。
まず、スマートフォンのLINEアプリで開く必要があること。 WEB開発におけるスマートフォン向け開発は、開発者ツールやWEBインスペクタを使うことが多く、必ずしも実機で確認する必要はありません。 しかし、LIFFの開発ではスマートフォンのLINEアプリで開発環境を開く必要があるため、なんらかの手段でローカル環境を開けるようにする必要があります。
次に、組み込みブラウザの標準機能ではデバッグができないこと。 スマートフォン版のChromeやSafariでは、開発PCに繋ぐことでWEBインスペクタをつかった実機確認が可能です。
しかし、LINEブラウザには組み込みのWEBインスペクタ機能がないため、別途デバッグ手段を用意する必要があります。LIFFアプリを開発する機会があまり多くない場合はほぼ初見のライブラリを触ることになるため、メソッドの呼び出し方やデータ型の確認にデバッグが必須になります。
ngrokでローカル環境を見れるようにする
まずはローカル環境をLINEアプリから見れるようにします。 ngrokを利用して一時的にローカルの開発環境を公開し、LINEアプリの入ったスマートフォンからアクセスします。
手順
ローカルでhttps接続できる開発環境が立っているところからスタートします。
-
アカウント登録
https://ngrok.com にアクセスしてアカウントを登録します。 -
インストール
$ brew install \--cask ngrok -
ngrokの認証を行う
下記ページでアカウント取得後にConnect your accountに記載されたコマンドを実行します。 https://dashboard.ngrok.com/get-started/setup -
起動
ngrok http --region=ap --host-header=rewrite your.server.com:443を実行すると、コンソールが次のように表示されます。
ngrok (Ctrl+C to quit)
Sign up to try new private endpoints https://ngrok.com/new-features-update?ref=private
Session Status online
Account your.email@email.jp (Plan: Free)
Update update available (version 3.18.4, Ctrl-U to update)
Version 3.16.0
Region Asia Pacific (ap)
Web Interface http://127.0.0.1:4040
Forwarding https://xxxx-xx-xxx-xxx-xx.ngrok-free.app -> https://your.server.com:443 `
Connections ttl opn rt1 rt5 p50 p90
0 0 0.00 0.00 0.00 0.00
実機から ngrok-free.app で終わるURLにアクセスすると、開発環境が表示されます。 アクセスした時は、ngrokのコンソールにアクセス履歴も表示されます。
21:00:00.000 JST GET /images/sample.png 200 OK
これでLINEアプリから開発環境が見れるようになりました。
vConsoleでデバッグ環境を整える
次にデバッグ環境を整えます。 初回の実装の時は適当なtextareaを設定し、その中にオブジェクトの情報を書き出す形でデバッグを強行していましたが、ちゃんとしたツールが見つかったためそちらを利用します。
スマートフォンの端末上でも開発者ツールを表示できる vConsole というライブラリを利用して、ブラウザ上で挙動を確認しようと思います。 弊チームのフロントエンドではVueを利用していますが、フレームワーク依存はなくどのフレームワークでも利用できます。
手順
- vConsole をインストール
$ yarn add vconsole
2. デバッグしたいコード側で利用
vConsoleインスタンスを生成するのみで利用できます。 デバッグしたい対象に対してconsole.log等を設定し、画面側で確認することが可能です。
import Vue from "Vue";
import VConsole from "vconsole";
new Vue({
created() {
const vConsole = new VConsole();
console.log(window.liff)
}
//略
});
3. 確認
検証用スマホやPCで対象ページを開きます。
検証したいページの右下に vConsole というボタンが追加され、 そこから設定したデバッグやエラーが表示できます。 command 欄から console.log(window) などを実行し、画面からの情報を抽出することも可能です。
さいごに
これでLINEの開発ができる環境が整いました。 弊チームではあまり頻度の多くないLIFFの開発ですが、だからこそ準備やデバッグといった基礎の段階でつまづきがちです。 そんな時、このようなツールを利用することができれば、LINEに限らず他のケースにも生きてくるかと思います。
次回のレバウェル開発部のアドベントカレンダーもよろしくお願いします！