待ち合わせに使えるLIFFを使ったLINEアプリを作りました。(技術編)

この記事は待ち合わせに使える LIFF を使った LINE アプリを作った際の技術的な話をまとめています。

なお、概要的な話はこちらの別記事にまとめています。

使ってる技術、フレームワーク

メッセージを受信したのを webhook でサーバーに投げ、
メッセージ内容が「いまどこ」または「今どこ」の場合、
ルーム ID として使用するランダムで一意な文字列(以降ルーム ID)を生成し、
LIFF の URL のパラメータとして付与したリンクをリプライメッセージとして送信する。

LIFF の URL をリンクすると、LINE アプリ上で LIFF が起動し、
パラメーターとしてセットしているルーム ID をキーとして、情報を登録、
同一キーの他ユーザーが存在するか確認、取得し、画面上に表示する。

メッセージ受信は Heroku 上の Node.js を、
アプリの表示及び DB は Firebase を使用しています。

元々は全部 Heroku を使っていたのですが、
バックエンドに PostgreSQL を使っている部分がボトルネックになる為、
スケーラブルな環境にしたかったので Firebase にしました。

逆に、全部 Firebase で統一したかったのですが、
Firebase 上で LineBotSDK を使う為には、
通信をアウトバウンドしないといけなくて、その場合 Firebase の使用料が有料になるので諦めました。

GoogleMapAPI でマップを表示し、
HTML5 の GeolocationAPI で取得した位置情報を、マップに落としています。

UI は全画面にマップを表示するのであまり凝ってないのですが、
友達がマップ上に出てきたタイミングでのポップアップ表示の為に Materialize を使用しています。

デバッグしづらい
console.log とかでさっとデバッグしたいときなどに出来ない。
Android アプリ上の WebView とかであれば、PC から Chorme の inspect で繋いでログ吐いたりデバッグできるのですが、
LINE アプリ上に乗っているので、うまく拾えませんでした。
これは、とりあえず随時画面にログを吐いていくようにして対応しました。
LIFF アプリ内は端末のブラウザ準拠？
これはきっちり確認してないので間違えてるかもしれませんが、
LIFF アプリ内は端末のブラウザ準拠となっていそうです。
これによって起こる問題として、
例えば Android4.4.2 以前の端末の WebKit ベースの WebView だと ES2017 仕様の JavaScript が正しく動かない可能性があります。
今回の場合も、コードはバック、フロント共に ES2017 仕様で書いていたのですが、
フロントだけ昔の仕様に戻しています。