Office アドインの作成: ツール、マニフェスト、展開

  • 最新の Office アドインは、明確に定義されたマニフェストと、Office 用の JavaScript API を使用する Web アプリケーションに基づいています。
  • これらを開発するためのツールは複数あり、Yeoman、Visual Studio、Agents Toolkit、Script Lab など、さまざまなプロファイルに適合しています。
  • セキュリティ (HTTPS、許可されたドメイン、権限、キャッシュ) と要件セットの使用は、互換性と良好なパフォーマンスを確保するための鍵となります。

オフィス用アドイン

Office のアドインを作成する これは、Word、Excel、Outlook、PowerPoint などのアプリケーションを拡張するための非常に強力な方法になりました。 Microsoft 365 従来のデスクトップアドインを開発する必要はありません。これらの新しいアドインは、標準のWebテクノロジとOffice用のJavaScript APIに基づいており、組織全体に最新の安全で簡単に展開できるエクスペリエンスを作成できます。

以下の行で、非常に詳細なガイドを見つけることができます。 開発ツール、マニフェストタイプ、利用可能なAPI、およびデプロイメントオプションMicrosoftの公式ドキュメントを統合します。各要素の機能と各ステップで必要な技術的決定を理解しながら、ゼロから実用的なアドインを作成できるようになることが目的です。

最新の Office アドインとは何ですか? また、どのような構造になっていますか?

最新のOfficeアドイン これらは、デスクトップ、Web、そして場合によってはモバイルでも、Word、Excel、PowerPoint、OneNote、Outlook、Project に共通する Office アドイン プラットフォームに依存しています。これらはすべて、明確に区別された 2 つの部分で構成される同じ基本アーキテクチャを共有しています。

最初の作品は 補完の宣言このファイルはアドインの「ID カード」として機能します。メタデータ(ID、名前、バージョン、言語)、アドインを使用できる Office アプリケーション、必要なアクセス許可、リボンに追加するコマンド、使用するアイコン、Web アプリケーションがホストされている場所、およびアドインをアクティブ化するコンテキスト(たとえば、Outlook では特定のルールを満たすメッセージまたは予定のみ)が宣言されます。

2つ目の作品は Webアプリケーション このアプリケーションは、ユーザーインターフェイスとビジネスロジックを提供します。HTML、CSS、JavaScript(またはTypeScript)で構成され、Office HTMLコンテナー(作業ウィンドウ、コンテンツアドイン、またはダイアログボックス)内で実行されます。そこから、office.jsライブラリを使用してドキュメントの読み取りと書き込み、外部サービスの呼び出し、認証の処理、ダイアログボックスの表示、その他最新のWebアプリに典型的なタスクを実行します。

Office アドインを作成するためのツール

Office アドインを作成するためのツール

アドインプロジェクトを開始する方法は一つではありません。Microsoftは いくつかの公式ツールこれらのツールは、Visual Studio テンプレートを好むユーザーから、Node.js や Visual Studio Code を日常的に使用するユーザーまで、さまざまなユーザープロファイルに対応しています。また、VBA 用の UI エディターなど、サードパーティ製のツールやより専門的なツールも存在します。

Office アドイン用の Yeoman ジェネレーター

Office用のYeomanジェネレータはおそらく Web 開発者にとって最も柔軟なオプションです。 Node.jsベースのプロジェクトを作成し、編集することができます。 Visual Studio Code または、ご希望の発行元にお問い合わせください。ウィザードでは、一連の質問に沿って、アドインの種類(作業ウィンドウ、コンテンツアドイン、カスタム関数、Outlook など)と対象アプリケーションを選択できます。

このジェネレータを使えば プロジェクトを作成する Excel、OneNote、Outlook、PowerPoint、Project、Word、カスタム Excel 関数。 さらに、HTML、CSS、JavaScript/TypeScript を使用したシンプルなスタック、またはプロジェクト全体の構造がすでに用意された、JavaScript または TypeScript を使用した React ベースのアーキテクチャを選択できます。

Visual Studio for Office プロジェクト

もっと快適に動けるなら .NET環境でVisual Studio には、Office アドイン専用のテンプレートが含まれています。これらのテンプレートは主に Excel、Outlook、Word、PowerPoint をカバーしており、アドイン マニフェスト、Web アプリ、そしてオプションで関連するバックエンド プロジェクトを含む完全なソリューションを作成します。

Visual Studioプロジェクト これも HTML、CSS、JavaScript に基づいていますが、従来の Microsoft エコシステムと統合されています。統合デバッグ、公開、パッケージ化など。既に Visual Studio でエンタープライズ ソリューションを使用しており、すべてを同じ IDE に一元管理したい場合に適しています。

Microsoft 365 エージェント ツールキットと Office アドイン開発キット

Microsoft 365 エージェント ツールキット このツールは、従来のアドインの枠を超え、ボット、Teams 拡張機能、アドインを組み合わせて、Microsoft 365 エコシステム向けのあらゆる種類の拡張機能を作成できるように設計されています。このツールを使用すると、より広範な Microsoft 365 アプリケーションに適合する Office アドイン プロジェクトを生成できます。

Office アドイン開発キット これは、日々の作業を大幅に簡素化するVisual Studio Code拡張機能です。VS Code内から、新しいアドインプロジェクトを作成したり、すぐにテスト可能なコードサンプルを読み込み、エディターを離れることなく開発ライフサイクル全体を管理できます。この拡張機能は、統合マニフェストとアドイン専用マニフェストの両方に対応しています。

マニフェスト: アドイン構成の核心

各Officeアドインは、 マニフェストファイル これにより、アプリケーションはアドインをどのように読み込み、どのようなインターフェースオプションを公開し、どのような権限を要求するかが決まります。2つの主要なマニフェストテンプレートがあり、どちらを選択するかによって、アドインを他のMicrosoft 365拡張機能と統合する方法が決まります。

マニフェストの種類:補足のみのマニフェストと統合マニフェスト

  • 補完のみのマニフェスト。 Excel、OneNote、Outlook、PowerPoint、Project、Word などの Office アドインの標準的なフォーマットです。XML で記述されており、他の種類のアプリケーションと混在させることなく、アドインの記述のみに重点を置いています。
  • Microsoft 365 の統一されたマニフェスト。 Teams アプリケーションで従来使用されてきた JSON 形式のマニフェスト モデルの進化形です。この形式により、Office アドイン、Teams 拡張機能など、さまざまな種類の Microsoft 365 拡張機能を 1 つのアプリケーションにパッケージ化できます。

どちらの場合も構成ロジックは同様である一意の識別子(通常はGUID)、バージョン、表示名、説明、サポートされる言語、アイコン、権限の種類(ドキュメントの読み取りまたは読み取り/書き込みなど)、インターフェース構造(タブ、グループ、リボンボタン)を定義します。また、Webアプリケーションの起動URLや、ExcelやWordのキーボードショートカット、Outlookのトリガールール、パネルやコンテンツアドインのサイズなど、追加の設定も指定します。

マニフェストで宣言された主要要素

追加 基本メタデータマニフェストには、アドインがOfficeエクスペリエンスにどのように統合されるかを詳細に記述する必要があります。これにはブランドイメージやリボンコマンドアイコンなどが含まれますが、これらはキャッシュ(HTTPヘッダー)を許可するサーバーでホストする必要があります。 Cache-Control: no-cache または生産用に同様のもの)。

もう一つの重要な点は セキュリティWebアプリケーションまたはアドインのリソースを指すすべてのURLはHTTPSを使用する必要があります。一部の開発シナリオではHTTPまたは自己署名証明書が許可されていますが、Office on the webでアドインを実行したり、Microsoft Marketplaceで公開したりする場合は、混在コンテンツの警告を回避し、転送中のデータ保護を確保するためにSSLが必須です。

アドオンをMicrosoft Marketplaceを通じて配布する予定の場合は、マニフェストに以下を含める必要があります。 一意の GUID に加えて、アクセス可能で有効なテクニカル サポート URL。 Microsoft は、マニフェスト データの一貫性、アドインの動作、セキュリティとユーザー エクスペリエンスの要件への準拠を確認する一連の検証ガイドラインを適用します。

Office.js で許可されるドメインとオリジン

マニフェストはまた、 プラグインパネル内でナビゲートできるドメインWeb版Officeと新しいWindows版Outlookでは、タスクウィンドウはほぼすべてのURLを読み込むことができます。ただし、デスクトップアプリケーションでは動作が厳格です。アドインがホームページドメイン以外のドメインに移動しようとすると、URLはアプリケーション外部の別のブラウザウィンドウで開きます。

デスクトップ上の外部ジャンプを回避するにはアドインウィンドウに表示する追加ドメインを、マニフェストに明示的にリストできます。ターゲットがリストされている場合、Officeデスクトップ版とWeb版Officeの両方でパネル内で開きます。リストされていない場合、デスクトップ版では外部ブラウザーで開きます。

Office アドインの作成: ツール、マニフェスト、展開

Office JavaScript API を使用してドキュメントを操作する

アドインの Web アプリケーションは Office ドキュメントと通信します。 (Outlookの場合はメッセージと一緒に)Office JavaScript APIライブラリを介して、Microsoftの公式CDNからアクセス可能 https://appsforoffice.microsoft.com/lib/1/hosted/office.jsこのスクリプトをセクション内で参照するだけです <head> 利用可能なタイプとメソッドを使用できるようにするには、ページからアクセスしてください。

ライブラリがロードされると、次の 2 つの補完的な API モデルにアクセスできるようになります。

  • アプリケーション固有の API。
  • 共通 API。

各モデルはさまざまなシナリオをカバーするように設計されていますが、ニーズに応じて同じアクセサリに組み合わせることもできます。

アプリケーション固有のAPI

アプリケーション固有のAPIは 強く型付けされたオブジェクト これらは特定のOfficeアプリケーションのネイティブエンティティを表します。例えば、Excelにはワークシート、範囲、表、グラフなどのオブジェクトがあり、構造化された効率的な方法でデータを操作できます。

このモデルは バッチ操作コンテキスト内でアクションを連鎖させ、準備ができたら変更内容をOfficeと同期します。この方法により、アドインとアプリケーション間のやり取りの回数が減り、特にWeb版Officeではパフォーマンスが大幅に向上します。

共有機能のための共通API

共通API 複数のアプリケーションに存在する横断的な機能に焦点を当てています: インターフェイス要素、ダイアログ ボックス、クライアント設定など。このモデルでは、Promise の代わりにコールバックが使用され、設計上、各呼び出しはアプリケーションに対して 1 つの操作を実行します。

共通APIを使用すると、例えば、 ポップアップ ダイアログ ボックスを表示したり、さまざまなホスト上のアドインの構成を管理したり、使用ケースに応じて、アプリケーション固有の API でまだカバーされていない Outlook、PowerPoint、または Project の特定の機能にアクセスしたりすることができます。

要件セットとクロスプラットフォームの互換性

APIの互換性は次のように分類されます。 要件セットこれらは特定のAPIメンバーをバージョン名の下にグループ化します。アプリケーション固有の要件セットには、次のようなものがあります。 ExcelApi 1.7その他、共通するものとしては、 DialogApi 1.1ダイアログ ボックス機能がサポートされている場所で動作します。

アドインは、実行時に、実行先のOfficeアプリケーションが必要な要件を満たしているかどうかを確認できます。これにより、ホストが最小要件を満たしていない場合に予期しないエラーが発生するのを防ぎ、エクスペリエンスをカスタマイズしたり、高度な機能を無効にしたりすることができます。

Script Lab で API を探索する

スクリプトラボは 無料アドオン これはOffice JavaScript APIのテスト環境として機能します。Microsoft Marketplaceからインストールでき、ExcelやWordなどのアプリケーション内で実行できるため、現在のドキュメント上でコードスニペットをリアルタイムに記述して実行できます。

Script Labでは、 さまざまな API 機能を示すすぐに使用できるサンプルのライブラリこれらのスニペットを独自のコードのベースとして使用し、変更して、ドキュメントで結果をすぐに確認できるため、最終的なプラグインに組み込む前の機能のプロトタイプ作成とテストのフェーズが大幅にスピードアップします。

マイクロソフトオフィスオンライン

Office ユーザーインターフェイスを拡張する方法

アドインの大きな利点の一つは、 機能をOfficeインターフェースに直接統合するユーザーがアプリケーションを「離れている」と感じないようにするためです。これは、プラグインコマンドと、タスクパネル、コンテンツプラグイン、ダイアログボックスなどのHTMLコンテナを組み合わせることで実現されます。

  • アドインコマンド これらは、カスタム タブ、新しいグループ、追加のボタンやメニューを Office リボンに追加するために使用されます。
  • HTMLコンテナ (タスク ウィンドウ、コンテンツ アドイン、ダイアログ) は、アドイン独自のインターフェイスを表示するサーフェスとして機能します。

一般的なシナリオでは、Excel の「データの分析」ボタンを使用してグループを追加するコマンドがあるとします。このコマンドが押されると、Web アプリの右側にタスク ウィンドウが開き、選択した範囲が分析され、機械学習サービスが呼び出され、セルが強調表示されたり、Excel 固有の API を使用してグラフが作成されたりして結果が返されます。

Yeoman を使用してタスク ペイン アドインを作成する (Word の例)

これらの概念をすべて実践するにはYeomanのジェネレーターを使って、WordとOutlookの両方でタスクペインアドインを実際に作成する方法を確認すると役立ちます。アプリケーションによってインターフェースの詳細は異なりますが、プロジェクトの構造とワークフローはほぼ同じです。

開発環境の前提条件

プロジェクトを生成する前にNode.jsの最新LTS版をインストールする必要があります。これは公式サイトからダウンロードできます。インストールが完了したら、以下のコマンドでYeomanとOfficeジェネレーターをグローバルインストールします。 npm install -g yo generator-office最後に、デスクトップとブラウザーの両方でアドインをテストするため、Office が Web 上の Office を含む Microsoft 365 サブスクリプションにリンクされていることを確認してください。

タスク ウィンドウ付きの Word アドインを作成する

最初のステップです。 マニフェストの種類を決める アドインを他の拡張機能と1つのアプリ内で組み合わせるかどうかに応じて、使用する拡張機能を選択します。決定したら、 yo office 作業ディレクトリ内。

間に インタラクティブアシスタント例えば、プロジェクトの種類を選択し、「My Office Add-in」のような名前を付け、対象のクライアントアプリケーションとしてWordを選択します。完了すると、ジェネレーターがプロジェクトフォルダを作成し、Node.jsの依存関係をインストールして、すべての準備を整えます。

ソリューション内にはマニフェストファイル(manifest.json o manifest.xml)はルートにあり、プラグインの設定を定義します。 ./src/taskpane/taskpane.html タスクペインのマークアップで、CSSは ./src/taskpane/taskpane.css;そしてOffice APIを呼び出すコードは ./src/taskpane/taskpane.ts o .jsTypeScript と JavaScript のどちらを選択したかによって異なります。

デスクトップ版Wordでアドインをテストするにはプロジェクトのルートフォルダ(cd "My Office Add-in"実行する npm startこのコマンドはローカルウェブサーバーを起動し、アドインがサイドローディングモードで読み込まれた状態でWordを起動します。Web版Wordで試したい場合は、次のコマンドを使用してください。 npm run start -- web --document {url}、URL を OneDrive または SharePoint に保存されているドキュメントの URL に置き換えます。

開発サーバーと依存関係管理

開発中はよくあることです その npm install Yeomanが実行する自動ステップで失敗する可能性があります。特に依存関係のバージョンが競合している場合は、その可能性が高くなります。その場合は、プロジェクトフォルダに移動して npm install 手動で解決してください。

古い依存関係の警告が表示された場合このツールは信頼できる npm-check-updates、インストールするには npm i -g npm-check-updates、ランニング ncu -u バージョン範囲を更新する package.json そして新しい npm installこれらの警告の多くは重大なものではありませんが、プロジェクトの健全性を維持するために定期的に確認することをお勧めします。

開発サーバーを停止するには サイドローディングモードでプラグインをアンインストールするには、 npm stop ルートディレクトリにあります。以前にアドインを手動でアップロードした場合(たとえば、マニフェストをOffice on the Webにアップロードした場合など)、対応する管理インターフェイスからも手動で削除する必要があります。

アドインと開発ツール(Yeoman、Visual Studio、エージェントツールキット、スクリプトラボ)の基本構造から、マニフェストの役割、JavaScript API、セキュリティ制御、展開オプション(ローカル、マーケットプレイス、集中展開、Qlikなどのプロバイダー経由)まで、 かなり完全な地図 どのようなタイプのアドオンが必要か、それをどのように構築するか、そして技術的な問題が発生することなくそれをユーザーに届ける方法を決定します。


優先ソースとして追加