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 を使用している。
テナント単位
(1つの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.aspx
http://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を使用して作
る
Outlook
OUTLOOKの認証プロセス
Outlookの場合
認証
認証
Outlook
Webサーバ
WEBサーバでの認証/認可プロセス
Webサーバ
認証/認可
Webサーバ
Consent UI認証
Application
Manifest
(権限設定) ClientID
Password
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サービス
松崎さん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/
参考
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
Application
Manifest
(権限設定)
ClientID
Password
認証/認可
Consent UI認証
JSで取得(クロスドメインでないので)
スマートフォン
Office365 APIs追加
スマートフォン
自分アプリの場合
自分のテナントに自分アプリの
Manifesが追加される。
スマートフォン
松崎さんBlog
http://blogs.msdn.com/b/tsmatsuz/archive/2014/06/09/office-365-api-javascript-library-for-
cordova.aspx
KnockoutJS+TypeScriptで
作りかけたのですが
まにあいまでんでした。
スマートフォン
松崎さんBlog
http://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-
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

Office365 api dev 20140802

Editor's Notes

  • #5 Microsoft のデータセンターに展開されるOffice365/Bing/Outlook.com
  • #6 クラウドサービス
  • #22  public async Task<ActionResult> Test() { var Message = await MailApiSample.GetMessages(); return View(); }