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

  • [アーティクル]

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

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

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

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

環境を設定する

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

予定のメモをキャプチャして表示する

関数コマンドまたは作業ウィンドウを実装することを選択できます。 アドインを更新するには、関数コマンドまたは作業ウィンドウのタブを選択し、指示に従います。

このオプションを使用すると、ユーザーはリボンから関数コマンドを選択するときに、予定に関するメモやその他の詳細をログに記録して表示できます。

マニフェストを構成する

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

注:

Microsoft 365 (プレビュー) 用の統合マニフェストを使用するアドインは、現在モバイル デバイスではサポートされていません。

  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"/>
          <ExtensionPoint xsi:type="AppointmentAttendeeCommandSurface">
            <OfficeTab id="TabDefault">
              <Group id="apptReadGroup">
                <Label resid="residDescription"/>
                <Control xsi:type="Button" id="apptReadOpenPaneButton">
                  <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"/>
          <ExtensionPoint xsi:type="MobileLogEventAppointmentAttendee">
            <Control xsi:type="MobileButton" id="appointmentReadFunctionButton">
              <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>

ヒント

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

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

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

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

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

    var event;

Office.initialize = function (reason) {
  // Add any initialization code here.
};

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" },
    function 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);

次に、 commands.html ファイル commands.js参照するように 更新します。

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

  2. を見つけて、次のように置き換えます <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script> 。

    <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>
<script type="text/javascript" src="commands.js"></script>

予定のメモを表示する

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

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

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

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

次に、アドインが予定のメモを正常にログに記録した後、それを呼び出します。 たとえば、次の関数に示すように 、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" },
    function 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 つのオプションがあります。

  1. Microsoft Graph を使用して、ユーザーがリボンの適切なボタンを選択したときに カスタム プロパティ オブジェクトをクリア します。

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

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

次に、カスタム プロパティをクリアするときに呼び出します。 たとえば、次の関数に示すように、ログの設定が何らかの方法で失敗した場合は、 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" },
    function 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 分間のタイムアウト期間内に予定フォームから会議の詳細を抽出する必要があります。 ただし、認証のために開かれたアドインがダイアログ ボックスで費やされた時間は、タイムアウト期間から除外されます。

関連項目