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
公式管理画面 vs 非公式管理画面
Search
捧隆二
October 28, 2020
Technology
0
440
公式管理画面 vs 非公式管理画面
捧隆二
October 28, 2020
Tweet
Share
More Decks by 捧隆二
See All by 捧隆二
LIFF API のセキュリティ的な話
arahabica
0
260
LINEミニアプリ/LIFFアプリを サクッと作りたいならFirebase
arahabica
3
1.3k
LIFFで認証しようとしたら意外と奥が深かった話
arahabica
0
1.3k
Firebase x LINE / Ruby on Rails x LINEでログイン画面を無くそう
arahabica
0
1.7k
Share Target Pickerを使ってLIFFアプリを拡散しよう
arahabica
0
820
Share Target Pickerを使って消えるメッセージを作ってみた
arahabica
0
6.9k
非公式LINE管理画面を作ってみた
arahabica
0
350
Clovaで他とは違うスマートスピーカー体験
arahabica
0
110
LINEグループであそぼ
arahabica
1
340
Other Decks in Technology
See All in Technology
日本におけるデータエンジニアリングのこれまでとこれから
foursue
16
4.2k
20240416_devopsdaystokyo
kzkmaeda
1
220
本当のAWS基礎
toru_kubota
0
500
ユーザーストーリーのレビューを自動化したみたの
bun913
1
410
Google Cloud Next '24でブログを10本書いた方法と勉強会を沸かせた方法
yasumuusan
0
290
よく聞くけど使ったことないソフトウェアNo.1 KafkaとSnowflake
foursue
4
340
推しは推せるときに推せ! プロダクトにフィードバックしていこう
nakasho
0
290
ゼロから始めるVue.jsコミュニティ貢献 / first-vuejs-community-contribution-link-and-motivation
lmi
1
120
[新卒向け研修資料] テスト文字列に「うんこ」と入れるな(2024年版)
infiniteloop_inc
2
9.9k
コンテナセキュリティの基本と脅威への対策
kyohmizu
3
750
20分で完全に理解するGrafanaダッシュボード
hamadakoji
1
260
元インフラエンジニアに成る / Human Resources to Human Relations
bobtani
4
900
Featured
See All Featured
Scaling GitHub
holman
457
140k
A designer walks into a library…
pauljervisheath
200
23k
How STYLIGHT went responsive
nonsquared
92
4.8k
Writing Fast Ruby
sferik
621
60k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
274
13k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
241
1.2M
Mobile First: as difficult as doing things right
swwweet
216
8.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
125
32k
Making Projects Easy
brettharned
108
5.5k
We Have a Design System, Now What?
morganepeng
43
6.7k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Transcript
公式管理画⾯ vs ⾮公式管理画⾯ (LINE公式アカウント) 2020/10/28 捧隆⼆ 1
⽬次 u 1. ⾃⼰紹介 u 2. ⾮公式LINE管理画⾯が必要になった経緯 u 3. システム構成
u 4. 公式管理画⾯ vs ⾮公式管理画⾯ u 5. ハマったこと 2
1.⾃⼰紹介 3
⾃⼰紹介 u 名前: 捧隆⼆ u 所属: ボイスアップラボ所属 u 趣味: 温泉めぐり
4 Twitter Facebook
u スマートスピーカー向けスキルを 作るクリエイター集団 u スキルを延べ50以上リリース u LINE APIを使ったサービス u ChatBoard
ボイスアップラボ 5
2.⾮公式LINE管理画⾯が必要になった経緯 6
7 リアル店舗に⾏くのって 店員と喋りたいからでは︖
LINEの様々な機能を駆使して チャット上でリアル店舗以上の体験を作りたい 8
新興のチャットコンシェルジュ・サービス 9 ズボラ旅 旅⾏コンシェル ペコッター 飲⾷コンシェル イエプラ 不動産コンシェル mend なんでもコンシェル
やりたいこと 10 https://leeap.jp
やりたいこと u 有⼈コンシェルジュ u 1⼈1⼈に特化した通知・リッチメニュー u QA、予約・購⼊などの処理はBot化 11
しかし… 12
13
14 チャットとBotは併存できない︕︕
15
16 Botモードにすると…
17
やりたいこと u 有⼈コンシェルジュ u 1⼈1⼈に特化した通知・リッチメニュー u QA、予約・購⼊などの処理はBot化 18
19 LINE Server LINE 公式 管理画⾯ My Server チャットモード
20 LINE Server LINE 公式 管理画⾯ My Server Botモード
21
22 LINE Server LINE 公式 管理画⾯ My Server Botモード +
⾮公式管理画⾯ LINE ⾮公式 管理画⾯
23 LINE Server LINE 公式 チャット My Server Botモード +
⾮公式管理画⾯ LINE ⾮公式 管理画⾯ 管理画⾯を⾃作してしまえばいい︕
24 作りました︕
25
3. システム構成 26
27 システム構成 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
28 システム構成 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をフル活⽤
29 システム構成 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で開発⾼速化
30 システム構成 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 31 Analysis Big Query Backup Cloud Storage Database Firestore FirestoreをBig Queryに流して 分析可能に
32
4.公式管理画⾯ vs ⾮公式管理画⾯ 33
本当に公式管理画⾯で頑張れないの︖ 34
公式管理画⾯ vs ⾮公式管理画⾯ u 通知 u リッチメッセージ u リッチメニュー u
応答 35
通知 36 公式 ⾮公式 管理画⾯で 事前設定した時刻に 特定のユーザグループに 同じメッセージを送信 APIで 任意のタイミングで
ユーザに応じた メッセージを送信
通知 37 ⾮公式 APIで 任意のタイミングで ユーザに応じた メッセージを送信 公式 管理画⾯で 事前設定した時刻に
特定のユーザグループに 同じメッセージを送信
通知
通知
通知 性別・年齢などの属性別に メッセージを送信できる
通知
None
通知
通知 ⾃由に設定したタグに基づいて メッセージを送信できる (2020/3から)
通知 45 公式 管理画⾯で 事前設定した時刻に 特定のユーザグループに 同じメッセージを送信 ⾮公式 APIで 任意のタイミングで
ユーザに応じた メッセージを送信
リッチメッセージ 46 公式 ⾮公式 Flexメッセージほど柔軟で はないが、 リッチメッセージと カードタイプメッセージ が利⽤できる Flexメッセージ
リッチメッセージ 47 ⾮公式 Flexメッセージ 公式 Flexメッセージほど柔軟で はないが、 リッチメッセージと カードタイプメッセージ が利⽤できる
None
None
リッチメッセージは 画像ベースで 領域ごとにリンクを設定できる
None
None
None
None
カードタイプメッセージは より柔軟なUI・アクションが設定できる (実態はFlexメッセージ)
リッチメッセージ 公式 Flexメッセージほど柔軟で はないが、 リッチメッセージと カードタイプメッセージ が利⽤できる 56 ⾮公式 Flexメッセージ
None
リッチメニュー 58 公式 ⾮公式 全ユーザに 同じリッチメニューを設定 ユーザごとに 別のリッチメニューを設定 可能 サブメニューも設定可能
リッチメニュー 59 ⾮公式 ユーザごとに 別のリッチメニューを設定 可能 サブメニューも設定可能 公式 全ユーザに 同じリッチメニューを設定
60
61
62
63
64 公式のリッチメニューは ユーザごとに設定できない ポストバックにも⾮対応
リッチメニュー 65 公式 全ユーザに 同じリッチメニューを設定 ⾮公式 ユーザごとに 別のリッチメニューを設定 可能 サブメニューも設定可能
66
67
68
69
70 APIを利⽤すると ユーザごとにメニューを変更可能 ポストバックやサブメニューにも対応できる
応答 71 公式 ⾮公式 テキストの完全⼀致で⾃動 返信 スマートチャットなら⾃動 返信と有⼈対応を切り替え れるがその場合、基本は⾃ 動返信
複雑な条件の⾃動返信も可 能 ⾃動返信と有⼈対応をシー ムレスに切り替え可能
応答 72 ⾮公式 複雑な条件の⾃動返信も可 能 ⾃動返信と有⼈対応をシー ムレスに切り替え可能 公式 テキストの完全⼀致で⾃動 返信
スマートチャットなら⾃動 返信と有⼈対応を切り替え れるがその場合、基本は⾃ 動返信
None
None
応答メッセージはテキスト完全⼀致
応答 – 応答メッセージ u チャットモード (使えない) u Botモード (使える) u
スマートチャットモード (使える) 76
None
None
None
None
None
スマートチャットなら⾃動返信と有⼈対応を 切り替えれる Webhookは使えず、「分かりません」メッ セージが出る
応答 83 公式 テキストの完全⼀致で⾃動 返信 スマートチャットなら⾃動 返信と有⼈対応を切り替え れるがその場合、基本は⾃ 動返信 ⾮公式
複雑な条件の⾃動返信も可 能 ⾃動返信と有⼈対応をシー ムレスに切り替え可能
84
85
86
87
88 ⾮公式なら複雑な条件の⾃動返信も可能 ⾃動返信と有⼈対応をシームレスに切り替え可能
⾮公式管理画⾯のメリット・デメリット u メリット u LINE Messaging APIの機能をフルに使える u チャットのデータが⾃社サーバに溜まる u
デメリット u 作るのに時間がかかる u チャットにPush通知の料⾦がかかる(1通 約3円) 89
5.ハマったこと 90
ハマったこと u スタンプ表⽰ u Flex表⽰ 91
スタンプ表⽰ u WebhookでスタンプIDは取れるが、画像が取れない。。。 92
スタンプ表⽰ u WebhookでスタンプIDは取れるが、画像が取れない。。。 93
スタンプ表⽰ u WebhookでスタンプIDは取れるが、画像が取れない。。。 94 スタンプを表⽰する Webページがある︕
スタンプ表⽰ u https://stickershop.line-scdn.net/stickershop/v1/sticker /{{スタンプID}}/ANDROID/sticker.png u 正式にサポートはされていない 95
Flex表⽰ u Flex表⽰をWebでエミュレートするにはどうすれば良いのか… 96
スタンプ表⽰ u WebhookでスタンプIDは取れるが、画像が取れない。。。 97
スタンプ表⽰ u WebhookでスタンプIDは取れるが、画像が取れない。。。 98 Flex Messageを表⽰する Webページがある︕
Flex表⽰ u Flex Message SimulatorでHTMLを参考にして、なんとかエミュ レートに成功︕ 99
公式管理画⾯でもいろいろ⼯夫すればかなり のことはできるが、 やっぱりLINE Messaging APIを使わないと痒い ところには⼿が届かない 100 まとめ
ご静聴ありがとうございました 101