Office 365 API , Cordova

1. Office365と連携する
スマホWebアプリ開発
株式会社 エクシード・ワン 野呂清二(のろ せいじ)
MICROSOFT MVP FOR OFFICE365
HTTP://TECH.EXCEEDONE.CO.JP
http://www.slideshare.net/seijinoro/office365-api-dev20140802

2. セッションのゴール
Office365について知る
Office365の開発方法について知る
Office365アプリをKnockoutを使用して作る
◦Webサーバ(ASP.NET)
◦スマートフォン(Cordova ハイブリッド編)
おまけ:Visual studioでTypeScript+Knockout

3. Office365について知る

4. O365はMSのデータセンターに展開

5. インターネットを経由して各種サービスにアクセス

6. 認証基盤について
Office365は Azure AD を使用している。
テナント単位
(１つのAD)
Office365がなくてもAzure AD作れます。

7. Office365の開発方法
について知る

8. Office365へのアクセス方法
アクセス方法 アクセスコントロール バージョン管理 アプリ特徴
①Office365APIs
・Exchange Online
・Sharepoint Online
・AAD,OneDrive
Manifest on AAD
※Consent Framework
？ .NET,JavaScript開発
・Webアプリ
・スマホアプリ
・Windowsアプリ
②Apps for Office
※OfficeStoreへ配置可能
※Office365APIs使用可能
Manifest on AppCatalog Manifest on AppCatalog .NET,JavaScript開発
・Webアプリ(Office内)
③Apps for SharePoint
※OfficeStoreへ配置可能
※Office365APIs使用可能
Manifest on AppCatalog Manifest on AppCatalog .NET,JavaScript開発
・Webアプリ
④Web Services
・SharePoint Online
・Exchange Online
・Excel Web Service?
- - .NET,JavaScript開発
・Webアプリ
・Windowsアプリ
Preview

9. Office 365 API
◦OAuth
◦ Azure ADでシングル サインオン
◦Consent UI Framework
◦ Azure ADでアプリのアクセス管理
◦RestAPI
◦ Office365へWeb、Nativeアプリからアクセス
◦今後は
◦ Apps for Office/Apps for SharePointとシームレスなインストラクチャー
http://msdn.microsoft.com/ja-jp/office/aa905340.aspx
http://msdn.microsoft.com/library/office/dn605893?ocid=mod_odc_aa905340_button_O365_api

10. ②Apps for Office

11. ③Apps for SharePoint
http://blogs.technet.com/b/mspfe/archive/2013/01/31/understanding-sharepoint-apps-as-an-it-pro.aspx

12. ④Web Services (SharePoint)
http://nikpatel.net/2012/09/23/whats-new-in-sharepoint-2013-csom-and-rest-apis/

13. Office365アプリを
Knockoutを使用して作
る

14. Outlook
OUTLOOKの認証プロセス

15. Outlookの場合
認証
認証
Outlook

16. Webサーバ
WEBサーバでの認証/認可プロセス

17. Webサーバ
認証/認可
Webサーバ
Consent UI認証
Application
Manifest
(権限設定) ClientID
Password
Webサービス
Webサーバ内の.NETで取得
（クロスドメインになるので）

18. VSにOffice365 APIs追加
Webサービス

19. 自分アプリの場合
Webサービス
VSで設定すると
自分のテナントに自分アプリの
Manifesが追加される。
※許可したので、コンセントUIは表示されない

20. Webサービス
Server SideでAPIを作っておき, Client Sideで
JavaScript(Knockout）で読み込む

21. Webサービス
using System.Threading.Tasks;
public async Task<ActionResult> Test()
{
var Mails = await MailApiSample.GetMessages();
ViewBag.MailCount = Mail.Count();
return View();
}

22. @{
ViewBag.Title = "Test";
}
<h2>@ViewBag.Title.</h2>
<h3>@ViewBag.Message</h3>
<h3>メールの件数</h3>
<h3>@ViewBag.MailCount</h3>
Webサービス

23. 参考：他者アプリの場合
Webサービス
松崎さんBlog
http://blogs.msdn.com/b/tsmatsuz/archive/2011/06/29/office-365-develop-sample-application-sharepoint-online-exchange-online-lync-online.aspx
許可すると自分のテナントに他者アプリの
Manifesが追加される。
参考：https://o365apisample.azurewebsites.net/

24. 参考
OfficeDev
https://github.com/OfficeDev/SharePoint-Power-Hour-
Code-Samples/tree/master/MeetAndGreet

25. スマートフォン

26. Cordova（ハイブリッドアプリ編）
Iphone/Android/Win Phone
スマートフォン

27. 参考：http://d.hatena.ne.jp/language_and_engineering/20120713/p1
スマートフォン

28. モバイルアプリ
Cordova
Application
Manifest
(権限設定)
ClientID
Password
認証/認可
Consent UI認証
JSで取得(クロスドメインでないので)
スマートフォン

29. Office365 APIs追加
スマートフォン

30. 自分アプリの場合
自分のテナントに自分アプリの
Manifesが追加される。
スマートフォン

31. 松崎さんBlog
http://blogs.msdn.com/b/tsmatsuz/archive/2014/06/09/office-365-api-javascript-library-for-
cordova.aspx
KnockoutJS+TypeScriptで
作りかけたのですが
まにあいまでんでした。
スマートフォン

32. 松崎さんBlog
http://blogs.msdn.com/b/tsmatsuz/archive/2014/06/09/office-365-api-javascript-library-for-
cordova.aspx
KnockoutJS+TypeScriptで
作りかけたのですが
まにあいまでんでした。

33. おまけ:
Visual studioで
TypeScript+Knockout

34. このサンプルをVSでデバックする。
http://kojs.sukobuto.com/tips/withTypeScript
おまけ

35. 必要なもの
Nugetから
◦knockoutjs
◦definitely knockout
GitHubから
◦https://github.com/SteveSanderson/knockout-
es5
おまけ

36. おまけ
TypeScript JavaScript
Knockoutで動作

37. 参考
松崎 剛 Blog
◦ http://blogs.msdn.com/b/tsmatsuz/
Office 365 APIs Preview
◦ http://msdn.microsoft.com/en-us/library/office/dn605892(v=office.15).aspx
開発者向け Exchange
◦ http://msdn.microsoft.com/ja-jp/office/dn448484.aspx
SharePoint Developer(Office 365 API Tools を使ってみた)
◦ http://sharepoint.orivers.jp/Article/206
Office 365 コミュニティ ブログ(OneDrive for Business をモバイル アプリに表示する)
◦ http://community.office365.com/ja-jp/b/office_365_community_blog/archive/2014/05/16/develop-using-onedrive-for-business-with-the-new-office-
365-apis.aspx
Knockout.js 日本語ドキュメント(TypeScript + Knockout ES5 でさらにシンプルに)
◦ http://kojs.sukobuto.com/tips/withTypeScript
Exceedone Technical Knowledge(Visual Studio 2013でCordovaでHelloWorldを作ってみよう)
◦ http://tech.exceedone.co.jp/javascript/visual-studio-2013-cordova-multi-device-hybrid-apps-helloworld/
Getting started with Office 365 development – Part 3 – Building a sample Web Forms application that integrates with Office 365
◦ http://zimmergren.net/technical/getting-started-with-office-365-development-part-3-building-a-sample-web-forms-application-that-integrates-with-
office-365