特集
» 2013年03月04日 16時32分 公開

特集:Officeストアで世界に飛び出そう! 最新Office 2013アプリ開発入門(後編):「Officeアドイン」の作り方と、できること/できないこと (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クライアントでどのような対応状況になるかも、今後注意して見ておく必要があるだろう。

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

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

メールマガジン登録

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