最初の Outlook アドインをビルドする

選択したメッセージから件名を読み取る Outlook の作業ウィンドウ アドインを作成します。 このクイック スタートでは、Office アドイン用のヨーマン ジェネレーター (Yo Office) を使用してプロジェクトをスキャフルディングするため、Office JavaScript API コードの記述にすぐに集中できます。

前提条件

• Node.js (Active 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 プランを購入できます。

• Outlook on the web、 新しい Outlook on Windows、Outlook 2016 以降の Windows (Microsoft 365 アカウントに接続済み)、または Outlook on Mac。

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

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

   yo office
   

   注:

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

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

   • Choose a project type: (プロジェクトの種類を選択) - Office Add-in Task Pane project
   • Choose a script type: (スクリプトの種類を選択) - JavaScript
   • What would you want to name your add-in? (アドインの名前を何にしますか) - My Office Add-in
   • Which Office client application would you like to support?: (どの Office クライアント アプリケーションをサポートしますか) - Outlook
   • どのマニフェストを使用しますか? - Unified manifest for Microsoft 365 または Add-in only manifest

   注:

   Microsoft 365 の統合マニフェストを使用すると、Office アドインと Teams アプリを Microsoft 365 用アプリに組み合わせて、開発と展開の 1 つの単位として行うことができます。 詳細については、「 統合されたマニフェストを使用した Office アドイン」を参照してください。 Teams アプリと Outlook アドインを組み合わせた Microsoft 365 用アプリのサンプルについては、「 割引オファー」を参照してください。

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

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

   

   

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

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

   cd "My Office Add-in"
   

プロジェクトを探究する

ヨーマン ジェネレーターは、選択したプロジェクト名を持つフォルダーにプロジェクトを作成します。 プロジェクトには、非常に基本的な作業ウィンドウ アドインのサンプル コードが含まれています。 最も重要なファイルを次に示します。

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

試してみる

1. プロジェクトのルート ディレクトリから次のコマンドを実行します。 このコマンドを実行すると、ローカルの Web サーバーが起動し、アドインがサイドロードされます。

   npm start
   

   注:

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

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

2. Outlook で、閲覧ウィンドウでメッセージを表示するか、独自のウィンドウでメッセージを開きます。

3. [ 作業ウィンドウの表示 ] ボタンを選択してアドインの作業ウィンドウを開きます。 アドイン ボタンの場所は、使用している Outlook クライアントによって異なります。

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

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

   

4. WebView Stop On Load ダイアログ ボックスでプロンプトが表示されたら、[OK] を選択します。

   注:

   [キャンセル] を選択すると、このアドインのインスタンスの実行中はダイアログが表示されなくなります。 ただし、アドインを再起動すると、ダイアログはもう一度表示されます。

5. 作業ペインの下部までスクロールし、実行リンクを選択してメッセージを作業ペインに書き込みます。

   

   

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

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

     npm stop
     

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

次の手順

おめでとうございます、最初のOutlook作業ペインアドインの作成に成功しました。 次に、 Outlook アドインのチュートリアルに従って、Outlook アドインのその他の機能を確認します。 このチュートリアルでは、クイック スタートで説明した作業ウィンドウを組み込んだ、より複雑なアドインを作成します。 さらに、UI を使用しない関数を呼び出すボタンを作成します。

トラブルシューティング

• 「 開発環境を設定する」の手順に従って、お使いの環境が Office 開発に対応していることを確認します。

• Office が実行する自動 npm install 手順は失敗する可能性があります。 npm startを実行しようとしたときにエラーが表示された場合は、コマンド プロンプトで新しく作成したプロジェクト フォルダーに移動し、手動で npm install を実行してください。 Yo Office の詳細については、「 Yeoman Generator を使用して Office アドイン プロジェクトを作成する」を参照してください。

• Yeoman ジェネレーターまたはプロジェクトの npm install を実行すると、警告が表示される場合があります。 ほとんどの場合、これらの警告は無視しても問題ありません。 場合によっては、依存関係が非推奨になり、その置き換えがプロジェクトが依存する他のパッケージでサポートされないことがあります。 これらの警告を解決するには、 npm-check-updates ツールを使用してください。

  • コマンド プロンプトでルート プロジェクト ディレクトリに移動し、 npm i -g npm-check-updates を実行します。 これにより、ツールがグローバルにインストールされます。
  • ncu -u を実行します。 これには、すべてのパッケージと、それらが更新されるバージョンのレポートが提供されます。
  • npm install を実行してすべてのパッケージを更新します。

  npm install 実行時の警告の詳細については、「Node.js と npm の世界での警告と依存関係」を参照してください。

• リボンにアドイン ボタン ([作業ウィンドウの表示] など) が表示されない場合は、[ホーム] リボン タブから [アドイン] ボタンを選択し、テスト用アドインを選びます。

• 作業ウィンドウで、「このアドインを localhost から開くことはできません」 というエラーが表示される場合は、「トラブルシューティングの記事」 に記載されている手順に従ってください。

コード サンプル

• Outlook の "Hello world" アドイン: マニフェスト、HTML Web ページ、ロゴのみを備えた簡単な Office アドインを作成する方法について説明します。

関連項目

• アドインのみのマニフェストを含む Office アドイン
• Visual Studio コードを使用して発行する