SharePoint Onlineでマイページ的なサイトを作成する(SPFx + Microsoft Graph Toolkit)
この投稿は Microsoft 365 Advent Calendar 2023 に参加しています
1.記事を作成した目的
1.1背景
Microsoft365をグループウェアとして導入する際に、ポータル(SharePoint Online)に国産グループウェアのような個人メールやスケジュール表示できるマイページを作れないか？という相談を頂く事が時々あります。
結論を言えばSharePoint Onlineには標準ではそういった機能はありません。個人的なイメージになりますが、やはりSharePointはファイルの共有を行うためのシステムというのがベースにある気がしますので製品コンセプトがそもそも違うのかと思います。
しかし、色々調べているとSharePoint Framework(SPFx)とMicrosoft Graphを活用すればSharePointでもマイページっぽいサイトを作ることができるのではないか？とと思えてきたので試してみました。その結果を共有致します。
※なお、最近だとMicrosoft Edgeに職場または学校アカウントでサインインしていると新しいページを開いた際に、Microsoftフィードと合わせて最新のメールやスケジュールを確認できるので、こちらをマイページ的な感じで利用ができます。普通はこれで十分だとは思いますが、SPFxとMicrosoft Graphを使えばもっと色々な事ができます。
1.2注意点
私は普段IT基盤（インフラ）SEとして働いているため、Webプログラミングに関する知識が乏しいです。そのため、記事の中で技術的に誤った説明を書いてしまっている可能性があります。その点、ご容赦下さい。
2.用語の説明
まずは、今回の記事の中で利用する技術である、SharePoint Framework(SPFx)とMicrosoft Graph Toolkitについて簡単に説明します。
2.1 SharePoint Framework(SPFx)とは
SharePoint Frameworkとは、SharePoint OnlineのサイトをJavaScriptやCSSでカスタマイズするための機能です。独自のWebパーツや拡張機能という形で、ユーザーのニーズに合わせた機能やデザインを追加できます。
SPFxを使うメリットとしては、やはりSharePoint Onlineを基盤として利用できる事です。例えばAzure Active Directory(Entra ID)で認証できるため、SharePoint Frameworkのアプリケーションは、別途追加の認証不要でSharePointやMicrosoft 365のデータにアクセスできます。また、セキュリティやプライバシーの面でも、Microsoftが提供する高いレベルの保護を受けることができます。
2.2 Microsoft Graph API
Microsoft Graphとは Microsoft365上のデータを取得したり様々な他のアプリと連携するためのAPIです。例えばM365上のユーザの一覧を取得したり、メールや予定表などの情報をAPI経由で取得する事が可能です。
Microsoft Graph APIは Microsoft Graph Explorerというサービスを利用すると簡単に試してみる事ができます。
例えば以下のようなURLを入力し、[Run query]を実行するとExchange Onlineのカレンダーに登録された自分の予定をJSON形式で取得する事が可能です。
https://graph.microsoft.com/v1.0/me/calendars
このように、Graph APIを実行すればSharePoint Frmework(SPFx)から、M365上のデータを取得して表示するようなWebパーツ（アプリケーション）を作成する事ができます（例えば、自分の予定表から予定を取得してSharePoint上に表示する事ができます）。
しかし、複雑な事を実現したり実用性の高いアプリケーションを作成しようとすると、Webアプリ開発の深い知識が必要になってしまいます。
私もそこで一旦手が止まってしまい、何かもっと簡単にできる方法がないか調べていたところMicrosoft Graph Toolkit というものがある事を知りました。
2.3 Microsoft Graph Toolkit
Microsoft Graph ToolkitはMicrosoft Graph にアクセスしてデータを取得するための組み込みのコンポーネント群です。例えば以下のようなタグを記載するだけで、自分のログイン情報と自分のスケジュールを一覧で表示する事ができます。
<mgt-login></mgt-login>
<mgt-agenda></mgt-agenda>
この他にも様々なタグが用意されています。
実際の動作イメージはMicrosoft Graph Toolkit PlayGroundというサイトで簡単に動作イメージを確認できますので、気になる方はご確認ください。
Microsoft Graph Toolkitを利用するメリットをは以下の通りです。
- Microsoft365と親和性の高いインターフェースを簡単に用意する事が可能なため、インターフェースを開発する時間が削減できます
- CSSやテンプレート機能により、見た目をカスタムする事が可能です
また、Microsoft Graph Toolkitは特定のフレームワークに依存していないので、様々なアプリケーションに組み込んで利用する事ができます。
3.今回作成するアプリケーション(Webパーツ）
今回は以下のような個人のスケジュールとMicrosoft Todoをポータルに表示するWebパーツをMicrosoft Graph Toolkitを使って作成したいと思います。
4.構築手順
4.1 SPFxの環境構築
SPFxの環境構築手順を説明します。基本的にはMicrosoft社が公開しているドキュメントの通りなので、読み飛ばして頂いて問題ありません。
- Node.jsのインストール
以下のURLからNode.jsのLTSバージョンをダウンロードしてインストールします。今回は18.19.0をダウンロードしてインストールしました。
2.開発ツールのインストール
SharePoint Frameworkの開発に必要なモジュールのインストールを行います。
npm install gulp-cli yo @microsoft/generator-sharepoint --global
4.2 SPFxのプロジェクトの作成
- SPFxプロジェクトの作成
ディレクトリの作成し、その場所にYeomanGeneratorを用いてSPFxのプロジェクトを作成します。今回は「GraphToolkitSample」という名称でフォルダで作成しました。
md GraphToolkitSample
cd GraphToolkitSample
yo @microsoft/sharepoint
Yeomanの実行後、必要な情報の入力が求められます。今回は以下の内容を指定しました
ソリューション名/Web parts名：任意
作成するコンポーネント: Webパーツ
フレームワークを利用するか否か：Frameworkなし
Let's create a new Microsoft 365 solution.
? What is your solution name? graph-toolkit-sample
? Which type of client-side component to create? WebPart
Add new Web part to solution graph-toolkit-sample.
? What is your Web part name? GraphToolkitSample
? Which template would you like to use? No framework
その後、Microsoft Graph TypeとMicrosoft Graph ツールキット SharePoint Framework npm パッケージをインストールします。
npm install @microsoft/microsoft-graph-types
npm install @microsoft/mgt-spfx
- Visual Studio Code等の任意のエディタを利用して./config/package-solution.json ファイルを開きます。今回は自分の予定を表示したいので、WebApiPermissionRequestsという項目を追記し、「Calendars.Read」と「Tasks.Read」のアクセス許可を要求するよう設定します。
"webApiPermissionRequests": [
{
"resource": "Microsoft Graph",
"scope": "Calendars.Read"
},
{
"resource": "Microsoft Graph",
"scope": "Tasks.Read"
}
]
- srcディレクトリ以下にあるTypeScriptファイルを開きます
ファイルの先頭にある既存のimportステートメントの後にGraph ToolkitのSharePoint Providerを追加します。
//SharePoint Provider
import { Providers, SharePointProvider } from '@microsoft/mgt-spfx';
- oninitメソッドの更新
oninitメソッドを以下の通り更新します。
protected async onInit(): Promise<void> {
if (!Providers.globalProvider) {
Providers.globalProvider = new SharePointProvider(this.context);
}
}
- render()メソッドの更新
renderメソッドの内容を以下の通り更新します。今回作成するWebパーツであれば単純なタグを書くだけで完結します。
public render(): void {
this.domElement.innerHTML = `
<h3>個人スケジュール</h3>
<mgt-agenda group-by-day></mgt-agenda>
<h3>Todo</h3>
<mgt-todo></mgt-todo>
`;
}
- tsconfig.json を編集します。本来はよくないのですが、今回はテストなのでTypeScriptの型検証の設定を変更します。
7.ビルドを実行します
gulp bundle --ship
Gulp package-solution --ship
- ビルドが成功すると sharepoint\solutionフォルダにSPPKGファイルが生成されます。これでSPFxパッケージモジュールの作成は完了です
4.3 SharePoint環境設定およびSPPKGモジュールのアップロード
- Microsoft Graph ToolkitをSharePoint 上で利用するために必要なモジュールをダウンロードします。以下のURLからMicrosoft Graph ToolkitのSPPKGをダウンロードします
https://github.com/microsoftgraph/microsoft-graph-toolkit/releases
- SharePoint管理センターにアクセスし、[Manage apps]のページから先ほどDLしたSPPKGファイルと生成したSPPKGをアップロードします
- SharePoint管理センターのAPI アクセスのページにアクセスし
「Calendars.Read」と「Tasks.Read」の権限を付与します
4.4 SharePointサイトへの登録
任意のSharePointサイトを開き、ポータル編集画面でアップロードしたパッケージを選択します。うまくいけば、自分のスケジュールとTodo一覧が表示されます。
スケジュールの出席者アイコンにマウスカーソルを合わせるとM365のプロファイルカードが表示されますし、タスク一覧から直接タスクを登録する事もできます。
このようにMicrosoft Graph Toolkitを使えば、タグを記述するだけでインタラクティブな機能も簡単に作る事ができます。
5. スケジュール以外の情報の表示
今回の記事の中では触れませんが、最新のメール一覧や、自分のOneDriveのファイル一覧を表示する事も簡単にできます。このように情報を増やしていけば、SharePointでマイページ的なサイトを実現できるのではないでしょうか。
なお、Microsoft Graph Toolkitはタグを書くだけではなく、独自のJavascriptやCSSと組み合わせで、表示や機能をさらにカスタマイズする事もできますので、より実用性の高いものも作成できますよ。
6.まとめ
SPFxとMicrosoft Graph Toolkitを活用する事で、SharePointのサイトを色々とカスタマイズできる事を説明しました。SPFxは奥が深いので、やろうと思えば本当に色んな事ができると思います。ただ、SharePoint Framework(SPFx)はカスタマイズ・開発になりますのでSaaSのメリットを殺してしまう可能性もあります。 実際の業務で利用する場合は、メンテナンス負担を考慮して検討する事をお勧めします。
Discussion