読者です 読者をやめる 読者になる 読者になる

Windows 8 Developers

Windowsストアアプリ開発とかその他もろもろのブログ。

※参加自由なWindows8開発コミュニティをFacebookグループでやってます。
https://www.facebook.com/groups/win8.developers/

その他、技術情報リンク集を下記にまとめています。
http://windows8-developers.hatenablog.com/entry/2013/02/20/155410


3分で出来る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());
       
}
   
};

f:id:win8dev:20121116105818p:plain

 
無事、出来ました。
 
もう少し凝ったものを作るにはネタが足りないのでまた今度書きます。
 
基本はやっぱりHello world