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
600
LINE BotとLIFFを使って謎解きアプリを作った話
Kazumasa Yamamoto
October 21, 2020
Tweet
Share
More Decks by Kazumasa Yamamoto
See All by Kazumasa Yamamoto
ユニークビジョンの Rust 活用事例
fill9120
0
1.1k
Rust & AWS X-Ray による分散トレーシングの実現
fill9120
0
2.3k
Rust製プロダクトを 3年以上運用して得たノウハウ
fill9120
0
810
Messaging APIを駆使した ChatGPT ボットのUX改善
fill9120
0
340
Rust を開発言語として採用してからの取り組み
fill9120
1
1.8k
ストラクチャードコミュニケーション
fill9120
0
96
Cloudflare PagesにVue.jsアプリをデプロイしてみた
fill9120
0
720
Rustでディープラーニング
fill9120
0
350
Rustで定数式を扱う
fill9120
0
390
Other Decks in Technology
See All in Technology
Evolving Architecture
rainerhahnekamp
3
250
iPadOS18でフローティングタブバーを解除してみた
sansantech
PRO
1
130
.NET 最新アップデート ~ AI とクラウド時代のアプリモダナイゼーション
chack411
0
200
AWS re:Invent 2024 recap in 20min / JAWSUG 千葉 2025.1.14
shimy
1
100
Visual StudioとかIDE関連小ネタ話
kosmosebi
1
370
Cloudflareで実現する AIエージェント ワークフロー基盤
kmd09
0
280
Bring Your Own Container: When Containers Turn the Key to EDR Bypass/byoc-avtokyo2024
tkmru
0
840
Amazon Q Developerで.NET Frameworkプロジェクトをモダナイズしてみた
kenichirokimura
1
200
FODにおけるホーム画面編成のレコメンド
watarukudo
PRO
2
260
20250116_JAWS_Osaka
takuyay0ne
2
200
OPENLOGI Company Profile
hr01
0
58k
生成AI × 旅行 LLMを活用した旅行プラン生成・チャットボット
kominet_ava
0
150
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
A better future with KSS
kneath
238
17k
Mobile First: as difficult as doing things right
swwweet
222
9k
The Language of Interfaces
destraynor
155
24k
It's Worth the Effort
3n
183
28k
Fireside Chat
paigeccino
34
3.1k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
570
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
192
16k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
240
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
500
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読込、シェア機能