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管理画面を作ってみた
Search
捧隆二
October 30, 2019
Programming
0
440
非公式LINE管理画面を作ってみた
1. 自己紹介
2. 非公式LINE管理画面が必要になった経緯
3. システム構成
4. ハマったこと
捧隆二
October 30, 2019
Tweet
Share
More Decks by 捧隆二
See All by 捧隆二
LIFF API のセキュリティ的な話
arahabica
0
590
LINEミニアプリ/LIFFアプリを サクッと作りたいならFirebase
arahabica
3
2.1k
LIFFで認証しようとしたら意外と奥が深かった話
arahabica
0
1.9k
Firebase x LINE / Ruby on Rails x LINEでログイン画面を無くそう
arahabica
0
2.3k
公式管理画面 vs 非公式管理画面
arahabica
0
550
Share Target Pickerを使ってLIFFアプリを拡散しよう
arahabica
0
1k
Share Target Pickerを使って消えるメッセージを作ってみた
arahabica
0
7.7k
Clovaで他とは違うスマートスピーカー体験
arahabica
0
140
LINEグループであそぼ
arahabica
1
400
Other Decks in Programming
See All in Programming
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
510
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.4k
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
240
RDoc meets YARD
okuramasafumi
4
170
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
160
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
110
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
160
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
440
🔨 小さなビルドシステムを作る
momeemt
4
680
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
310
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
540
速いWebフレームワークを作る
yusukebe
5
1.7k
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
BBQ
matthewcrist
89
9.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
4 Signs Your Business is Dying
shpigford
184
22k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
We Have a Design System, Now What?
morganepeng
53
7.8k
Transcript
⾮公式LINE管理画⾯ 作ってみた 2019/10/30 捧隆⼆ 1
⽬次 u 1. ⾃⼰紹介 u 2. ⾮公式LINE管理画⾯が必要になった経緯 u 3. システム構成
u 4. ハマったこと 2
⾃⼰紹介 u 名前: 捧隆⼆ u 所属: ボイスアップラボ所属 u 趣味: 温泉めぐり
3
u スマートスピーカー向けスキルを 作りまくるクリエイター集団 u スキルを延べ30以上リリース u 8⽉に法⼈化 u お仕事お待ちしております ボイスアップラボ
4
多彩なLINEの機能 5 Flex Message LIFF LINE Pay Rich Menu Quick
Reply Clova
LINEの様々な機能を駆使すれば 最強のコンシェルジュ・サービスが出来るのでは︖ 6
新興のチャットコンシェルジュ・サービス 7 ズボラ旅 旅⾏コンシェル ズボラ旅 飲⾷コンシェル イエプラ 不動産コンシェル
やりたいこと u 有⼈コンシェルジュ u 1⼈1⼈に特化した通知・リッチメニュー u QA、予約・購⼊などの処理はBot化 8
しかし… 9
10
11 LINE公式アカウントでも チャットとBotは併存できない︕︕
12
13 Botモードにすると…
14
やりたいこと u 有⼈コンシェルジュ u 1⼈1⼈に特化した通知・リッチメニュー u QA、予約・購⼊などの処理はBot化 15
16 LINE Server LINE 公式 チャット My Server チャットモード
17 LINE Server LINE 公式 チャット My Server Botモード
18
19 LINE Server LINE 公式 チャット My Server Botモード +
⾮公式管理画⾯ LINE ⾮公式 管理画⾯
20 LINE Server LINE 公式 チャット My Server Botモード +
⾮公式管理画⾯ LINE ⾮公式 管理画⾯ 管理画⾯を⾃作してしまえばいい︕
⾮公式管理画⾯のメリット・デメリット u メリット u LINE Messaging APIの機能をフルに使える u チャットのデータが⾃社サーバに溜まる u
デメリット u チャットにPush通知の料⾦がかかる(1通 約3円) u 作るのに時間がかかる 21
22 作りました︕
23
24 システム構成 LINE Server Database Firestore File Storage Cloud Storage
Web Firebase Hosting Authentication Firebase Authentication Analysis Big Query Backup Cloud Storage API Firebase Functions App Server Browser
25 システム構成 LINE Server Analysis Big Query Backup Cloud Storage
App Server Browser Database Firestore File Storage Cloud Storage Web Firebase Hosting Authentication Firebase Authentication API Firebase Functions サーバサイドは Firebaseをフル活⽤
26 システム構成 LINE Server Database Firestore File Storage Cloud Storage
Authentication Firebase Authentication Analysis Big Query Backup Cloud Storage App Server Browser API Firebase Functions Web Firebase Hosting Vuetify フロントは Nuxt.jsとVuetifyで開発⾼速化
27 システム構成 Database Firestore File Storage Cloud Storage Web Firebase
Hosting Authentication Firebase Authentication Analysis Big Query Backup Cloud Storage Browser LINE Server App Server API Firebase Functions ビジネスロジックは分離させて APIはプロキシ化
システム構成 LINE Server File Storage Cloud Storage Web Firebase Hosting
Authentication Firebase Authentication API Firebase Functions App Server Browser 28 Analysis Big Query Backup Cloud Storage Database Firestore FirestoreをBig Queryに流して 分析可能に
ハマったこと u スタンプ表⽰ u Flex表⽰ 29
スタンプ表⽰ u WebhookでスタンプIDは取れるが、画像が取れない。。。 30
スタンプ表⽰ u WebhookでスタンプIDは取れるが、画像が取れない。。。 31
スタンプ表⽰ u WebhookでスタンプIDは取れるが、画像が取れない。。。 32 スタンプを表⽰する Webページがある︕
スタンプ表⽰ u https://stickershop.line-scdn.net/stickershop/v1/sticker /{{スタンプID}}/ANDROID/sticker.png u 正式にサポートはされていない 33
Flex表⽰ u Flex表⽰をWebでエミュレートするにはどうすれば良いのか… 34
スタンプ表⽰ u WebhookでスタンプIDは取れるが、画像が取れない。。。 35
スタンプ表⽰ u WebhookでスタンプIDは取れるが、画像が取れない。。。 36 Flex Messageを表⽰する Webページがある︕
Flex表⽰ u Flex Message SimulatorでHTMLを参考にして、なんとかエミュ レートに成功︕ 37
LINE Messaging APIを使って、 有⼈無⼈ハイブリッドチャットアプリを 作るのもありかも 38 まとめ
ご静聴ありがとうございました 39