Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
LINE BotとLIFFを使って謎解きアプリを作った話
Kazumasa Yamamoto
October 21, 2020
Technology
0
400
LINE BotとLIFFを使って謎解きアプリを作った話
Kazumasa Yamamoto
October 21, 2020
Tweet
Share
More Decks by Kazumasa Yamamoto
See All by Kazumasa Yamamoto
ストラクチャードコミュニケーション
fill9120
0
43
Cloudflare PagesにVue.jsアプリをデプロイしてみた
fill9120
0
140
Rustでディープラーニング
fill9120
0
180
Rustで定数式を扱う
fill9120
0
170
Dockerで作るServerlessなLIFFアプリの開発環境
fill9120
2
530
Vue.js + TypeScriptで作るLIFF v2アプリ
fill9120
0
240
Other Decks in Technology
See All in Technology
Power BI ”を” 可視化しよう!
hanaseleb
0
140
Deeplearning from almost scratch
hn410
0
580
モデリング、コンテキスト トランジション +1 / Data modeling
ishiayaya
0
110
エンジニアと気軽に繋がれるプラットフォーム「ハッカー飯」で行った セキュリティ・モニタリングに関する取り組みについて
nobuakikikuchi
0
350
Kubernetesの上に作る、統一されたマイクロサービス運用体験
tkuchiki
1
740
Learning from AWS Customer Security Incidents [2022]
ramimac
0
490
CADDi HCMC Technology Center
caddi_eng
0
240
Babylon.js v5 新機能の紹介
limes2018
0
1k
様々な現場のPower Platform ~小さなエンジニアの奮闘記~
hyodol2513
0
1.8k
Power BI Premiumでデータ準備!
hanaseleb
1
180
AWS CloudShellという推しサービスについて / lt-20220502-jawsug-cli
becominn
0
640
220428event_matsuda_part
caddi_eng
0
240
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
57
3.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
316
22k
Art, The Web, and Tiny UX
lynnandtonic
280
17k
Making the Leap to Tech Lead
cromwellryan
113
6.9k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
172
8.3k
jQuery: Nuts, Bolts and Bling
dougneiner
56
6.4k
Designing the Hi-DPI Web
ddemaree
272
32k
Embracing the Ebb and Flow
colly
73
3.3k
Building Your Own Lightsaber
phodgson
94
4.6k
What the flash - Photography Introduction
edds
61
9.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
1k
Bash Introduction
62gerente
596
210k
Transcript
LINE BotとLIFFを使って 謎解きアプリを作った話 ユニークビジョン株式会社 山本 一将
自己紹介 2 ⚫ 名前:山本 一将(@kyamamoto9120) ⚫ 所属:ユニークビジョン株式会社 ⚫ 言語:C++, Rust,
Python, Ruby ⚫ 趣味:将棋、キャンプ、DIY、野球観戦 ⚫ 実績:2015年 世界コンピュータ将棋選手権9位
動機 3 ① 妻はリアル謎解きゲームが趣味 ② 今年はCOVID-19の影響で公演に行けない 誕生日プレゼントにLINEの技術を駆使して自作しよう!
リアル謎解きゲームとは 4 小問を解いて目的を達成する 与えられたパズルや暗号を解いて 指定された目的を達成するゲーム
謎解きアプリの概要 5 ① LINE Botと友だち登録 ② 部屋の中から問題やQRコードを探す ③ LINE BotのリッチメニューからLIFFを開いて
i. QRコードを読み込んで問題を解禁 ii. シェア機能を使って問題を解禁 ④ 問題を解いてBotに答えを入力
シェア機能の概要 6 シ ェ ア し た 側 シ ェ
ア さ れ た 側 LINE Botとのトーク画面で開くLIFFアプリ シェア先のトーク画面 LIFFアプリ ヒント1 ヒント2 トークの種類、表示する人によって LIFFアプリの内容が変わる
シェア機能の技術的な解説 7 LIFFアプリ • シェア機能はシェアターゲットピッカーで実現 • シェアするLIFFアプリは誰がシェアしたかを知る 必要があるため、一意なIDをサーバに保存 (LIFF URLに上記IDをクエリパラメータで渡す)
LIFFアプリはボタンテンプレートで送信 (クエリパラメータが汚いのでURLを見えなくした) • トークの種類は liff.getContext() メソッドで取得 • 今回は1対1トーク、グループ・トークルームの 2通りに処理分けした • クエリパラメータのIDをサーバに問い合わせて シェアした側、された側に場合分け
感想 8 ① LINEならではの謎解きを作ることができた ② アプリ自体は2日くらいで簡単に作れた • LIFF + LINE
Botならフロントエンドを頑張る辛さが少ない • Messaging APIもPythonのLINE Bot SDKが使いやすい! ③ 今度は公開できるようなアプリを作ってみたい
ありがとうございました
補足:システム構成 10 AWS Cloud LIFF LIFF SDKの実行 Webhookを処理 ユーザーの情報を管理 メッセージ送信
問題表示、QR読込、シェア機能