AngularJSを使ってWindowsストアアプリを作ってみる
このチュートリアルは、AngularJSを使ってWindowsストアアプリを使って作ってみます。
Part 1では、HelloWorld!を、Microsoft独自のJavaScriptを実装した、WinJSだけで作ってみます。
Part 2では、同じアプリをAngularJSで作ってみます。
最近Windowsストアアプリに挑戦する機会があって、AngularJSで作ってみたいと思いました。
もし皆さんも同じことを考ていたら、このチュートリアルを参考に是非試してみてください。
このPart 1では、Microsoftが出している HelloWorld!の事例をもとに、Microsoftが提供するWindowsストア用のJavaScript、WinJSだけでアプリを作ってみます。
MicrosoftのHelloWorld!の事例は、ユーザーが名前をInputフィールドに入れてボタンをクリックすると、Inputフィールドの下に「Hello ○○!」と表示されるものです。
そのコードを若干手直しして、Inputフィールドに何かを入力するたびに、Inputフィールドの下に入力した文字列を表示するようにしました。
完成したHelloWorld!は次のような感じです：
この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のソースコードは次のとおりです：
(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();
})();
ここで、入力するたびに文字列を表示する手直しは、次の部分です：
手直箇所１：入力フィールドに入力があるたびに（keyupイベント）、outputGreetingMessage関数を実行するイベントハンドラーをnameInputフィールドに登録しました。
// インプットフィールド用のイベントハンドラーを登録する
var inputField = document.getElementById("nameInput");
inputField.addEventListener("keyup", function (e) {
outputGreetingMessage();
});
手直箇所２：上記のイベントハンドラーが入力を検知するたびに実行される関数の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のソースコードは次ぎのとおりです：
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!