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

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

4068fcaf4bd4822746cc4537a422eced?s=128

Shun Kosaka

August 23, 2019
Tweet

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 ありがとうございました"