クイックスタート: HTML コントロールの追加とイベントの処理 (HTML)

[アーティクル]
03/04/2016

[ この記事は、Windows ランタイムアプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

ボタン、チェックボックス、ドロップダウンリストなどのコントロールは、すべてのアプリに必要です。 JavaScript を使った Windows ランタイムアプリでは、組み込み HTML コントロールと JavaScript 用 Windows ライブラリコントロールの 2 種類のコントロールを使うことができます。組み込み HTML コントロールは、ボタン、チェックボックスなどのコントロールで、HTML 標準の一部です。

ここでは、HTML コントロールを作成して使用する方法について説明します。次のトピック「クイックスタート: WinJS コントロールとスタイルの追加」では、WinJS のコントロールを作成し、使う方法について説明します。

(Windows のみ) この機能の実際の使い方については「アプリの機能の概要」シリーズの次のトピックをご覧ください: ユーザー操作: タッチ入力、その他と Windows ストアアプリ UI の概要.

必要条件

WinJS のテンプレートが使われた JavaScript を使った基本的な Windows ランタイムアプリの作成経験が必要です。初めてのアプリを作る方法について詳しくは、「JavaScript を使った初めての Windows ランタイムアプリの作成」をご覧ください。

コントロールとは

多くのアプリケーションプログラミングモデルでは、コンテンツを表示または操作するためのコントロールが必要です。ほとんどの HTML 要素にはコンテンツの表示機能やさまざまなイベントへの応答機能があるため、JavaScript を使った Windows ランタイムアプリでは、コントロールと要素の区別は必ずしも明確ではありません。ここでは、インタラクティビティを提供することが主な目的である要素とオブジェクトをコントロールと呼びます。このカテゴリに含まれる要素とオブジェクトの一覧については、「機能別コントロール」をご覧ください。

HTML コントロールの追加

JavaScript を使った Windows ランタイムアプリでは、すべての HTML コントロールを使うことができます。

Hh465402.wedge(ja-jp,WIN.10).gif HTML コントロールを追加するには

HTML コントロールを追加するには、通常の Web ページの場合と同様に、単にコントロールの HTML をページに追加します。この例では、button を作成しています。
```
<button id="button1">An HTML Button</button>
```
コントロールに ID またはクラス名を割り当てておくと、取得や操作が簡単になります。次に説明する、イベントをアタッチする方法では、ボタンの ID を使ってボタンを識別します。

コントロールの HTML は、ボタンの場合ほど単純とは限りません。たとえば、slider コントロールを作成するには、input 要素を使います。

<input type="range" />

使用できる HTML コントロールと、それらを作成するために使うマークアップの一覧については、「コントロールの一覧」をご覧ください。

イベントの処理

各コントロールには、ユーザーの操作に対して応答するためのイベントが用意されています。たとえば、ボタンコントロールには、ユーザーがボタンをクリックしたときに発生する click イベントがあります。イベントを処理する関数 (イベントハンドラーと呼ばれます) を作成し、イベントハンドラーをコントロールと共に登録します。

イベントハンドラーを登録する方法は 2 種類あります。1 つ目は、コントロールのイベント属性を JavaScript イベントハンドラー関数または JavaScript ステートメントの名前に設定して、イベントハンドラーを HTML に追加する方法です。この方法については、「宣言を使ってイベントハンドラーを設定する方法」をご覧ください。

イベントハンドラーを追加する 2 つ目の方法は、プログラムを使って追加する方法です。

Hh465402.wedge(ja-jp,WIN.10).gif プログラムを使ってイベントハンドラーを登録するには

コントロールを作成し、ID を割り当てます。この例では、ボタンを作成し、ID "button1" を割り当てます。
```
<button id="button1">An HTML button</button>
```
通常は使いませんが、この例では、paragraph 要素を作成して ID "button1Output" を割り当てます。この操作を実行すると、ボタンのクリックイベントに関する情報が表示されます。
```
<p id="button1Output"></p>
```
JavaScript コードでイベントハンドラーを定義します。ほとんどのイベントハンドラーは 1 つの引数 (イベントに関する情報が含まれている Event オブジェクト) しか受け取りません。他のイベントでは、そのイベントに固有の情報を提供する他の種類のイベント情報オブジェクトが返されることがあります。

click イベントでは、クリックされたマウスボタンやイベントを発生させたオブジェクトなど、イベントに関する情報が含まれている MouseEvent オブジェクトが返されます。この例では、MouseEvent オブジェクトを使って、ユーザーがクリックした位置の x 座標と y 座標を取得する click イベントハンドラーを作成します

(click イベントは、タッチ操作やキーボード操作にも応答します。このトピックの例では、ユーザーがマウスでクリックすることを想定しています。タッチやさまざまなデバイスでの操作について詳しくは、「ユーザー操作への応答」をご覧ください)。
```
function button1Click(mouseEvent) {
    var button1Output = document.getElementById("button1Output");
    button1Output.innerText =
    mouseEvent.type
    + ": (" + mouseEvent.clientX + "," + mouseEvent.clientY + ")";

}
```
コントロールを取得し、addEventListener を呼び出して、イベントをコントロールにアタッチする必要があります。問題は、コントロールを取得するタイミングです。コントロールの取得は JavaScript コード内のどこにでも追加できますが、そうするとコントロールがまだ存在しないときに呼び出される可能性があります。
- default.html および default.js で定義されたアプリのスタートページにコントロールを追加する場合は、WinJS.UI.processAll 関数を使ってイベントハンドラーを登録します。各 Microsoft Visual Studio テンプレートでは、activated イベントハンドラー内の WinJS.UI.processAll を呼び出す default.js ファイルが作成されます。 WinJS.UI.processAll は非同期メソッドであるため、Promise を返します。イベントハンドラーをアタッチするには、WinJS.UI.processAll が返す Promise の then 関数または done 関数を用意し、その関数を使ってイベントハンドラーをアタッチします。プロミスについて詳しくは、「JavaScript での非同期プログラミング」をご覧ください。
  
  この例では、WinJS.UI.processAll を使って、ボタンのイベントハンドラーをアタッチしています。
```
(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    WinJS.strictProcessing();

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll().done(function () {
                var button1 = document.getElementById("button1");
                button1.addEventListener("click", button1Click, false);
                })
            );
        }
    };

    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // args.setPromise().
    };

    // The click event handler for button1
    function button1Click(mouseEvent) {
        var button1Output = document.getElementById("button1Output");
        button1Output.innerText =
            mouseEvent.type
            + ": (" + mouseEvent.clientX + "," + mouseEvent.clientY + ")";

    }

    app.start();
})();
```
  WinJS.UI.processAll メソッドについて詳しくは、「クイックスタート: WinJS コントロールとスタイルの追加」をご覧ください。
- ページコントロールにコントロールを追加する場合は、ページコントロールの ready 関数を使用してイベントハンドラーをアタッチします (そして、次に示すように、document.getElementById の代わりに querySelector を使用します)。
  
  WinJS の Page コントロールを使うと、再利用できるモジュールにコンテンツを分割できます。アプリには、その作成時に使った Visual Studio のテンプレートに応じて、1 つまたは複数の Page コントロールが自動的に追加されていることがあります。
  
  Page コントロールを作成すると、ボタンのイベントハンドラーを追加するために使用できる ready 関数も自動的に含まれます。この例では、click イベントハンドラーをボタンに追加する Page コントロールの完全な JavaScript コードを示します。
```
// home.js
(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/home/home.html", {
        ready: function (element, options) { // Fires when the user navigates to home.html
            var button1 = element.querySelector("#button1");
            button1.addEventListener("click", this.button1Click, false);
        },

        button1Click: function(mouseEvent) {
            var button1Output = document.getElementById("button1Output");
            button1Output.innerText =
            mouseEvent.type
            + ": (" + mouseEvent.clientX + "," + mouseEvent.clientY + ")";
        }
    });
})();
```
  前の例で、this は、WinJS.UI.Pages.define 呼び出しで作成されるページオブジェクトを参照します。さらに、button1Click: function(mouseEvent) {...} は、記述されたページオブジェクトのプロパティ (匿名関数です) を作成します。したがって、this.button1Click (button1.addEventListener("click", this.button1Click, false) の) は、実際に button1Click 関数を参照します。
```
button1Click: function(mouseEvent) {
    var button1Output = document.getElementById("button1Output");
    button1Output.innerText =
    mouseEvent.type
    + ": (" + mouseEvent.clientX + "," + mouseEvent.clientY + ")";
}
```
  Page コントロールについて詳しくは、「Page コントロールの追加」をご覧ください。
- コントロールを独自のカスタム HTML および JavaScript ファイルに追加する場合は、DOMContentLoaded イベントを使って WinJS.UI.processAll を呼び出します。document オブジェクトはコードが実行される時点で必ず存在するため、コードのどこでも DOMContentLoaded イベントを登録できます。WinJS.UI.processAll が返す Promise の then 関数または done 関数を用意し、その関数を使ってイベントハンドラーをアタッチします。

アプリを実行し、ボタンをクリックすると、クリック位置の座標が表示されます。

注釈

JavaScript URI を使わない

イベントハンドラーでは JavaScript URI を使用しないでください。アプリでは URI を実行できません。たとえば、次のように指定してボタンをクリックしても、何も起きません。


<!-- Incorrect code. Do not use this in your solution. -->
<button id="button1" onclick="javascript: 2 + 2;">An HTML Button</button>

この制限は、アプリのローカルコンテキスト内のコード (アプリパッケージに含まれるコード) に適用されますが、アプリがアクセスした外部の Web ページ上のコードには当てはまりません。

フォームの使用

従来の HTML Web サイトでは、コントロールや他の入力要素は通常、form 要素に含まれます。form 要素はサーバーにデータを渡すために使われます。一般的なアプリのプログラミングのほとんどはクライアントベースであるため、通常は form 要素を使う必要はありません。

透過型レイヤーの使用

特定のユーザー操作の検出やアニメーションの表示のために、全画面の透過型レイヤー (空の div 要素など) を使うことがよくあります。しかし、透過型レイヤーで HTML コントロールを覆うと、ユーザー操作に対する HTML コントロールの応答が遅くなる可能性があります。HTML コントロールの応答性を保持する場合は、HTML コントロールに透過型レイヤーを重ねないでください。

要約と次のステップ

HTML コントロールの作成方法とイベントハンドラーのアタッチ方法について説明しました。

次のトピック「クイックスタート: WinJS コントロールとスタイルの追加」では、JavaScript を使った Windows ランタイムアプリ用に用意されている WinJS の新しいコントロールの使い方について説明します。

特定のコントロールについて詳しくは、「コントロールの一覧」をご覧ください。

サンプル

基本的なコントロールのサンプル

さまざまな HTML コントロールと WinJS コントロールの例を紹介します。

次の方法で共有

クイックスタート: HTML コントロールの追加とイベントの処理 (HTML)

必要条件

コントロールとは

HTML コントロールの追加

イベントの処理

注釈

JavaScript URI を使わない

フォームの使用

透過型レイヤーの使用

要約と次のステップ

サンプル

関連トピック

その他のリソース

次の方法で共有

クイック スタート: HTML コントロールの追加とイベントの処理 (HTML)

必要条件

コントロールとは

HTML コントロールの追加

イベントの処理

注釈

JavaScript URI を使わない

フォームの使用

透過型レイヤーの使用

要約と次のステップ

サンプル

関連トピック

その他のリソース

クイックスタート: HTML コントロールの追加とイベントの処理 (HTML)