LINE BotとLIFFを使って謎解きアプリを作った話

Transcript

1. LINE BotとLIFFを使って 謎解きアプリを作った話 ユニークビジョン株式会社 山本 一将

2. 自己紹介 2 ⚫ 名前：山本 一将（@kyamamoto9120） ⚫ 所属：ユニークビジョン株式会社 ⚫ 言語：C++, Rust,

   Python, Ruby ⚫ 趣味：将棋、キャンプ、DIY、野球観戦 ⚫ 実績：2015年 世界コンピュータ将棋選手権９位

3. 動機 3 ① 妻はリアル謎解きゲームが趣味 ② 今年はCOVID-1９の影響で公演に行けない 誕生日プレゼントにLINEの技術を駆使して自作しよう！

4. リアル謎解きゲームとは 4 小問を解いて目的を達成する 与えられたパズルや暗号を解いて 指定された目的を達成するゲーム

5. 謎解きアプリの概要 5 ① LINE Botと友だち登録 ② 部屋の中から問題やQRコードを探す ③ LINE BotのリッチメニューからLIFFを開いて

   i. QRコードを読み込んで問題を解禁 ii. シェア機能を使って問題を解禁 ④ 問題を解いてBotに答えを入力

6. シェア機能の概要 6 シ ェ ア し た 側 シ ェ

   ア さ れ た 側 LINE Botとのトーク画面で開くLIFFアプリ シェア先のトーク画面 LIFFアプリ ヒント１ ヒント２ トークの種類、表示する人によって LIFFアプリの内容が変わる

7. シェア機能の技術的な解説 7 LIFFアプリ • シェア機能はシェアターゲットピッカーで実現 • シェアするLIFFアプリは誰がシェアしたかを知る 必要があるため、一意なIDをサーバに保存 （LIFF URLに上記IDをクエリパラメータで渡す）

   LIFFアプリはボタンテンプレートで送信 （クエリパラメータが汚いのでURLを見えなくした） • トークの種類は liff.getContext() メソッドで取得 • 今回は1対1トーク、グループ・トークルームの ２通りに処理分けした • クエリパラメータのIDをサーバに問い合わせて シェアした側、された側に場合分け

8. 感想 8 ① LINEならではの謎解きを作ることができた ② アプリ自体は２日くらいで簡単に作れた • LIFF + LINE

   Botならフロントエンドを頑張る辛さが少ない • Messaging APIもPythonのLINE Bot SDKが使いやすい！ ③ 今度は公開できるようなアプリを作ってみたい

9. ありがとうございました

10. 補足：システム構成 10 AWS Cloud LIFF LIFF SDKの実行 Webhookを処理 ユーザーの情報を管理 メッセージ送信

    問題表示、QR読込、シェア機能