MetroStyleAppsさわってみた わんくま

1,231 views

Published on

  • Be the first to comment

MetroStyleAppsさわってみた わんくま

  1. 1. 蜜葉葉  優MetroStyleAppsさわってみた
  2. 2. profile•  H.N.  :蜜葉葉  優  [mitsuba  yu]  •  Expression  Blendが好きな⼈人  •  Community:Silverlight  Square  •  twitter:@mitsuba_tan  •  Web:http://c-­‐mitsuba.com  •  blog:http://d.hatena.ne.jp/c-­‐mitsuba  
  3. 3. 過度度な期待は  しないでください
  4. 4. agenda•  Windows  8ってなに?  •  MetrostyleAppsって?  •  なんかJSでくめるらしい  •  XAMLは?  
  5. 5. Windows 8•  Developer  Preview  •  次世代のWindows  OS  •  Metro  Design  •  DesktopとMetroStyleAppがある。  •  http://msdn.microsoft.com/en-­‐us/windows/ apps/  
  6. 6. MetroStyleAppsってなに?•  HomeScreenから起動するWindows  8⽤用アプ リケーション  •  スレート向けUI  •  Metroデザインが採⽤用されている  •  アプリケーションサイズ   縦736px  *  横1366px  
  7. 7. MetroStyleAppsってなに?•  WinRTで起動  •  今のところ、サードローディングできない  •  ⾃自分でビルドして実⾏行行  •  将来的にはマーケットでアプリが売れる
  8. 8. MetroStyleAppsってなに?•  この前のMaxで、FlashのNativeExtentions でWindows  PhoneとMetroStyleAppsに対応 するよ!って⾔言ってた  •  いまのところの開発環境  •  Visual  Studio  2011    •  Expression  Blend  for  HTML  
  9. 9. WinRTって?•  いわゆるいままでのWin32API  •  Windows  RunTimeの略略   Windows.ApplicationModel   Windows.Data   Windows.Devices   Windows.Foundation   だいたいこのへんのやつ→ Windows.Globalization   Windows.Graphice   Windows.Media   Windows.Networking   Windows.Security   Windows.Strage   Windows.System   Windows.UI   Windows.Web
  10. 10. Javascriptとな。。。!
  11. 11. でもどうせまたなんとか依存とかあるんじゃないの。。
  12. 12. どれぐらい対応してるの?•  実際どれぐらいHTML5に対応できている のか。  •  基本的に、MetroStyleAppsは MetroStyleAppsにあるIEと同じ  •  というわけで、IEでhtml5testしてみましょ う。
  13. 13. どれぐらい対応してるの?•  SilverlightとかFlashとかはうごきません。  •  MetroStyleAppsのIEはサンドボックスでで きてる  •  デスクトップ向けのIEは普通にうごくよ
  14. 14. 個⼈人的に•  動画がH.264にしか対応してない  •  WebGLの3Dに対応してない  •  WebCamが使えない?のが悲しい  
  15. 15. じゃあメリットは•  ブラウザで動くHTML5のアプリを   ローカルに移植できる。  •  +WinRT  APIを叩けば、Systemが持ってる サービスもHTML5から利利⽤用することがで きる。  
  16. 16. Hello  MetroJS
  17. 17. Runtime  ErrorJavaScript  runtime  error:  Unable  to  add  dynamic  content.  A  script  attempted  to  inject  dynamic  content,  or  elements  previously  modified  dynamically,  that  might  be  unsafe.  For  example,  using  the  innerHTML  property  or  the  document.write  method  to  add  a  script  element  will  generate  this  exception.  If  the  content  is  safe  and  from  a  trusted  source,  use  a  method  to  explicitly  manipulate  elements  and  attributes,  such  as  createElement,  or  use  msWWA.execUnsafeLocalFunction.  
  18. 18. UnsafeLocalFunctionfunction  buttonClick()  {                  msWWA.execUnsafeLocalFunction(function  ()  {                  if  (msWWA)  {                          document.getElementById("title").innerHTML      =  "hello  metro";                  }          });  }  
  19. 19. UnsafeLocalFunctionfunction  buttonClick()  {                  msWWA.execUnsafeLocalFunction(function  ()  {                  if  (msWWA)  {                          document.getElementById("title").innerHTML      =  "hello  metro";                  }          });   このなかはUnsafeコード}   なんだからねっ!
  20. 20. HTML5のサンプルを移植してみる•  開発環境はVisualStudio  •  Chrome  Expriments  =  Chromeがはやい よ!っていうアピールしてるサイト  •  ここにあるBallPoolを移植してみる  •  http://www.chromeexperiments.com/detail/ ball-­‐pool/  
  21. 21. HTML5のサンプルを移植してみる友⼈人がつくってた  jubeatも移植してみた  
  22. 22. パフォーマンスは?  http://jsdo.it/mitsuba_tan/iClA
  23. 23. WinRTを使おうJSからWinRTを利利⽤用するサンプル    PushNotification  (Toast)  通知を使ってみます。    ほかにもいろんなサンプルが公開されています。  
  24. 24. テンプレートいろいろ  Blendもみてみよう
  25. 25. テンプレートいろいろ  Blendもみてみよう
  26. 26. 中まとめHTML5が組めれば、将来的にWindowsのローカルアプリも開発できるようになります。  ローカルアプリなので、めんどうなブラウザ互換とか関係なし!    Blendはいまひとつ。。。  
  27. 27. XAMLは。。。!?
  28. 28. XAML+C#開発⽅方法はSilverlightとおなじようなイメージ    まだBlendは対応しておらず、VSでの開発のみ  
  29. 29. ちょっと触ってみよう  Hello  MetroStyleApps
  30. 30. ちょっとつっこむWinWebApps(HTML+JS)を起動して、  TaskManagerを⽴立立ち上げると。。。  
  31. 31. Open  File  LocationWinWebAppsを起動して、  TaskManagerを⽴立立ち上げると。。。  
  32. 32. なんかいろいろある
  33. 33. WinWebApps6  =  GUID{3eaf32dd(ry}
  34. 34. Go  to  DetailWWAHost.exeっていうのがMetroStyleAppsをたちあげてる。  
  35. 35. WWAHost.exe
  36. 36. 実⾏行行すると
  37. 37. まるでSL  OOBみたいですね!
  38. 38. さらにつっこむCSharpApps(XAML+C#)を起動して、  TaskManagerを⽴立立ち上げると、  同じようにCSharpAppsが確認できる    
  39. 39. Open  File  location  -­‐>  executeやっぱりAppContainerから叩いてね!って⾔言われる。    こいつがMetroStyleAppsの正体なのかなぁ?  
  40. 40. まとめいままで通りXAML+C#の開発が可能  さらにHTML+JSで開発できる    .NETerだけじゃなくて、HTML5erも取り込める?  
  41. 41. まとめただ触ったかんじデスクトップでMetro(ry  使うが疑問?    タブレット?流流⾏行行るの?  
  42. 42. まとめでも、いまアプリ作るとマーケットに  まっさきにアプリだせるよ!    //なんか去年年もとあるスマホOSでおんなじこといってたきがするけど。。。  でも今回はみんなが使うデスクトップ向けOSだから⼤大丈夫!?    iso、sample、pdfもろもろあります。  http://msdn.microsoft.com/en-­‐us/windows/apps/  
  43. 43. MetroStyle  Designhttp://msdn.microsoft.com/en-­‐us/windows/apps/
  44. 44. まとめあくまでもDeveloper  Preview触るも触らないのも⾃自⼰己責任    ただ、結構よく出来てる  とくにUIがいいかんじなので、開発しなくても遊んでみるといいとおもいます。  
  45. 45. ご清聴ありがとうございました

×