開発環境をセットアップする

  • [アーティクル]

このガイドは、クイック スタートまたはチュートリアルに従って Office アドインを作成できるようにツールを設定するのに役立ちます。 既にインストールされている場合は、この Excel Reactクイック スタートなど、クイック スタートを開始する準備が整います。

Microsoft 365 を入手する

Microsoft 365 アカウントが必要です。 Microsoft 365 開発者プログラムを通じて、すべての Office アプリを含むMicrosoft 365 E5開発者サブスクリプションの対象となる場合があります。詳細については、「FAQ」を参照してください。 または、 1 か月間の無料試用版にサインアップ するか、 Microsoft 365 プランを購入することもできます。

環境をインストールする

選択できる開発環境は 2 種類あります。 2 つの環境で作成される Office アドイン プロジェクトのスキャフォールディングは異なるため、複数のユーザーがアドイン プロジェクトで作業する場合は、すべて同じ環境を使用する必要があります。

  • Node.js 環境: 推奨されます。 この環境では、ツールがインストールされ、コマンド ラインで実行されます。 アドインの Web アプリケーション 部分のサーバー側は JavaScript または TypeScript で記述され、Node.js ランタイムでホストされます。 この環境には、Office リンターや WebPack と呼ばれる bundler/task-runner など、多くの便利なアドイン開発ツールがあります。 プロジェクトの作成とスキャフォールディング ツールである Yo Office は頻繁に更新されます。
  • Visual Studio 環境: 開発用コンピューターが Windows であり、.NET ベースの言語とフレームワーク (ASP.NET など) を使用してアドインのサーバー側を開発する場合にのみ、この環境を選択します。 Visual Studio のアドイン プロジェクト テンプレートは、Node.js 環境のテンプレートほど頻繁に更新されません。 クライアント側コードは、組み込みの Visual Studio デバッガーではデバッグできませんが、ブラウザーの開発ツールを使用してクライアント側のコードをデバッグできます。 詳細については、「 Visual Studio 環境 」タブを参照してください。

注:

Visual Studio for Macには Office アドイン用のプロジェクト スキャフォールディング テンプレートが含まれていないため、開発用コンピューターが Mac の場合は、Node.js 環境で作業する必要があります。

選択した環境のタブを選択します。

インストールするメイン ツールは次のとおりです。

  • Node.js
  • npm
  • 任意のコード エディター
  • Yo Office
  • Office JavaScript リンター

このガイドでは、コマンド ライン ツールの使用方法を把握していることを前提としています。

Node.js と npm をインストールする

Node.js は、最新の Office アドインの開発に使用する JavaScript ランタイムです。

web サイトから最新の推奨バージョンをダウンロードして、Node.js をインストールします。 オペレーティング システムのインストール手順に従います。

npm は、Office アドインの開発に使用されるパッケージをダウンロードするオープンソースソフトウェア レジストリです。通常、Node.js をインストールすると自動的にインストールされます。 npm が既にインストールされていて、インストールされているバージョンが表示されている場合にチェックするには、コマンド ラインで次を実行します。

npm -v

何らかの理由で手動でインストールする場合は、コマンド ラインで次を実行します。

npm install npm -g

ヒント

ノード バージョン マネージャーを使用して、複数のバージョンの Node.js と npm を切り替えることができますが、これは厳密には必要ありません。 これを行う方法の詳細については、 npm の手順に関するページを参照してください。

コード エディターのインストール

以下のような Web パーツを構築するのにクライアント側の開発をサポートしている任意のコード エディター、または IDE を使用することができます。

Yeoman ジェネレーターをインストールする - Yo Office

プロジェクトの作成とスキャフォールディング ツールは、 Office アドイン用の Yeoman ジェネレーターであり、 Yo Office と呼ばれます。 Yeoman と Yo Office の最新バージョンをインストールする必要があります。 以上のツールをグローバルにインストールするには、コマンド プロンプトから次のコマンドを実行します。

npm install -g yo generator-office

Office JavaScript リンターをインストールして使用する

Microsoft では、Office JavaScript ライブラリを使用するときに一般的なエラーをキャッチするのに役立つ JavaScript リンターを提供しています。 リンターをインストールするには、次の 2 つのコマンドを実行 します (Node.js と npm をインストールした後)。

npm install office-addin-lint --save-dev
npm install eslint-plugin-office-addins --save-dev

Office アドイン ツール用 Yeoman ジェネレーターを使用して Office アドイン プロジェクトを作成する場合は、残りのセットアップが行われます。 エディターのターミナル (Visual Studio Code など) またはコマンド プロンプトで、次のコマンドを使用してリンターを実行します。 リンターによって検出された問題はターミナルまたはプロンプトに表示され、Visual Studio Code などのリンター メッセージをサポートするエディターを使用している場合は、コードにも直接表示されます。 (Yeoman ジェネレーターのインストールについては、「 Office アドイン用 Yeoman ジェネレーター」を参照してください)。

npm run lint

アドイン プロジェクトが別の方法で作成された場合は、次の手順を実行します。

  1. プロジェクトのルートで、 .eslintrc.jsonという名前のテキスト ファイルを作成します (まだ存在しない場合)。 と という名前pluginsextendsのプロパティがあることを確認します。両方の型配列です。 配列には plugins を含める "office-addins" 必要があり、配列には を extends 含める "plugin:office-addins/recommended"必要があります。 次に簡単な例を示します。 .eslintrc.json ファイルには、2 つの配列の追加のプロパティと追加のメンバーが含まれる場合があります。

    {
  "plugins": [
    "office-addins"
  ],
  "extends": [
    "plugin:office-addins/recommended"
  ]
}

  2. プロジェクトのルートで、 package.json ファイルを開き、配列に次の scripts メンバーがあることを確認します。

    "lint": "office-addin-lint check",

  3. エディターのターミナル (Visual Studio Code など) またはコマンド プロンプトで、次のコマンドを使用してリンターを実行します。 リンターによって検出された問題はターミナルまたはプロンプトに表示され、Visual Studio Code などのリンター メッセージをサポートするエディターを使用している場合は、コードにも直接表示されます。

    npm run lint

Script Labをインストールする

Script Labは、Office JavaScript ライブラリ API を呼び出すコードをすばやくプロトタイプ化するためのツールです。 Script Lab自体が Office アドインであり、Script Labで AppSource からインストールできます。 Excel、PowerPoint、Wordのバージョンと、Outlook 用の別のバージョンがあります。 Script Labの使用方法については、「Script Labを使用して Office JavaScript API を探索する」を参照してください。

注:

Chrome や Edge などの Chromium ベースのブラウザーのバージョン 115 以降では、ストレージのパーティション分割がテストされ、特定のサイド チャネルクロスサイト追跡を防ぎます (「Microsoft Edge ブラウザー ポリシー」も参照)。 この変更により、Script Lab スニペットがOutlook on the webで実行されなくなります。 これを回避するには、ブラウザー で [chrome://flags ] または [edge://flags ] に移動し、[ サード パーティの記憶域パーティション分割 (#third-party-storage-partitioning)] フラグを[無効] に設定します。

次の手順

独自のアドインを作成するか、Script Labを使用して組み込みのサンプルを試してみてください。

Office アドインを作成する

5 分間のクイック スタートを完了することで、Excel、OneNote、Outlook、PowerPoint、Project、または Word 用の基本的なアドインを簡単に作成することができます。 以前にクイック スタートを完了している場合で、より複雑なアドインを作成したい場合は、チュートリアルを試してみてください。

Script Lab を使用して API を調べる

Office JavaScript API でどのような機能が提供されているかを把握するには、Script Lab に組み込まれているサンプルのライブラリを参照してください。

関連項目