次の方法で共有

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

  • [アーティクル]

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

Microsoft 365 を入手する

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

環境をインストールする

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

  • Node.js 環境: 推奨されます。 この環境では、ツールがインストールされ、コマンド ラインで実行されます。 アドインの Web アプリケーション 部分のサーバー側は JavaScript または TypeScript で記述され、Node.js ランタイムでホストされます。 この環境には、Office リンターや webpack と呼ばれる bundler/task-runner など、多くの便利なアドイン開発ツールがあります。 プロジェクトの作成とスキャフォールディング ツールは、Office Yeoman Generator ("Yo Office" とも呼ばれます) と呼ばれるコマンド ライン ツールですが、次のオプションで説明されている Visual Studio Code 拡張機能を引き続き使用できます。
  • Visual Studio Code: Visual Studio Code を使用し、コマンド ライン ツールではなく拡張機能からプロジェクトを作成する場合は、この環境を選択します。 プロジェクトの作成ツールとスキャフォールディング ツールは、Teams Toolkit または Office アドイン開発キット拡張機能です。
  • 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)
  • 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 リンターを提供しています。 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

Script Labをインストールする

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

次の手順

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

Office アドインを作成する

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

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

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

関連項目