MetroStyleApp入門(JS) vol1.プロジェクトの初期状態を比較

木曜日 , 2, 8月 2012 Leave a comment

 (本記事は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.jsが先に実行されていることがわかります。

 

 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

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です