Office 365関連のサービスの多くは Graph API で操作することができます。メール、予定表、Planner、OneDrive上のファイルなど様々なオブジェクトにアクセス可能です。
これをSharePoint Framework (SPFx)で扱う方法を試したところ非常に簡単に実現ができましたので備忘を残しておきます。
利用例
- ログインユーザーのPlannerタスクを表示
GitHub - MickNabewata/spfx-planner-webpart-sample
- ログインユーザーの予定表データを表示
GitHub - MickNabewata/spfx-list-schedule-sample:
実現手順
まずはAPIのエンドポイントを調べる
Microsoft Docsなどを参考にAPIのURLを確定しましょう。
例えば自分に割り当てられたPlannerタスクの取得は以下URLです。
調査したURLが正しいかどうかはGraph エクスプローラーで試してみてください。
プロジェクト作成
サンプルとしてSPFxでWebパーツを作成してみます。
お好きな設定でWebパーツプロジェクトを作成してください。
手順が分からない場合はこちらを参考にしてください。
開発環境が整っていない方はこちらを先にどうぞ。
アクセス許可の定義
Webパーツを利用するユーザーがGraph APIを実行するには、予めアクセス許可が与えられている必要があります。アクセス許可の付与には通常Azure ADへのアプリケーション登録が必要ですが、SPFxからの操作に限りこの手順が簡略化されています。
作成したプロジェクトを見るとconfigフォルダ内にpackage-solution.jsonという名前のファイルがありますので、これを編集して下記赤字部分を追加します。
この指定をしておくと、WebパーツをSharePointのアプリカタログに展開した時にアクセス許可の承諾を求められるようになります。管理者はそれを承諾するだけでWebパーツの利用者にアクセス許可を与えることができます。
Microsoft Graph関連オブジェクトの型定義をインポート
この後はMicrosoft Graphへの問い合わせ処理を書いていきますが、Graph APIからの応答を表す型定義があるとコーディングが非常に楽になります。ご自身のWebパーツに以下のパッケージを追加してください。
@microsoft/microsoft-graph-types
例えばnpmを利用している場合は以下コマンドでインストールできます。
npm i @microsoft/microsoft-graph-types
Microsoft Graphへの問い合わせ処理を作成
ここでは単純化のためにWebパーツの定義クラスに直接処理を書いていきます。
src > webparts > (webパーツ名) > (webパーツ名)WebPart.ts ファイルに以下のimport文を追加します。
次に同ファイルに問い合わせ処理を書きましょう。
エンドポイント(me/planner/tasks)を指定して応答を返却するだけのシンプルなコードです。
描画する処理を作成
同ファイルのrenderメソッドを以下のように記述します。
前述のgetTasksメソッドを呼び出して結果を描画しますが、描画自体はここでは省略します。応答の内容を型に当てはめてあげると入力補完が効いて良い感じです。
SharePointへのデプロイ
以下コマンドでパッケージ化します。
sharepoint > solution フォルダに (ソリューション名).sppkgが出来上がるので、これをSharePointのアプリカタログに登録します。すると SharePoint 管理センターの「API の管理」画面でアクセス許可の承諾 / 拒否を行えるようになりますので承諾します。
Webパーツの追加
任意のSharePointサイトでデプロイしたアプリを追加し、適当なページにWebパーツを追加して結果を確認してください。
以上、参考になれば幸いです。