LIFFでLINE botをリッチにする

2020/10/28【勉強会】LINE Bot Catchup for ミニアプリ【ミニアプリNight】
https://linedevelopercommunity.connpass.com/event/191789/

Transcript

1. LIFFでLINE botをリッチにする @k_miura_io
2. 自己紹介 • 三浦 耕生（こうき） • 名古屋のゲーム会社 のサーバーエンジニア @k_miura_io koki.miura05
3. Bot×ミニアプリ(LIFF) • Bot単体で実現できないことができちゃう • サービスで提供できる機能が広くなる • 詳しくはこの後すぐ！
4. LIFFがある(先程のおさらい) • LINE上で動くフロントエンドのフレームワーク • LINEと連携したWebアプリを作れる（LINEアプリ、ブラウザで動く） • 今すぐ始めれる LIFF ≒ ミニアプリ
5. そもそものLIFFの始まり(VI) • もともとLINE botの拡張機能としてリリースされた • Messaging APIのチャネルでLIFFを設定するようになっていた • 外部ブラウザで使えなかった
6. V2 でのアップデート(2019/10) • 外部ブラウザで使えるようになった • QAコードが使えるようになった • Access Tokenを取得できるようになった • Share Target Pickerが使えるようになった(２０２０/3~)
7. 実装の違い(liff.init) liff.init(); liff.init({ liffId: myLiffId, }) v1 v2
8. 何ができるの？
9. ケース1：botの入力補助 • liff.sendMessages()を使うとLINEのトーク画面上で開いたLIFFから メッセージを送れる • Botに送信するメッセージをLIFFで作成して代わりに送信することがで きる
10. LIFFを使ったお絵かきアプリ • LIFFがリリースされたときにLINEテクニカル エバンジェリストの立花さんが作ったアプリ • キャンバスで書いた絵をトークルームに送 信する • 他のペイントアプリで書いた絵をシェアする よりもスマートになる https://engineering.linecorp.com/ja/blog/liff-our- latest-product-for-third-party-developers/
11. ケース2：登録フォーム • Botだけで情報入力しようとすると、人によって形式がバラバラになる ので、あとの処理めんどくさい • 複数の情報入力をするならWebのフォームは強い →LIFFの出番！
12. LIFFを使った会員登録フォーム • Messaging APIで取得できない情報を入れる • ログイン状態になるので、パスワード入れなく ていい • LINEのアカウント名を表示させると◎
13. 注意 • LIFFのフロントエンドから取得した情報 (ユーザーID、アカウント名など)をそのま まサーバーに送信するのは非推奨 • 悪意のある人間がサイトの解析を行い、 なりすましやサーバーを攻撃する危険が ある • LIFFからトークンを送信すれば安全に サーバーサイドでユーザー情報を取得 できる • 面倒でも運用は安全に(自戒) https://developers.line.biz/ja/docs/liff/using-user-profile/
14. LIFFとMessaging APIをフル 活用したbot • 勤怠の効率化をさせるLINE bot • Messaging APIの機能を最大限活用 • 今回紹介したLIFFの使い方をどちらも使用 https://youtu.be/sv8zH6RutM8
15. 詳細はWEBへ https://github.com/Miura55/freee_labor_bot https://supernove.hatenadiary.jp/entry/2020/ 10/01/020903
16. ※宣伝 https://linedevelopercommunity.connpass.com/event/188902/
17. END