まくろぐ

Bot Framework: Web チャットの表示をカスタマイズする

更新:
作成:

Microsoft Bot Framework を使ってウェブサイト上にチャットボットを配置したときの表示のカスタマイズ方法です。 次のように、ボットやユーザーのアイコンを設定することができます。

/p/oitn3a3/img-001.png

このようなカスタマイズ表示を行うには、Azure portal 上の Web App Bot リソースの Channels タブから選択できる、Direct Line チャネルを使う必要があります。 Web Chat というチャネルを使うと、iframe タグで簡単にチャットウィンドウを埋め込むことができるのですが、そちらではあまりカスタマイズができないようです。

/p/oitn3a3/img-002.png
図: Direct Line チャネルのキーを確認

下記はチャットウィンドウをカスタマイズして表示するサンプルコードです。 Bot Framework が提供している WebChat.renderWebChat() 関数を呼び出すと、実際にチャットウィンドウが表示されるのですが、このときに styleOptions パラメータを指定することで表示方法をカスタマイズすることができます。

index.html
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
  <style>
    * {
      margin: 0;
    }
    #webchat {
      height: 100vh;
      width: 100vw;
      background: gray;
      border: solid 5px #f37;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div id="webchat" role="main"></div>
  <script>
    const TOKEN = 'HpJB2ofxzsA.h7...省略...';

    WebChat.renderWebChat({
      directLine: WebChat.createDirectLine({ token: TOKEN }),
      styleOptions: {
        // ボットのアイコン
        botAvatarImage: '/assets/img/bot-avatar.png',
        // ボットのイニシャル(アイコンが使えない場合に表示)
        //botAvatarInitials: 'Bot',
        // ユーザーのアイコン
        //userAvatarImage: '/assets/img/user-avator.png',
        // ユーザーのイニシャル(アイコンが使えない場合に表示)
        userAvatarInitials: 'You',
        // アイコンのサイズ
        avatarSize: 50,
        // Upload file のボタンを非表示
        hideUploadButton: true,
      }
    }, document.getElementById('webchat'));
  </script>
</body>
</html>

ひらがなとカタカナを正規表現で表す

更新:
作成:

ひらがな・カタカナの正規表現

ひらがなの 1 文字、カタカナの 1 文字を正規表現で表すと次のようになります。

  • ひらがな
    • [\u3041-\u3096]
    • [\x{3041}-\x{3096}]
    • \p{Hiragana} (Unicode 文字プロパティが使える場合)
  • カタカナ
    • [\u30A1-\u30FA]
    • [\x{30A1}-\x{30FA}]
    • \p{Katakana} (Unicode 文字プロパティが使える場合)

参考

Wikipedia: Hiragana (Unicode block) より

/p/kkaq7q5/img-001.png

Wikipedia: Katakana (Unicode block) より

/p/kkaq7q5/img-002.png

TypeScriptサンプル: 文字列内のひらがなとカタカナを変換する

更新:
作成:
util.ts
export class Util {
  /**
   * 文字列に含まれているすべてのひらがなをカタカナに変換した文字列を作成します。
   * ただし、半角文字は変換しません。
   * @param str ひらがなを含む文字列
   */
  static hiraToKata(str: string): string {
    return str.replace(/[\u3041-\u3096]/g, ch =>
      String.fromCharCode(ch.charCodeAt(0) + 0x60)
    );
  }

  /**
   * 文字列に含まれているすべてのカタカナをひらがなに変換した文字列を作成します。
   * ただし、半角文字は変換しません。
   * @param str カタカナを含む文字列
   */
  static kataToHira(str: string): string {
    return str.replace(/[\u30A1-\u30FA]/g, ch =>
      String.fromCharCode(ch.charCodeAt(0) - 0x60)
    );
  }
}
使用例
import { Util } from './util';

console.log(Util.hiraToKata('あいうアイウ'));  //=> アイウアイウ
console.log(Util.kataToHira('あいうアイウ'));  //=> あいうあいう

メニュー

まくろぐ
サイトマップまくへのメッセージ