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
570
LINE BotとLIFFを使って謎解きアプリを作った話
Kazumasa Yamamoto
October 21, 2020
Tweet
Share
More Decks by Kazumasa Yamamoto
See All by Kazumasa Yamamoto
ユニークビジョンの Rust 活用事例
fill9120
0
730
Rust & AWS X-Ray による分散トレーシングの実現
fill9120
0
2k
Rust製プロダクトを 3年以上運用して得たノウハウ
fill9120
0
680
Messaging APIを駆使した ChatGPT ボットのUX改善
fill9120
0
330
Rust を開発言語として採用してからの取り組み
fill9120
1
1.7k
ストラクチャードコミュニケーション
fill9120
0
85
Cloudflare PagesにVue.jsアプリをデプロイしてみた
fill9120
0
600
Rustでディープラーニング
fill9120
0
330
Rustで定数式を扱う
fill9120
0
370
Other Decks in Technology
See All in Technology
What if...? 처음부터 다시 LLM 어플리케이션을 개발한다면
huffon
0
1k
VPoEの視点から見た、ヘンリーがサーバーサイドKotlinを使う理由 / Why Server-side Kotlin 2024
cho0o0
1
420
CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder
fujiwara3
0
710
たくさん本を読んだけど 1年後には綺麗サッパリ!を乗り越えて 学習の鬼になるぞ👹
yum3
0
160
AutomatedLabを使って内部ペンテストを勉強しよう! -やられ社内ネットワークの自動構築-
n_etupirka
1
610
LINE WORKSへ簡単通知!Incoming Webhookアプリの紹介
mmclsntr
0
110
Scaling Technical Excellence at 104: Evolution in AWS and Developer Empowerment
scotthsieh825
1
150
What is DRE? - Road to SRE NEXT@広島
chanyou0311
3
630
Datadog Cloud SIEMを使ってAWS環境の脅威を可視化した話/lifeistech-datadog-cloud-siem
gidajun
0
480
データ分析を支える技術 生成AI再入門
ishikawa_satoru
0
380
シフトレフトで挑む セキュリティの生産性向上
sekido
PRO
0
270
コンテナ・K8s研修 - 後半 Kubernetes 基礎&ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
1
120
Featured
See All Featured
The Language of Interfaces
destraynor
151
23k
Agile that works and the tools we love
rasmusluckow
325
20k
How to name files
jennybc
67
96k
Ruby is Unlike a Banana
tanoku
96
10k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
24
1.8k
The Invisible Side of Design
smashingmag
294
50k
How to Ace a Technical Interview
jacobian
274
23k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
Clear Off the Table
cherdarchuk
89
320k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
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読込、シェア機能