非公式LINE管理画面を作ってみた

1. 自己紹介
2. 非公式LINE管理画面が必要になった経緯
3. システム構成
4. ハマったこと

Transcript

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