Salesforce-Line連携でOnlineコミュニティを楽しもう


#はじめに
※この記事はSalesforce 開発者向けブログ投稿キャンペーンへのエントリー記事です。

Salesforceでのこれからの拡張開発はLightningWebComponent(LWC)！
などと言われているけれど、サーバーサイド出身者にとっては、フロントエンドの素地もないのでとっつきにくいし、なんだか億劫だったりしませんか？


コンポーネント化した部品はSalesforceのいろんな画面箇所にカセッタブルにはめ込んだり
色んな方法でサーバと通信してデータをやりとりしたりして、
ユーザフレンドリーな体験拡張をサポートしてくれるとても楽しいものです。


今回ServiceCloud上に埋め込んだコンポーネントとLine公式アカウント（LineMessagingAPI)を活用したコンポーネントを作って遊んでみました。


これによってBtoC向けの1to1コミュニケーションが可能になり、新しいカタチで顧客と繋がって、質の高いタッチポイントによってエンゲージメントが・・・


など難しいこと考えるとしんどくなってしまいますので
最近のオンライン飲み会や勉強会でのお楽しみで使っているコンポーネントをご紹介します。


#やりたいこと
##Online勉強会での一コマ
■迷える内気な参加者(僕)
<img width="759" alt="スクリーンショット 2020-06-24 22.48.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/391944/19167151-f6a1-753f-b0ea-88a21c339677.png">

・勉強会の資料発表終わってフリーQAタイムが苦手
・公開チャットもいいけど名前でちゃうし・・・うっかり流されて答えて貰えなかった日には立ち直れない
・常連の方が楽しそうなので、割り込むほどでもなくて。。
・QAじゃないけど感謝ももっと伝えたいし、今後も繋がりたい、恥ずかしいけど

##主催者の気持ち
■参加者思いな主催者
・公開チャットだとみんなにも見えてる、ちゃんと拾えたかな・・・?時間足りなかったらごめんなさい。。
・むしろ初心者の人に楽しんでもらいたいし、気軽に質問などもしてコミュニケーションしてほしい
・なんなら終わったあとでも全然答えるつもり、繋がっていきたい、恥ずかしいけど


#考えた解決策
上記の内気な参加者と主催者のすれ違いはちょっと勿体無いので、
ラジオのパーソナリティとのやり取りをイメージして、

WebMTGとは別チャネルで主催者側とLineで繋がり、主催者側はSalesforceで複数の参加者と繋がれる仕組みを考えました。

<img width="748" alt="スクリーンショット 2020-06-26 15.44.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/391944/d26c28f0-0c49-dcd0-133f-316c9071c98e.png">


(参加者)
・名前というかハンドルネーム(Line)で質問できる
・みんなも質問してると思ってるので、取り上げて貰えなくてもショックじゃない。むしろ取り上げられた時嬉しい
・主催者と１対1のチャネルなので、質問だけでなく感謝や応援メッセージも気軽に送れる

(主催者)
・人別に未読/既読も管理できて抜け漏れなし
・質問がどれだけきてるかは主催者だけが分かるから、主催者の裁量で取り上げることができる
・時間が足りなくなってもLine経由で繋がって個別回答もできる
・終わり際の「ありがとうございました！」だけでなく心のこもった挨拶やスタンプでフレンドリーになれる

#コンポーネントのご紹介
Line友達のリストのコンポーネントをユーティリティバーに埋め込んでいます。
トークが入ると、通知マークや、友達リストのコンポーネントに通知バッチがついて、参加者別の未読が管理できます。
主催者はLINE風のUIで参加者と1to1のトーク履歴を管理します。

![ezgif.com-optimize.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/391944/4471ac46-2f73-6385-41ef-fac3a6bfbc82.gif)


#アーキテクチャ
・データモデル
Contactが参加者です。
各参加者とのLineトークルームの単位がLINE_Conversationオブジェクト、
実際のメッセージはLINE_Messageオブジェクトです。

<img width="723" alt="スクリーンショット 2020-06-26 17.47.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/391944/eb898d40-bb9a-8e7f-3938-79d5224413ab.png">

実質参加者レコード(Contact)とLineトークルームは1対１の関係ですが、
なんとなく別オブジェクトとしてConversationオブジェクトへ切り出しました。
実際の往復メッセージはその下に溜まっていきます。

ビジネスコミュニケーションのユースケースではメッセージ件数によるストレージやパフォーマンスの考慮や
Line以外のマルチチャネルコミュニケーションの管理への拡張を考慮するとSalesforce外に外出しして
HerokuやAWS上に溜め込み、CanvasなりでSalesforce側にトーク画面をはめ込んであげるのが良いでしょう。
さほどメッセージ数を使わない想定であれば、BatchApexで定期的にCSVアーカイブしてローテーションかけるのもいいですね。


・(事前)フォロワー収集
LINE公式アカウントの管理画面から取得した友達登録用のQRを参加者に提示して、友達登録をしてもらいます。
<img width="849" alt="スクリーンショット 2020-06-26 17.09.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/391944/add8273e-46dc-5442-58a4-22a8dfa57a1e.png">

LineからSalesforceのWebhookをコールして、取引先責任者に取り込みます。
<img width="731" alt="image (8).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/391944/891107eb-52f1-c507-39d6-78d2955f41a4.png">

・双方向のメッセージ
参加者からのトーク内容は、LINEからSalesfore側のWebhookへ流して、PlatformEvent経由で
コンポーネント側受け取らせ、友達リストにバッチを表示するなどします。
また、ノンコーディングですがメッセージオブジェクトへレコードが挿入されるので、
標準のカスタム通知をキックしてあげれば、右上のベルマークに通知を出せます。
<img width="985" alt="image (7).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/391944/2c48ec47-69aa-c084-6456-968a5525568d.png">



#最後に
細かなコードの解説などは恥ずかしいので出来ませんが、何度か個人的にもオンライン飲み会で使ってみたりと楽しめました。
敢えてSalesforceを使ってやってみました。
技術を使って真面目に楽しく遊びましょう。
(もし試しにい遊んでみたい方は、TwitterDM等で声かけてくださいませ笑)