３分で出来るHTML+JavaScriptのWinRT用アプリ

Windows8App開発における大きなポイントはやっぱりHTML+JavaScriptでNative機能を使ったアプリが作れるという所です。つまり、Webの世界で活躍されていた人がそのままアプリ開発者として通用するのです。

Android,iOSでもHTML5アプリがあるけど、それとはちょっと違います。

Web系の人は企画→デザイン→アプリコーディングまでワンストップでいけるのでこれは大きな強みです。

で、HTML+JavaScriptで簡単なWinRT用アプリを作ろうと思った所、下記のブログに色々と手法が書かれていました。

■ういはるかぜの化学

http://subtech.g.hatena.ne.jp/mayuki/20110929/MetroStyleAppsWWAHost

[その他参考]

http://www.publickey1.jp/blog/11/html5javascriptwindows_8visual_studioexpression_blendbuild_2011.html

今回は「まずは動かす」を目的として王道のHello world下記を試してみたいと思います。

[手順]

①空のアプリケーションを作成

②コードをちょっと修正

③起動

[参考]

http://www.i-programmer.info/ebooks/creating-javascripthtml5-metro-applications/4045-getting-started-with-metro-javascript.html

下記のように編集することでボタンのイベント処理が行えます。

多少なりともjavascriptに対する基本的な理解があれば全然障壁はないです。

default.html

<body>
    <p>コンテンツをここに挿入</p>
    <buttonid="Button1">Click Me</button><br/>
    <textareaid="TextArea1"style="width:300px; height:500px;">TextArea</textarea>
    <pid="P1">TEST</p>
</body>

default.js

    var activation =Windows.ApplicationModel.Activation;

    varButtonClickHandler=function(){
        var Button1 = document.getElementById("Button1");
        var TextArea1 = document.getElementById("TextArea1");
        var P1 = document.getElementById("P1");
        Button1.textContent ="Thanks!";
        P1.textContent = TextArea1.textContent;
    }
    
    app.onactivated =function(args){
        if(args.detail.kind === activation.ActivationKind.launch){
            if(args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated){
                // TODO: このアプリケーションは新しく起動しました。ここでアプリケーションを
                // 初期化します。
                document.getElementById("Button1").addEventListener("click",ButtonClickHandler);
            }else{
                // TODO: このアプリケーションは中断状態から再度アクティブ化されました。
                // ここでアプリケーションの状態を復元します。
            }
            args.setPromise(WinJS.UI.processAll());
        }
    };