Outlook モバイル アドインで予定メモを外部アプリケーションに記録する

  • [アーティクル]

予定のメモやその他の詳細を顧客関係管理 (CRM) またはメモ作成アプリケーションに保存すると、出席した会議を追跡するのに役立ちます。

この記事では、Outlook モバイル アドインを設定して、ユーザーが自分の予定に関するメモやその他の詳細を CRM またはノート作成アプリケーションに記録できるようにする方法について説明します。 この記事では、"Contoso" という架空の CRM サービス プロバイダーを使用します。

関数コマンドまたは作業ウィンドウ アドインを実装することを選択できます。 関数コマンドの実装を使用すると、ユーザーはアドイン ボタンを選択するときに、予定に関するメモやその他の詳細をログに記録して表示できます。 作業ウィンドウの実装を使用すると、ユーザーは作業ウィンドウ インターフェイスから予定のメモを直接管理できます。 この記事の手順に従って、開発中のアドインの種類のタブを選択します。

サポートされるクライアント

Outlook モバイル アドインから外部アプリケーションへのノートのログ記録は、Outlook on Android および Microsoft 365 サブスクリプションの iOS でサポートされています。

環境を設定する

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

マニフェストを構成する

アドインのマニフェストを構成するには、使用しているマニフェストの種類を選択します。

Microsoft 365 の統合マニフェスト

  1. コード エディターでクイック スタート プロジェクトを開きます。

  2. プロジェクトのルートにある manifest.json ファイルを開きます。

  3. "authorization.permissions.resourceSpecific" 配列で、 最初 のオブジェクトを見つけて、その "name" プロパティを "MailboxItem.ReadWrite.User" に設定します。 完了すると、次のようになります。

    {
    "name": "MailboxItem.ReadWrite.User",
    "type": "Delegated"
}

  4. "validDomains" 配列に、 の URL が含まれていることを https://www.contoso.com 確認します。 完了すると、配列は次のようになります。

    "validDomains": [
    "https://www.contoso.com"
],

  5. "extensions.runtimes" 配列で、"id" が "TaskPaneRuntime" に設定されているオブジェクトを削除します。

  6. 同じ配列で、"id" が "CommandsRuntime" に設定されている残りのオブジェクトに移動し、次のオブジェクトに置き換えます。

    {
    "requirements": {
        "capabilities": [
            {
                "name": "Mailbox",
                "minVersion": "1.3"
            }
        ]
    },
    "id": "CommandsRuntime",
    "type": "general",
    "code": {
        "page": "https://localhost:3000/commands.html",
        "script": "https://localhost:3000/commands.js"
    },
    "lifetime": "short",
    "actions": [
        {
            "id": "logCRMEvent",
            "type": "executeFunction"
        }
    ]
}

  7. "ribbons" 配列で、既存のオブジェクトを次のコードに置き換えます。 これらの変更については、次の点に注意してください。

    • "ribbons.requirements.formFactors" 配列の "デスクトップ" と "モバイル" の値は、モバイル デバイスとデスクトップ クライアントの Outlook に表示されるように [Contoso CRM にログを記録 する] ボタンを構成します。
    • "contexts" 配列の "logEventMeetingDetailsAttendee" 値は、ユーザーが予定のメモをログに記録できるように、アドイン ボタンを [予定出席者] 画面に表示するように構成します。
    • "ribbons.tabs.groups.controls" 配列の オブジェクトは、Outlook デスクトップ クライアントでノート ログ機能を呼び出すアドイン ボタンを構成します。 "actionId" プロパティは、"extensions.runtimes" 配列内のオブジェクトの "actions.id" と一致する必要があります。
    • "ribbons.tabs.customMobileRibbonGroups" 配列の オブジェクトは、モバイル デバイス上の Outlook でノート ログ機能を呼び出すアドイン ボタンを構成します。 モバイル ボタンには、"customMobileRibbonGroups.controls.icons" 配列で指定された 9 つのオブジェクトがすべて必要です。 さらに、"customMobileRibbonGroups.controls.actionId" プロパティは、"extensions.runtimes" 配列内のオブジェクトの "actions.id" と一致する必要があります。
    {
    "requirements": {
        "formFactors": [
            "desktop",
            "mobile"
        ]
    },
    "contexts": [
        "logEventMeetingDetailsAttendee"
    ],
    "tabs": [
        {
            "builtInTabId": "TabDefault",
            "groups": [
                {
                    "id": "apptReadGroup",
                    "label": "Contoso Add-in",
                    "icons": [
                        {
                            "size": 16,
                            "url": "https://localhost:3000/assets/icon-16.png"
                        },
                        {
                            "size": 32,
                            "url": "https://localhost:3000/assets/icon-32.png"
                        },
                        {
                            "size": 80,
                            "url": "https://localhost:3000/assets/icon-80.png"
                        }
                    ],
                    "controls": [
                        {
                            "id": "desktopLogToCRM",
                            "type": "button",
                            "label": "Log to Contoso CRM",
                            "icons": [
                                {
                                    "size": 16,
                                    "url": "https://www.contoso.com/assets/icon-16.png"
                                },
                                {
                                    "size": 32,
                                    "url": "https://www.contoso.com/assets/icon-32.png"
                                },
                                {
                                    "size": 80,
                                    "url": "https://www.contoso.com/assets/icon-80.png"
                                }
                            ],
                            "supertip": {
                                "title": "Log to Contoso CRM",
                                "description": "Log notes to Contoso CRM for this appointment."
                            },
                            "actionId": "logCRMEvent"
                        }
                    ]
                }
            ],
            "customMobileRibbonGroups": [
                {
                    "id": "mobileApptReadGroup",
                    "label": "Contoso Add-in",
                    "controls": [
                        {
                            "id": "mobileLogToCRM",
                            "label": "Log to Contoso CRM",
                            "buttonType": "MobileButton",
                            "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"
                                }
                            ],
                            "actionId": "logCRMEvent"
                        }
                    ]
                }
            ]
        }
    ]
}

  8. 変更内容を保存します。

XML マニフェスト

ユーザーがアドインで予定メモをログに記録できるようにするには、親要素 MobileFormFactorの下のマニフェストで MobileLogEventAppointmentAttendee 拡張ポイントを構成する必要があります。 その他のフォーム ファクターはサポートされていません。

  1. コード エディターでクイック スタート プロジェクトを開きます。

  2. プロジェクトのルートにある manifest.xml ファイルを開きます。

  3. ノード全体 <VersionOverrides> (開いているタグと閉じるタグを含む) を選択し、次の XML に置き換えます。 Contoso へのすべての参照を会社の情報に置き換えてください。

    <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"/>
          <!-- Configures the add-in button to appear in the Appointment Attendee surface of Outlook desktop clients. -->
          <ExtensionPoint xsi:type="AppointmentAttendeeCommandSurface">
            <OfficeTab id="TabDefault">
              <Group id="apptReadGroup">
                <Label resid="residDescription"/>
                <Control xsi:type="Button" id="apptReadDesktopFunctionButton">
                  <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="80" resid="icon-80"/>
                  </Icon>
                  <Action xsi:type="ExecuteFunction">
                    <FunctionName>logCRMEvent</FunctionName>
                  </Action>
                </Control>
              </Group>
            </OfficeTab>
          </ExtensionPoint>
        </DesktopFormFactor>
        <MobileFormFactor>
          <FunctionFile resid="residFunctionFile"/>
          <!-- Configures the add-in button to appear in the Appointment Attendee surface of Outlook on mobile devices. -->
          <ExtensionPoint xsi:type="MobileLogEventAppointmentAttendee">
            <Control xsi:type="MobileButton" id="apptReadMobileFunctionButton">
              <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>logCRMEvent</FunctionName>
              </Action>
            </Control>
          </ExtensionPoint>
        </MobileFormFactor>
      </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-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="Log appointment notes and other details to Contoso CRM."/>
        <bt:String id="residLabel" DefaultValue="Log to Contoso CRM"/>
      </bt:ShortStrings>
      <bt:LongStrings>
        <bt:String id="residTooltip" DefaultValue="Log notes to Contoso CRM for this appointment."/>
      </bt:LongStrings>
    </Resources>
  </VersionOverrides>
</VersionOverrides>

  4. 変更内容を保存します。

ヒント

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

予定のメモをキャプチャする

このセクションでは、ユーザーが [ログ ] ボタンを選択したときにアドインが予定の詳細を抽出する方法について説明します。

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

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

    let event;

// Add start-up logic code to the onReady function, if any.
Office.onReady();

function logCRMEvent(appointmentEvent) {
  event = appointmentEvent;
  console.log(`Subject: ${Office.context.mailbox.item.subject}`);
  Office.context.mailbox.item.body.getAsync(
    "html",
    { asyncContext: "This is passed to the callback" },
    (result) => {
      if (result.status === Office.AsyncResultStatus.Succeeded) {
        event.completed({ allowEvent: true });
      } else {
        console.error("Failed to get body.");
        event.completed({ allowEvent: false });
      }
    }
  );
}

// Register the function.
Office.actions.associate("logCRMEvent", logCRMEvent);

  3. 変更内容を保存します。

  4. アドイン プロジェクトの ./src/commands/commands.html ファイルを開きます。

  5. を見つけて <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>、その後に次のコードを追加します。 これにより、 commands.js ファイルへの参照が追加されます。

    <script type="text/javascript" src="commands.js"></script>

  6. 変更内容を保存します。

予定のメモを表示する

[ログ] ボタン ラベルを切り替えて表示するには、この目的で予約されている EventLogged カスタム プロパティを設定します。 ユーザーが [表示 ] ボタンを選択すると、この予定の記録されたメモを確認できます。

アドインは、ログ表示エクスペリエンスを定義します。 たとえば、関数コマンドの実装では、ユーザーが [表示 ] ボタンを選択したときに、ログに記録された予定のメモをダイアログに表示できます。 ダイアログを実装する方法の詳細については、「 Office アドインで Office ダイアログ API を使用する」を参照してください。

  1. ./src/commands/commands.jsで、次の関数を追加します。 この関数は、現在の予定アイテムの EventLogged カスタム プロパティを設定します。

    function updateCustomProperties() {
  Office.context.mailbox.item.loadCustomPropertiesAsync((customPropertiesResult) => {
    if (customPropertiesResult.status === Office.AsyncResultStatus.Succeeded) {
      const customProperties = customPropertiesResult.value;
      customProperties.set("EventLogged", true);
      customProperties.saveAsync((setSaveAsyncResult) => {
        if (setSaveAsyncResult.status === Office.AsyncResultStatus.Succeeded) {
          console.log("EventLogged custom property saved successfully.");
          event.completed({ allowEvent: true });
          event = undefined;
        }
      });
    }
  });
}

  2. 変更内容を保存します。

  3. アドインが予定のメモを正常にログに記録した後、 updateCustomProperties 関数を呼び出します。 たとえば、次のコードに示すように 、logCRMEvent から呼び出すことができます。

    function logCRMEvent(appointmentEvent) {
  event = appointmentEvent;
  console.log(`Subject: ${Office.context.mailbox.item.subject}`);
  Office.context.mailbox.item.body.getAsync(
    "html",
    { asyncContext: "This is passed to the callback" },
    (result) => {
      if (result.status === Office.AsyncResultStatus.Succeeded) {
        // Replace `event.completed({ allowEvent: true });` with the following statement.
        updateCustomProperties();
      } else {
        console.error("Failed to get body.");
        event.completed({ allowEvent: false });
      }
    }
  );
}

予定ログを削除する

ユーザーがログ記録を元に戻すか、ログに記録された予定のメモを削除して、置き換えログを保存できるようにする場合は、2 つのオプションがあります。

  • ユーザーが作業ウィンドウで適切なボタンを選択したときに、Microsoft Graph を使用して カスタム プロパティ オブジェクトをクリア します。
  • 現在の予定アイテムの EventLogged カスタム プロパティをクリアする関数をCreateします (次の例を参照)。

  1. ./src/commands/commands.jsで、次の関数を追加して、現在の予定アイテムの EventLogged カスタム プロパティをクリアします。

    function clearCustomProperties() {
  Office.context.mailbox.item.loadCustomPropertiesAsync((customPropertiesResult) => {
    if (customPropertiesResult.status === Office.AsyncResultStatus.Succeeded) {
      const customProperties = customPropertiesResult.value;
      customProperties.remove("EventLogged");
      customProperties.saveAsync((removeSaveAsyncResult) => {
        if (removeSaveAsyncResult.status === Office.AsyncResultStatus.Succeeded) {
          console.log("Custom properties cleared");
          event.completed({ allowEvent: true });
          event = undefined;
        }
      });
    }
  });
}

  2. 変更内容を保存します。

  3. カスタム プロパティをクリアする場合 は、clearCustomProperties 関数を呼び出します。 たとえば、次の関数に示すように、ログの設定が何らかの方法で失敗した場合は、 logCRMEvent から呼び出すことができます。

function logCRMEvent(appointmentEvent) {
  event = appointmentEvent;
  console.log(`Subject: ${Office.context.mailbox.item.subject}`);
  Office.context.mailbox.item.body.getAsync(
    "html",
    { asyncContext: "This is passed to the callback" },
    (result) => {
      if (result.status === Office.AsyncResultStatus.Succeeded) {
        updateCustomProperties();
      } else {
        console.error("Failed to get body.");
        // Replace `event.completed({ allowEvent: false });` with the following statement.
        clearCustomProperties();
      }
    }
  );
}

テストと検証

  1. 通常のガイダンスに従って、 アドインをテストして検証します。
  2. Outlook on the webアドインをサイドロードした後、Windows (クラシックまたは新規 (プレビュー))、または Mac で、Android または iOS モバイル デバイスで Outlook を再起動します。
  3. 出席者として予定を開き、Meeting Insights カードの下に、アドインの名前が [ログ] ボタンと共に新しいカードがあることを確認します。

UI: 予定のメモをログに記録する

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

Android の予定画面の [ログ] ボタン。

UI: 予定ログを表示する

予定のメモを正常にログに記録した後、ボタンに [ログ] ではなく [表示] というラベルが付けられます。 次の図のような画面が表示されます。

Android の予定画面の [表示] ボタン。

使用可能な API

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

モバイル デバイス上の Outlook でサポートされる API の詳細については、「モバイル デバイス上の Outlook でサポートされる Outlook JavaScript API」を参照してください。

制限

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

  • [ログ] ボタン名は変更できません。 ただし、予定アイテムにカスタム プロパティを設定することで、別のラベルを表示する方法があります。 詳細については、「 予定のメモを表示する」を参照してください。
  • [ログ] ボタンのラベルを [表示] と [戻る] に切り替える場合は、EventLogged カスタム プロパティを使用する必要があります。
  • アドイン アイコンは、16 進コード #919191 またはその同等の 色形式を使用してグレースケールにする必要があります。
  • アドインは、1 分間のタイムアウト期間内に予定フォームから会議の詳細を抽出する必要があります。 ただし、認証のために開かれたアドインがダイアログ ボックスで費やされた時間は、タイムアウト期間から除外されます。

関連項目