Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
LINE BotとLIFFを使って謎解きアプリを作った話
Search
Kazumasa Yamamoto
October 21, 2020
Technology
0
580
LINE BotとLIFFを使って謎解きアプリを作った話
Kazumasa Yamamoto
October 21, 2020
Tweet
Share
More Decks by Kazumasa Yamamoto
See All by Kazumasa Yamamoto
ユニークビジョンの Rust 活用事例
fill9120
0
810
Rust & AWS X-Ray による分散トレーシングの実現
fill9120
0
2k
Rust製プロダクトを 3年以上運用して得たノウハウ
fill9120
0
710
Messaging APIを駆使した ChatGPT ボットのUX改善
fill9120
0
330
Rust を開発言語として採用してからの取り組み
fill9120
1
1.7k
ストラクチャードコミュニケーション
fill9120
0
88
Cloudflare PagesにVue.jsアプリをデプロイしてみた
fill9120
0
640
Rustでディープラーニング
fill9120
0
330
Rustで定数式を扱う
fill9120
0
370
Other Decks in Technology
See All in Technology
Dive Deep in Cloud Run: Automatic Base Image update
aoto
PRO
0
900
contenteditableと向き合う
kikuchikakeru
2
190
LandingZoneAccelerator と学ぶ 「スケーラブルで安全なマルチアカウントAWS環境」と 私たちにもできるベストプラクティス
maimyyym
1
100
Dify - LINE Bot連携 考え方と実用テクニック
uezo
5
1.1k
手軽に始める? おうちサーバーのすゝめ
nyagasan
0
180
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
0
13k
AI でアップデートする既存テクノロジーと、クラウドエンジニアの生きる道
soracom
PRO
1
220
EitherT_with_Future
aoiroaoino
1
790
【Λ(らむだ)最近のアプデ情報 / RPALT20240904
lambda
0
170
OCI コスト管理
ocise
1
120
新しいことを組織ではじめる、そしてつづける
kzkmaeda
4
380
スーパーマリオRPGのリメイク版の変更点からみるUX
nishiharatsubasa
1
180
Featured
See All Featured
For a Future-Friendly Web
brad_frost
173
9.3k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
42
2k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
Raft: Consensus for Rubyists
vanstee
135
6.5k
The Mythical Team-Month
searls
218
43k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
122
18k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
What the flash - Photography Introduction
edds
67
11k
[RailsConf 2023] Rails as a piece of cake
palkan
44
4.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
Visualization
eitanlees
142
15k
How GitHub Uses GitHub to Build GitHub
holman
472
290k
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読込、シェア機能