この記事では、Yo Office を使用して、選択したメッセージの少なくとも 1 つのプロパティを表示する Outlook タスク ペイン アドインを作成する手順について説明します。
前提条件
-
Node.js (最新の LTS バージョン)。Node.jsサイト にアクセスして、お使いのオペレーティング システムに適したバージョンをダウンロードしてインストールしてください
-
最新バージョンの Yeoman とOffice アドイン用の Yeoman ジェネレーター。これらのツールをグローバルにインストールするには、コマンド プロンプトから次のコマンドを実行します
command linenpm 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ジェネレータを使用してアドインプロジェクトを作成します。プロジェクトを含むフォルダーが現在のディレクトリに追加されます
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アプリケーションプロジェクトのルートフォルダに移動します。
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 サーバーが起動し、アドインがサイドロードされます。
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を使用した場合は、次のコマンドでアドインもアンインストールされます
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 アドインを構築する方法を学びます
関連項目
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