次の方法で共有

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

  • [アーティクル]

このガイドは、クイック スタートまたはチュートリアルに従って 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 など、多くの便利なアドイン開発ツールがあります。 選択できるプロジェクト作成ツールとスキャフォールディング ツールには、Office Yeoman Generator ("Yo Office" とも呼ばれます) というコマンド ライン ツールと、Teams Toolkit と呼ばれる Visual Studio Code の拡張機能の 2 つがあります。
  • Visual Studio 環境: 開発用コンピューターが Windows であり、.NET ベースの言語とフレームワーク (ASP.NET など) を使用してアドインのサーバー側を開発する場合にのみ、この環境を選択します。 Visual Studio のアドイン プロジェクト テンプレートは、Node.js 環境のテンプレートほど頻繁に更新されません。 詳細については、「 Visual Studio 環境 」タブを参照してください。

注:

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

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

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

  • Node.js

  • npm

  • 任意のコード エディター

  • プロジェクト作成ツール:

    • Office Yeoman ジェネレーター (Yo Office)
    • Teams Toolkit (Visual Studio Code が必要)

  • 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 を使用することができます。

プロジェクト作成ツールをインストールする

Office Yeoman Generator (Yo Office) または Visual Studio Code 用 Teams Toolkit 拡張機能を使用して、Office アドイン プロジェクトを作成できます。

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

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

npm install -g yo generator-office

Teams Toolkit のインストール

Visual Studio Code をインストールし、「Teams Toolkit のインストール」の説明に従って最新バージョンの Teams Toolkit をインストールします。

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

Microsoft では、Office JavaScript ライブラリを使用するときに一般的なエラーをキャッチするのに役立つ JavaScript リンターを提供しています。 Office アドイン用 Yeoman ジェネレーターまたは Teams Toolkit を使用してアドイン プロジェクトを作成すると、リンターがインストールされ、自動的に構成されます。 [ リンターの実行] に進む。

プロジェクトを手動で作成した場合は、次の手順でリンターをインストールして構成します。

  1. プロジェクトのルートで、次の 2 つのコマンドを実行します ( Node.js と npm をインストールした後)。

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

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

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

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

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

リンターを実行する

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

npm run lint

スクリプト ラボのインストール

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

注:

Chrome や Edge などの Chromium ベースのブラウザーのバージョン 115 以降では、 ストレージパーティション分割 を有効にして、特定のサイドチャネルクロスサイト追跡を防ぎます ( 「Microsoft Edge ブラウザー ポリシー」も参照)。 この変更により、Outlook on the web でスクリプト ラボ スニペットが実行されなくなります。

次の手順

独自のアドインを作成するか、 スクリプト ラボ を使用して組み込みのサンプルを試してみてください。

Office アドインを作成する

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

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

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

関連項目