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

[アーティクル]
07/01/2023

この記事では、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 ジェネレーターを使用して作成され、XML 形式のマニフェストを使用するプロジェクトでのみ機能します。 Teams Toolkit を使用してアドインを作成した場合、または Yeoman ジェネレーターを使用してアドインを作成し、Microsoft 365 の統合マニフェストを使用している場合は適用されません。

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

更新プログラムの展開

アドインで機能を追加したりバグを修正したりするときは、更新プログラムをデプロイする必要があります。アドインが 1 人以上の管理者によって組織に展開されている場合、マニフェストの変更によっては、管理者が更新プログラムに同意する必要があります。同意が付与されるまで、ユーザーはアドインからブロックされます。次のマニフェストの変更では、管理者がもう一度同意する必要があります。

要求されたアクセス許可に対する変更。「アドインでの API 使用のアクセス許可の要求」と「Outlook アドインのアクセス許可について」を参照してください。
追加または変更されたスコープ。 (アドインが Microsoft 365 の統合マニフェストを使用している場合は適用されません)。
追加または変更された Outlook イベント。

注:

マニフェストに変更を加えるたびに、マニフェストのバージョン番号を上げる必要があります。

アドインで XML マニフェストを使用する場合は、「 Version 要素」を参照してください。
アドインで統合マニフェストを使用する場合は、「 version プロパティ」を参照してください。

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

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

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

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

更新プログラムの展開

関連項目

フィードバック

その他のリソース