Office365 と連携するスマホ Web アプリ開発株式会社 エクシード・ワン 野呂清二 ( のろ　せいじ )

MICROSOFT MVP FOR OFFICE365

HTTP://TECH.EXCEEDONE.CO.JP

http://www.slideshare.net/seijinoro/office365-api-dev20140802

セッションのゴール Office365 について知る Office365 の開発方法について知る Office365 アプリを Knockout を使用して作る

◦Web サーバ (ASP.NET)◦スマートフォン (Cordova ハイブリッド編 )

おまけ :Visual studio で TypeScript+Knockout

Office365 について知る

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

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

認証基盤についてOffice365 は Azure AD を使用している。

テナント単位( １つの AD)

Office365 がなくても Azure AD 作れます。

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

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

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.aspxhttp://msdn.microsoft.com/library/office/dn605893?ocid=mod_odc_aa905340_button_O365_api

②Apps for Office

③Apps for SharePoint

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

④Web Services (SharePoint)

http://nikpatel.net/2012/09/23/whats-new-in-sharepoint-2013-csom-and-rest-apis/

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

OutlookOUTLOOK の認証プロセス

Outlook の場合認証

認証Outlook

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

Web サーバ認証 / 認可

Web サーバ

Consent UI認証

ApplicationManifest

( 権限設定 ) ClientIDPassword

Web サービス

Web サーバ内の .NET で取得（クロスドメインになるので）

VS に Office365 APIs 追加

Web サービス

自分アプリの場合Web サービス

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

Web サービス

Server Side で API を作っておき , 　 Client Sideで JavaScript(Knockout ）で読み込む

Web サービス

using System.Threading.Tasks;public async Task<ActionResult> Test()

{ var Mails = await MailApiSample.GetMessages();

ViewBag.MailCount = Mail.Count(); return View(); }

@{ ViewBag.Title = "Test";}<h2>@ViewBag.Title.</h2><h3>@ViewBag.Message</h3>

<h3>メールの件数 </h3> <h3>@ViewBag.MailCount</h3>

Web サービス

参考：他者アプリの場合 Web サービス

松崎さん Bloghttp://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/

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

スマートフォン

Cordova （ハイブリッドアプリ編）Iphone/Android/Win Phone

スマートフォン

参考： http://d.hatena.ne.jp/language_and_engineering/20120713/p1

スマートフォン

モバイルアプリ

Cordova

ApplicationManifest

( 権限設定 )

ClientIDPassword

認証 / 認可

Consent UI認証

JS で取得 ( クロスドメインでないので )

スマートフォン

Office365 APIs 追加

スマートフォン

自分アプリの場合

自分のテナントに自分アプリのManifes が追加される。

スマートフォン

松崎さん Bloghttp://blogs.msdn.com/b/tsmatsuz/archive/2014/06/09/office-365-api-javascript-library-for-cordova.aspx

KnockoutJS+TypeScript で作りかけたのですがまにあいまでんでした。

スマートフォン

松崎さん Bloghttp://blogs.msdn.com/b/tsmatsuz/archive/2014/06/09/office-365-api-javascript-library-for-cordova.aspx

KnockoutJS+TypeScript で作りかけたのですがまにあいまでんでした。

おまけ :Visual studio でTypeScript+Knockout

このサンプルを VS でデバックする。

http://kojs.sukobuto.com/tips/withTypeScript

おまけ

必要なもの Nuget から◦knockoutjs◦definitely knockout

GitHub から◦https://github.com/SteveSanderson/knockout-es5

おまけ

おまけ

TypeScript JavaScript

Knockout で動作

参考 松崎　剛　 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-3

65-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