Pro Yearly is on sale from $80 to $50! »

LIFFでLINE botをリッチにする

4b2f3a64637b51e81813accbe8a98083?s=47 KMiura
October 28, 2020

LIFFでLINE botをリッチにする

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

4b2f3a64637b51e81813accbe8a98083?s=128

KMiura

October 28, 2020
Tweet

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が使えるようになった(2020/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