Lightning Web ComponentでチャットのUIをカスタマイズしよう / Enhance Chat UI with LWC

2019.08.23 の Salesforce Developer Meetup Tokyo #21 での登壇資料です。
Salesforce の Summer '19 リリースノートの [Lightning Web コンポーネントを使用したチャットメッセージのカスタマイズ] を簡単に解説しています。
https://releasenotes.docs.salesforce.com/ja-jp/summer19/release-notes/rn_embedded_service_web_lwc.htm

Transcript

1. LWCͰνϟοτͷUIΛΧελϚΠζ͠Α͏ @sfdgTokyo meetup #21 Shun Kosaka | Accenture | @shunkosa
2. 今⽇ご紹介する新機能
3. ここをLWCで上書きできます 何ができるのかを⼀⾔で
4. • 動画や画像などリッチなコンテンツを表⽰できる • ネイティブSDKと違ってWeb チャットは標準でプレーンテキスト(とURL)のみ対応 • (ちなみに)メッセージのスタイルを変えるだけなら設定でもできる 活⽤例
5. 組み込みサービス(旧Snap-ins)の設定でコンポーネントを選択するだけ 設定⽅法
6. 受け取ることができるのは2つのパラメータだけ • message-content : メッセージのテキスト • user-type : エージェント(Bot)か訪問者かを区別するためのテキスト ライブラリの仕様
7. メッセージのテキストで判断するしかないので、 先頭にキーワードを⼊れる等のルールを決めると実装しやすい コンテンツ振り分けの実装例 Bot の設定 <template if:true={isYoutube}> <div class="chatMessage agent youtube"> <iframe src={content} allowfullscreen> </iframe> </div> </template> LWC 表⽰されるメッセージ メッセージの先頭にYOUTUBE:が含まれていたら、 後続のテキストを⽤いてYoutubeの埋め込みタグを表⽰
8. • message-contentの内容が⼊⼒通りにならないことがある • 記号 < > & “ はそれぞれ &lt; &gt; &amp; &quot; に • URL形式のテキストは⾃動的に<a>タグで囲まれる • デフォルトでは何のスタイルも適⽤されない • 開発者ガイドのスタイルを適⽤すると標準の⾒た⽬になるので、これを改修していくと良い 注意事項
9. • LWCを⽤いると、ネイティブのモバイルアプリを開発しなくても、 リッチなWeb チャットUIが提供できる • テキスト以外のコンテンツをボットのUX設計に取り込もう︕ おわりに https://github.com/shunkosa/einstein-bots-ui-recipe 遊んでみてね︕
10. Thank you for your attention ありがとうございました"