29
23

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Copilot Studioで作成したエージェントをSharePointにサイドパネルとして設置する。

29
Last updated at Posted at 2025-09-15

この記事では、Copilot Studio(以下コパスタと略します)で作成したエージェント(チャットボット)を、SharePoint Onlineに設置して社内のみんなに使ってもらいたい、という人向けの記事です。

GitHubに公開されている SharePointSSOAppCustomizer のインストールを実施してみましたので、その方法と感想を書きたいと思います。

じつは、2026年3月ごろから、Microsoftの仕様変更によってCopilot StudioのSharePointチャネルで公開したエージェントが、Microsoft365 Copilotライセンスを持っていなくても利用可能になっています!ほとんどアナウンスが無いのですが、Service RequestでMicrosoftに確認済みです。
image.png

https://learn.microsoft.com/ja-jp/microsoft-copilot-studio/publication-add-bot-to-sharepoint#configure-the-sharepoint-channel

標準機能で望んだことができるようになったので、めでたくこの記事はお役御免ということになります。

前提条件

ここで紹介する方法は、 portal.azure.com からサービスプリンシパルを作成して、場合によってはPowerShellを用いて必要なエンタープライズアプリケーションの追加を行うような作業を含みます。SharePoint管理センターの操作も必要です。

これらの操作は一般ユーザーでは行えないことがほとんどなので、必要な場合は社内のシステム管理者の方に相談してください。

この仕組みを導入するには、Entra IDへのアプリ登録やSharePoint管理センターの操作が必要です。企業においてこれらの操作は社内システムの管理者(情報システム部など)が行います。その際にアプリを登録するかどうかを判断するのは管理者と管理部門の仕事です。

まちがってもロールをよこせ、とか無茶を言って関係各所を困らせることはないように。試したい場合には開発者プランなどを利用してテスト用テナントで充分に動作と安全性を検証したうえでどうぞ。

ご紹介した方法でテナントに不具合が発生しても自己責任でお願いします。

前日談

コパスタの標準機能ではだめなの?

Copilot Studioには、もともとチャネルのなかに WebアプリSharePointというものが用意されています。実際のところ、SharePointに設置したい、というだけならばこれで実現可能ですが、 社内のユーザーに限定してサインインさせて利用させたい という場合に、それぞれ制限があります。

サインインさせるということは、利用者がアクセス可能なSharePointサイトをナレッジにしたエージェントを利用できることを意味します。認証なしの匿名の場合はこれができません。

image.png

Webアプリの場合

Webアプリチャネルでは、HTMLの埋め込みコードを取得することができます。別途サービスプリンシパルを作成して手動認証設定をすると埋め込みコードがWebアプリチャネルのなかに表示されます。

Screenshot.png

SharePointはHTMLをWebパーツとして埋め込みできますので、貼り付けるとSharePoint上にチャットボットを設置することが可能です。ただ、見ていただいてわかるとおりログインを求めてくるのです。いわゆるiframeですので、Web表示の実態はコパスタ側で外側のSharePointサイトと枠の中は別サイトです。

つまりこのままだと自動ログイン(SSO)を行ってくれません。しかも、サインインの仕方がイケてません。ポップアップして出てきた数字をボットに入力するという謎インターフェイスです。

image.png

SharePointチャネルの場合

SharePointチャネルを選択すると、作成ユーザーがアクセスできるSharePointサイトが選択できます。一見簡単で素適な仕組みに見えるのですが。

image.png

指定したSharePointサイトに移動して、右上角の部分を見てください。M365 Copilotライセンスを持っている方は、サービスプランが有効になっていれば、ここにCopilotのアイコンが表示されていることでしょう。しかし、ライセンスを持たない人には表示されません。
image.png

公式サイトにはこうあります。
image.png

これでは、せっかくコパスタで作成したボットをSharePointサイトに設置しても、一部の人にしか使ってもらえないのです。M365 Copilotライセンスを持たないユーザーにも従量課金という手を使って利用させることは可能ですが、またそれは別のお話。

GitHubで提供されている方法を使う

ここからが本題です。使わせていただくのは GitHubに公開されているこちらのコードです。

README.md にも記載されているとおり、SharePointチャネルに似た感じのサイドパネルインターフェイスを実現しています。しかもこれの優れているところは、コパスタ側で手動認証を使わず、Microsoft認証を使えるところです。

ということは、Teamsでのエージェントの利用と共存ができますし、エンドユーザーのナレッジに対するアクセス制御も勝手にいい感じに解決してくれます。

下の方に書いてあるレガシー SharePointSSO Component sample については、こちらにも良い点があるので後述したいと思います。

image.png

全体像の説明

このコードはSharePointに対して機能を追加できるSharePointアプリを作るというアプローチをとっています。

SharePointアプリはSharePoint管理センターからアップロードすると、SharePointアプリストア(正式名は違うかも)に表示されて、各SharePointサイトからインストールができるようになります。

SharePint管理センターでアップロードするのは .sppkg という拡張子がついたファイルです。
GitHubからソースコードを取得して、その一部に自分がCopilot Studioで作成したエージェントと、動作させるためのサービスプリンシパルの情報を加えて、PC上でゴニョっとすることで.sppkg ファイルが出来上がります。これから説明するのはそのために必要な手順です。

ゴニョっとするために必要な環境

.sppkgファイルを作るためには、PCにあらかじめ以下をインストールしておく必要があります。こう記載されています。

  • Node.js v22 (as per SPFx 1.21.1 requirements)
  • npm or yarn package manager
  • Git for cloning the repository

下記から Node.js をインストールすると、自動的にnpmもインストールされているはずです。

インストールされているかどうかは、以下でバージョン番号を確認できます。

node -v
npm -v

gitがインストールされている場合は、クローンします。gitわからん!という場合はGitHubからZIPファイルとしてダウンロードすることもできます。

image.png

SPFx開発環境のインストール

これは今回の場合には必要かどうか断言できないのですが、SharePoint Frameworkのインストール方法が記載されたページもおいておきます。(読み飛ばしてもらっても大丈夫です。)

NodeとSPFxのバージョンには対応があるらしく。そのあたりはこちらに記載されています。
https://learn.microsoft.com/ja-jp/sharepoint/dev/spfx/compatibility#spfx-development-environment-compatibility

結局どれをつかえばいいの?と、このあたりよくわからないのですが。
とりあえず私の環境の場合はこれで動きました。
image.png

プロジェクトで使われるSPFxのバージョンは、プロジェクトのルートにある package.json ファイルに書かれてあります。
image.png

後述の npm install を実行すると必要なSPFxのコンポーネントが自動でダウンロードされるはずです。

npm list @microsoft/sp-core-library

Entra IDにアプリ登録

portal.azure.com にアクセスして、適当な名前でアプリ登録を行います。
Entra ID > 管理 > アプリ登録 > 新規登録
image.png

適当な名前をつけて「登録」します。アカウントの種類はシングルテナントでOKです。
リダイレクトURIの欄では、「シングルページアプリケーション」を選択してから、チャットボットを設置するSharePointサイトのURLを貼り付けます。このとき、末尾にはスラッシュ「/」を入れないのがポイントです。

準備ができたら登録をクリックします。

image.png

APIアクセス許可の追加

作成したアプリ登録を開いた状態で
管理 > APIのアクセス許可 > +アクセス許可の追加 > 所属する組織で使用しているAPI を開きます。

検索窓にPower Platform と入力すると、Power Platform APIというのが見つかります?

image.png

実は私のテナントでは見つかりませんでした。
PowerShellで以下のようにして追加することができました。

Connect-MgGraph
New-MgServicePrincipal -AppId 8578e004-a5c6-46e7-913e-12f58912df43 -DisplayName "Power Platform API"

手動で追加したあとには、エンタープライズアプリのなかに、このように現れました。
image.png

Power Platform APIを選択したあと、委任されたアクセス許可 を選択します。
アクセス許可の選択では、CopilotStudio.Copilots.Invokeというのを探してチェックをいれ、「アクセス許可の追加」をクリックします。

image.png

ここまでできると、CopilotStudio.Copilots.Invokeがアクセス許可の一つとして追加されているのがわかります。管理者同意を与えるかどうかは各々の職場のポリシーなどによって判断してください。

image.png

作成したアプリ登録の概要をクリックすると表示される以下の項目の文字列をコピーしてメモ帳などに貼っておきます。

  • アプリケーション(クライアント)ID
  • ディレクトリ(テナント)ID

Screenshot from 2025-09-15 13-19-07.png

Copilot Studio側の操作

こんどはSharePointサイトに掲載したいエージェントをCopilot Studioで開きます。
エージェントはあらかじめ 「公開」 しておきます。

認証方法の確認

設定 > セキュリティ > 認証 の項目を開き、 Microsoftで認証する が選択されていることを確認します。 (ここが素晴らしい! あとで解説します。)
image.png

必要な情報のコピー

手順にはこう書かれてます。Option A と Option Bのふたつがあって、どちらかでよいようですが、どちらも登録しても動きました。両方取得して設定するのがよいんじゃないかな?
image.png

値がある場所は以下の通り。

接続文字列(Connection String)

チャネル > Webアプリ > 接続文字列 からコピーしてメモ帳などに控えておきます。
Screenshot from 2025-09-15 13-30-36.png

環境ID(EnvironmentID)とスキーマ名(Schema name)

設定 > 上級 > メタデータ から取得できる環境IDスキーマ名 の値をメモ帳に控えておきます。
Screenshot from 2025-09-15 13-34-47.png

コードの修正

あらかじめGitHubからgitを使ってクローン、もしくはZIPファイルをダウンロードしてきて解凍した中から、今回のソースコードがある SharePointSSOAppCustomizer を開きます。

その中から SharePoint/assets フォルダの中にある elements.xml ファイルをテキストエディタで開きます。中身は以下のような感じです。

文字列のなかに YOUR_ から始まる項目が5つあることがわかるでしょうか? こちらを事前にメモ帳に控えておいた文字列に差し替えて保存します。慎重に!

image.png

もし下記間違えてよくわからなくなったら、こちらに控えが用意されてあります。

.sppkgファイルの作成

いよいよソースコードから.sppkgファイルを作成します。
コマンドプロンプトまたはPowerShellで SharePointSSOAppCustomizer のフォルダへ移動します。

image.png

移動ができたら、以下の順番にコマンドを実行します。

# Build the solution
gulp build

# Bundle the solution
gulp bundle --ship

# Package the solution
gulp package-solution --ship

パッケージ化に成功すると、sharepoint > solution というフォルダが作成されて、その中に sidebar-agent.sppkg ファイルが見つかるはずです。

image.png

SharePoint管理センターからアップロード

SharePoint管理センターを開き、 詳細 > その他の設定 > アプリ > 開く をクリックします。
image.png

さきほどの.sppkgファイルをアップロードします。成功すると以下の表にリストに表示されます。
image.png

管理センターの操作はSharePoint管理者などのロールが必要です。

設置サイトにアプリをインストールする

チャットボットを実際に設置したいサイト(あらかじめEntra ID のアプリ登録でリダイレクトURIに設定したURLのサイトです)に移動します。

新規 > アプリ をクリックします。

image.png

追加できるアプリのなかに sidebar-agent-client-side-solution という項目が表示されています。
追加をクリックしてからSharePointサイトに戻ります。
image.png

インストールが成功していたら、サイトをリロードすると右上角のあたりに、これまで表示されていなかったCopilot Studioのものらしきアイコンが表示されています。これをクリックすると……
image.png

非常にいい感じにサイドバーとしてチャットボットが動作しました。

このボットはCopilot Studioで作成し、Webアプリから取得した接続文字列をつかって連動していますので、当然コパスタ側でトピックやナレッジ指定を修正して 「公開] をすれば変更内容が反映されます。
おつかれさまでした。
image.png

後記

GitHubで公開されている SharePointSSOAppCustomizer について紹介しました。導入は少しハードルが高いですが、動作としてはかなり理想に近いのではないかと思います。この仕組みの優れている点と難点について感想を書いておきますので参考にしていただきたいです。

優れている点

認証方式

なによりもCoilot Studio側で設定する認証が「Microsoft認証」を使いながらSSOを実現している点です。利用をテナント内のユーザーに限定できますし、エンドユーザーがアクセス権をもつ情報だけをボットが返すことができます。
また、Teamsチャネルを併用できるので、公開の幅が広がります。

M365 Copilotライセンスを持つユーザーはメッセージ数を消費しない?

認証方式に「Microsoft認証」を採用できるので、このチャットボットを利用するユーザーがM365 Copilotライセンスを持っている場合には、いくら使ってもメッセージ数を消費しないようです。

私のテスト環境ではM365 Copilotライセンスは無いのですが、今回のモダンサイドバーでエンドユーザーが使用したメッセージ数(いつのまにかクレジットっていう言い方に変わってますね!)は課金外のほうにカウントされています。

image.png

メッセージ数については話し出すと長くなるのですが、M365 Copilotライセンスを持つユーザーはすでにメッセージ消費に対する対価を払っているという建付けのようで本来は消費されないのですが、これがエージェントに手動認証が設定されていた場合にはたとえライセンスを持っていても消費されてしまうのです。

メッセージ消費数についてはMicrosoftの公式サイトに記載があります。

難点

設置サイトごとにリダイレクトURI登録が必要

チャットボットを設置させるSharePointサイトは、作成したアプリ登録にリダイレクトURIとして登録する必要があります。これは通常管理者しか行えない作業です。逆にどこでも設置させないというガバナンスが効いているという捉え方もできます。

テナントで1つのエージェントしかこの方法を使えない

テナントに1つしか使えない難点の回避策はこちらの記事で投稿しましたのでご覧ください。
https://qiita.com/DaddyDaddy/items/a6f684b97e8dd6ce714f

これが最大の難点です。
コードの修正の部分で気づいたかと思いますが、Copilot Studioの作成した エージェント > チャネル > Webアプリ から取得した 接続文字列 を埋め込んで、.sppkgファイルを作成しています。

これはSharePointアプリストア上に特定のエージェントと接続済みのアプリを展開しているということになるので、各SharePointサイトにインストールしたアプリも同じく1つのエージェントしか動きません。

SharePointSSOAppCustomizerREADME.md にも書かれているとおり、このソースの前身として公開されていたSharePointSSOComponentでは、PnPPowerShellをつかってSharePointサイトにインストールしたあとに情報を上書きする仕組みが導入されていました。

この方法ならば、サイトごとに異なるエージェントを設置できるので、ぜひ導入してほしいなぁ、と心待ちにしている次第です。

でもすごいよね。

リクエストしたい部分はあるにしても、ここまでモダンなサイドバーでSharePointサイトへの設置を実現できているのは素晴らしいと思います。導入をしていくなかでSPFxについてもどういう仕組みか勉強できて非常にためになりました。

試行錯誤しながら導入した経験を自分のためのメモを兼ねてQiitaに書きましたので、参考にしていただけると嬉しいです。試行錯誤の様子はこちらのTwitter投稿でご覧いただけます。

こんな人が書いてます。

こちらの記事はランゲルハンス島のDDさんが紹介しました。ブログでクラウドフローのTIPSのようなものを書いたり、Qiita記事を書いたりしていますのでご贔屓に。
フォローやいいねいただけると嬉しいです。
関西のPowerPlatform系の勉強会にときどき出没しますので、気軽に声をかけていただけると喜びます!

29
23
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
29
23

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?