Slide 1
Slide 1 text
⾮公式LINE管理画⾯
作ってみた
2019/10/30
捧隆⼆
1
Slide 2
Slide 2 text
⽬次
u 1. ⾃⼰紹介
u 2. ⾮公式LINE管理画⾯が必要になった経緯
u 3. システム構成
u 4. ハマったこと
2
Slide 3
Slide 3 text
⾃⼰紹介
u 名前: 捧隆⼆
u 所属: ボイスアップラボ所属
u 趣味: 温泉めぐり
3
Slide 4
Slide 4 text
u スマートスピーカー向けスキルを
作りまくるクリエイター集団
u スキルを延べ30以上リリース
u 8⽉に法⼈化
u お仕事お待ちしております
ボイスアップラボ
4
Slide 5
Slide 5 text
多彩なLINEの機能
5
Flex Message LIFF LINE Pay Rich Menu Quick Reply Clova
Slide 6
Slide 6 text
LINEの様々な機能を駆使すれば
最強のコンシェルジュ・サービスが出来るのでは︖
6
Slide 7
Slide 7 text
新興のチャットコンシェルジュ・サービス
7
ズボラ旅
旅⾏コンシェル
ズボラ旅
飲⾷コンシェル
イエプラ
不動産コンシェル
Slide 8
Slide 8 text
やりたいこと
u 有⼈コンシェルジュ
u 1⼈1⼈に特化した通知・リッチメニュー
u QA、予約・購⼊などの処理はBot化
8
Slide 9
Slide 9 text
しかし…
9
Slide 10
Slide 10 text
10
Slide 11
Slide 11 text
11
LINE公式アカウントでも
チャットとBotは併存できない︕︕
Slide 12
Slide 12 text
12
Slide 13
Slide 13 text
13
Botモードにすると…
Slide 14
Slide 14 text
14
Slide 15
Slide 15 text
やりたいこと
u 有⼈コンシェルジュ
u 1⼈1⼈に特化した通知・リッチメニュー
u QA、予約・購⼊などの処理はBot化
15
Slide 16
Slide 16 text
16
LINE
Server
LINE
公式
チャット
My
Server
チャットモード
Slide 17
Slide 17 text
17
LINE
Server
LINE
公式
チャット
My
Server
Botモード
Slide 18
Slide 18 text
18
Slide 19
Slide 19 text
19
LINE
Server
LINE
公式
チャット
My
Server
Botモード + ⾮公式管理画⾯
LINE
⾮公式
管理画⾯
Slide 20
Slide 20 text
20
LINE
Server
LINE
公式
チャット
My
Server
Botモード + ⾮公式管理画⾯
LINE
⾮公式
管理画⾯
管理画⾯を⾃作してしまえばいい︕
Slide 21
Slide 21 text
⾮公式管理画⾯のメリット・デメリット
u メリット
u LINE Messaging APIの機能をフルに使える
u チャットのデータが⾃社サーバに溜まる
u デメリット
u チャットにPush通知の料⾦がかかる(1通 約3円)
u 作るのに時間がかかる
21
Slide 22
Slide 22 text
22
作りました︕
Slide 23
Slide 23 text
23
Slide 24
Slide 24 text
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
Slide 25
Slide 25 text
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をフル活⽤
Slide 26
Slide 26 text
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で開発⾼速化
Slide 27
Slide 27 text
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はプロキシ化
Slide 28
Slide 28 text
システム構成
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に流して
分析可能に
Slide 29
Slide 29 text
ハマったこと
u スタンプ表⽰
u Flex表⽰
29
Slide 30
Slide 30 text
スタンプ表⽰
u WebhookでスタンプIDは取れるが、画像が取れない。。。
30
Slide 31
Slide 31 text
スタンプ表⽰
u WebhookでスタンプIDは取れるが、画像が取れない。。。
31
Slide 32
Slide 32 text
スタンプ表⽰
u WebhookでスタンプIDは取れるが、画像が取れない。。。
32
スタンプを表⽰する
Webページがある︕
Slide 33
Slide 33 text
スタンプ表⽰
u https://stickershop.line-scdn.net/stickershop/v1/sticker /{{スタンプID}}/ANDROID/sticker.png
u 正式にサポートはされていない
33
Slide 34
Slide 34 text
Flex表⽰
u Flex表⽰をWebでエミュレートするにはどうすれば良いのか…
34
Slide 35
Slide 35 text
スタンプ表⽰
u WebhookでスタンプIDは取れるが、画像が取れない。。。
35
Slide 36
Slide 36 text
スタンプ表⽰
u WebhookでスタンプIDは取れるが、画像が取れない。。。
36
Flex Messageを表⽰する
Webページがある︕
Slide 37
Slide 37 text
Flex表⽰
u Flex Message SimulatorでHTMLを参考にして、なんとかエミュ
レートに成功︕
37
Slide 38
Slide 38 text
LINE Messaging APIを使って、
有⼈無⼈ハイブリッドチャットアプリを
作るのもありかも
38
まとめ
Slide 39
Slide 39 text
ご静聴ありがとうございました
39