カレー屋の一覧アプリをラインアプリで作る。
目的
-
ラインアプリがどんなものか調査学習。
-
社内のSlackのカレースレッド（おすすめカレー屋や、このカレー屋行ってきた報告をするスレッド）があるのだが、そのカレー屋一覧のアプリを作りたい。Slackのスレッドだと、過去の投稿を見るのに一苦労（遡って見るのに、スクロールして見ていかなくてはいけない）。コメントとかもたくさん付いてるし。なので、一覧が欲しい！という個人的願望がある。
調べると、「LINEミニアプリ」は審査が必要とのことなので、「LIFFアプリ」について、調べる・進めることにした。
LIFFプラットフォームで動作するWebアプリは、大きく分けて「LIFFアプリ」と「LINEミニアプリ」の2種類があり
（中略）
LIFFアプリとLINEミニアプリの違いをテーブルにまとめてみました。どちらもLIFF SDKを搭載しているのですが、LINEミニアプリを開発するにはLINEによる審査および認定が必要です。
はじめに、LINE Developersの設定など。
これらの記事を見てスムーズに行えました。
https://ayaoriko.com/coding/line/liff-app/
https://goworkship.com/magazine/what-is-liff/
画面サイズが、Full、Tall、Compactのどれにするか、迷いましたが、
一旦設定しても、あとから変更OKでした（汗）
カレー屋一覧を表示してみた。
LIFFアプリで、カレー屋一覧を表示してみました。リンクは公式ホームページに飛びます。（画面はTallサイズ。トーク画面がちょっとだけ見えるサイズです。）
ちなみにFULLは画面いっぱいに表示、Compactが一番小さく表示（画面半分ぐらい）です。
トークルームへメッセージを送信
一覧だけを出すだけでは面白くないので、ボタンを付けてトークルームに、なにかメッセージを送るようにしてみました。
「営業時間」ボタンをクリックすると、営業時間がトークルームに送られます。
（単にHTMLに文字列を貼り付けてあるだけなので、公式で営業時間の変更があっても更新はされませんが・・・-o-）
<<
これらの記事を参考にしました。
https://developers.line.biz/ja/docs/liff/developing-liff-apps/#sending-messages
https://developers.line.biz/ja/reference/liff/#send-messages
営業時間ボタンをクリックすると、トークルームに、メッセージが送られます。
メッセージ送信部分のコードはこんな感じ
function sendMessages(text) {
if (!liff.isInClient()) {
window.alert('This button is unavailable as LIFF is currently being opened in an external browser.');
} else {
liff.sendMessages([{
'type': 'text',
'text': text
}]).then(() => {
window.alert('Message sent');
})
.catch((error) => {
window.alert('Error sending message: ' + error);
});
}
}
$( "#button_samurai" ).on( "click", function( event ) {
sendMessages("11:00～21:30 （L.O. 21:00）");
});
感想
Androidだと、キャッシュが残ってしまうので、HTMLを更新したあとは、スマホの設定から、LINEアプリのキャッシュの削除をいちいちしなければならず面倒だと感じた。
それ以外は、スムーズに開発できそう。
あと、LIFFを使うとLINEのプロフィール情報（LINEのユーザーIDや名前など）を得ることができるそうです。しかし、今回のアプリでは使う機会がなさそうです・・・。
今後のタスク、課題
・LINE友達へのカレー屋一覧の共有
・Slackの投稿がそのままこちらに反映できれたらいいのですが（理想）。