眠るシーラカンスと水底のプログラマー
Winodws Phone, Windows, EC-CUBEの情報を発信します（本記事はVisualStudio2012RC＋Windows8RP環境で確認しております。製品版では動作が異なる可能性があるのでご注意ください。）
故あってMetroスタイルアプリケーション@HTML+JSデビュー。
お仕事がWeb屋なんだからHTMLはなれたもの！！(のはず・・・)
プロジェクト作成
まずはプロジェクトの作成。
左ナビから[その他言語]→[JavaScript]→[Windows Metro Style]を選択。
おープロジェクトの種類もC#+XAML版とは異なりますね。
(でも「空のアプリケーション」とC#+XAML版の「Blank App」は同じ意味だよね・・・)
「固定レイアウトアプリケーション」が気になりますが、最初なので
「空のアプリケーション」を作成します。
作成直後に開かれるのは「default.js」
C#+XAMLでいうところのApp.xaml.csに対応したものっぽいけど、処理は明らかに少ないですね。
ブレークポイントをはってみる
早速デバッグ！！
ですがそのままというのもなんですのでブレークポイントをはってみます。
VisualStudioで初のJavaScriptをブレークポイントで止めます。
おおっ、止まったぁ。
スタックを見てみるとbase.jｓが先に実行されていることがわかります。
base.jsはどこにあるかというと、参照にデフォルトで追加されています。
開いてみると1万行ぐらいのJSファイル・・・これはおいおい必要に応じて読むようにしましょう。
ほかにもui.jsなどがあります。
cssディレクトリにはui-dark.cssとui-light.cssがあります。
ライトとダークのテーマを定義しているんでしょうかね。
開いてみると、
@font-face {
font-family: "Segoe UI";
font-weight: 200;
src: local("Segoe UI Light");
}
Segoe UIですね。Meirio UIはこのファイル内には無いようでした。
とりあえず深追いせずに参照のファイル確認終了。
default.htmlを触ってみる
アプリケーション起動時に呼び出されるビューファイルはdefault.htmlです。
そのことはpackage.appxmanifestファイルに記載されています。
では、default.htmlを開いてみます。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<title>空のアプリケーション</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.js" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
<!-- 空のアプリケーション references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body>
<p>Content goes here</p>
</body>
</html>
おおっ、HTMLだ！！(当然か)
なんかVisualStudioで開発してないみたいです。
ツールボックスからボタンを配置してみます。
<body>
<p>Content goes here</p>
<input id="Button1" type="button" value="button" />
</body>
実行結果は・・・
おおっ、メトロっぽい。
(ちなみにスタイルシートを外すと一気にSilverlightっぽいコントロールになります）
Blendで開いてみる
HTMLでコントロールを配置する自信がなかったので、Blendで編集してみます。
Blendを起動するには、slnファイルをBlendで開いてもいいですが、ソリューションエクスプローラーのプロジェクト名を右クリックから起動することもできます。
default.cssも一緒に開かれていて、ViewStateにあたるものが定義されていることがわかります。
ここでlandscape時やsnapなどの見た目を変更するんでしょうね。
というわけで、JS+HTMLのプロジェクトをさわってみました。
これからどんどんJS+HTMLも紹介していこうと思いますのでよろしくお願いします。
Please give us your valuable comment