4,497 views(since 2013/10/08)

オフィスアプリを開発する前にここを読もう!!(App for Office 2013 編 Microsoft dev camp)

はじめに

MicrosoftのApp for Office/ App for SharePoint のトレーニングに行ってきました。 こんな解りやすい資料がるなら、最初に読んでおけば良かったです。 これを読めば、かなり理解が早くなるので、開発する人は一読しておいた方がいいです!! ちなみに英文ですw App for office 2013/App for SharePoint 勉強資料は以下からダウンロードできなくなった。(2013/2/14)

ちょっと驚いたこと!

App for Office(Office アプリ)

  1. App for Office2013(オフィスアプリ)は Webブラウザーで動作するOffice, Offiec Web Apps でもローカルOfficeでもどちらでも動作する。(outlookは制限がありそう。)
  2. ここさえわかれば、簡単だ、アプリのインストールとはアプリの場所等やアクセス権限等が保存されているmanifestファイル(xml)をOffice(Excel, Outlook, Word等)に取り込むことだ、アプリ本体(HTML+Javascript)はWEBサーバに置くのだ!! たとえばExcelアプリなんかは、そのmanifestファイルをみてExcel上にアプリを表示させWebサーバからHTML+JavaScriptをダウンロードして、そのExcelアプリとExcelオブジェクトと通信してデータの設定やイベント処理を行う。
  3. ※OutlookはExchangeサーバにManifestファイル(xml)がインストールされる
  4. Napa(SharePoint2013 Webベースの開発ツール)でOfficeアプリを作成しデバックまでできる。

オフィスアプリ開発 (Develop App for Office 2013)

appforoffice2013develop ダウンロードした資料の以下のPDFを開いてください。 devcampfeb13_forattendee.zip\2 – Developing Apps for Office\WDTK_Developing Apps for Office_v2.pdf

Page 1/Waht is the Web Extensibility Framework

これはMicrosoft office(Excel, word, outlook) の中に HTML/JavaScript のWeb Clientの枠です。 この中にWebサーバにHTTPリクエストして、HTML等のコンテンツを取得します。

Page 3/Anatomy of an App for Office

オフィスアプリのインストール時にはこの HTMLコンテンツはサーバに配置して、 アプリには マニフェスト(Manifest)ファイル(アプリの位置等の情報等,Visual Studioでの名前は”xml”)Excel,word,officeにインストールされます。

vs2012_app_for_office

なお、IE9以上に搭載されている【ブラウザコントロール】が必要となる。 また Microsoft が用意した javascript を HTML に include することにより Excel のセル等のオブジェクト等にアクセスできます。

Page 8/Using Bindings

Excel のセルの値と、アプリとの通信にバインド(Bind)を使うと、データがリンクされる、また、イベントハンドラー(Event Handler)が実装できるので、データが更新されたときにプログラムを動かせる。

Page 8/User Experience Guidelines

いくつかアプリを作成するに当たり、推奨するガイドラインがあります。 といっても、そんなに厳しい基準があるわけではない。 「Office 用アプリの UX 設計ガイドライン」 http://msdn.microsoft.com/ja-jp/library/fp161012.aspx

Page 10/RequestedCapabilities

アプリから Office(Excel、Word、Outlook 等)からの読み込み/書き込み等のアクセス権限を設定 設定例(manifestファイル;xml) <Permissions>ReadWriteDocument</Permissions> vs2012_app_for_office2

重要、ローミング(roaming)設定とはローカルに保存しておきたい情報をここに設定する。 参考 Page 4/Core API Objects documentという図のところに、Read and Write とかいてあるが、この権限がないとdocument(Excel object,word object, outlook object)を読み込めない。

Page 10/Mail Apps

Page 10/Mail Apps  – Up Close and personal Outlook のメール本文等に App for Office (オフィスアプリ)を表示できる。 アクティベーションルール(Activation Rule:アクティブ化規則)が存在し、アプリが動作するためのルール付けを行うことができる。 例)  ・メール本文であること  ・メール本文内で、住所があること  など、色々と定義ができるようです。 アクティベーションルールに該当するならば、設置したアプリが動作するといったものだ。

Page 11/Mail App Hosting

outlookアプリの話 サンドボックス(sandbox solution)で動作します。 配置場所について

  1. アプリストアに置く
  2. 社内ストア(内部設置ストア) ※アプリカタログ この場合は SharePoint アプリカタログ, もしくは Manifest(xml)がダウンロードできればいいので、共有フォルダーでもよい、さらにOutlookアプリは Exchange Server に Manifest(xml)ファイルがインストールされるので、必ず Exchange Server が必要

Page 11/Developing Mail Apps

Outlook App の場合、Excel、Wordと一部異なり、「アクティブ化規則」タブが存在する。 「アクティブ化規則」というタブにて、アクティブ化される規則等が表示される。

vs2012_app_mail

Excel、Word とは異なり、F5で実行するには メールアドレス が必要になる。(当たり前ですね)

vs2012_app_mail2

Page 12/Activation Rule Types

Page 12/Well-known Entity Examples

ここにいくつかよく使う Outlook アプリのアクティブ化規則のキーワードがあります。 Outlookアプリのアクティブ化規則、アドレス、電子メール、URL、添付ファイルを含んでいる場合、etc…が含まれている場合、アプリを起動するか設定

vs2012_app_for_office3

Outlook のメール本文に表示させるか、予定アイテムに表示させるか設定できる。 設定例;(Visual Studioでビジュアルで修正できる)

  • <Rule xsi:type=”itemIs” ItemType=”Message”> ItemIs : メッセージ(Meesage) or 予定アイテム
  • ItemHasknownEntity 電話番号が含まれている、住所が含まれている場合に自動的にアプリを起動するかどうか決められる。
  • 注意:日本語の住所は現在使えない。

Page 13/Accessing the Outlook JSOM

Page 13/The Outlook App OM for Mail Apps

Page 13/Outlook APIs – some examples

  • ユーザ情報がとれる。 office.context.mailbox.userProfile.displayName
  • メールアドレスとかとれる myEntities =  Office.ocntext.mailbox.getEntities myEntities.emailAddresses
  • Exchange Webサービスを呼び出す(例えばメールボタンを押したい!) mailbox.makeAEwsRequestAsync(getSubjectRequest(mailbox.item.itemid))
  • エンティティの強調表示 アプリのアクティブ化設定されているときに、強調表示されると黄色くマーカーされる。
  • Outlookアプリの場合厳守しないといけないルールがある。(これを守らないと動かなくなる制限等) Outlook 2013 用メール アプリの実装ルールを遵守する http://msdn.microsoft.com/ja-jp/library/fp142267.aspx

Officeアプリ開発環境について

  • Visual studio 2012 Pro以上 + Office Developer Tools( 今は、Preview2 )
  • Office 2013
  • IE9以降

Office アプリ開発環境について Visaul Studio を使わない場合

    • Napa (Webベースの開発ツール)(★あとで展開方法を書くexcelにメモ書き) Office 365 Developer Preview(Office 365 SharePoint 2013) アカウントがあれば使える。

Napa は、アプリストアから無償提供されている。(日本版のストアサービスはまだ開始されていないため、ロケールは「us」にする) Napa では、マニフェスト(xml)は Visual Studio のように作成されないので、新規に作成する必要がある( メニューから選択可能 ) Office アプリ の展開 → 定義ファイル(xml) ※Sharepoint では拡張子App だが、Office は拡張子xml

  • Officeストア
  • 社内専用アプリカタログ(共有フォルダー or SharePoint 2013(on-premise/Office365))
  • Exchange 2013(メールアプリのみ必要になる)

セラーダッシュボード( Seller Dashboard ) 審査が通れば登録が可能となる   <SourceLocation DefaultValue=”~remoteAppUrl/Pages/MailTest1.html” /> Local の IIS 用のトークン「~remoteAppUrl/」 Webページをどこかに展開(★あとで展開方法を書くexcelにメモ書き

  • サーバは Apache / IIS など何でも良い。
  • サーバ言語も PHP でも何でも良い。

今回のサンプルは配置にも時間かからない Azure の Webサイトを使用する。(Web Role はインスタンスも作成するので時間がかかる)

※Web Role は専用インスタンス、Azure Webサイトは共有インスタンス Officeアプリの場合はxml(manifestファイル)のさきほど展開した、WebサイトのURLを修正して xmlファイルを共有ファイル等に置く、Officeがカタログセンターの場所はExcelだとオプション/セキュリティセンター/信頼できるアプリカタログでSharePointのカタログサイトか共有フォルダーを設定する。(Windows 2012アクティブディレクトリーでも設定できる?) そうすると、Officeからアプリ追加すると、自分の所属組織に表示される。個人用のアプリは自分のログインしているストアアプリ Exchange に置く場合 Exchange Online (exchange admin center) /組織/アプリ  xmlファイルを置く ぐだぐだになりました。後で修正します。 共有フォルダー Office のオプションより、「セキュリティーセンター」を開く。 共有フォルダーを設定し、信頼できるサイトして登録しておく。※これ重要!!

vs2012_app_for_office4

上記のような設定を、クライアントに設定させるわけにはいかないので、あらかじめ ActiveDirectry のポリシーで設定しておき、Officeクライアントへ配布する。 SharePoint 2013  開発者サイトして作成するとカタログとして使える。

オンプレ  カタログは無いので新規に作る必要がある。(管理者権限でサイト作成) 関連URL シェアポイントアプリを開発する前にここを読もう!!(App for SharePoint 2013 編 Microsoft dev camp)

Filed Under: Office Add-insスタートOffice365開発

Tags:

About the Author

野呂清二(ご連絡はこちらまで (http://www.exceedone.co.jp/inquiry/)

Leave a Reply




If you want a picture to show with your comment, go get a Gravatar.