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
660
LINE BotとLIFFを使って謎解きアプリを作った話
Kazumasa Yamamoto
October 21, 2020
Tweet
Share
More Decks by Kazumasa Yamamoto
See All by Kazumasa Yamamoto
ユニークビジョンの Rust 活用事例
fill9120
2
1.5k
Rust & AWS X-Ray による分散トレーシングの実現
fill9120
0
2.7k
Rust製プロダクトを 3年以上運用して得たノウハウ
fill9120
0
930
Messaging APIを駆使した ChatGPT ボットのUX改善
fill9120
0
360
Rust を開発言語として採用してからの取り組み
fill9120
1
1.8k
ストラクチャードコミュニケーション
fill9120
0
120
Cloudflare PagesにVue.jsアプリをデプロイしてみた
fill9120
0
860
Rustでディープラーニング
fill9120
0
400
Rustで定数式を扱う
fill9120
0
430
Other Decks in Technology
See All in Technology
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
200
AWS環境のリソース調査を Claude Code で効率化 / aws investigate with cc devio2025
masahirokawahara
2
1.4k
ChatGPTとPlantUML/Mermaidによるソフトウェア設計
gowhich501
1
120
ZOZOマッチのアーキテクチャと技術構成
zozotech
PRO
3
1.3k
20250903_1つのAWSアカウントに複数システムがある環境におけるアクセス制御をABACで実現.pdf
yhana
3
490
人工衛星のファームウェアをRustで書く理由
koba789
3
1.5k
Vault を基盤として整備し、 みんなに使ってもらえるようになるまで
takahiko
1
110
ガチな登山用デバイスからこんにちは
halka
1
230
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
2
330
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
560
クラウドセキュリティを支える技術と運用の最前線 / Cutting-edge Technologies and Operations Supporting Cloud Security
yuj1osm
2
300
dbt開発 with Claude Codeのためのガードレール設計
10xinc
1
800
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Making Projects Easy
brettharned
117
6.4k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
The Language of Interfaces
destraynor
161
25k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
The Invisible Side of Design
smashingmag
301
51k
How GitHub (no longer) Works
holman
315
140k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
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読込、シェア機能