蜜葉葉  優MetroStyleAppsさわってみた
profile•  H.N.	  :蜜葉葉  優	  [mitsuba	  yu]	  •  Expression	  Blendが好きな⼈人	  •  Community:Silverlight	  Square	  •  twitter:@m...
過度度な期待は	  しないでください
agenda•  Windows	  8ってなに?	  •  MetrostyleAppsって?	  •  なんかJSでくめるらしい	  •  XAMLは?	  
Windows 8•  Developer	  Preview	  •  次世代のWindows	  OS	  •  Metro	  Design	  •  DesktopとMetroStyleAppがある。	  •  http://msdn....
MetroStyleAppsってなに?•  HomeScreenから起動するWindows	  8⽤用アプ   リケーション	  •  スレート向けUI	  •  Metroデザインが採⽤用されている	  •  アプリケーションサイズ	    ...
MetroStyleAppsってなに?•    WinRTで起動	  •    今のところ、サードローディングできない	  •    ⾃自分でビルドして実⾏行行	  •    将来的にはマーケットでアプリが売れる
MetroStyleAppsってなに?•  この前のMaxで、FlashのNativeExtentions   でWindows	  PhoneとMetroStyleAppsに対応   するよ!って⾔言ってた	  •  いまのところの開発環境	...
WinRTって?•  いわゆるいままでのWin32API	  •  Windows	  RunTimeの略略	   Windows.ApplicationModel	                                      W...
Javascriptとな。。。!
でもどうせまたなんとか依存とかあるんじゃないの。。
どれぐらい対応してるの?•  実際どれぐらいHTML5に対応できている   のか。	  •  基本的に、MetroStyleAppsは   MetroStyleAppsにあるIEと同じ	  •  というわけで、IEでhtml5testしてみまし...
どれぐらい対応してるの?•  SilverlightとかFlashとかはうごきません。	  •  MetroStyleAppsのIEはサンドボックスでで   きてる	  •  デスクトップ向けのIEは普通にうごくよ
個⼈人的に•  動画がH.264にしか対応してない	  •  WebGLの3Dに対応してない	  •  WebCamが使えない?のが悲しい	  
じゃあメリットは•  ブラウザで動くHTML5のアプリを	     ローカルに移植できる。	  •  +WinRT	  APIを叩けば、Systemが持ってる   サービスもHTML5から利利⽤用することがで   きる。	  
Hello	  MetroJS
Runtime	  ErrorJavaScript	  runtime	  error:	  Unable	  to	  add	  dynamic	  content.	  A	  script	  attempted	  to	  inje...
UnsafeLocalFunctionfunction	  buttonClick()	  {	  	  	  	  	  	  	  	  	  msWWA.execUnsafeLocalFunction(function	  ()	  {	...
UnsafeLocalFunctionfunction	  buttonClick()	  {	  	  	  	  	  	  	  	  	  msWWA.execUnsafeLocalFunction(function	  ()	  {	...
HTML5のサンプルを移植してみる•  開発環境はVisualStudio	  •  Chrome	  Expriments	  =	  Chromeがはやい   よ!っていうアピールしてるサイト	  •  ここにあるBallPoolを移植して...
HTML5のサンプルを移植してみる友⼈人がつくってた	  jubeatも移植してみた	  
パフォーマンスは?	  http://jsdo.it/mitsuba_tan/iClA
WinRTを使おうJSからWinRTを利利⽤用するサンプル	  	  PushNotification	  (Toast)	  通知を使ってみます。	  	  ほかにもいろんなサンプルが公開されています。	  
テンプレートいろいろ	  Blendもみてみよう
テンプレートいろいろ	  Blendもみてみよう
中まとめHTML5が組めれば、将来的にWindowsのローカルアプリも開発できるようになります。	  ローカルアプリなので、めんどうなブラウザ互換とか関係なし!	  	  Blendはいまひとつ。。。	  
XAMLは。。。!?
XAML+C#開発⽅方法はSilverlightとおなじようなイメージ	  	  まだBlendは対応しておらず、VSでの開発のみ	  
ちょっと触ってみよう	  Hello	  MetroStyleApps
ちょっとつっこむWinWebApps(HTML+JS)を起動して、	  TaskManagerを⽴立立ち上げると。。。	  
Open	  File	  LocationWinWebAppsを起動して、	  TaskManagerを⽴立立ち上げると。。。	  
なんかいろいろある
WinWebApps6	  =	  GUID{3eaf32dd(ry}
Go	  to	  DetailWWAHost.exeっていうのがMetroStyleAppsをたちあげてる。	  
WWAHost.exe
実⾏行行すると
まるでSL	  OOBみたいですね!
さらにつっこむCSharpApps(XAML+C#)を起動して、	  TaskManagerを⽴立立ち上げると、	  同じようにCSharpAppsが確認できる	  	  
Open	  File	  location	  -­‐>	  executeやっぱりAppContainerから叩いてね!って⾔言われる。	  	  こいつがMetroStyleAppsの正体なのかなぁ?	  
まとめいままで通りXAML+C#の開発が可能	  さらにHTML+JSで開発できる	  	  .NETerだけじゃなくて、HTML5erも取り込める?	  
まとめただ触ったかんじデスクトップでMetro(ry  使うが疑問?	  	  タブレット?流流⾏行行るの?	  
まとめでも、いまアプリ作るとマーケットに	  まっさきにアプリだせるよ!	  	  //なんか去年年もとあるスマホOSでおんなじこといってたきがするけど。。。	  でも今回はみんなが使うデスクトップ向けOSだから⼤大丈夫!?	  	  iso、...
MetroStyle	  Designhttp://msdn.microsoft.com/en-­‐us/windows/apps/
まとめあくまでもDeveloper	  Preview触るも触らないのも⾃自⼰己責任	  	  ただ、結構よく出来てる	  とくにUIがいいかんじなので、開発しなくても遊んでみるといいとおもいます。	  
ご清聴ありがとうございました
MetroStyleAppsさわってみた わんくま
MetroStyleAppsさわってみた わんくま
MetroStyleAppsさわってみた わんくま
MetroStyleAppsさわってみた わんくま
MetroStyleAppsさわってみた わんくま
MetroStyleAppsさわってみた わんくま
MetroStyleAppsさわってみた わんくま
Upcoming SlideShare
Loading in...5
×

MetroStyleAppsさわってみた わんくま

1,076

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,076
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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. ご清聴ありがとうございました
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×