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.

MetroStyleAppsさわってみた わんくま

1,268 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. ご清聴ありがとうございました

×