Office 2016におけるOfficeアドイン進化のポイント：特集：Officeストアで世界に飛び出そう！ 最新Officeアプリ開発入門（3/4 ページ）

» 2016年01月15日 05時00分 公開
前のページへ 1|2|3|4 次のページへ

アドインコマンド

アドインコマンドとは

　これまでのOfficeアドインでは、アプリを作るには一度、作業ウィンドウ（Task pane）などの形でウィンドウ（Pane）を表示して、そこにボタンなど、必要なコントロールを配置するしかなかった。UIを表示する必要がなく、何か直接的な操作をするだけでよい場合でも、その都度、必ずウィンドウを表示する必要があった。

　このような挙動は、コンテキストに応じて動的に表示されるメールアドインのようなものではまだ許容できなくもないが、例えばOutlookの予定を扱うアドインなどでは、利用者がわざわざ「アドイン」と書かれたボタンを押してインストールされているアドイン一覧を表示し、そこから使用するアドインを選択することで初めて操作可能なウィンドウが表示されるなど、利用者にとって分かりづらいものとなっていた。

　Office 2016以降では、こうした直接的な処理に関しては、ここで紹介するアドインコマンド（Add-ins Command）を使うことで、処理を直接実行するためのボタンなどをリボンに配置して、利用者がより簡単に操作できるようになった。

リボンに配置されたアドインコマンドの実行ボタン リボンに配置されたアドインコマンドの実行ボタン

　なお、アドインコマンドは現在のところ、Outlook 2016でのみ正式に使用可能であるが、今後はExcel 2016、Word 2016などでも利用可能になる見込みだ。

　今回は、Outlookを使用して、このアドインコマンドを解説していこう。

マニフェストの記述

　VSTOなどのプログラミング経験がある方にとっては理解しやすいかもしれないが、リボンへのコマンド（ボタンなど）の追加は、独自のXMLを用いて記述していく。具体的には、Officeアドインのマニフェストにこのコマンドの定義を記述する（マニフェストについては「JavaScriptで誰でも簡単に作って稼げる『Officeアドイン』とは？」を参照）。

　なお、Officeアドイン（および、JavaScript API）自体のバージョンが上がるわけではなく、既存のバージョンの拡張として実装されているので、少々面倒なマニフェストの記述が必要だ。

　まず、過去のプラットフォーム（Office 2013）と互換性のあるマニフェストを記入しておき、新しいプラットフォーム（Outlook 2016）で使用された場合には、その内容を上書き（override）するというアプローチでマニフェストを記述する。

　この際に必要になるのが、<VersionOverrides>要素だ。マニフェストには、まず下記の通りに記述する（Office 2013までと同じ方法で記述する）。Office 2016のアドインコマンドの設定は<VersionOverrides>要素の中に書いていく（この内容は、この後で作成しよう）。

<?xml version="1.0" encoding="UTF-8"?>
<OfficeApp
  xmlns="http://schemas.microsoft.com/office/appforoffice/1.1"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0"
  xmlns:mailappor="http://schemas.microsoft.com/office/mailappversionoverrides"
  xsi:type="MailApp">
  <Id>{9AADFD5D-49A0-47C8-897F-1BB59D5116B5}</Id>
  <Version>1.0</Version>
  <ProviderName>Subaru Kokubun</ProviderName>
  <DefaultLocale>en-us</DefaultLocale>
  <DisplayName DefaultValue="My App Test"></DisplayName>
  <Description DefaultValue="This is a test"></Description>
  <Requirements>
    <Sets DefaultMinVersion="1.1">
      <Set Name="Mailbox" />
    </Sets>
  </Requirements>
  <FormSettings>
    <Form xsi:type="ItemRead">
      <DesktopSettings>
        <SourceLocation
          DefaultValue="https://addintest01.azurewebsites.net/app1.html" >
        </SourceLocation>
        <RequestedHeight>150</RequestedHeight>
      </DesktopSettings>
    </Form>
    <Form xsi:type="ItemEdit">
      <DesktopSettings>
        <SourceLocation
          DefaultValue="https://addintest01.azurewebsites.net/app2.html" >
        </SourceLocation>
      </DesktopSettings>
    </Form>
  </FormSettings>
  <Permissions>ReadWriteItem</Permissions>
  <Rule xsi:type="RuleCollection" Mode="Or">
    <Rule xsi:type="ItemIs"
      ItemType="Message"
      FormType="Edit" />
    <Rule xsi:type="ItemIs"
      ItemType="Appointment"
      FormType="Edit" />
  </Rule>
  <DisableEntityHighlighting>true</DisableEntityHighlighting>
  <VersionOverrides
    xmlns="http://schemas.microsoft.com/office/mailappversionoverrides"
    xsi:type="VersionOverridesV1_0">
    <!-- ここは、このあと記述する -->
  </VersionOverrides>
</OfficeApp>

従来と互換性のマニフェストに<VersionOverrides>要素を追加したマニフェスト

JavaScriptコードの実行

　例えば、ボタンを押したら、あるJavaScript関数を実行する場合は、以下の通りマニフェストとJavaScriptのプログラムを記述する。

　まず、下記のJavaScript関数を含むHTMLファイルをどこかインターネット上の見える場所に配置しておく（今回は「myfunc.html」という名前で公開する）。

　なお、下記では単にメールの返信画面を起動しているが、JavaScript API for Officeのメール関連APIでは、アイテム変更（アイテムのComposeの場合）、EWS（Exchange Web Services）の呼び出しなど、多くのことが可能なので、COMアドインに匹敵するほどに細かな処理を記述できるはずだ。

<meta http-equiv="X-UA-Compatible" content="IE=9" >
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
  <title>My Test Page</title>
  <script type="text/javascript"
    src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.debug.js">
  </script>
  <script type="text/javascript">
  Office.initialize = function (reason) 
  {
    //// you can initialize here
    //_Om = Office.context.mailbox;
    //_Item = _Om.item;
    //_UserProfile = _Om.userProfile;
  }

  function showTest(event)
  {
    // if in compose, displayReplyForm does not work ...
    Office.context.mailbox.item.displayReplyForm('reply test !');

    event.completed();
  }
  </script>
</head>
<body>
</body>
</html>

メールの返信画面を起動するアドインコマンド（myfunc.htmlファイル）

　そして、前述のマニフェスト内の<VersionOverrides>要素に以下のように記述する。

　ここでは、リボンにボタンを配置し、このボタンが押されたら上記のshowTest関数を呼び出している。

<VersionOverrides
  xmlns="http://schemas.microsoft.com/office/mailappversionoverrides"
  xsi:type="VersionOverridesV1_0">

  <Description resid="residDesc" />

  <Requirements>
    <bt:Sets DefaultMinVersion="1.3">
      <bt:Set Name="Mailbox" />
    </bt:Sets>
  </Requirements>

  <Hosts>
    <Host xsi:type="MailHost">

      <DesktopFormFactor>
        <FunctionFile resid="residFuncUrl" />

        <ExtensionPoint xsi:type="MessageReadCommandSurface">
          <OfficeTab id="TabDefault">
            <Group id="msgreadTabMessage.grp1">
              <Label resid="residLabel" />
              <Tooltip resid="residLabelTip" />

              <Control xsi:type="Button" id="button1id">
                <Label resid="residUILessButton" />
                <Tooltip resid="residTip" />
                <Supertip>
                  <Title resid="residSuperTipTitle" />
                  <Description resid="residSuperTipDesc" />
                </Supertip>
                <Icon>
                  <bt:Image size="16" resid="icon1" />
                  <bt:Image size="32" resid="icon2" />
                  <bt:Image size="80" resid="icon3" />
                </Icon>
                <Action xsi:type="ExecuteFunction">
                  <FunctionName>showTest</FunctionName>
                </Action>
              </Control>

            </Group>
          </OfficeTab>
        </ExtensionPoint>
      </DesktopFormFactor>
    </Host>
  </Hosts>

  <Resources>
    <bt:Images>
      <bt:Image id="icon1"
        DefaultValue="https://addintest01.azurewebsites.net/myimg16.bmp" >
      </bt:Image>
      <bt:Image id="icon2"
        DefaultValue="https://addintest01.azurewebsites.net/myimg32.bmp" >
      </bt:Image>
      <bt:Image id="icon3"
        DefaultValue="https://addintest01.azurewebsites.net/myimg80.bmp">
      </bt:Image>
    </bt:Images>
    <bt:Urls>
      <bt:Url id="residFuncUrl"
        DefaultValue="https://addintest01.azurewebsites.net/myfunc.html" >
      </bt:Url>
    </bt:Urls>
    <bt:ShortStrings>
      <bt:String id="residLabel"
        DefaultValue="Test App">
      </bt:String>
      <bt:String id="residUILessButton"
        DefaultValue="Do Func">
      </bt:String>
      <bt:String id="residSuperTipTitle"
        DefaultValue="SuperTip Title">
      </bt:String>
    </bt:ShortStrings>
    <bt:LongStrings>
      <bt:String id="residDesc"
        DefaultValue="This is an add-in test.">
      </bt:String>
      <bt:String id="residLabelTip"
        DefaultValue="This is an add-in test.">
      </bt:String>
      <bt:String id="residTip"
        DefaultValue="Run Test app">
      </bt:String>
      <bt:String id="residSuperTipDesc"
        DefaultValue="Run Test App">
      </bt:String>
    </bt:LongStrings>
  </Resources>

</VersionOverrides>

リボンに追加するボタンを<VersionOverrides>要素に記述

　このOfficeアドインを登録してOutlook 2016で開くと、下図の通り、メールの読み込み（Read）の際にカスタムのボタンが表示される。

リボンに表示された返信画面の起動ボタン リボンに表示された返信画面の起動ボタン

　このボタンをクリックすると、下図の通り、選択したメールの返信画面が起動する。

起動した返信画面 起動した返信画面

　上記のマニフェストで、<ExtensionPoint>のxsi:type属性に指定している「MessageReadCommandSurface」は、「MailのReadの画面（読み込み画面）にボタンを配置」という意味だ。つまり、ここに別の種類を指定することで、「Compose」（メール作成／変更）の画面にボタンを配置したり、予定（Appointment）の作成や閲覧の画面にボタンを配置したりできるということだ。

　なお、リボンにボタンを配置するのではなく、従来のように作業ウィンドウ（custom pane）を配置する場合、新バージョンのAPIではxsi:type属性に「CustomPane」と指定して作業ウィンドウの内容を記述できる（作業ウィンドウをOffice 2013とOffice 2016の双方のバージョンに対応させる場合は、マニフェストにOffice 2013用の従来の定義と、<VersionOverrides>要素でのOffice 2016用の定義の両方を書いておく必要がある）。

前のページへ 1|2|3|4 次のページへ

Copyright© Digital Advantage Corp. All Rights Reserved.

＠IT

@ITについて

RSSについて

アイティメディアIDについて

メールマガジン登録

＠ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。