Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

20140127 riaに代わる技術 実用的spa

810 views

Published on

MVC5, Twitter Bootstrap , Knockout.js
SIngle Page Application

Published in: Technology, Travel

20140127 riaに代わる技術 実用的spa

  1. 1. MVC5+BOOTSTRAPで作るSPA WITH OFFICE365アカウント (+GOOGLE, FB, TWITTERアカウント) 2014/01/27 RIAに代わる技術、実用的SPA(Single-page Application)
  2. 2. プロフィール  野呂清二  ㈱エクシード・ワン  http://www.facebook.com/seiji.noro  Microsoft MVP for Office365  趣味  最近HTML5にはまってる。  ブログ  http://tech.exceedone.co.jp/  http://www.appsforoffice.net/  このスライド  http://www.slideshare.net/seijinoro/20140127-ria-spa
  3. 3. 概要とデモ MVC5+Bootstrap+Knockout.js
  4. 4. MVC5+BOOTSTARP+KNOCKOUT.JS 最初にアプリのデモ SPAなので、 CURD全部,Single Pageで。
  5. 5. MVC5+BOOTSTARP+KNOCKOUT.JS このデモの構成 System.Web.Mvc.dll EntityFramework.dll(O/Rマッパー) サイト サービス HTML(MVC)/JS/CSS WebAPI HTML, JS/CSS Data
  6. 6. いいところ MVC5+Bootstrap+Knockout.jsなら
  7. 7. IPHONE, ANDROID, WIN PC の各種ブラウザー で同じソースで動きます!!
  8. 8. 環境構築は簡単です。 NUGETから追加、依存関係も大丈夫!
  9. 9. 統合環境 (VISUAL STUDIO)で サーバ・クライアントともデバック簡単! JS/CSS MVC
  10. 10. 独自認証,各種アカウントとも連携簡単! 1/3 FB, etc Office365
  11. 11. 独自認証,各種アカウントとも連携簡単! 2/3  IdentityConfig.cs(管理クラス, 自動作成)  Web.config (設定、自動で記入される)  <configuration>  <appSettings>  <add key="ida:FederationMetadataLocation" value="https://login.windows.net/exceedone.onmicrosoft.com/Fe derationMetadata/2007-06/FederationMetadata.xml" />  <add key="ida:Realm" value="https://exceedone.onmicrosoft.com/WebApplication3" />  <add key="ida:AudienceUri" value="https://exceedone.onmicrosoft.com/WebApplication3" />  </appSettings>
  12. 12. 独自認証,各種アカウントとも連携簡単! 3/3  Startup.Auth.cs  app.UseMicrosoftAccountAuthentication( clientId: "00000000XXXXXXX", clientSecret: “ZZZZZZZZZZZZZZZZZZZZZZZZ");  app.UseTwitterAuthentication( consumerKey: “XXXXXXX", consumerSecret: “YYYYYY");  app.UseFacebookAuthentication( appId: “XXXXXXXXXXXXXX", appSecret: “YYYYYYYYYYYYYY");  app.UseGoogleAuthentication(); デモ
  13. 13. WEBサーバスケールアウトもワンクリック!
  14. 14. デプロイもワンクリック!
  15. 15. 参考
  16. 16. MS系のSPAについての 基礎はこちらを参考に!  Visual Studio 2013 の Single Page Application (SPA) テ ンプレートを使った開発 (Knockout.js)  http://blogs.msdn.com/b/tsmatsuz/archive/2013/11/01/visualstudio-2013-asp-net-single-page-application-spa-knockout.aspx  ASP.NET シングル ページ アプリケーション (SPA) 詳 説 [スライド&動画]  http://www.buildinsider.net/hub/bioff/c3

×