チュートリアル:Windows ストアアプリをAngularJSで作ってみる(Part 1)

AngularJSを使ってWindowsストアアプリを作ってみる このチュートリアルは、AngularJSを使ってWindowsストアアプリを使って作ってみます。 Part 1では、HelloWorld!を、Microsoft独自のJavaScriptを実装した、WinJSだけで作ってみます。 Part 2では、同じアプリをAngularJSで作ってみます。 チュートリアル(Part 1) 最近Windowsストアアプリに挑戦する機会があって、AngularJSで作ってみたいと思いました。 もし皆さんも同じことを考ていたら、このチュートリアルを参考に是非試してみてください。 このPart 1では、Microsoftが出している HelloWorld!の事例をもとに、Microsoftが提供するWindowsストア用のJavaScript、WinJSだけでアプリを作ってみます。 最初のWindowsストアアプリ:「ハローワールド!」 MicrosoftのHelloWorld!の事例は、ユーザーが名前をInputフィールドに入れてボタンをクリックすると、Inputフィールドの下に「Hello ○○!」と表示されるものです。 そのコードを若干手直しして、Inputフィールドに何かを入力するたびに、Inputフィールドの下に入力した文字列を表示するようにしました。 完成したHelloWorld!は次のような感じです: default.htmlの中身 このWindowsストアアプリは、default.html、default.js、default.cssからなりたっています(これらのコードの説明は、HelloWorld!

Windows Store Tutorial Part 1

AngularJSを使ってWindowsストアアプリを作ってみる

このチュートリアルは、AngularJSを使ってWindowsストアアプリを使って作ってみます。

Part 1では、HelloWorld!を、Microsoft独自のJavaScriptを実装した、WinJSだけで作ってみます。

Part 2では、同じアプリをAngularJSで作ってみます。


チュートリアル(Part 1)

最近Windowsストアアプリに挑戦する機会があって、AngularJSで作ってみたいと思いました。

もし皆さんも同じことを考ていたら、このチュートリアルを参考に是非試してみてください。

このPart 1では、Microsoftが出している HelloWorld!の事例をもとに、Microsoftが提供するWindowsストア用のJavaScript、WinJSだけでアプリを作ってみます。


最初のWindowsストアアプリ:「ハローワールド!」

MicrosoftのHelloWorld!の事例は、ユーザーが名前をInputフィールドに入れてボタンをクリックすると、Inputフィールドの下に「Hello ○○!」と表示されるものです。

そのコードを若干手直しして、Inputフィールドに何かを入力するたびに、Inputフィールドの下に入力した文字列を表示するようにしました。

完成したHelloWorld!は次のような感じです:


default.htmlの中身

このWindowsストアアプリは、default.html、default.js、default.cssからなりたっています(これらのコードの説明は、HelloWorld!のページでご覧ください。)

default.htmlのソースコードは次ぎのとおりです:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<title>HelloWorld.Windows</title>

<!-- WinJS 参照 -->
<link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

<!-- HelloWorld.Windows 参照 -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>   
</head>

<body>
<h1 class="headerClass">Hello world!</h1>
<div class="mainContent">
       <p>お名前はなんですか?</p>
       <input id="nameInput" type="text" />
       <button id="helloButton">「こんにちは」と言って!   </button>
       <div id="greetingOutput"></div>
       <label for="ratingControlDiv">
       この挨拶を評価してください:
       </label>
       <div id="ratingControlDiv" data-win-control="WinJS.UI.Rating"></div>
       <div id="ratingOutput"></div>   
</div>
</body>
</html> 

default.jsの中身

default.jsのソースコードは次のとおりです:

(function () {
"use strict";

var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;

app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
            // TODO: このアプリケーションは新しく起動しました。ここでアプリケーションを
            // 初期化します。
        } else {
            // TODO: このアプリケーションは中断状態から再度アクティブ化されました。
            // ここでアプリケーションの状態を復元します。
        }
        args.setPromise(WinJS.UI.processAll().then(function completed() {
                // レーティングコントロールのDIVタグのエレメントを参照する
                var ratingControlDiv = document.getElementById("ratingControlDiv");

                // レーティングコントロールそのものを参照する
                var ratingControl = ratingControlDiv.winControl;

                // レーティングコントロール用のイベントハンドラーを登録する
                ratingControl.addEventListener("change", ratingChanged, false);

                // ボタン用のイベントハンドラーを登録する
                var helloButton = document.getElementById("helloButton");
                helloButton.addEventListener("click", buttonClickHandler, false);

                // インプットフィールド用のイベントハンドラーを登録する
                var inputField = document.getElementById("nameInput");
                inputField.addEventListener("keyup", function (e) {
                    outputGreetingMessage();
                });                   
            }));      
    }
};

app.oncheckpoint = function (args) {
    // TODO: このアプリケーションは中断しようとしています。ここで中断中に
    // 維持する必要のある状態を保存します。中断中に自動的に保存され、
    // 復元される WinJS.Application.sessionState オブジェクトを使用
    // できます。アプリケーションを中断する前に
    // 非同期操作を完了する必要がある場合は、
    // args.setPromise() を呼び出してください。
};

function buttonClickHandler(eventInfo) {
    outputGreetingMessage();
}

function ratingChanged(eventInfo) {
    var ratingOutput = document.getElementById("ratingOutput");
    ratingOutput.innerText=eventInfo.detail.tentativeRating;
}

function outputGreetingMessage() {
    var userName = document.getElementById("nameInput").value;
    if (userName.length == 0) {
        userName = "You";
    }
    var greetingString = "Hello, " + userName + "!";
    document.getElementById("greetingOutput").innerText = greetingString;
}

app.start();
})();

ここで、入力するたびに文字列を表示する手直しは、次の部分です:

手直箇所1:入力フィールドに入力があるたびに(keyupイベント)、outputGreetingMessage関数を実行するイベントハンドラーをnameInputフィールドに登録しました。

// インプットフィールド用のイベントハンドラーを登録する
var inputField = document.getElementById("nameInput");
inputField.addEventListener("keyup", function (e) {
     outputGreetingMessage();
 });

手直箇所2:上記のイベントハンドラーが入力を検知するたびに実行される関数のoutputGreetingMessageです。

function outputGreetingMessage() {
    var userName = document.getElementById("nameInput").value;
    if (userName.length == 0) {
       //何も入力されていない場合はuserNameを「You」とする
        userName = "You";
    }

    var greetingString = "Hello, " + userName + "!";
    document.getElementById("greetingOutput").innerText = greetingString;
}

default.cssの中身

default.cssのソースコードは次ぎのとおりです:

body {
}

.headerClass{
    margin-top: 45px;
    margin-left: 120px;
}

.mainContent{
    margin-top: 31px;
    margin-left: 120px;
    margin-bottom: 50px;
}

#greetingOutput{
    height: 20px;
    margin-bottom: 40px;
}

次はAngularJSで作ってみましょう!

さて、AngularJSでは、簡単につくれそうなアプリですが、実際はどうでしょう?

答えは、Part 2の記事をご覧ください。

Mahalo!

comments powered by Disqus

Recent Posts