Office アドイン活用【基本① Office アドインの基礎・応用】

 これから数回かけまして、Office アドインの基本的な知識や、少し応用的な内容を記載していきたいと思います。
Office アドインに一から取り組む方や、作成途中で詰まってしまった方など、
多くの方の手助けになればと思っております！！

今回は、Office アドインアプリを実際に開発した人間の観点から、
Office アドインの特徴をまとめた内容になります。

【注意】

このブログに記載した内容は、一開発者としての見解を述べたものになっており、
ジョルダン株式会社の公式見解ではありません。
また、当ブログでは、ジョルダン株式会社開発の「乗換案内Biz for Office」を基として解説を行います。

とはいえ、Office アドインの本当に基本的な所、「Office アドインってそもそも何？？？」といったことは、
今回説明から省きます。
具体的なことについては、下記の参考文献よりご参照ください。
【参考例】
https://msdn.microsoft.com/ja-jp/library/office/jj220082.aspx
http://itpro.nikkeibp.co.jp/article/COLUMN/20140303/540663/?ST=develop&P=2
http://www.ka-net.org/blog/?page_id=2760

ざっくりとまとめると、
■Office2013やOffice365で動作するアプリケーション
■アプリ部分は、HTML、CSS、Javascript等で作成する
■Excel・Word・PowerPoint用、Outlook用、SharePoint用などがある
■最近「Office用アプリ（英語名"Apps for Office"）」から「Office アドイン（英語名"Office Add-ins"）」に名称変更
ということになります。

ちなみに、「乗換案内Biz for Office」の起動画面はこんな感じ。

今回は、上記で記載した内容を踏まえて、
「"通な"Office アドインの基礎・応用」ということで説明を進めていきます。

(1)Office アドインはWebアプリケーションである
　→PHPやJava、C#、Rubyなど、サーバーサイド言語を使用した開発が"基本的に"実装可能　

　アプリを起動した時のOfficeの画面を、Excelを例にして解説します。
　
　ざっと分けるのであれば、"Officeドキュメント部分"、"アプリ部分"、そして"office.js"の3つの部品から成り立ちます。
　Excelの表部分・Wordのテキスト等のOfficeドキュメントと、アプリのデータのやり取りは、
　"office.js"と呼ばれる、Javascriptのライブラリを呼び出して行います。
　
　言い方を変えるならば、
"データのやり取りをするタイミングでoffice.jsを呼び出せさえすれば、アプリ部分は、どのようなWeb開発手法でも作成できる"ということになります。
「乗換案内Biz for Office」はC#のASP.NET MVCで開発されていますし、
試してはいませんが、AngularJSやRuby on Rails、node.jsなどでも開発できるはずです。　

　多くの文献で、「Office アドインはHTML、css、Javascriptで開発する」と書いているので、割と盲点ですが、
　サーバーサイド言語もガシガシ使ったほうが、アプリの幅が一気に広がるはずです！
　

　ただし、"基本的に"と記載しました。
　Office アドインの特性上、重要な注意点がありますので、それについては後述していきます。
　

(2)Office2013(Client版)とOffice 365(Web App版)とでは、アプリの実装方式が異なる
　→Clientの場合はIE搭載、Web Appの場合はiframe
　
　冒頭で、「Office2013やOffice365で動作するアプリケーション」と記載しましたが、
　この2種類のOfficeの、アプリの実装方法は異なっております。
　これらの違いをはじめに把握していないと、
　「Office2013では動くのに、Office365では動かない！なんでだ！(#ﾟДﾟ)」
　というドツボにハマることが大いに有り得るので、注意してください！（※以前相当ハマりました）
　
・Office2013(Client版)の場合
　あくまでもイメージですが、Office2013でアプリを起動した場合、
　「Office上でIEが立ち上がり、アプリが起動する」ということになります。

※イメージです　

　IEがそのまま動作しているイメージなので、通常のブラウザ起動とほぼ同等の形式で、アプリが起動していきます。

・Office365(Web App版)の場合
　一方、Office365上で動作させた場合というと、
　アプリはiframe内で動作することになります。

※イメージです

　
　"iframe"と聞いただけで、もしかしたら嫌な顔をする人がいるかもしれないですね。

　iframeをなので、クロスドメイン問題、クリックジャッキング問題など、セキュリティの面でかなりの制約を追うことになります。
　そのため、"Webアプリだ！！"と思い込んで何も考えずに実装してしまうと、後々かなり面倒な羽目になるので、お気をつけ下さい！（※以前相当ry）
　
　また、Office Add-insでは"cookie使用を非推奨"としているようです。

　（参考文献は別途調査します）
　iframeを使っており、「3rd Party Cookie」対策もあるのでしょう。
　cookieが使えないので、基本的にセッション管理は出来ない事になります。（一応、セッション管理にはcookielessモードもあります）
　このあたりも考慮に入れた実装が必要になります。
　

　iframeが原因なのかは分かりませんが、Office365ではアプリの幅を変更できません。固定になっております。

　幅が狭い状況でも、うまく動作するアプリケーションが必要となってきますので、その点をお気をつけ下さい。

以上、ざっとコアな部分も含めて、Office アドインの特徴をまとめました。
これからストア投稿等を考えている方は、このあたりを是非考慮に入れた構築をして下さい！

だれでも同じ画面を見るアプリならば問題ないですが、
認証など、ユーザー固有の画面表示をする場合は、上記のような大きな問題を回避していく必要があります。
次回以降、制約をうまく回避した上で、
セッションもどきの実装、Office 365 API連携、DB連携、他社APIとの連携...
など、実践的な内容を解説しています！