最初の Word の作業ウィンドウ アドインを作成する

この記事では、Word の作業ウィンドウ アドインを作成するプロセスを紹介します。 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 クライアント アプリケーションはどれですか?Word

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

プロジェクトを確認する

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
   

   • Word でアドインをテストするには、プロジェクトのルート ディレクトリから次のコマンドを実行します。 ローカル Web サーバーが (まだ実行されていない場合) 起動し、アドインが読み込まれた Word が開きます。

     npm start
     

   • ブラウザー上の Word でアドインをテストするには、プロジェクトのルート ディレクトリから次のコマンドを実行します。 このコマンドを実行すると、ローカル Web サーバーが起動します。 "{url}" を、アクセス許可を持っている OneDrive または SharePoint ライブラリ上の Word ドキュメントの 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. Wordで、[My Office アドイン] 作業ウィンドウがまだ開いていない場合は、新しいドキュメントを開き、[ホーム] タブを選択し、リボンの [タスクウィンドウの表示] ボタンを選択してアドイン作業ウィンドウを開きます。

   

4. 作業ウィンドウの下部にある [実行] リンクを選択して、青のフォントで "Hello World" というテキストをドキュメントに追加します。

   

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

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

     npm stop
     

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

次の手順

おめでとうございます。 Word の作業ウィンドウ アドインが正常に作成されました。 次に、Word アドインの機能の詳細について説明します。Word アドインのチュートリアルに従って、より複雑なアドインをビルドします。

Word アドインのチュートリアル

トラブルシューティング

• 「開発環境のセットアップ」の手順に従って、環境が 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 アドイン プロジェクトを作成する」を参照してください。

コード サンプル

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

関連項目

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