オンライン会議プロバイダーの Outlook アドインを作成する

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

オンライン会議の設定は、Outlook ユーザーにとって重要なエクスペリエンスであり、 Outlook を使用して Teams 会議を簡単に作成できます。ただし、Microsoft 以外のサービスを使用して Outlook でオンライン会議を作成するのは面倒な場合があります。この機能を実装することで、サービスプロバイダーは Outlook アドインユーザーのオンライン会議の作成と参加エクスペリエンスを効率化できます。

重要

この機能は、Microsoft 365 サブスクリプションを使用したOutlook on the web、Windows (新規およびクラシック)、Mac、Android、iOS でサポートされています。

この記事では、ユーザーがオンライン会議サービスを使用して会議を整理して参加できるように Outlook アドインを設定する方法について説明します。この記事では、架空のオンライン会議サービスプロバイダー "Contoso" を使用します。

環境を設定する

Office アドイン用 Yeoman ジェネレーターを使用してアドインプロジェクトを作成する Outlook クイックスタートを完了します。

マニフェストを構成する

マニフェストを構成する手順は、クイックスタートで選択したマニフェストの種類によって異なります。

Microsoft 365 の統合マニフェスト
アドインのみのマニフェスト

manifest.json ファイルを開きます。
"authorization.permissions.resourceSpecific" 配列で最初のオブジェクトを検索し、その "name" プロパティを "MailboxItem.ReadWrite.User" に設定します。完了すると、次のようになります。
```
{
    "name": "MailboxItem.ReadWrite.User",
    "type": "Delegated"
}
```
"validDomains" 配列で、URL を "https://contoso.com" に変更します。これは架空のオンライン会議プロバイダーの URL です。完了すると、配列は次のようになります。
```
"validDomains": [
    "https://contoso.com"
],
```
"extensions.runtimes" 配列に次のオブジェクトを追加します。このコードについては、次の点に注意してください。
- メールボックス要件セットの "minVersion" は "1.3" に設定されているため、この機能がサポートされていないプラットフォームと Office バージョンではランタイムが起動しません。
- ランタイムの "id" は、わかりやすい名前 "online_meeting_runtime" に設定されます。
- "code.page" プロパティは、関数コマンドを読み込む UI レス HTML ファイルの URL に設定されます。
- "lifetime" プロパティは "short" に設定されています。つまり、関数コマンドボタンを選択するとランタイムが起動し、関数が完了するとシャットダウンします。 (まれに、ハンドラーが完了する前にランタイムがシャットダウンする場合があります。「Office アドインのランタイム」を参照してください)。
- "insertContosoMeeting" という名前の関数を実行するアクションがあります。この関数は、後の手順で作成します。
```
{
    "requirements": {
        "capabilities": [
            {
                "name": "Mailbox",
                "minVersion": "1.3"
            }
        ],
        "formFactors": [
            "desktop"
        ]
    },
    "id": "online_meeting_runtime",
    "type": "general",
    "code": {
        "page": "https://contoso.com/commands.html"
    },
    "lifetime": "short",
    "actions": [
        {
            "id": "insertContosoMeeting",
            "type": "executeFunction",
            "displayName": "insertContosoMeeting"
        }
    ]
}
```

"extensions.ribbons" 配列を次のように置き換えます。このマークアップについて、次の情報にご注意ください。

メールボックス要件セットの "minVersion" は "1.3" に設定されているため、リボンのカスタマイズは、この機能がサポートされていないプラットフォームと Office バージョンには表示されません。
"contexts" 配列は、リボンが会議の詳細開催者ウィンドウでのみ使用できるように指定します。
既定のリボンタブ (会議の詳細開催者ウィンドウ) には 、Contoso 会議というラベルが付いたカスタムコントロールグループが表示されます。
グループには、[ 会議の追加] というラベルの付いたボタンが表示されます。
ボタンの "actionId" は、前の手順で作成したアクションの "id" と一致する "insertContosoMeeting" に設定されています。

"ribbons": [
  {
    "requirements": {
        "capabilities": [
            {
                "name": "Mailbox",
                "minVersion": "1.3"
            }
        ],
        "scopes": [
            "mail"
        ],
        "formFactors": [
            "desktop"
        ]
    },
    "contexts": [
        "meetingDetailsOrganizer"
    ],
    "tabs": [
        {
            "builtInTabId": "TabDefault",
            "groups": [
                {
                    "id": "apptComposeGroup",
                    "label": "Contoso meeting",
                    "controls": [
                        {
                            "id": "insertMeetingButton",
                            "type": "button",
                            "label": "Add meeting",
                            "icons": [
                                {
                                    "size": 16,
                                    "url": "icon-16.png"
                                },
                                {
                                    "size": 32,
                                    "url": "icon-32.png"
                                },
                                {
                                    "size": 64,
                                    "url": "icon-64_02.png"
                                },
                                {
                                    "size": 80,
                                    "url": "icon-80.png"
                                }
                            ],
                            "supertip": {
                                "title": "Add a Contoso meeting",
                                "description": "Add a Contoso meeting to this appointment."
                            },
                            "actionId": "insertContosoMeeting",
                        }
                    ]
                }
            ]
        }
    ]
  }
]

モバイルサポートを追加する

manifest.json ファイルを開きます。
"extensions.ribbons.requirements.formFactors" 配列で、"mobile" を項目として追加します。完了すると、配列は次のようになります。

"formFactors": [
    "desktop",
    "mobile"
]

"extensions.ribbons.contexts" 配列で、 onlineMeetingDetailsOrganizer を項目として追加します。完了すると、配列は次のようになります。

"contexts": [
    "meetingDetailsOrganizer",
    "onlineMeetingDetailsOrganizer"
],

"extensions.ribbons.tabs" 配列で、"builtInTabId" が "TabDefault" のタブを見つけます。子の "customMobileRibbonGroups" 配列を追加します (既存の "groups" プロパティのピアとして)。完了すると、"tabs" 配列は次のようになります。

"tabs": [
    {
        "builtInTabId": "TabDefault",
        "groups": [
            <-- non-mobile group objects omitted -->
        ],
        "customMobileRibbonGroups": [
            {
                "id": "mobileApptComposeGroup",
                "label": "Contoso Meeting",
                "controls": [
                    { 
                        "id": "mobileInsertMeetingButton",
                        "label": "Add meeting",
                        "type": "mobileButton",
                        "actionId": "insertContosoMeeting",
                        "icons": [
                            {
                                "scale": 1,
                                "size": 25,
                               "url": "https://contoso.com/assets/icon-25.png"
                            },
                            {
                                "scale": 1,
                                "size": 32,
                                "url": "https://contoso.com/assets/icon-32.png"
                            },
                            {
                                "scale": 1,
                                "size": 48,
                                "url": "https://contoso.com/assets/icon-48.png"
                            },                                
                            {
                                "scale": 2,
                                "size": 25,
                                "url": "https://contoso.com/assets/icon-25.png"
                            },
                            {
                                "scale": 2,
                                "size": 32,
                                "url": "https://contoso.com/assets/icon-32.png"
                            },
                            {
                                "scale": 2,
                                "size": 48,
                                "url": "https://contoso.com/assets/icon-48.png"
                            },                                
                            {
                                "scale": 3,
                                "size": 25,
                                "url": "https://contoso.com/assets/icon-25.png"
                            },
                            {
                                "scale": 3,
                                "size": 32,
                                "url": "https://contoso.com/assets/icon-32.png"
                            },
                            {
                                "scale": 3,
                                "size": 48,
                                "url": "https://contoso.com/assets/icon-48.png"
                            }
                        ]
                    }
                ]
            }
        ]
    }
]

コードエディターで、作成した Outlook クイックスタートプロジェクトを開きます。
プロジェクトのルートにある manifest.xml ファイルを開きます。
<VersionOverrides> ノード全体 (開いているタグと閉じるタグを含む) を選択し、次の XML に置き換えます。

<VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides" xsi:type="VersionOverridesV1_0">
  <VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides/1.1" xsi:type="VersionOverridesV1_1">
    <Description resid="residDescription"></Description>
    <Requirements>
      <bt:Sets>
        <bt:Set Name="Mailbox" MinVersion="1.3"/>
      </bt:Sets>
    </Requirements>
    <Hosts>
      <Host xsi:type="MailHost">
        <DesktopFormFactor>
          <FunctionFile resid="residFunctionFile"/>
          <ExtensionPoint xsi:type="AppointmentOrganizerCommandSurface">
            <OfficeTab id="TabDefault">
              <Group id="apptComposeGroup">
                <Label resid="residDescription"/>
                <Control xsi:type="Button" id="insertMeetingButton">
                  <Label resid="residLabel"/>
                  <Supertip>
                    <Title resid="residLabel"/>
                    <Description resid="residTooltip"/>
                  </Supertip>
                  <Icon>
                    <bt:Image size="16" resid="icon-16"/>
                    <bt:Image size="32" resid="icon-32"/>
                    <bt:Image size="64" resid="icon-64"/>
                    <bt:Image size="80" resid="icon-80"/>
                  </Icon>
                  <Action xsi:type="ExecuteFunction">
                    <FunctionName>insertContosoMeeting</FunctionName>
                  </Action>
                </Control>
              </Group>
            </OfficeTab>
          </ExtensionPoint>
        </DesktopFormFactor>
      </Host>
    </Hosts>
    <Resources>
      <bt:Images>
        <bt:Image id="icon-16" DefaultValue="https://contoso.com/assets/icon-16.png"/>
        <bt:Image id="icon-32" DefaultValue="https://contoso.com/assets/icon-32.png"/>
        <bt:Image id="icon-48" DefaultValue="https://contoso.com/assets/icon-48.png"/>
        <bt:Image id="icon-64" DefaultValue="https://contoso.com/assets/icon-64.png"/>
        <bt:Image id="icon-80" DefaultValue="https://contoso.com/assets/icon-80.png"/>
      </bt:Images>
      <bt:Urls>
        <bt:Url id="residFunctionFile" DefaultValue="https://contoso.com/commands.html"/>
      </bt:Urls>
      <bt:ShortStrings>
        <bt:String id="residDescription" DefaultValue="Contoso meeting"/>
        <bt:String id="residLabel" DefaultValue="Add meeting"/>
      </bt:ShortStrings>
      <bt:LongStrings>
        <bt:String id="residTooltip" DefaultValue="Add a contoso meeting to this appointment."/>
      </bt:LongStrings>
    </Resources>
  </VersionOverrides>
</VersionOverrides>

モバイルサポートを追加する

ユーザーがモバイルデバイスからオンライン会議を作成できるように、 MobileOnlineMeetingCommandSurface 拡張ポイントは、親要素 <MobileFormFactor> の下のマニフェストで構成されます。この拡張ポイントは、他のフォームファクターではサポートされていません。

コードエディターで、作成した Outlook クイックスタートプロジェクトを開きます。
プロジェクトのルートにある manifest.xml ファイルを開きます。
<Host xsi:type="MailHost"> 要素の 2 番目の子として、次のマークアップを追加します。 <DesktopFormFactor> 要素のピアである必要があります。

<MobileFormFactor>
  <FunctionFile resid="residFunctionFile"/>
  <ExtensionPoint xsi:type="MobileOnlineMeetingCommandSurface">
    <Control xsi:type="MobileButton" id="insertMeetingButton">
      <Label resid="residLabel"/>
      <Icon>
        <bt:Image size="25" scale="1" resid="icon-16"/>
        <bt:Image size="25" scale="2" resid="icon-16"/>
        <bt:Image size="25" scale="3" resid="icon-16"/>

        <bt:Image size="32" scale="1" resid="icon-32"/>
        <bt:Image size="32" scale="2" resid="icon-32"/>
        <bt:Image size="32" scale="3" resid="icon-32"/>

        <bt:Image size="48" scale="1" resid="icon-48"/>
        <bt:Image size="48" scale="2" resid="icon-48"/>
        <bt:Image size="48" scale="3" resid="icon-48"/>
      </Icon>
      <Action xsi:type="ExecuteFunction">
        <FunctionName>insertContosoMeeting</FunctionName>
      </Action>
    </Control>
  </ExtensionPoint>
</MobileFormFactor>

ヒント

Outlook アドインのマニフェストの詳細については、「 Office アドインマニフェスト」および「モバイルデバイス上の Outlook でのアドインコマンドのサポートの追加」を参照してください。

オンライン会議の詳細の追加を実装する

このセクションでは、アドインスクリプトがユーザーの会議を更新してオンライン会議の詳細を含める方法について説明します。以下は、サポートされているすべてのプラットフォームに適用されます。

同じクイックスタートプロジェクトから、コードエディターで ./src/commands/commands.js ファイルを開きます。

commands.js ファイルの内容全体を次の JavaScript に置き換えます。

// 1. How to construct online meeting details.
// Not shown: How to get the meeting organizer's ID and other details from your service.
const newBody = '<br>' +
    '<a href="https://contoso.com/meeting?id=123456789" target="_blank">Join Contoso meeting</a>' +
    '<br><br>' +
    'Phone Dial-in: +1(123)456-7890' +
    '<br><br>' +
    'Meeting ID: 123 456 789' +
    '<br><br>' +
    'Want to test your video connection?' +
    '<br><br>' +
    '<a href="https://contoso.com/testmeeting" target="_blank">Join test meeting</a>' +
    '<br><br>';

let mailboxItem;

// Office is ready.
Office.onReady(function () {
        mailboxItem = Office.context.mailbox.item;
    }
);

// 2. How to define and register a function command named `insertContosoMeeting` (referenced in the manifest)
//    to update the meeting body with the online meeting details.
function insertContosoMeeting(event) {
    // Get HTML body from the client.
    mailboxItem.body.getAsync("html",
        { asyncContext: event },
        function (getBodyResult) {
            if (getBodyResult.status === Office.AsyncResultStatus.Succeeded) {
                updateBody(getBodyResult.asyncContext, getBodyResult.value);
            } else {
                console.error("Failed to get HTML body.");
                getBodyResult.asyncContext.completed({ allowEvent: false });
            }
        }
    );
}
// Register the function.
Office.actions.associate("insertContosoMeeting", insertContosoMeeting);

// 3. How to implement a supporting function `updateBody`
//    that appends the online meeting details to the current body of the meeting.
function updateBody(event, existingBody) {
    // Append new body to the existing body.
    mailboxItem.body.setAsync(existingBody + newBody,
        { asyncContext: event, coercionType: "html" },
        function (setBodyResult) {
            if (setBodyResult.status === Office.AsyncResultStatus.Succeeded) {
                setBodyResult.asyncContext.completed({ allowEvent: true });
            } else {
                console.error("Failed to set HTML body.");
                setBodyResult.asyncContext.completed({ allowEvent: false });
            }
        }
    );
}

テストと検証

通常のガイダンスに従ってアドインをテストして検証し、Outlook on the web、Windows (新規またはクラシック)、または Mac でマニフェストをサイドロードします。アドインでモバイルもサポートされている場合は、サイドローディング後に Android または iOS デバイスで Outlook を再起動します。アドインがサイドロードされたら、新しい会議を作成し、Microsoft Teamsまたは Skype トグルが独自のトグルに置き換えられたことを確認します。

会議 UI を作成する

会議の開催者は、会議を作成するときに、次の 3 つの画像のような画面が表示されます。

会議に参加する UI

会議の出席者は、会議を表示すると、次の図のような画面が表示されます。

重要

[参加] ボタンは、Outlook on the web、Mac、Android、iOS、および新しい Outlook on Windows でのみサポートされます。会議リンクのみが表示されていても、サポートされているクライアントに [参加 ] ボタンが表示されない場合は、サービスのオンライン会議テンプレートがサーバーに登録されていない可能性があります。詳細については、「オンライン会議テンプレートを登録する」セクションを参照してください。

オンライン会議テンプレートを登録する

オンライン会議アドインの登録は省略可能です。会議リンクに加えて、会議で [参加 ] ボタンを表示する場合にのみ適用されます。オンライン会議アドインを発行して登録したら、次のガイダンスを使用して GitHub の問題を作成します。登録タイムラインを調整するために、お客様に連絡します。

重要

[参加] ボタンは、Outlook on the web、Mac、Android、iOS、および新しい Outlook on Windows でのみサポートされます。
AppSource に発行されたオンライン会議アドインのみを登録できます。基幹業務アドインはサポートされていません。
[結合] ボタンは、エンティティベースのコンテキスト Outlook アドインで使用されるテクノロジに依存します。このテクノロジは 2024 年 6 月末までに廃止されるため、現在、[参加] ボタンの代替実装が開発されています。この実装への移行中に、オンライン会議アドインを使用している場合、[ 参加 ] ボタンが表示されない場合があります。回避策として、会議に直接参加するには、会議出席依頼の本文から会議リンクを選択する必要があります。エンティティベースのコンテキストアドインの廃止の詳細については、「エンティティベースのコンテキスト Outlook アドインの廃止」を参照してください。

新しい GitHub の問題を作成します。
新しい問題の タイトル を "Outlook: my-service のオンライン会議テンプレートを登録する" に設定し、 my-service をサービス名に置き換えます。
問題本文で、既存のテキストを次のように置き換えます。
- 発行済みアドインの資産 ID。
- この記事の前半の「オンライン会議の詳細の追加を実装する」セクションのnewBodyまたは同様の変数で設定した文字列。
[ 新しい問題の送信] をクリックします。

Contoso サンプルコンテンツを含む新しい GitHub イシュー画面。

使用可能な API

この機能では、次の API を使用できます。

予定オーガナイザー API
認証フローを処理する
- ダイアログ API

制限

いくつかの制限が適用されます。

オンライン会議サービスプロバイダーにのみ適用されます。
既定の Teams または Skype オプションを置き換えると、管理者がインストールしたアドインのみが会議作成画面に表示されます。ユーザーがインストールしたアドインはアクティブ化されません。
アドインアイコンは、16 進コード #919191 またはその同等の色形式を使用してグレースケールにする必要があります。
予定オーガナイザー (新規作成) モードでは、1 つの関数コマンドのみがサポートされます。
アドインは、1 分間のタイムアウト期間内に予定フォームの会議の詳細を更新する必要があります。ただし、認証のために開かれたアドインがダイアログボックスで費やされた時間は、タイムアウト期間から除外されます。

次の方法で共有

オンライン会議プロバイダーの Outlook アドインを作成する

環境を設定する

マニフェストを構成する

モバイルサポートを追加する

モバイルサポートを追加する

オンライン会議の詳細の追加を実装する

テストと検証

会議 UI を作成する

会議に参加する UI

オンライン会議テンプレートを登録する

使用可能な API

制限

関連項目

その他のリソース

次の方法で共有

オンライン会議プロバイダーの Outlook アドインを作成する

環境を設定する

マニフェストを構成する

モバイル サポートを追加する

オンライン会議の詳細の追加を実装する

テストと検証

会議 UI を作成する

会議に参加する UI

オンライン会議テンプレートを登録する

使用可能な API

制限

関連項目

その他のリソース

モバイルサポートを追加する