Excel 作業ウィンドウ アドインを作成する

この記事では、Excel の作業ペインアドインを作成するプロセスについて説明します。 Office アドイン開発キットまたは Yeoman ジェネレーターを使用して Office アドインを作成します。 使用する方のタブを選択し、手順に従ってアドインを作成してローカルでテストします。 Visual Studio Code 内でアドイン プロジェクトを作成する場合は、Office アドイン開発キットをお勧めします。

Office アドイン開発キット

前提条件

• Visual Studio Code をダウンロードしてインストールします。
• Node.js (最新 LTS バージョン)。 Node.js サイトにアクセスして、オペレーティング システムに適したバージョンをダウンロードしてインストールします。 これらのツールが既にインストールされているかどうかを確認するには、 node -v コマンドを実行し、ターミナルで npm -v します。
• Office は Microsoft 365 サブスクリプションに接続されています。 Microsoft 365 開発者プログラムを通じてMicrosoft 365 E5開発者サブスクリプションの対象となる場合があります。詳細については、「FAQ」を参照してください。 または、 1 か月間の無料試用版にサインアップ するか、 Microsoft 365 プランを購入することもできます。

アドイン プロジェクトの作成

次のボタンをクリックして、Office アドイン開発キット for Visual Studio Code を使用してアドイン プロジェクトを作成します。 拡張機能をまだインストールしていない場合は、インストールするように求められます。 プロジェクトの説明を含むページが Visual Studio Code で開きます。

Visual Studio Code でアドインを作成する

プロンプトが表示されたページで、[ 作成 ] を選択してアドイン プロジェクトを作成します。 開いた [ワークスペース フォルダー ] ダイアログで、プロジェクトを作成するフォルダーを選択します。

Office アドイン開発キットによってプロジェクトが作成されます。 次に、 2 番目 の Visual Studio Code ウィンドウでプロジェクトを開きます。 元の Visual Studio Code ウィンドウを閉じます。

注:

VSCode Insiders を使用している場合、または VSCode でプロジェクト ページを開くときに問題が発生した場合は、次の 手順に従って拡張機能を手動でインストールし、サンプル ギャラリーでサンプルを見つけます。

プロジェクトを確認する

Office アドイン開発キットで作成したアドイン プロジェクトには、基本的な作業ウィンドウ アドインのサンプル コードが含まれています。 アドイン プロジェクトの構成要素を確認したい場合は、コード エディターでプロジェクトを開き、以下に一覧表示されているファイルを確認します。 アドインを試す準備ができたら、次のセクションに進みます。

1. プロジェクトのルート ディレクトリにある ./manifest.xml または ./manifest.json ファイルは、アドインの設定と機能を定義します。
2. ./src/taskpane/taskpane.htmlファイルには、作業ペイン用のHTMLマークアップが含まれています。
3. ./src/taskpane/taskpane.cssファイルには、作業ペインのコンテンツに適用されるCSSが含まれています。
4. ./src/taskpane/taskpane.js ファイルには、作業ウィンドウと Office クライアント アプリケーションの間のやり取りを容易にする Office JavaScript API コードが含まれています。

試してみる

1. アクティビティ バーの [Office アドイン開発キット] アイコンを選択して拡張機能を開きます。
2. [プレビュー] [Office アドインのプレビュー] (F5) を選択します
3. [クイック 選択] メニューで、オプション {Office Application} Desktop (Edge Chromium) を選択します。ここで、'{Office Application}' は "Excel" や "Word" などの適切なアプリケーションです。 これにより、アドインが起動し、コードがデバッグされます。

開発キットは、デバッグを開始する前に前提条件が満たされていることを確認します。 お使いの環境に問題がある場合は、ターミナルで詳細情報を確認してください。 このプロセスの後、Office デスクトップ アプリケーションが起動し、アドインをサイドロードします。 プロジェクトを初めて実行するときは、依存関係のインストールに数分かかる場合があることに注意してください。 メッセージが表示されたら、証明書をインストールする必要があります。

Office アドインのテストを停止する

アドインのテストとデバッグが完了したら、次の手順に従って 常に アドインを閉じます。 (Office アプリケーションまたは Web サーバー ウィンドウを閉じても、アドインの登録が確実に解除されません)。

1. アクティビティ バーの [Office アドイン開発キット] アイコンを選択して拡張機能を開きます。
2. [ Office アドインのプレビューの停止] を選択します。 これにより、Web サーバーが閉じられ、レジストリとキャッシュからアドインが削除されます。
3. Office アプリケーション ウィンドウを閉じます。

トラブルシューティング

アドインの実行に問題がある場合は、次の手順を実行します。

• Office の開いているインスタンスをすべて閉じます。
• Office アドインのプレビューを停止する Office アドイン開発キット拡張機能オプション を使用して 、アドイン用に開始した前の Web サーバーを閉じます。

Office アドインの開発エラーのトラブルシューティングに関する記事には、一般的な問題の解決策が含まれています。 それでも問題が解決しない場合は、 GitHub の問題を作成 してください。

Office on the webでアドインを実行する方法については、「Office アドインをOffice on the webにサイドロードする」を参照してください。

古いバージョンの Office でのデバッグの詳細については、「Microsoft Edge 従来版の開発者ツールを使用したアドインのデバッグ」を参照してください。

Yeoman ジェネレーター

前提条件

• Node.js (最新 LTS バージョン)。 Node.js サイトにアクセスして、オペレーティング システムに適したバージョンをダウンロードしてインストールします。

• 最新バージョンの Yeoman と Office アドイン用の Yeoman ジェネレーター。これらのツールをグローバルにインストールするには、コマンド プロンプトから次のコマンドを実行します。

  npm install -g yo generator-office
  

  注:

  Yeomanのジェネレーターを過去に取付けている場合でも、npmからのパッケージを最新のバージョンにすることをお勧めします。

• Microsoft 365 サブスクリプションに接続されている Office (Office for the web を含む)。

  注:

  まだ Office をお持ちでない場合は、Microsoft 365 開発者プログラムを通じてMicrosoft 365 E5開発者サブスクリプションを受ける資格があります。詳細については、FAQ を参照してください。 または、 1 か月間の無料試用版にサインアップ するか、 Microsoft 365 プランを購入することもできます。

アドイン プロジェクトの作成

次のコマンドを実行し、Yeoman ジェネレーターを使用してアドイン プロジェクトを作成します。 プロジェクトを含むフォルダーが現在のディレクトリに追加されます。

yo office

注:

yo officeコマンドを実行すると、Yeoman のデータ収集ポリシーと Office アドイン CLI ツールに関するプロンプトが表示される場合があります。 提供された情報を使用して、必要に応じてプロンプトに応答します。

プロンプトが表示されたら、以下の情報を入力してアドイン プロジェクトを作成します。

• プロジェクトの種類を選択します。Office Add-in Task Pane project
• スクリプトの種類を選択します。Javascript
• アドインに何の名前を付けたいですか?My Office Add-in
• サポートする Office クライアント アプリケーションはどれですか?Excel

ウィザードを完了すると、ジェネレーターによってプロジェクトが作成されて、サポートしているノード コンポーネントがインストールされます。

プロジェクトを確認する

Yeoman ジェネレーターで作成したアドイン プロジェクトには、基本的なアドインの作業ウィンドウが含まれています。 アドイン プロジェクトの構成要素を確認したい場合は、コード エディターでプロジェクトを開き、以下に一覧表示されているファイルを確認します。 アドインを試す準備ができたら、次のセクションに進みます。

• プロジェクトのルート ディレクトリにある ./manifest.xml または manifest.json ファイルは、アドインの設定と機能を定義します。
• ./src/taskpane/taskpane.htmlファイルには、作業ペイン用のHTMLマークアップが含まれています。
• ./src/taskpane/taskpane.cssファイルには、作業ペインのコンテンツに適用されるCSSが含まれています。
• ./src/taskpane/taskpane.js ファイルには、作業ウィンドウと Office クライアント アプリケーションの間のやり取りを容易にする Office JavaScript API コードが含まれています。

試してみる

1. プロジェクトのルート フォルダーに移動します。

   cd "My Office Add-in"
   

2. 以下の手順を実行し、ローカル Web サーバーを起動してアドインのサイドロードを行います。

   注:

   • Office アドインでは、開発中でも HTTP ではなく HTTPS を使用する必要があります。 次のいずれかのコマンドを実行した後に証明書のインストールを求められた場合は、Yeoman ジェネレーターが提供する証明書をインストールするプロンプトに同意します。 変更を行うには、管理者としてコマンド プロンプトまたはターミナルを実行する必要がある場合もあります。

   • 初めてコンピューターで Office アドインを開発する場合は、コマンド ラインで、Microsoft Edge WebView にループバックの除外を許可するように求められる場合があります (「Microsoft Edge WebView の localhost ループバックを許可する」)。 メッセージが表示されたら、「 Y 」と入力して除外を許可します。 除外を許可するには管理者特権が必要であることに注意してください。 許可されたら、(マシンから除外を削除しない限り) 今後 Office アドインをサイドロードするときに、除外を求められません。 詳細については、 Office アドインを読み込むか Fiddler を使用する場合は、「localhost からこのアドインを開くことができない」を参照してください。

     

   • Yeoman ジェネレーターを初めて使用して Office アドインを開発すると、既定のブラウザーでウィンドウが開き、Microsoft 365 アカウントにサインインするように求められます。 サインイン ウィンドウが表示されない場合、サイドローディングまたはログイン タイムアウト エラーが発生した場合は、 atk auth login m365を実行します。

   ヒント

   Mac でアドインをテストしている場合は、先に進む前に次のコマンドを実行してください。 このコマンドを実行すると、ローカル Web サーバーが起動します。

   npm run dev-server
   

   • Excel でアドインをテストするには、プロジェクトのルート ディレクトリから次のコマンドを実行します。 これにより、ローカル Web サーバーが起動し、アドインが読み込まれた状態で Excel が開きます。

     npm start
     

   • ブラウザー上の Excel でアドインをテストするには、プロジェクトのルート ディレクトリから次のコマンドを実行します。 このコマンドを実行すると、ローカル Web サーバーが起動します。 "{url}" を、アクセス許可を持っている OneDrive または SharePoint ライブラリ上の Excel ドキュメントの URL に置き換えます。

     注:

     Mac で開発している場合は、 {url} を単一引用符で囲みます。 Windows ではこれを行 わないでください 。

     npm run start -- web --document {url}
     

     次に例を示します。

     • npm run start -- web --document https://contoso.sharepoint.com/:t:/g/EZGxP7ksiE5DuxvY638G798BpuhwluxCMfF1WZQj3VYhYQ?e=F4QM1R
     • npm run start -- web --document https://1drv.ms/x/s!jkcH7spkM4EGgcZUgqthk4IK3NOypVw?e=Z6G1qp
     • npm run start -- web --document https://contoso-my.sharepoint-df.com/:t:/p/user/EQda453DNTpFnl1bFPhOVR0BwlrzetbXvnaRYii2lDr_oQ?e=RSccmNP

     ドキュメントにアドインがサイドロードされない場合は、「アドインを手動でサイドロードしてOffice on the webする」の手順に従って手動でサイドロードします。

3. Excel で [ ホーム ] タブを選択し、リボンの [ タスクウィンドウの表示 ] ボタンを選択してアドイン作業ウィンドウを開きます。

   

4. ワークシート内で任意のセルの範囲を選択します。

5. 作業ウィンドウの下部で、[実行] リンクを選択して、選択範囲の色を黄色に設定します。

   

6. ローカル Web サーバーを停止してアドインをアンインストールする場合は、該当する手順に従います。

   • サーバーを停止するには、次のコマンドを実行します。 npm startを使用した場合は、次のコマンドによってアドインもアンインストールされます。

     npm stop
     

   • アドインを手動でサイドロードした場合は、「 サイドロードされたアドインを削除する」を参照してください。

トラブルシューティング

• 「開発環境のセットアップ」の手順に従って、環境が Office 開発の準備ができていることを確認 します。

• 一部のサンプル コードでは、ES6 JavaScript を使用しています。 これは、Trident (インターネット エクスプローラー 11) ブラウザー エンジンを使用する古いバージョンの Office と互換性がありません。 アドインでこれらのプラットフォームをサポートする方法については、「 古い Microsoft Webview と Office バージョンをサポートする」を参照してください。 開発に使用する Microsoft 365 サブスクリプションがまだない場合は、Microsoft 365 開発者プログラムを通じてMicrosoft 365 E5開発者サブスクリプションを受ける資格があります。詳細については、FAQ を参照してください。 または、 1 か月間の無料試用版にサインアップ するか、 Microsoft 365 プランを購入することもできます。

• Yo Office が実行する自動 npm install ステップが失敗する可能性があります。 npm startを実行しようとしたときにエラーが表示された場合は、コマンド プロンプトで新しく作成したプロジェクト フォルダーに移動し、npm installを手動で実行します。 Yo Office の詳細については、「 Yeoman ジェネレーターを使用して Office アドイン プロジェクトを作成する」を参照してください。
• Yeoman ジェネレーターまたはプロジェクトの npm install を実行すると、警告が生成される場合があります。 ほとんどの場合、これらの警告は無視しても問題ありません。 依存関係が非推奨になり、プロジェクトが依存する他のパッケージで依存関係がサポートされない場合があります。 これらの警告を解決する場合は、 npm-check-updates ツールを使用します。
  • ルート プロジェクト ディレクトリ内のコマンド プロンプトで、 npm i -g npm-check-updatesを実行します。 これにより、ツールがグローバルにインストールされます。
  • ncu -u を実行します。 これにより、すべてのパッケージのレポートと、更新されるバージョンが表示されます。
  • npm installを実行して、すべてのパッケージを更新します。

次の手順

おめでとうございます! これで Excel 作業ウィンドウ アドインを作成できました。 次に、Excel アドインの機能の詳細説明と、より複雑なアドインを作成する方法について、「Excel アドインのチュートリアル」をご覧ください。

コード サンプル

• Excel "Hello world" アドイン: マニフェスト、HTML Web ページ、ロゴのみを含む単純な Office アドインを構築する方法について説明します。

関連項目

• Office アドイン プラットフォームの概要
• Office アドインを開発する
• Office アドインの Excel JavaScript オブジェクト モデル
• Excel アドインのコード サンプル
• Excel JavaScript API リファレンス
• Visual Studio コードを使用して発行する