Office アドインで Fluent UI Reactを使用する

[アーティクル]
10/02/2024

Fluent UI React は、Microsoft 365 アプリケーションを含む広範な Microsoft 製品にシームレスに適合するエクスペリエンスを構築するように設計された公式のオープンソース JavaScript フロントエンドフレームワークです。 CSS-in-JS を使用して、高度にカスタマイズ可能かつ堅牢で最新のアクセス可能な React ベースのコンポーネントを提供します。

注:

この記事では、Office アドインのコンテキストで Fluent UI Reactを使用する方法について説明します。ただし、さまざまな Microsoft 365 アプリと拡張機能でも使用されます。詳細については、「Fluent UI React」および「Fluent UI Web オープンソースリポジトリ」を参照してください。

この記事では、Reactで構築され、Fluent UI React コンポーネントを使用するアドインを作成する方法について説明します。

アドインプロジェクトの作成

Office アドイン用 Yeoman ジェネレーターを使用して、Reactを使用するアドインプロジェクトを作成します。

注:

ジェネレーターで作成されたReactベースのアドインでは、Fluent UI React V9 が使用されます。このバージョンでは、Trident (IE) Webview はサポートされていません。アドインのユーザーに Trident が必要なバージョンの Office がある場合は、この記事の代わりに Office-Add-ins-Fluent-React-version-8 のいずれかのサンプルを使用してください。 Trident を使用する Office のバージョンについては、「 Office アドインで使用されるブラウザーと Webview コントロール」を参照してください。

前提条件をインストールする

Node.js (最新 LTS バージョン)。 Node.js サイトにアクセスして、オペレーティングシステムに適したバージョンをダウンロードしてインストールします。
最新バージョンの Yeoman と Office アドイン用の Yeoman ジェネレーター。これらのツールをグローバルにインストールするには、コマンドプロンプトから次のコマンドを実行します。
```
npm install -g yo generator-office
```
注:

Yeomanのジェネレーターを過去に取付けている場合でも、npmからのパッケージを最新のバージョンにすることをお勧めします。
Microsoft 365 サブスクリプションに接続されている Office (Office for the web を含む)。

注:

まだ Office をお持ちでない場合は、Microsoft 365 開発者プログラムを通じてMicrosoft 365 E5開発者サブスクリプションを受ける資格があります。詳細については、FAQ を参照してください。または、 1 か月間の無料試用版にサインアップするか、 Microsoft 365 プランを購入することもできます。

プロジェクトを作成する

次のコマンドを実行し、Yeoman ジェネレーターを使用してアドインプロジェクトを作成します。プロジェクトを含むフォルダーが現在のディレクトリに追加されます。

yo office

注:

yo officeコマンドを実行すると、Yeoman のデータ収集ポリシーと Office アドイン CLI ツールに関するプロンプトが表示される場合があります。提供された情報を使用して、必要に応じてプロンプトに応答します。

プロンプトが表示されたら、以下の情報を入力してアドインプロジェクトを作成します。

プロジェクトの種類を選択します。Office Add-in Task Pane project using React frameworkを指定します。
スクリプトの種類を選択します。TypeScriptまたはJavaScriptを指定します。
What would you want to name your add-in? (アドインの名前を何にしますか) My Office Add-inを指定します。
Which Office client application would you like to support?: (どの Office クライアントアプリケーションをサポートしますか) ホストの 1 つを指定します。 (この記事のスクリーンショットでは、 Wordを使用しています。 Excel、 PowerPoint、または Wordを選択すると、プロジェクトを初めて実行する方が簡単です。「試してみる」を参照してください)。

次に例を示します。

プロンプトと回答を含むコマンドラインインターフェイスの Yeoman ジェネレーター。

ウィザードを完了すると、ジェネレーターによってプロジェクトが作成されて、サポートしているノードコンポーネントがインストールされます。

注:

Fluent UI React v9 以降は、Trident (IE) または EdgeHTML (Edge Legacy) Webview コントロールではサポートされていません。 Office のバージョンで使用している場合は、Yo Office によって生成されたアドインの作業ウィンドウに、Office のバージョンをアップグレードするためのメッセージが表示されます。詳細については、「 Office アドインで使用されるブラウザーと Webview コントロール」を参照してください。

プロジェクトを確認する

Yeoman ジェネレーターで作成したアドインプロジェクトには、基本的なアドインの作業ウィンドウのサンプルコードが含まれています。アドインプロジェクトのコンポーネントを調べる場合は、コードエディターでプロジェクトを開き、次のファイルを確認します。ファイル名拡張子は、選択した言語によって異なります。 TypeScript 拡張機能はかっこで囲まれています。アドインを試す準備ができたら、次のセクションに進みます。

プロジェクトのルートディレクトリにある./manifest.xmlファイルで、アドインの機能と設定を定義します。 manifest.xml ファイルの詳細については、「アドインのみのマニフェストを含む Office アドイン」を参照してください。
./src/taskpane/taskpane.html ファイルには、作業ウィンドウの HTML マークアップが含まれており、Office JavaScript ライブラリが読み込まれます。また、Webview コントロールが Fluent UI React v9 をサポートしているかどうかをテストし、サポートされていない場合は特別なメッセージを表示します。
./src/taskpane/index.jsx (tsx) ファイルは、Reactルートコンポーネントです。 Reactと Fluent UI Reactが読み込まれ、Office JavaScript ライブラリが確実に読み込まれ、Fluent で定義されたテーマが適用されます。
./src/taskpane/office-document.js (ts) ファイルには、作業ウィンドウと Office クライアントアプリケーション間の対話を容易にする Office JavaScript API コードが含まれています。
./src/taskpane/components/ フォルダーには、UI を作成するReact コンポーネント *.jss (tsx) ファイルが含まれています。

試してみる

プロジェクトのルートフォルダーに移動します。
```
cd "My Office Add-in"
```
以下の手順を実行し、ローカル Web サーバーを起動してアドインのサイドロードを行います。
注:
- Office アドインでは、開発中でも HTTP ではなく HTTPS を使用する必要があります。次のいずれかのコマンドを実行した後に証明書のインストールを求められた場合は、Yeoman ジェネレーターが提供する証明書をインストールするプロンプトに同意します。変更を行うには、管理者としてコマンドプロンプトまたはターミナルを実行する必要がある場合もあります。
- 初めてコンピューターで Office アドインを開発する場合は、コマンドラインで、Microsoft Edge WebView にループバックの除外を許可するように求められる場合があります (「Microsoft Edge WebView の localhost ループバックを許可する」)。メッセージが表示されたら、「 Y 」と入力して除外を許可します。除外を許可するには管理者特権が必要であることに注意してください。許可されたら、(マシンから除外を削除しない限り) 今後 Office アドインをサイドロードするときに、除外を求められません。詳細については、 Office アドインを読み込むか Fiddler を使用する場合は、「localhost からこのアドインを開くことができない」を参照してください。
ヒント

Mac でアドインをテストしている場合は、先に進む前に次のコマンドを実行してください。このコマンドを実行すると、ローカル Web サーバーが起動します。
```
npm run dev-server
```
- アドインをテストするには、プロジェクトのルートディレクトリで次のコマンドを実行します。これにより、ローカル Web サーバーが起動し、アドインが読み込まれた状態で Office ホストアプリケーションが開きます。
```
npm start
```
  注:
  
  Outlook でアドインをテストしている場合、 npm start はアドインを Outlook デスクトップクライアントと Web クライアントの両方にサイドロードします。 Outlook でアドインをサイドロードする方法の詳細については、「テストのために Outlook アドインをサイドロードする」を参照してください。
- Excel、Word、またはPowerPoint on the webでアドインをテストするには、プロジェクトのルートディレクトリで次のコマンドを実行します。このコマンドを実行すると、ローカル Web サーバーが起動します。 "{url}" を、アクセス許可を持っている OneDrive または SharePoint ライブラリ上の Word ドキュメントの URL に置き換えます。
  
  注:
  
  Mac で開発している場合は、 {url} を単一引用符で囲みます。 Windows ではこれを行 わないでください 。
```
npm run start:web -- --document {url}
```
  次に例を示します。
  - npm run start:web -- --document https://contoso.sharepoint.com/:t:/g/EZGxP7ksiE5DuxvY638G798BpuhwluxCMfF1WZQj3VYhYQ?e=F4QM1R
  - npm run start:web -- --document https://1drv.ms/x/s!jkcH7spkM4EGgcZUgqthk4IK3NOypVw?e=Z6G1qp
  - npm run start:web -- --document https://contoso-my.sharepoint-df.com/:t:/p/user/EQda453DNTpFnl1bFPhOVR0BwlrzetbXvnaRYii2lDr_oQ?e=RSccmNP
  ドキュメントにアドインがサイドロードされない場合は、「アドインを手動でサイドロードしてOffice on the webする」の手順に従って手動でサイドロードします。
注:

コンピューターに Office アドインを初めてサイドロードした場合 (または 1 か月を超えて初めて) 場合は、最初に古い証明書を削除してから、新しい証明書をインストールするように求められます。両方のプロンプトに同意します。
WebView Stop On Load プロンプトが表示されます。 [OK] を選択します。
[My Office アドイン] 作業ウィンドウがまだ開いていない場合は、[ ホーム ] タブを選択し、リボンの [ タスクウィンドウの表示 ] ボタンを選択してアドイン作業ウィンドウを開きます。

注:

Outlook でアドインをテストする場合は、新しいメッセージを作成します。次に、[ メッセージ ] タブに移動し、リボンから [ タスクウィンドウの表示 ] を選択してアドイン作業ウィンドウを開きます。
テキストボックスにテキストを入力し、[ テキストの挿入] を選択します。
開発サーバーを停止してアドインをアンインストールする準備ができたら、次のコマンドを実行します。
```
npm stop
```

Fluent UI React v9 に移行する

以前のバージョンの Fluent UI Reactを実装する既存のアドインがある場合は、Fluent UI v9 に移行することをお勧めします。移行プロセスのガイダンスについては、「 v9 への移行の概要」を参照してください。

トラブルシューティング

「開発環境のセットアップ」の手順に従って、環境が Office 開発の準備ができていることを確認します。
一部のサンプルコードでは、ES6 JavaScript を使用しています。これは、Trident (インターネットエクスプローラー 11) ブラウザーエンジンを使用する古いバージョンの Office と互換性がありません。アドインでこれらのプラットフォームをサポートする方法については、「古い Microsoft Webview と Office バージョンをサポートする」を参照してください。開発に使用する Microsoft 365 サブスクリプションがまだない場合は、Microsoft 365 開発者プログラムを通じてMicrosoft 365 E5開発者サブスクリプションを受ける資格があります。詳細については、FAQ を参照してください。または、 1 か月間の無料試用版にサインアップするか、 Microsoft 365 プランを購入することもできます。

Yo Office が実行する自動 npm install ステップが失敗する可能性があります。 npm startを実行しようとしたときにエラーが表示された場合は、コマンドプロンプトで新しく作成したプロジェクトフォルダーに移動し、npm installを手動で実行します。 Yo Office の詳細については、「 Yeoman ジェネレーターを使用して Office アドインプロジェクトを作成する」を参照してください。

次の方法で共有

Office アドインで Fluent UI Reactを使用する