Office アドインをカスタマイズする方法を理解する
Office アドイン プラットフォームにより、アドインをカスタマイズすることができます。 このモジュールでは、状態の保持、および Fluent UI と Microsoft Graph の使用によって、アドインをカスタマイズする方法を説明します。 このモジュールを終了すると、維持された状態Fluent UI、Microsoft Graph を使用して Office アドインをカスタマイズする方法について理解することができます。
状態と設定を保持するためのオプションを理解する
Office アドイン プラットフォームは、アドインが状態や設定を保持するための方法をいくつか提供します。 オプションは、サポートする予定の Offic eアプリケーションと、開発する予定のアドインの種類によって異なります。
状態と設定を保持するオプション
Office JavaScript API は、ユーザー セッション間で状態を保存するアドイン用のオブジェクトを提供しています。 次の表は、サポートされているアドインの種類および Office ホスト アプリケーションを示しています。
| Office API オブジェクト | サポートされるアドインの種類 | サポートされる Office ホスト | ストレージ情報 |
|---|---|---|---|
| CustomProperties | MailApp | Outlook | 項目データは、アドインが作業しているメッセージや予定に格納されます*。 |
| CustomXmlParts | TaskPaneApp | Excel (ホスト固有の Excel JavaScript API)、 Word (Office JavaScript Common API) |
データは、ドキュメントまたはワークブックのカスタム XML 部分に格納されます。 |
| RoamingSettings | MailApp | Outlook | データはユーザーの Exchange メールボックスに保存され、特定のアドインに関連付けられます*。 |
| 設定 | ContentApp、TaskPaneApp | Excel、PowerPoint、Word | データは、アドインが動作しているドキュメント、ワークブック、またはプレゼンテーションに保存されます*。 |
*プロパティ バッグの名前/値のペアに格納されているデータ
また、ブラウザー コントロールの基盤となるアドインを通じて利用できる HTML5 Web ストレージやその他の手法を使用することもできます。
重要
ユーザーのデバイスにパスワードや個人を特定できる機密情報 (PII) を保存しないでください。
Office アドインの Fluent UI の説明
アドインを作成するとき、多くの UI 設計要素を考慮する必要があります。 Fluent UI は Office ブランドに準拠する要素を提供するため、アドインは Office の自然な拡張のように見えます。
注:
UI Fabric の使用は任意ですが、推奨されます。
Fluent UI について
Fluent UI には、次の 2 つの主要な領域があります。
- Fabric Core - フォント、アイコン、色などの基本的な要素を提供します
- Fabric React コンポーネント- Fabric Core 要素を含み、とりわけ入力、ナビゲーション、通知コンポーネントを追加します
Fabric Core
Fabric Core は、Office ブランドを反映または同期する基本的な設計要素を提供します。
Fabric Core の使用を開始するには、次のコードに示すように HTML ページの CSS を参照します。
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css">
その後、Fabric のアイコン、フォント、色を使用できます。 次の例は、Office アプリケーションのプライマリ テーマの色に非常に大きなテーブル アイコンを含める方法を示しています。
<i class="ms-Icon ms-font-xl ms-Icon--Table ms-fontColor-themePrimary"></i>
Fabric コンポーネント
Fabric React は、入力、ナビゲーション、通知、およびその他のカテゴリーの UX コンポーネントを提供します。 これは、Fabric Core 上に構築され、含まれています。
アドインで使用できる推奨コンポーネントは次のとおりです。
- Breadcrumb
- ボタン
- チェックボックス
- ChoiceGroup
- Dropdown
- Label
- リスト
- ピボット
- テキスト フィールド
- Toggle
ヒント
Office アドイン用の Yeoman ジェネレーターを使用して、Fabric React を参照するプロジェクトを作成できます。 使用可能なプロジェクトの種類は、React フレームワークを使用する Office add-in Task Pane プロジェクトです。
Office アドインで Microsoft Graph を使用する時期と方法の説明
アドインは Microsoft Graph に接続してユーザーのデータにアクセスできるため、ユーザーはより便利で生産性の高いシナリオを実現できます。 タスクの例は次のとおりです。
- OneDrive からファイルを読み取る
- メールの添付ファイルを取得する
- ユーザーのプロファイルを取得する
Microsoft Graph API を使用する理由
Microsoft Graph REST API を使用すると、次のようなサービスでユーザーのデータにアクセスできます。
- Microsoft Entra ID
- Microsoft 365 のサービス
- Enterprise Mobility および Security サービス
- Windows 10 サービス
- Dynamics 365
Microsoft Graph を承認する方法
Microsoft Graph に接続して使用するには、アドインは以下を行う必要があります。
- ユーザーの認証
- ユーザーに代わって行動する権限がある
認証
アドインは、ユーザーがサインインしたときにMicrosoft Entra IDからアクセス トークンを取得できます。 Microsoft Entra IDは、サインイン ページを iframe で開くことを許可しません。アドイン作業ウィンドウは、アドインが Office on the Web で起動されたときの iframe です。 そのため、Office JavaScript ダイアログ API を使用して、Microsoft Entra サインイン フォームを表示します。 アドインに Microsoft Graph へ承認が必要なカスタム関数が含まれている場合は、カスタム関数ダイアログ API を使用して、サインイン フォームを表示します。
承認
ユーザーがサインインした後、アドインは、後で Microsoft Graph への API 呼び出しで使用するアクセス トークンを取得します。 アクセス トークンによって、ユーザーが持っている以上のアクセス許可をアドインに与えることはできません。 通常、ユーザーは、自分自身のデータ、独自のファイル、メール、共有されているオブジェクトに関するアクセス許可のみを持ちます。 アドインが複数のユーザーに関する Microsoft Graph データを取得する場合、管理者レベルのアクセス許可を持つユーザーのみが使用できます。
推奨されるライブラリ
開発の選択に応じて、必要に応じて、認証と承認に次のライブラリのいずれかを使用できます。
- サーバー側が .NET ベースのフレームワーク (.NET Core や ASP.NET など) にある場合: MSAL.NET を使用します
- サーバー側が node.js ベースである: Passport Microsoft Entra IDを使用する
- アドインが暗黙的なフローを使用する場合: msal.js を使用します
概要
Office アドイン プラットフォームにより、アドインをカスタマイズすることができます。 このモジュールでは、状態の保持、および Fluent UI と Microsoft Graph の使用によって、アドインをカスタマイズする方法を説明しました。 このモジュールを終了すると、維持された状態Fluent UI、Microsoft Graph を使用して Office アドインをカスタマイズする方法について理解することができます。