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

[アーティクル]
04/09/2024

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

アドインを作成する

Office アドイン用の Yeoman ジェネレーターまたは Visual Studio を使用して Office アドインを作成することができます。 Yeoman ジェネレーターでは Visual Studio Code またはその他のエディターで管理できる Node.js プロジェクトを作成します。一方、Visual Studio では Visual Studio のソリューションを作成します。使用する方のタブを選択し、手順に従ってアドインを作成してローカルでテストします。

Yeoman ジェネレーター
Visual Studio

前提条件

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 プランを購入することもできます。

Windows でOutlook 2016以降 (Microsoft 365 アカウントに接続)、Outlook on Mac、Outlook on the web、または新しい Outlook on Windows (プレビュー)。

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

次のコマンドを実行し、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
ウィザードを完了すると、ジェネレーターによってプロジェクトが作成されて、サポートしているノードコンポーネントがインストールされます。

注:

バージョン 20.0.0 以降 Node.js 使用している場合は、ジェネレーターがインストールを実行するときに、サポートされていないエンジンがあることを示す警告が表示されることがあります。この問題の修正に取り組んでいます。その間、警告は生成するジェネレーターまたはプロジェクトに影響しないため、無視できます。

ヒント

アドインプロジェクトの作成後に Yeoman ジェネレーターが提供する次の手順ガイダンスは無視できます。この記事中の詳しい手順は、このチュートリアルを完了するために必要なすべてのガイダンスを提供します。
Web アプリケーションプロジェクトのルートフォルダーに移動します。
```
cd "My Office Add-in"
```

プロジェクトを探究する

Yeomanジェネレーターで作成したアドインプロジェクトには、原型となる作業ペインアドインのサンプルコードが含まれています。

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

コードを更新する

VS Codeまたは任意のコードエディターでプロジェクトを開きます。

ヒント

Windows では、コマンドラインからプロジェクトのルートディレクトリに移動し、code . を入力して VS Code でそのフォルダーを開くことができます。 Mac では、VS Code でプロジェクトフォルダーを開くためにそのコマンドを使用する前に、code コマンドをパスに追加する必要があります。

ファイル ./src/taskpane/taskpane.html を開き、メイン>要素全体< (body> 要素内) を<次のマークアップに置き換えます。この新しいマークアップは、./src/taskpane/taskpane.jsのスクリプトがデータを書き込む場所にラベルを追加します。

<main id="app-body" class="ms-welcome__main" style="display: none;">
    <h2 class="ms-font-xl"> Discover what Office Add-ins can do for you today! </h2>
    <p><label id="item-subject"></label></p>
    <div role="button" id="run" class="ms-welcome__action ms-Button ms-Button--hero ms-font-xl">
        <span class="ms-Button-label">Run</span>
    </div>
</main>

コードエディターで 、ファイル ./src/taskpane/taskpane.jsを開き、次のコードを実行関数に追加します。このコードは、Office JavaScript API を使用して、現在のメッセージへの参照を取得し、その subject プロパティの値をタスクペインに書き込むものです。

// Get a reference to the current message
const item = Office.context.mailbox.item;

// Write message property value to the task pane
document.getElementById("item-subject").innerHTML = "<b>Subject:</b> <br/>" + item.subject;

taskpane.js ファイルに次のコードが含まれるようになりました。

/*
 * Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
 * See LICENSE in the project root for license information.
 */

/* global document, Office */

Office.onReady((info) => {
  if (info.host === Office.HostType.Outlook) {
    document.getElementById("sideload-msg").style.display = "none";
    document.getElementById("app-body").style.display = "flex";
    document.getElementById("run").onclick = run;
  }
});

export async function run() {
  // Get a reference to the current message
  const item = Office.context.mailbox.item;

  // Write message property value to the task pane
  document.getElementById("item-subject").innerHTML = "<b>Subject:</b> <br/>" + item.subject;
}

試してみる

注:

Office アドインでは、開発中でも HTTP ではなく HTTPS を使用する必要があります。次のいずれかのコマンドを実行した後に証明書のインストールを求められた場合は、Yeoman ジェネレーターが提供する証明書をインストールするプロンプトに同意します。変更を行うには、管理者としてコマンドプロンプトまたはターミナルを実行する必要がある場合もあります。

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

アドインが自動的にサイドロードされなかった場合は、「 Outlook アドインをサイドロードしてテストする」の手順に従って、Outlook でアドインを手動でサイドロードします。
Outlook で、閲覧ウィンドウでメッセージを表示するか、独自のウィンドウでメッセージを開きます。
[ ホーム ] タブ (または新しいウィンドウでメッセージを開いた場合は [ メッセージ ] タブ) を選択し、リボンの [ タスクウィンドウの表示 ] ボタンを選択してアドイン作業ウィンドウを開きます。
WebView Stop On Load ダイアログボックスでプロンプトが表示されたら、[OK] を選択します。

注:

[キャンセル] を選択すると、このアドインのインスタンスの実行中はダイアログが表示されなくなります。ただし、アドインを再起動すると、ダイアログはもう一度表示されます。
作業ペインの下部までスクロールし、実行リンクを選択してメッセージを作業ペインに書き込みます。

次の手順

おめでとうございます、最初のOutlook作業ペインアドインの作成に成功しました。次に、Outlook アドインの機能の詳細説明と、より複雑なアドインを作成する方法について、「Outlook アドインのチュートリアル」をご覧ください。

前提条件

Office/SharePoint 開発ワークロードがインストールされている Visual Studio 2019 以降

注:

以前に Visual Studio 2019 以降をインストールしている場合は、Visual Studio インストーラーを使用して、Office/SharePoint 開発ワークロードがインストールされていることを確認します。
Microsoft 365 サブスクリプションに接続されている Office (Office for the web を含む)。

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

[Visual Studio] メニューバーで、[ファイル]>[新規作成]>[プロジェクト] の順に選択します。
[Visual C#] または [Visual Basic] の下にあるプロジェクトの種類の一覧で、[Office/SharePoint] を展開し、[アドイン] を選択し、プロジェクトの種類として [Outlook Web アドイン] を選択します。
プロジェクトに名前を付けて、[OK] を選択します。
ソリューションが Visual Studio によって作成され、2 つのプロジェクトがソリューションエクスプローラーに表示されます。 MessageRead.html ファイルが Visual Studio で開きます。

Visual Studio ソリューションについて理解する

ウィザードの完了後、Visual Studio によって 2 つのプロジェクトを含むソリューションが作成されます。

プロジェクト	説明
アドインプロジェクト	アドインを記述するすべての設定を含む XML マニフェストファイルのみが含まれます。これらの設定は、Office アプリケーションがアドインのアクティブ化の時期とアドインの表示場所を特定するのに役立ちます。プロジェクトを実行してすぐにアドインを使用できるように、Visual Studio は、このファイルの内容を生成します。 XML ファイルを変更することで、これらの設定をいつでも変更できます。
Web アプリケーションプロジェクト	Office 対応の HTML および JavaScript ページを開発するために必要なすべてのファイルとファイル参照を含むアドインのコンテンツページが含まれます。アドインの開発中に、Visual Studio はローカルのインターネットインフォメーションサービス (IIS) サーバーで Web アプリケーションをホストします。アドインを発行する準備が整ったら、この Web アプリケーションプロジェクトを Web サーバーに展開する必要があります。

プロジェクト

説明

アドインプロジェクト

アドインを記述するすべての設定を含む XML マニフェストファイルのみが含まれます。これらの設定は、Office アプリケーションがアドインのアクティブ化の時期とアドインの表示場所を特定するのに役立ちます。プロジェクトを実行してすぐにアドインを使用できるように、Visual Studio は、このファイルの内容を生成します。 XML ファイルを変更することで、これらの設定をいつでも変更できます。

Web アプリケーションプロジェクト

Office 対応の HTML および JavaScript ページを開発するために必要なすべてのファイルとファイル参照を含むアドインのコンテンツページが含まれます。アドインの開発中に、Visual Studio はローカルのインターネットインフォメーションサービス (IIS) サーバーで Web アプリケーションをホストします。アドインを発行する準備が整ったら、この Web アプリケーションプロジェクトを Web サーバーに展開する必要があります。

コードを更新する

MessageRead.html は、アドインの作業ウィンドウにレンダリングされる HTML を指定します。 MessageRead.htmlで、body> 要素を<次のマークアップに置き換え、ファイルを保存します。

<body class="ms-font-m ms-welcome">
    <div class="ms-Fabric content-main">
        <h1 class="ms-font-xxl">Message properties</h1>
        <table class="ms-Table ms-Table--selectable">
            <thead>
                <tr>
                    <th>Property</th>
                    <th>Value</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><strong>Id</strong></td>
                    <td class="prop-val"><code><label id="item-id"></label></code></td>
                </tr>
                <tr>
                    <td><strong>Subject</strong></td>
                    <td class="prop-val"><code><label id="item-subject"></label></code></td>
                </tr>
                <tr>
                    <td><strong>Message Id</strong></td>
                    <td class="prop-val"><code><label id="item-internetMessageId"></label></code></td>
                </tr>
                <tr>
                    <td><strong>From</strong></td>
                    <td class="prop-val"><code><label id="item-from"></label></code></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

Web アプリケーションプロジェクトのルートにあるファイル MessageRead.js を開きます。このファイルは、アドイン用のスクリプトを指定します。すべての内容を次のコードに置き換え、ファイルを保存します。

'use strict';

(function () {

    Office.onReady(function () {
        // Office is ready
        $(document).ready(function () {
            // The document is ready
            loadItemProps(Office.context.mailbox.item);
        });
    });

    function loadItemProps(item) {
        // Write message property values to the task pane
        $('#item-id').text(item.itemId);
        $('#item-subject').text(item.subject);
        $('#item-internetMessageId').text(item.internetMessageId);
        $('#item-from').html(item.from.displayName + " &lt;" + item.from.emailAddress + "&gt;");
    }
})();

Web アプリケーションプロジェクトのルートにあるファイル MessageRead.css を開きます。このファイルは、アドイン用のユーザー設定のスタイルを指定します。すべての内容を次のコードに置き換え、ファイルを保存します。
```
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

td.prop-val {
    word-break: break-all;
}

.content-main {
    margin: 10px;
}
```

マニフェストを更新する

アドインプロジェクト内の XML マニフェストファイルを開きます。このファイルは、アドインの設定と機能を定義します。
<ProviderName> 要素にはプレースホルダー値があります。それを自分の名前に置き換えます。
DisplayName> 要素の<DefaultValue 属性にはプレースホルダーがあります。それを My Office Add-in に置き換えます。
Description> 要素の<DefaultValue 属性にはプレースホルダーがあります。それを My First Outlook add-in に置き換えます。

ファイルを保存します。

...
<ProviderName>John Doe</ProviderName>
<DefaultLocale>en-US</DefaultLocale>
<!-- The display name of your add-in. Used on the store and various places of the Office UI such as the add-ins dialog. -->
<DisplayName DefaultValue="My Office Add-in" />
<Description DefaultValue="My First Outlook add-in"/>
...

試してみる

Visual Studio を使用して、 F5 キーを押すか、[ スタート ] ボタンを選択して、新しく作成した Outlook アドインをテストします。アドインは IIS 上でローカルにホストされます。
[ Exchange メールアカウントに接続 する] ダイアログボックスで、 Microsoft アカウントのメールアドレスとパスワードを入力し、[ 接続] を選択します。 Outlook.com のログインページがブラウザに表示されたら、前回と同じ資格情報を使用して、メールアカウントにログインします。

注:

[ Exchange に接続するメールアカウント ] ダイアログボックスでサインインを繰り返し求められたり、承認されていないというエラーが表示された場合は、Microsoft 365 テナントのアカウントに対して基本認証がオフになっている可能性があります。このアドインをテストするには、[Web アドインプロジェクトのプロパティ] ダイアログの [展開] セクションで [ 多要素認証を使用 する] プロパティを True に設定した後、もう一度サインインするか、代わりに Microsoft アカウントを使用してサインインします。
メールボックスがOutlook on the webで開きます。メッセージを選択または開きます。

ヒント

IIS サーバーが実行されている限り、Outlook on Windows でアドインをテストすることもできます。
メッセージ内でアクションバーに移動し、[ アプリ] を選択します。
アドインの一覧から [ My Office アドイン] を選択し、[ 作業ウィンドウの表示] を選択します。
開いた作業ウィンドウから、選択したメッセージのプロパティを表示します。

注:

作業ウィンドウが読み込まれない場合、同じコンピューター上のブラウザーで作業ウィンドウを開いて確認してください。

次の手順

おめでとうございます、最初のOutlook作業ペインアドインの作成に成功しました。次に、「Visual Studio を使用して Office アドインを開発する」を参照してください。

トラブルシューティング

「開発環境のセットアップ」の手順に従って、環境が Office 開発の準備ができていることを確認します。
Yo Office が実行する自動 npm install ステップが失敗する可能性があります。を実行 npm startしようとしたときにエラーが表示された場合は、コマンドプロンプトで新しく作成されたプロジェクトフォルダーに移動し、を手動で実行 npm installします。 Yo Office の詳細については、「 Yeoman ジェネレーターを使用して Office アドインプロジェクトを作成する」を参照してください。
アドインにエラーが表示された場合 (たとえば、"このアドインを開始できませんでした。このダイアログを閉じて問題を無視するか、[再起動] をクリックしてやり直してください。)F5 キーを押すか、[デバッグ] [Visual Studio でのデバッグ>の開始] の順に選択すると、その他のデバッグオプションについては、「Visual Studio での Office アドインのデバッグ」を参照してください。
一部のサンプルコードでは、ES6 JavaScript を使用しています。これは、Trident (インターネットエクスプローラー 11) ブラウザーエンジンを使用する古いバージョンの Office と互換性がありません。アドインでこれらのプラットフォームをサポートする方法については、「古い Microsoft Webview と Office バージョンをサポートする」を参照してください。開発に使用する Microsoft 365 サブスクリプションがまだない場合は、Microsoft 365 開発者プログラムを通じてMicrosoft 365 E5開発者サブスクリプションを受ける資格があります。詳細については、FAQ を参照してください。または、 1 か月間の無料試用版にサインアップするか、 Microsoft 365 プランを購入することもできます。

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

コードサンプル

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

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

アドインを作成する

前提条件

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

プロジェクトを探究する

コードを更新する

試してみる

次の手順

前提条件

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

Visual Studio ソリューションについて理解する

コードを更新する

マニフェストを更新する

試してみる

次の手順

トラブルシューティング

コードサンプル

関連項目

フィードバック

その他のリソース

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

アドインを作成する

前提条件

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

プロジェクトを探究する

コードを更新する

試してみる

次の手順

トラブルシューティング

コード サンプル

関連項目

フィードバック

その他のリソース

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

コードサンプル