1. 蜜葉葉 優
MetroStyleAppsさわってみた

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

4. 過度度な期待は
しないでください

5. agenda
• Windows
8ってなに？
• MetrostyleAppsって？
• なんかJSでくめるらしい
• XAMLは？

6. Windows 8
• Developer
Preview
• 次世代のWindows
OS
• Metro
Design
• DesktopとMetroStyleAppがある。
• http://msdn.microsoft.com/en-­‐us/windows/
apps/

8. MetroStyleAppsってなに？
• HomeScreenから起動するWindows
8⽤用アプ
リケーション
• スレート向けUI
• Metroデザインが採⽤用されている
• アプリケーションサイズ
縦736px
*
横1366px

9. MetroStyleAppsってなに？
• WinRTで起動
• 今のところ、サードローディングできない
• ⾃自分でビルドして実⾏行行
• 将来的にはマーケットでアプリが売れる

10. MetroStyleAppsってなに？
• この前のMaxで、FlashのNativeExtentions
でWindows
PhoneとMetroStyleAppsに対応
するよ！って⾔言ってた
• いまのところの開発環境
• Visual
Studio
2011
• Expression
Blend
for
HTML

11. 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

14. Javascriptとな。。。！

15. でもどうせまたなんとか依存とか
あるんじゃないの。。

16. どれぐらい対応してるの？
• 実際どれぐらいHTML5に対応できている
のか。
• 基本的に、MetroStyleAppsは
MetroStyleAppsにあるIEと同じ
• というわけで、IEでhtml5testしてみましょ
う。

17. どれぐらい対応してるの？
• SilverlightとかFlashとかはうごきません。
• MetroStyleAppsのIEはサンドボックスでで
きてる
• デスクトップ向けのIEは普通にうごくよ

18. 個⼈人的に
• 動画がH.264にしか対応してない
• WebGLの3Dに対応してない
• WebCamが使えない？のが悲しい

20. じゃあメリットは
• ブラウザで動くHTML5のアプリを
ローカルに移植できる。
• ＋WinRT
APIを叩けば、Systemが持ってる
サービスもHTML5から利利⽤用することがで
きる。

21. Hello
MetroJS

22. Runtime
Error
JavaScript
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.

23. UnsafeLocalFunction
function
buttonClick()
{
msWWA.execUnsafeLocalFunction(function
()
{
if
(msWWA)
{
document.getElementById("title").innerHTML
=
"hello
metro";
}
});
}

24. UnsafeLocalFunction
function
buttonClick()
{
msWWA.execUnsafeLocalFunction(function
()
{
if
(msWWA)
{
document.getElementById("title").innerHTML
=
"hello
metro";
}
});
このなかはUnsafeコード
}
なんだからねっ！

25. HTML5のサンプルを移植してみる
• 開発環境はVisualStudio
• Chrome
Expriments
=
Chromeがはやい
よ！っていうアピールしてるサイト
• ここにあるBallPoolを移植してみる
• http://www.chromeexperiments.com/detail/
ball-­‐pool/

26. HTML5のサンプルを移植してみる
友⼈人がつくってた
jubeatも移植してみた

27. パフォーマンスは？
http://jsdo.it/mitsuba_tan/iClA

28. WinRTを使おう
JSからWinRTを利利⽤用するサ
ンプル
PushNotification
(Toast)
通知を使ってみます。
ほかにもいろんなサンプ
ルが公開されています。

29. テンプレートいろいろ
Blendもみてみよう

30. テンプレートいろいろ
Blendもみてみよう

31. 中まとめ
HTML5が組めれば、将来的にWindowsの
ローカルアプリも開発できるようになりま
す。
ローカルアプリなので、めんどうなブラウ
ザ互換とか関係なし！
Blendはいまひとつ。。。

32. XAMLは。。。！？

34. XAML+C#
開発⽅方法はSilverlightとおなじようなイメー
ジ
まだBlendは対応しておらず、VSでの開発の
み

36. ちょっと触ってみよう
Hello
MetroStyleApps

37. ちょっとつっこむ
WinWebApps(HTML+JS)を起動して、
TaskManagerを⽴立立ち上げると。。。

38. Open
File
Location
WinWebAppsを起動して、
TaskManagerを⽴立立ち上げると。。。

39. なんかいろいろある

40. WinWebApps6
=
GUID{3eaf32dd(ry}

41. Go
to
Detail
WWAHost.exeっていうのがMetroStyleApps
をたちあげてる。

42. WWAHost.exe

43. 実⾏行行すると

44. まるでSL
OOBみたいですね！

45. さらにつっこむ
CSharpApps(XAML+C#)を起動して、
TaskManagerを⽴立立ち上げると、
同じようにCSharpAppsが確認できる

46. Open
File
location
-­‐>
execute
やっぱりAppContainer
から叩いてね！って
⾔言われる。
こいつが
MetroStyleAppsの正体
なのかなぁ？

47. まとめ
いままで通りXAML+C#の開発が可能
さらにHTML+JSで開発できる
.NETerだけじゃなくて、HTML5erも取り込め
る？

48. まとめ
ただ触ったかんじデスクトップでMetro(ry
使うが疑問？
タブレット？流流⾏行行るの？

49. まとめ
でも、いまアプリ作るとマーケットに
まっさきにアプリだせるよ！
//なんか去年年もとあるスマホOSでおんなじこといっ
てたきがするけど。。。
でも今回はみんなが使うデスクトップ向けOSだから
⼤大丈夫！？
iso、sample、pdfもろもろあります。
http://msdn.microsoft.com/en-­‐us/windows/apps/

50. MetroStyle
Design
http://msdn.microsoft.com/en-­‐us/windows/apps/

51. まとめ
あくまでもDeveloper
Preview触るも触らな
いのも⾃自⼰己責任
ただ、結構よく出来てる
とくにUIがいいかんじなので、開発しなく
ても遊んでみるといいとおもいます。

52. ご清聴ありがとうございました