MetroStyleAppsさわってみた　わんくま

蜜葉葉優
MetroStyleAppsさわってみた

proﬁle
•  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

過度度な期待は

しないでください

agenda
•  Windows
8ってなに？

•  MetrostyleAppsって？

•  なんかJSでくめるらしい

•  XAMLは？

Windows 8
•  Developer
Preview

•  次世代のWindows
OS

•  Metro
Design

•  DesktopとMetroStyleAppがある。

•  http://msdn.microsoft.com/en-‐us/windows/
apps/

MetroStyleAppsってなに？
•  HomeScreenから起動するWindows
8⽤用アプ
リケーション

•  スレート向けUI

•  Metroデザインが採⽤用されている

•  アプリケーションサイズ

縦736px
*
横1366px

•  WinRTで起動

•  今のところ、サードローディングできない

•  ⾃自分でビルドして実⾏行行

•  将来的にはマーケットでアプリが売れる

•  この前のMaxで、FlashのNativeExtentions
でWindows
PhoneとMetroStyleAppsに対応
するよ！って⾔言ってた

•  いまのところの開発環境

•  Visual
Studio
2011

•  Expression
Blend
for
HTML

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

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

どれぐらい対応してるの？
•  実際どれぐらいHTML5に対応できている
のか。

•  基本的に、MetroStyleAppsは
MetroStyleAppsにあるIEと同じ

•  というわけで、IEでhtml5testしてみましょ
う。

どれぐらい対応してるの？
•  SilverlightとかFlashとかはうごきません。

•  MetroStyleAppsのIEはサンドボックスでで
きてる

•  デスクトップ向けのIEは普通にうごくよ

個⼈人的に
•  動画がH.264にしか対応してない

•  WebGLの3Dに対応してない

•  WebCamが使えない？のが悲しい

じゃあメリットは
•  ブラウザで動くHTML5のアプリを

ローカルに移植できる。

•  ＋WinRT
APIを叩けば、Systemが持ってる
サービスもHTML5から利利⽤用することがで
きる。

Runtime
Error
JavaScript
runtime
error:
Unable
to
add
dynamic

content.
A
script
attempted
to
inject
dynamic
content,

or
elements
previously
modiﬁed
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.

UnsafeLocalFunction
function
buttonClick()
{

msWWA.execUnsafeLocalFunction(function
()
{

if
(msWWA)
{

document.getElementById("title").innerHTML

=
"hello
metro";

}

});

}

UnsafeLocalFunction
function
buttonClick()
{

msWWA.execUnsafeLocalFunction(function
()
{

if
(msWWA)
{

document.getElementById("title").innerHTML

=
"hello
metro";

}

});
このなかはUnsafeコード
}
なんだからねっ！

HTML5のサンプルを移植してみる
•  開発環境はVisualStudio

•  Chrome
Expriments
=
Chromeがはやい
よ！っていうアピールしてるサイト

•  ここにあるBallPoolを移植してみる

•  http://www.chromeexperiments.com/detail/
ball-‐pool/

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

jubeatも移植してみた

パフォーマンスは？

http://jsdo.it/mitsuba_tan/iClA

WinRTを使おう
JSからWinRTを利利⽤用するサ
ンプル

PushNotiﬁcation
(Toast)

通知を使ってみます。

ほかにもいろんなサンプ
ルが公開されています。

テンプレートいろいろ

Blendもみてみよう

中まとめ
HTML5が組めれば、将来的にWindowsの
ローカルアプリも開発できるようになりま
す。

ローカルアプリなので、めんどうなブラウ
ザ互換とか関係なし！

Blendはいまひとつ。。。

XAML+C#
開発⽅方法はSilverlightとおなじようなイメー
ジ

まだBlendは対応しておらず、VSでの開発の
み

ちょっと触ってみよう

Hello
MetroStyleApps

ちょっとつっこむ
WinWebApps(HTML+JS)を起動して、

TaskManagerを⽴立立ち上げると。。。

Open
File
Location
WinWebAppsを起動して、

TaskManagerを⽴立立ち上げると。。。

WinWebApps6
=
GUID{3eaf32dd(ry}

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

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

さらにつっこむ
CSharpApps(XAML+C#)を起動して、

TaskManagerを⽴立立ち上げると、

同じようにCSharpAppsが確認できる

Open
File
location
-‐>
execute
やっぱりAppContainer
から叩いてね！って
⾔言われる。

こいつが
MetroStyleAppsの正体
なのかなぁ？

まとめ
いままで通りXAML+C#の開発が可能

さらにHTML+JSで開発できる

.NETerだけじゃなくて、HTML5erも取り込め
る？

まとめ
ただ触ったかんじデスクトップでMetro(ry 　
使うが疑問？

タブレット？流流⾏行行るの？

まとめ
でも、いまアプリ作るとマーケットに

まっさきにアプリだせるよ！

//なんか去年年もとあるスマホOSでおんなじこといっ
てたきがするけど。。。

でも今回はみんなが使うデスクトップ向けOSだから
⼤大丈夫！？

iso、sample、pdfもろもろあります。

http://msdn.microsoft.com/en-‐us/windows/apps/

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

まとめ
あくまでもDeveloper
Preview触るも触らな
いのも⾃自⼰己責任

ただ、結構よく出来てる

とくにUIがいいかんじなので、開発しなく
ても遊んでみるといいとおもいます。

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

MetroStyleAppsさわってみた わんくま

More Related Content

What's hot

Similar to MetroStyleAppsさわってみた わんくま

More from c-mitsuba