次の方法で共有

Visual Studio を使用して初めての Outlook アドインをビルドする

  • [アーティクル]

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

前提条件

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

    注:

    以前に Visual Studio 2019 以降をインストールしている場合は、Visual Studio インストーラーを使用して、Office/SharePoint 開発ワークロードがインストールされていることを確認します。

  • Microsoft 365 サブスクリプションに接続されている Office (Office for the web を含む)。

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

  1. [Visual Studio] メニュー バーで、[ファイル]>[新規作成]>[プロジェクト] の順に選択します。

  2. [Visual C#] または [Visual Basic] の下にあるプロジェクトの種類の一覧で、[Office/SharePoint] を展開し、[アドイン] を選択し、プロジェクトの種類として [Outlook Web アドイン] を選択します。

  3. プロジェクトに名前を付けて、[OK] を選択します。

  4. ソリューションが Visual Studio によって作成され、2 つのプロジェクトがソリューション エクスプローラーに表示されます。 MessageRead.html ファイルが Visual Studio で開きます。

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

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

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

コードを更新する

  1. 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>

  2. 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;");
    }
})();

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

    html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

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

.content-main {
    margin: 10px;
}

マニフェストを更新する

  1. アドイン プロジェクトでマニフェスト ファイルを開きます。 このファイルは、アドインの設定と機能を定義します。

  2. <ProviderName> 要素にはプレースホルダー値があります。 それを自分の名前に置き換えます。

  3. <DisplayName> 要素の DefaultValue 属性にはプレースホルダーがあります。 それを My Office Add-in に置き換えます。

  4. <Description> 要素の DefaultValue 属性にはプレースホルダーがあります。 それを My First Outlook add-in に置き換えます。

  5. ファイルを保存します。

    ...
<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"/>
...

試してみる

  1. Visual Studio を使用して、 F5 キーを押すか、[ スタート ] ボタンを選択して、新しく作成した Outlook アドインをテストします。 アドインは IIS 上でローカルにホストされます。

  2. [ Exchange メール アカウントに接続 する] ダイアログ ボックスで、 Microsoft アカウントのメール アドレスとパスワードを入力し、[ 接続] を選択します。 Outlook.com のログイン ページがブラウザに表示されたら、前回と同じ資格情報を使用して、メール アカウントにログインします。

    注:

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

  3. メールボックスがOutlook on the webで開きます。 メッセージを選択または開きます。

    ヒント

    IIS サーバーが実行されている限り、Windows 上の従来の Outlook でアドインをテストすることもできます。

  4. メッセージ内でアクション バーに移動し、[ アプリ] を選択します。

    [アプリ] オプションが選択されたOutlook on the webのメッセージ ウィンドウ。

  5. アドインの一覧から [ My Office アドイン] を選択し、[ 作業ウィンドウの表示] を選択します。

    [作業ウィンドウの表示] オプションが選択されているOutlook on the webのメッセージ ウィンドウ。

  6. 開いた作業ウィンドウから、選択したメッセージのプロパティを表示します。

    Outlook on the web のアドインの作業ウィンドウ上に表示されているメッセージ プロパティ。

    注:

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

次の手順

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

トラブルシューティング

  • アドインにエラーが表示された場合 (たとえば、"このアドインを開始できませんでした。このダイアログを閉じて問題を無視するか、[再起動] をクリックしてやり直してください。)F5 キーを押すか、[デバッグ] を選択した場合> Visual Studio でのデバッグの開始」を参照してください。その他のデバッグ オプションについては、「Visual Studio での Office アドインのデバッグ」を参照してください。
  • 作業ウィンドウで、「このアドインを localhost から開くことはできません」 というエラーが表示される場合は、「トラブルシューティングの記事」 に記載されている手順に従ってください。

コード サンプル

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

関連項目