「Officeアドイン」の作り方と、できること／できないこと：特集：Officeストアで世界に飛び出そう！ 最新Office 2013アプリ開発入門（後編）（3/4 ページ）

[国分すばる，著]

Officeアドインの内部動作とマルチ・デバイスへの挑戦

　昨今のMicrosoft Officeクライアント（Excel、Word、Outlookなど）は、iPhone 版、Android 版などマルチデバイスへの対応も行われ、Windowsだけでなく、ARM端末のタブレットPC用にもタッチに最適化されたMicrosoft Officeクライアントが提供されている（参考：「Office 2013に見る、現実的なタッチ・アプリの方向性」）。しかしこれらは、軽量な端末でも快適に動作できるよう、いくつかのクライアント側の機能をそぎ落としており、VBA（マクロ)やCOMアドインなど、Windows版のMicrosoft Officeクライアントでは普通に動くカスタムコードの多くは、これら非Windows環境やタブレット版のMicrosoft Officeクライアントでは動作しない。

　その一方で、この連載で紹介しているOfficeアドイン（OfficeのWebアドイン）は、将来的に、これら全てのデバイスで動作させる計画になっている（現在は、後述するOffice OnlineやiPad版のExcelなどで動作するが、その他のMicrosoft OfficeクライアントのiPad版や、iPhone版、Mac版、Android版については今後対応予定となっている）。昨今、ビジネスの場面においても、タブレットPCの簡易端末を使ったアプリが使用されつつあるが（例えば、外回りの営業担当者が使用するタブレットの専用アプリなど）、Excelなどを使ったこうした軽量デバイス向けのカスタム・アプリを提供する場合を考慮すると、実は、Officeアドインは必然の選択肢となるのだ。

　また、ブラウザ版のOfficeも、マルチ・デバイス対応する際の重要な選択肢の1つだ。そもそもOfficeアドインは、ブラウザ上で動作し、Microsoft Officeクライアント（Excel 2013、Word 2013、Outlook 2013など）と連携しているにすぎない。Microsoft Officeクライアントで動作する場合、Officeアドインは、Web Browserコントロール上で動作し、JavaScriptを使ったブラウザ外連携の手法（＝Internet Explorerで使用可能な手法）を使ってMicrosoft Officeクライアントと連携している。

　また、Excel、Outlookについては、ブラウザ上で動作するOffice Online（旧 Office Web App）（Excel Online、Outlook Web App）でもOfficeアドインが動作するようになっていて、この場合には、単純にiframe（＝sandbox属性の付与された<iframe>タグ）が使用され、HTML5のフレーム間通信（＝JavaScriptのpostMessageによる通信）によって、Office Online（旧 Office Web App）とOfficeアドインが協調動作するようになっている（なお、こうした動作について詳しくは、「MSDN : Office Add-ins platform overview」に記述されている）。

　例えば前編で紹介したBing Mapsのアプリ（次の画面を参照）は、OneDrive（旧 SkyDrive）／Office 365（2013年2月27日にリリースされた新Office 365）のExcel Onlineでも問題なく動作する（ただしOffice 365の場合は、あらかじめSharePoint管理センターで、Officeアドインの設定を有効にしておく必要があるので注意してほしい）。

OneDrive（旧 SkyDrive）のExcel Onlineで表示したBing Mapsアプリ

　また、上述の通り、モバイルデバイスも考慮しておく必要があるので注意してほしい。例えば、現在でも、iPhoneなどのモバイル・デバイスを使ってOutlook Web AppのMobile Viewでメール・アドインが使えるが、この場合の動きに注意してほしい。

　次の画面は、上述のGoogleマップを表示するメール・アドインのサンプルをiPhoneで表示した場合だが、Mobile Viewでは、このように画面いっぱいにメール・アドインが表示される。

iPhoneを使ったOutlook Web Appによるメール・メッセージの参照（上）とOfficeアドインの表示（下）

　このようにモバイル・デバイスに対応する場合は、「レスポンシブWebデザイン」と呼ばれる、画面サイズに応じて柔軟に表示を切り替えるWebデザイン手法も意識してプログラミングを行うべきだ。

　なお、上の画面のようにモバイル・デバイスでも使えるようにするには、マニフェストXMLファイル（.xmlファイル）に各デバイス向けのURLを記述しておく必要がある（下記のとおり、デバイスの種類ごとにURLを分けることができる）。

<?xml version="1.0" encoding="utf-8"?>
<OfficeApp . . .>
  ……省略……

  <Hosts>
    <Host Name="Mailbox" />
  </Hosts>

  <DesktopSettings>
    <SourceLocation DefaultValue="https://appstest1.azurewebsites.net/Pages/TestMailApp.html" />
    <RequestedHeight>250</RequestedHeight>
  </DesktopSettings>

  <TabletSettings>
    <SourceLocation DefaultValue="https://appstest1.azurewebsites.net/Pages/TestMailApp.html" />
    <RequestedHeight>150</RequestedHeight>
  </TabletSettings>

  <PhoneSettings>
    <SourceLocation DefaultValue="https://appstest1.azurewebsites.net/Pages/TestMailApp.html" />
  </PhoneSettings>

  ……省略……

</OfficeApp>

モバイル・デバイスに対応したマニフェストXMLファイル（.xml）

　このように、多くのデバイスに対応できるようデザインされたOfficeアドインではあるが、上述の仕組み（内部動作）のため、いくつか留意事項もあるので注意してほしい。

　仕様上（ドキュメント上）は、デスクトップのOfficeクライアント（のExcel 2013やOutlook 2013）で動作させる場合も、Office Online（旧 Office Web App）（のExcel OnlineやOutlook Web App）で動作させる場合も機能差はないが、実際にはいくつか細かな相違が生じるだろう。例えばOffice 365ではhttps（SSL）でホストされるため、CDN（コンテンツ配信ネットワーク）上のスクリプト・ライブラリ（Office.jsやjquery.jsなど）を参照する場合も、https（SSL）を使用して参照しておく必要がある（次のコードを参照）。httpsを使用しないと、Office Online（旧 Office Web App）で動作させた場合だけ参照に失敗することになるだろう。

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<script src="https://appsforoffice.microsoft.com/lib/1.0/hosted/office.js"></script>

Officeアドインではhttps（SSL）のスクリプト・ライブラリを参照する必要がある

　また、Internet Explorerに大きく依存するため、Edgeが既定ブラウザーとなっているWindows 10や、Windows環境以外のMicrosoft Officeクライアントでどのような対応状況になるかも、今後注意して見ておく必要があるだろう。