この記事では、Yo Office を使用して、選択したメッセージの少なくとも 1 つのプロパティを表示する Outlook タスクペインアドインを作成する手順について説明します。

前提条件

Node.js (最新の LTS バージョン)。Node.jsサイトにアクセスして、お使いのオペレーティングシステムに適したバージョンをダウンロードしてインストールしてください
最新バージョンの Yeoman とOffice アドイン用の Yeoman ジェネレーター。これらのツールをグローバルにインストールするには、コマンドプロンプトから次のコマンドを実行します
command line
```
 npm install -g yo generator-office
```
注記
以前に Yeoman ジェネレーターをインストールしていた場合でも、npm からパッケージを最新バージョンに更新することをお勧めします。

Microsoft 365 サブスクリプションに接続された Office (Web 上の Office を含む)

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

Web 上の Outlook、Windows 上の新しい Outlook、Windows 上の Outlook 2016 以降 (Microsoft 365 アカウントに接続)、または Mac 上の Outlook

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

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

command line

yo office

注記
yo office コマンドを実行すると、Yeoman と Office アドイン CLI ツールのデータ収集ポリシーに関するプロンプトが表示される場合があります。表示される情報を参考に、適切だと思うプロンプトに応答します。

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

プロジェクトの種類を選択 - Office アドインタスクウィンドウプロジェクト
スクリプトの種類を選択 - JavaScript
アドインの名前を何にしますか？ - My Office アドイン
どのOfficeクライアントアプリケーションをサポートしたいですか？ - Outlook
どのマニフェストを使用しますか？ - Microsoft 365 統合マニフェストまたはアドインのみのマニフェストのどちらかを選択してください

注記
Microsoft 365 の統合マニフェストを使用すると、Outlook アドインと Teams アプリを単一の開発および展開ユニットとして組み合わせることができます。統合マニフェストのサポートを Excel、PowerPoint、Word、カスタム Copilot 開発、そして Microsoft 365 のその他の拡張機能に拡張できるよう取り組んでいます。詳細については、「統合マニフェストを使用した Office アドイン」をご覧ください。Teams アプリと Outlook アドインを組み合わせたサンプルについては、「割引オファー」をご覧ください。

統合マニフェストに関する皆様からのフィードバックをお待ちしております。ご提案がありましたら、Office JavaScript ライブラリのリポジトリで Issue を作成してください。

選択したマニフェストに応じて、プロンプトと回答は次のいずれかのようになります。

ウィザードを完了すると、ジェネレーターがプロジェクトを作成し、サポートするNode.jsコンポーネントをインストールします。

2．Webアプリケーションプロジェクトのルートフォルダに移動します。

command line

cd "My Office Add-in"

プロジェクトを探索する

Yeoman ジェネレーターは、選択したプロジェクト名のフォルダーにプロジェクトを作成します。このプロジェクトには、非常に基本的なタスクペインアドインのサンプルコードが含まれています。最も重要なファイルは次のとおりです。

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

試してみる

注記

Office アドインは、開発中であっても HTTP ではなく HTTPS を使用する必要があります。以下のコマンドのいずれかを実行した後に証明書のインストールを求められた場合は、Yeoman ジェネレーターが提供する証明書のインストールを要求されます。変更を適用するには、コマンドプロンプトまたはターミナルを管理者として実行する必要があるかもしれません
初めてコンピューターで Office アドインを開発する場合は、コマンドラインで Microsoft Edge WebView にループバック免除を許可するように求められる場合があります (「Microsoft Edge WebView に localhost ループバックを許可しますか?」)。プロンプトが表示されたら、「Y」と入力して免除を許可します。免除を許可するには管理者権限が必要になることに注意してください。一度許可すると、今後 Office アドインをサイドロードするときに免除を求めるメッセージは表示されなくなります (コンピューターから免除を削除しない限り)。詳細については、Office アドインを読み込んだり、Fiddler を使用したりするときに、「ローカルホストからこのアドインを開くことができません」を参照してください

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

1．プロジェクトのルートディレクトリで以下のコマンドを実行してください。このコマンドを実行すると、ローカル Web サーバーが起動し、アドインがサイドロードされます。

command line

npm start

注記

Yeoman ジェネレーターを使用して Office アドインを初めて開発する場合、デフォルトのブラウザーがウィンドウを開き、Microsoft 365 アカウントへのサインインを求められます。サインインウィンドウが表示されず、サイドロードまたはログインタイムアウトのエラーが発生した場合は、npm start を再度実行する前に atk auth login m365 を実行してください

アドインが自動的にサイドロードされなかった場合は、「テスト用に Outlook アドインをサイドロードする」の手順に従って、Outlook でアドインを手動でサイドロードしてください。

2．Outlook で、リーディングペインでメッセージを表示するか、メッセージを別のウインドウで開きます。

3．[タスクペインを表示] ボタンを選択して、アドインのタスクペインを開きます。アドインボタンの位置は、使用している Outlook クライアントによって異なります。

Web 上の Outlook と Windows 上の新しい Outlook: メッセージのアクションバーから [アプリ] を選択します。次に、[My Office アドイン] > [タスクペインの表示] を選択します
従来の Outlook on Windows: [ホーム] タブ (新しいウィンドウでメッセージを開いた場合は [メッセージ] タブ) を選択します。次に、リボンから [タスクペインの表示] を選択します
Mac 上の Outlook: リボンから [My Office アドイン] を選択し、[タスクペインの表示] を選択します。アドインを表示するには、リボンの省略記号ボタン (...) を選択する必要があります

次のスクリーンショットは、Windows の古典的な Outlook でアドインがどのように表示されるかを示しています。

4．WebView の「WebView Stop On Load」ダイアログボックスが表示されたら、「OK」を選択します。

注記
「キャンセル」を選択した場合、このアドインインスタンスの実行中はダイアログが再び表示されません。ただし、アドインを再起動すると、ダイアログは再び表示されます。

5．タスクペインの一番下までスクロールし、「実行」リンクを選択して、メッセージの件名をタスクペインに書き込みます。

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

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

command line

npm stop

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

次のステップ

おめでとうございます。初めての Outlook タスクペインアドインの作成が完了しました。次は、Outlook アドインのチュートリアルに従って、Outlook アドインのその他の機能について確認してみましょう。チュートリアルでは、クイックスタートで学習したタスクウィンドウを組み込んだ、より複雑なアドインを作成します。さらに、UI レス機能を呼び出すボタンも作成します。

トラブルシューティング

「開発環境のセットアップ」の手順に従って、Office 開発環境の準備ができていることを確認してください
サンプルコードの一部は ES6 JavaScript を使用しています。これは、Trident (Internet Explorer 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 を実行して、すべてのパッケージを更新します
npm install 実行時の警告の詳細については、「Node.js および npm の世界における警告と依存関係」をご覧ください。
　
タスクパネルに「ローカルホストからこのアドインを開くことができません」というエラーが表示される場合は、トラブルシューティング記事に記載されている手順に従ってください

コードサンプル

Outlook「Hello world」アドイン：マニフェスト、HTML Web ページ、ロゴのみでシンプルな Office アドインを構築する方法を学びます

関連項目

for copy & paste

npm install -g yo generator-office

npm install inquirer

npm i -g npm-check-updates

ncu -u

npm install

npm audit fix --forcode 

npm start

npm stop

npm cache clear --force