Visual Studio Code で開発されたアドインを発行する

[アーティクル]
08/13/2024

この記事では、Yeoman ジェネレーターを使用して作成し、Visual Studio Code (VS Code) またはその他のエディターで開発した Office アドインを発行する方法について説明します。

注:

Visual Studio を使用して作成した Office アドインの発行の詳細については、「Visual Studio を使用してアドインを発行する」を参照してください。
Teams Toolkit を使用して作成した Office アドインの発行の詳細については、「クラウドに Teams アプリを展開する」と「最初の Teams アプリを展開する」を参照してください。この記事では、Teams タブアプリについて説明しますが、Teams Toolkit で作成された Office アドインに適用できます。

他のユーザーがアクセスできるようにアドインを発行する

Office アドインは、Web アプリケーションとマニフェストファイルで構成されています。 Web アプリケーションはアドインのユーザーインターフェイスと機能を定義し、マニフェストは Web アプリケーションの場所を指定し、アドインの設定と機能を定義します。

開発中は、ローカル Web サーバー (localhost) でアドインを実行できます。他のユーザーがアクセスできるように発行する準備ができたら、Web アプリケーションをデプロイし、デプロイされたアプリケーションの URL を指定するようにマニフェストを更新する必要があります。

アドインが必要に応じて動作している場合は、Azure Storage 拡張機能を使用して Visual Studio Code を使用して直接発行できます。

Visual Studio コードを使用して発行する

注:

これらの手順は、Yeoman ジェネレーターを使用して作成され、アドインのみのマニフェストを使用するプロジェクトでのみ機能します。 Teams Toolkit を使用してアドインを作成した場合、または Yeoman ジェネレーターを使用してアドインを作成し、Microsoft 365 の統合マニフェストを使用している場合は適用されません。

Visual Studio Code (VS Code) のルートフォルダーからプロジェクトを開きます。
[ 表示>Extensions (Ctrl + Shift + X) を選択して拡張機能ビューを開きます。
Azure Storage 拡張機能を検索してインストールします。
インストールすると、 アクティビティバーに Azure アイコンが追加されます。拡張機能にアクセスするには、それを選択します。 アクティビティバーが非表示の場合は、[表示>Appearance>Activity Bar] を選択して開きます。
[ Azure にサインイン] を 選択して、Azure アカウントにサインインします。 Azure アカウントがまだない場合は、[Azure アカウントの作成] を選択して 作成します。指定した手順に従ってアカウントを設定します。
サインインすると、拡張機能に Azure ストレージアカウントが表示されます。ストレージアカウントがまだない場合は、コマンドパレットの [ ストレージアカウントの作成 ] オプションを使用して作成します。 "a-z" と '0-9' のみを使用して、ストレージアカウントにグローバルに一意の名前を付けます。既定では、ストレージアカウントと同じ名前のリソースグループが作成されることに注意してください。米国西部にストレージアカウントが自動的に配置されます。これは、 Azure アカウントを使用してオンラインで調整できます。
ストレージアカウントを右クリック (または選択して長押し) し、[ 静的 Web サイトの構成] を選択します。インデックスドキュメント名と 404 ドキュメント名を入力するように求められます。インデックスドキュメント名を既定の index.html から taskpane.html に変更します。また、404 ドキュメント名を変更することもできますが、必須ではありません。
ストレージアカウントをもう一度右クリック (または長押し) し、今度は [ 静的 Web サイトの参照] を選択します。開いたブラウザーウィンドウから、Web サイトの URL をコピーします。
プロジェクトのマニフェストファイル (manifest.xml) を開き、localhost URL ( https://localhost:3000 など) へのすべての参照をコピーした URL に変更します。このエンドポイントは、新しく作成されたストレージアカウントの静的 Web サイト URL です。マニフェストファイルに変更を保存します。
コマンドラインプロンプトまたはターミナルウィンドウを開き、アドインプロジェクトのルートディレクトリに移動します。次のコマンドを実行して、運用環境のデプロイ用にすべてのファイルを準備します。
```
npm run build
```
ビルドが完了すると、アドインプロジェクトのルートディレクトリにある dist フォルダーに、以降の手順で展開するファイルが含まれます。
VS Code でエクスプローラーに移動し、 dist フォルダーを右クリック (または長押し) し、[ Azure Storage 経由で静的 Web サイトにデプロイ] を選択します。メッセージが表示されたら、前に作成したストレージアカウントを選択します。
デプロイが完了したら、前に作成したストレージアカウントを右クリック (または選択して保持) し、[ 静的 Web サイトの参照] を選択します。これにより、静的 Web サイトが開き、作業ウィンドウが表示されます。
最後に、マニフェストファイルをサイドロードすると、展開した静的 Web サイトからアドインが読み込まれます。

Excel 用のカスタム関数をデプロイする

アドインにカスタム関数がある場合は、Azure Storage アカウントでそれらを有効にする手順がいくつかあります。まず、CORS を有効にして、Office がfunctions.json ファイルにアクセスできるようにします。

Azure ストレージアカウントを右クリック (または選択して長押し) し、[ ポータルで開く] を選択します。
[設定] グループで、[ リソース共有 (CORS)] を選択します。検索ボックスを使用してこれを見つけることもできます。

次の設定で新しい CORS ルールを作成します。

プロパティ	値
許可される配信元	*
許可されるメソッド	GET
許可されるヘッダー	*
公開されているヘッダー	Access-Control-Allow-Origin
最大年齢	200

[保存] を選択します。

注意

この CORS 構成では、サーバー上のすべてのファイルがすべてのドメインで一般公開されていることを前提としています。

次に、JSON ファイルの MIME の種類を追加します。

という名前の /src フォルダーに新しいファイル web.config作成します。

次の XML を挿入し、ファイルを保存します。

<?xml version="1.0"?>
<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>
  </system.webServer>
</configuration>

webpack.config.js ファイルを開きます。
ビルドの実行時に web.config をバンドルにコピーする plugins の一覧に次のコードを追加します。
```
new CopyWebpackPlugin({
  patterns: [
  {
    from: "src/web.config",
    to: "src/web.config",
  },
 ],
}),
```
コマンドラインプロンプトを開き、アドインプロジェクトのルートディレクトリに移動します。次に、次のコマンドを実行して、すべてのファイルをデプロイ用に準備します。
```
npm run build
```
ビルドが完了すると、アドインプロジェクトのルートディレクトリ内の dist フォルダーに、展開するファイルが含まれます。
デプロイするには、VS Code Explorer で dist フォルダーを右クリック (または選択して保持) し、[ Azure Storage 経由で静的 Web サイトにデプロイ] を選択します。メッセージが表示されたら、前に作成したストレージアカウントを選択します。 dist フォルダーを既にデプロイしている場合は、Azure ストレージ内のファイルを最新の変更で上書きするかどうかを確認するメッセージが表示されます。

更新プログラムの展開

前に説明したのと同じ方法で、Web アプリケーションに更新プログラムをデプロイします。マニフェストを変更するには、マニフェストをユーザーに再配布する必要があります。これを行うプロセスは、発行方法によって異なります。アドインの更新の詳細については、「 Office アドインを管理する」を参照してください。

次の方法で共有

Visual Studio Code で開発されたアドインを発行する

他のユーザーがアクセスできるようにアドインを発行する

Visual Studio コードを使用して発行する

Excel 用のカスタム関数をデプロイする

更新プログラムの展開

関連項目

その他のリソース