共有ランタイムを使用するように Office アドインを構成する

1 つの 共有ランタイムですべてのコードを実行するように Office アドインを構成できます。 共有ランタイムを使用すると、アドイン全体の調整が向上し、アドインのすべての部分から DOM と CORS にアクセスできるようになります。 ドキュメントが開いたときのコードの実行や、特定のコンテキストでのリボン ボタンのアクティブ化など、追加の機能にもアクセスできます。 共有ランタイムが使用できるようにアドインを構成するには、この記事の手順に従います。

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

新しいプロジェクトを開始する場合は、Office アドイン用 Yeoman ジェネレーターを使用して、Excel、PowerPoint、または Word アドイン プロジェクトを作成します。

アドインでアドインのみのマニフェストを使用している場合は、この記事の手順を使用して、共有ランタイムを使用するように Visual Studio プロジェクトを更新することもできます。 ただし、マニフェストの XML スキーマの更新が必要になる場合があります。 詳細については、「Office アドインでの開発エラーのトラブルシューティング」を参照してください。

マニフェストを構成する

次の手順に従って、共有ランタイムを使用するように新しいプロジェクトまたは既存のプロジェクトを構成します。 これらの手順では、 Office アドイン用 Yeoman ジェネレーターを使用してプロジェクトを生成していることを前提としています。アドインで使用しているマニフェストの種類のタブを選択します。

webpack.config.js ファイルを構成する

webpack.config.js は、複数のランタイム ローダーをビルドします。 taskpane.html ファイルを介して共有ランタイムのみを読み込むよう変更する必要があります。

1. Visual Studio Code を起動し、生成したアドイン プロジェクトを開きます。

2. webpack.config.js ファイルを開きます。

3. webpack.config.js ファイルに次の functions.html プラグイン コードが含まれている場合は、それを削除します。

   new HtmlWebpackPlugin({
       filename: "functions.html",
       template: "./src/functions/functions.html",
       chunks: ["polyfill", "functions"]
     })
   

4. webpack.config.js ファイルに次の commands.html プラグイン コードが含まれている場合は、それを削除します。

   new HtmlWebpackPlugin({
       filename: "commands.html",
       template: "./src/commands/commands.html",
       chunks: ["polyfill", "commands"]
     })
   

5. プロジェクトで関数チャンクまたはコマンドチャンクのいずれかを使用した場合は、次に示すようにそれらをチャンク リストに追加します (次のコードは、プロジェクトで両方のチャンクを使用した場合のものです)。

     new HtmlWebpackPlugin({
       filename: "taskpane.html",
       template: "./src/taskpane/taskpane.html",
       chunks: ["polyfill", "taskpane", "commands", "functions"]
     })
   

6. 変更を保存してプロジェクトを再ビルドします。

   npm run build
   

Office アドインの変更をテストする

次の手順に従って、共有ランタイムを正しく使用していることを確認します。

1. taskpane.js ファイルを開きます。

2. ファイルのすべての内容を次のコードで置き換えます。 これにより、作業ウィンドウが開かれた回数が表示されます。 onVisibilityModeChanged イベントの追加は、共有ランタイムでのみサポートされます。

   /*global document, Office*/
   
   let _count = 0;
   
   Office.onReady(() => {
     document.getElementById("sideload-msg").style.display = "none";
     document.getElementById("app-body").style.display = "flex";
   
     updateCount(); // Update count on first open.
     Office.addin.onVisibilityModeChanged((args) => {
       if (args.visibilityMode === Office.VisibilityMode.taskpane) {
         updateCount(); // Update count on subsequent opens.
       }
     });
   });
   
   function updateCount() {
     _count++;
     document.getElementById("run").textContent = "Task pane opened " + _count + " times.";
   }
   

3. 変更を保存してプロジェクトを実行します。

   npm start
   

作業ウィンドウを開くたびに、開かれた回数が増加します。 共有ランタイムは作業ウィンドウを閉じてもコードが実行され続けるので、 _count の値は失われません。

開発サーバーを停止してアドインをアンインストールする準備ができたら、次のコマンドを実行します。

npm stop

共有ランタイムについて

Windows または Mac では、アドインはリボン ボタン、カスタム関数、作業ウィンドウのコードを個別のランタイム環境で実行します。 これにより、グローバル データを簡単に共有できない、カスタム関数からすべての CORS 機能にアクセスできないなどの制限が生まれます。

ただし、同じランタイム (共有ランタイムとも呼ばれます) でコードを共有するように Office アドインを構成できます。 これにより、アドイン間での調整が容易になり、アドインのすべての部分から、作業ウィンドウの DOM や CORS にアクセスできます。

共有ランタイムを構成すると、次のシナリオが可能になります。

• Office アドインは、追加の UI 機能を使用できます。
  • アドイン コマンドの可用性を変更する
  • ドキュメントが開いたら、Office アドインでコードを実行する
  • Office アドインの作業ウィンドウを表示または非表示にする
  • Office アドインにカスタム キーボード ショートカットを追加する (Excel および Word アドインでのみサポート)
• 以下は、Excel アドインでのみ使用できます。
  • Office アドインでカスタム コンテキスト タブを作成する
  • カスタム関数で CORS がすべてサポートされます。
  • カスタム関数で、Office.js API を呼び出して、スプレッドシート ドキュメントのデータを読み取ることができます。

また、アドインのリボンに表示するボタンはすべて、同じ共有ランタイムで実行されます。 次の図は、カスタム関数、リボン UI、作業ウィンドウ コードがすべて同じランタイムでどのように実行されるかを示しています。

複数の作業ウィンドウ

共有ランタイムを使用する予定がある場合は、複数の作業ウィンドウを使用するようにアドインを設計しないでください。 共有ランタイムは、1 つの作業ウィンドウのみサポートします。 <TaskpaneID> のない作業ウィンドウは、別の作業ウィンドウとして扱われますのでご注意ください。

関連項目

• カスタム関数から Excel API を呼び出す
• Office アドインにカスタム キーボード ショートカットを追加する
• Office アドインでカスタム コンテキスト タブを作成する
• アドイン コマンドの可用性を変更する
• ドキュメントが開いたら、Office アドインでコードを実行する
• Office アドインの作業ウィンドウを表示または非表示にする
• チュートリアル: Excel カスタム関数と作業ウィンドウの間でデータとイベントを共有する
• Office アドインのランタイム