Microsoft Copilot Studio:カスタムWebサイトに公開する手順

Microsoft Copilot Studioを使って作成したエージェントを､Webサイト上に公開する方法を解説します｡

Web公開時のポイントは2つです｡

1. 認証なしに変更後､再公開すること
2. 埋め込みコードをそのまま使わず､編集すること

記事を読めば､作成したエージェントを､あなたのサイトにスムーズに埋め込めるはずです｡

ぜひ最後までご覧ください｡

—この記事の監修者—

ヒョウノモトハル

• 1979年神奈川県生まれ
• 大学卒業後、モラトリアム期間を経て会社員となる
• 経理・総務・管理といったバックオフィスでの経験を積み、2016年から会社の情報システム部門へ転属
• その後2021年にキャリアの経験を活かし、Microsoft365関連の講座でUdemy講師としてデビュー
• 2023年現在、受講生５万人を抱えるベストセラー講師となる

Copilot StudioのWeb公開手順

大きく､以下の4ステップです｡

1. セキュリティ設定を｢認証なし｣に変更し再公開
2. カスタムWebサイトの埋め込みコードを取得
3. 埋め込みコードを編集
4. 公開したいサイトに埋め込む

1.セキュリティ設定を｢認証なし｣に変更し再公開

デフォルトでは､エージェントの使用に､Microsoftの認証(Microsoftアカウントでのログイン)が必須となっています｡

Webサイトに公開し､誰でも使えるようにするために､｢認証なし｣に変更します｡

1. Webサイトに公開するエージェントの概要ページから､設定を開く

2. セキュリティ-認証

3. 認証なしに変更し､保存

4. 警告内容を確認し､再度保存を選択

設定を変更したら､再度｢公開｣します｡
公開をしないと､変更が反映されず､公開先で認証エラーになるため注意です｡

2.カスタムWebサイトの埋め込みコードを取得

1. エージェントの概要ページから｢チャネル｣タブを開き､｢カスタムWebサイト｣を選択

2. コピーボタンをクリックし､埋め込みコードを取得

3.埋め込みコードを編集

この埋め込みコードを､既存のWebページで使えるように編集します｡

iframe内だけを抽出

埋め込みコードには､HTMLファイルに文法上必要な記述も含まれています｡
既存のWebページに使用する場合､これらの記述は必要ありません｡

<iframe ~ </iframe>内だけをコピーします｡

(下線部分だけが必要な箇所)

高さを調整

埋め込みコードの記述そのままだと､チャット欄が非常に狭いです｡

heightの値を修正します｡

600pxくらいにすると､ひとまず､パソコン上で使える見た目になります｡
(後ろの｢;｣を消さないよう注意)

4.既存のサイトに埋め込む

あとは､埋め込みコードを､公開したいWebサイトのHTMLファイルに埋め込むことで､エージェントがサイト上に公開されます｡

WordPressのサイトの場合､｢カスタムHTML｣にコードを貼り付ければOKです｡

(例:サイドバーに埋め込んだ場合)

サイトのデザインによっては､貼り付けただけではキレイに表示できない可能性もあります｡

(例:当サイトの記事のサイドバーに埋め込んだ場合｡幅が足りず､縦長になっている)

デザイン上の設定は､HTML/CSSを使って行います｡

より細かい調整をしたい場合は､既存のWebサイトを構築したデザイナーやエンジニアに相談しましょう｡

(参考)デモWebサイトは公開用ではない

チャネルには､｢カスタムWebサイト｣の隣に｢デモWebサイト｣もあります｡
｢デモWebサイト｣はテスト用で､本場の環境での利用は想定されていませんので注意しましょう｡

Copilot StudioのWeb公開時の注意点

最後に､Web公開時の注意点をお伝えします｡

• 認証なしに変更後､公開し直すのを忘れずに
• 機密情報にアクセス可能なエージェントを公開しない
• 小さく試してから全体に公開する

認証なしに変更後､公開し直すのを忘れずに

セキュリティの設定を｢認証なし｣に変更した後､公開し直すのを忘れないようにしましょう｡

公開していない場合､公開先のページで､以下の認証エラーが表示されます｡

エラーコード｢IntegratedAuthenticationNotSupportedInChannel｣が表示されたら､ほぼ間違いなく､公開し忘れです｡

機密情報にアクセス可能なエージェントを公開しない

Webサイトに公開したCopilot(エージェント)は､URLさえ知っていれば認証なしで誰でも利用可能です｡

• ナレッジに機密情報(社外秘･個人情報)を含んでいる
• データベースを更新するアクションが設定されている

ような場合､エージェント経由で機密情報の漏えいや､データベースの不正操作が行われてしまう可能性があります｡

挙動だけをチェックするのではなく､設定内容をきちんと確認しましょう｡

(特に確認すべき設定内容)

• アクション
• ナレッジ
• 接続の管理

小さく試してから全体に公開する

テストが完了した後､誰でもアクセスできるサイトにいきなり公開するのではなく､まずは限定的に運用しましょう｡テストとして動かすのではなく､実際に使ってもらうことが重要です｡
有料会員にのみ先行公開して様子を見るなど､まずは小さく試しましょう｡