機能別コントロール (HTML)

  • [アーティクル]

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

JavaScript を使った Windows ランタイム アプリでは、多くの機能を実行するコントロールを使用できます。類似する機能を持つコントロールを比較すると、シナリオに合わせて適切なコントロールを選ぶことができます (アルファベット順のコントロール一覧については、「コントロールの一覧」をご覧ください)。

これらの機能の実際の使い方については、「アプリの機能の概要」シリーズの次のトピックをご覧ください : Windows ストア アプリ UI の概要

アプリ バーとコマンド

  • アプリ バー
    アプリ特有のコマンドを表示するツール バーを表示します。

    <div data-win-control="WinJS.UI.AppBar"></div>

    リファレンス: WinJS.UI.AppBar

    クイック スタート: アプリ バーの追加

  • コンテキスト メニュー
    ユーザーが JavaScript を使った Windows ランタイム アプリのテキストまたは UI オブジェクト上で操作 (クリップボード コマンドなど) を実行するための軽量なメニューを表示します。

    var menu = new Windows.UI.Popups.PopupMenu();

    リファレンス: Windows.UI.Popups.PopupMenu

  • メニュー (Windows のみ)
    メニューを表示します。

    <div data-win-control="WinJS.UI.Menu"></div>

    リファレンス: Menu

  • メニュー コマンド (Windows のみ)
    Menu オブジェクトに表示されるコマンドを表します。

    <button data-win-control="WinJS.UI.MenuCommand" />

    リファレンス: MenuCommand

  • ナビゲーション バー (Windows のみ)
    ユーザーが表示または非表示にできるツール バーのナビゲーション コマンドを表示します。

    <div data-win-control="WinJS.UI.NavBar"></div>

    リファレンス: WinJS.UI.NavBar

    HTML NavBar コントロールのサンプルに関するページ

  • ナビゲーション バー コマンド (Windows のみ)
    ナビゲーション バーのコンテナーに含まれるナビゲーション コマンドを表します。

    <div data-win-control="WinJS.UI.NavBarCommand"></div>

    リファレンス: WinJS.UI.NavBarCommand

    HTML NavBar コントロールのサンプルに関するページ

  • ナビゲーション バー コンテナー (Windows のみ)
    ナビゲーション バー内のナビゲーション バー コマンドのグループが含まれています。

    <div data-win-control="WinJS.UI.NavBarContainer"></div>

    リファレンス: WinJS.UI.NavBarContainer

    HTML NavBar コントロールのサンプルに関するページ

  • ポップアップ メニュー
    「"コンテキスト メニュー"」をご覧ください。

  • ツール バー
    一連のコマンドを表示します。Toolbar は Flyout や AppBar などの任意の場所に表示できます。

    <div data-win-control="WinJS.UI.Toolbar">
</div>

    リファレンス: Toolbar

ボタン

コレクション コントロールとデータ コントロール

  • FlipView
    コレクションを表示します (一度に 1 項目)。

    <div data-win-control="WinJS.UI.FlipView"></div>

    リファレンス: WinJS.UI.FlipView

    クイック スタート: FlipView の追加

  • グリッド ビュー
    グリッド レイアウトの ListView です。詳しくは、「"リスト ビュー"」をご覧ください。

    <div data-win-control="WinJS.UI.ListView" 
    data-win-options="{layout: {type: WinJS.UI.GridLayout}}"></div>

    リファレンス: WinJS.UI.ListView

    クイック スタート: ListView の追加

  • ジャンプ ビューアー
    「セマンティック ズーム」をご覧ください。

  • リピーター
    一連のデータから HTML を生成します。このコントロールを使って項目の一覧を生成します。

    <div data-win-control="WinJS.UI.Repeater"></div>

    リファレンス: WinJS.UI.Repeater

    HTML リピーター コントロールのサンプル

  • セマンティック ズーム
    ユーザーが、項目のコレクションの 2 つの異なる表示の間でズームを実行できるようにします。

    <div data-win-control="WinJS.UI.SemanticZoom">

  <!-- Control that provides the zoomed-in view. -->
  <div id="zoomedInView" data-win-control="WinJS.UI.ListView"></div>

  <!-- Control that provides the zoomed-out view. -->
  <div id="zoomedOutView" data-win-control="WinJS.UI.ListView"></div>

</div>

    リファレンス: WinJS.UI.SemanticZoom

ポップアップ

  • コンテンツ ダイアログ
    注意する必要がある、または、ユーザーの明示的な操作を求める重要な情報を表示し、アプリ内の他の要素の操作を一時的にブロックします。

    <div 
  data-win-control="WinJS.UI.ContentDialog">
  <!-- Content -->
</div

    リファレンス: ContentDialog

  • コンテキスト メニュー
    「"ポップアップ メニュー"」をご覧ください。

  • ポップアップ (Windows のみ)
    ユーザーの操作が必要であることを示すメッセージを表示します (メッセージ ダイアログでは他のユーザー操作がブロックされますが、ポップアップでは別のウィンドウが作成されず、操作もブロックされません)。

    <div data-win-control="WinJS.UI.Flyout"></div>

    リファレンス: WinJS.UI.Flyout

    クイック スタート: ポップアップの追加

  • メニュー (Windows のみ)
    メニューを表示します。

    <div data-win-control="WinJS.UI.Menu"></div>

    リファレンス: WinJS.UI.Menu

  • メニュー コマンド (Windows のみ)
    Menu オブジェクトに表示されるコマンドを表します。

    <button data-win-control="WinJS.UI.MenuCommand" />

    リファレンス: WinJS.UI.MenuCommand

  • メッセージ ダイアログ
    ユーザーがすぐに応答する必要であることを示すメッセージを表示します。

    リファレンス: Windows.UI.Popups.MessageDialog

    クイック スタート: メッセージ ダイアログの追加

  • ポップアップ メニュー
    ショートカット メニューを表します。

    var popupMenu = new Windows.UI.Popups.PopupMenu();

    リファレンス: Windows.UI.Popups.PopupMenu

  • 設定ポップアップ (Windows のみ)
    アプリの設定にアクセスできるようにします。

    <div data-win-control="WinJS.UI.SettingsFlyout"></div>

    リファレンス: SettingsFlyout

  • ヒント (Windows のみ)
    リッチ コンテンツ (画像、書式付きテキストなど) をサポートするリッチなヒントを表示し、より多くの情報を提示します。

    <div data-win-control="WinJS.UI.ToolTip"></div>

    リファレンス: WinJS.UI.Tooltip

  • ヒント (シンプル)
    ある要素について、テキストのみの単純なヒントを表示します。

    <element title="tooltip text" />

    リファレンス: title

グラフィックス

  • キャンバス
    ドキュメント上の画像およびグラフィックスの描画、レンダリング、操作に使われるオブジェクトを提供します。

    <canvas />

    リファレンス: canvas

    クイック スタート: キャンバスへの描画

  • svg
    ベクター グラフィックスをレンダリングできる SVG ドキュメントまたはドキュメント フラグメントを定義します。

    <svg xmlns="http://www.w3.org/2000/svg"></svg>

    リファレンス: svg

画像

  • img
    画像を表示します。

    <img src="url" />

    リファレンス: img

レイアウト コントロール

  • 可変ボックス
    CSS レイアウトは、ボックスのサイズを定義するときに利用可能な領域を考慮することで、相対サイズと相対配置を有効にします。

    <div style="display: -ms-box;">
    <!-- Child elements -->
</div>

    リファレンス: display

  • グリッド
    列と行で構成される可変グリッド領域を定義する CSS レイアウト。

    <div style="{display: -ms-grid}">
    <!-- Child elements -->
</div>

    リファレンス: display

  • ハブ (Windows のみ)
    ハブ ナビゲーション パターンを作成します。ハブ ナビゲーション パターンは、ハブとそこから移動できる各セクションで構成されます。それぞれのセクションは、ハブ セクションによって定義されます。

    <div data-win-control="WinJS.UI.Hub"></div>

    リファレンス: WinJS.UI.Hub

    HTML ハブ コントロールのサンプル

  • ハブのセクション (Windows のみ)
    ハブのセクションを定義します。

    <div data-win-control="WinJS.UI.HubSection"></div>

    リファレンス: WinJS.UI.HubSection

    HTML ハブ コントロールのサンプル

  • 項目コンテナー
    押下、スワイプ、ドラッグができる項目を定義します。

    <div data-win-control="WinJS.UI.ItemContainer"></div>

    リファレンス: WinJS.UI.WinJS.UI.ItemContainer

    HTML ItemContainer のサンプル

  • パン スクロール ビュー
    「"スクロール ビュー"」をご覧ください。

  • ピボット
    複数の項目を表示するタブ コントロールを作成します。

    <div data-win-control='WinJS.UI.Pivot'></div>

    リファレンス: WinJS.UI.Pivot

  • ピボット項目
    タブ コントロール内のタブを作成します。

    <div data-win-control='WinJS.UI.PivotItem'></div>

    リファレンス: WinJS.UI.PivotItem

  • スクロール バー
    コンテンツをスクロールするためのコンテナーです。要素の overflow スタイルを scroll または auto に設定すると、このスクロール機能を追加できます。

    <div style="overflow:scroll;">
    <!-- Contents -->
</div>

    リファレンス: overflow

  • スクロール ビュー
    ユーザーが拡大および縮小できるコンテンツのビューを表示し、エクスペリエンスを向上させるスナップ位置などの機能を提供します。

    <div style=overflow:scroll;-ms-content-zooming:zoom>>
    <!-- Contents to edit. -->
</div>

    リファレンス: overflow、ms-content-zooming

  • 分割ビュー
    領域を 2 つの部分に分割します。端から表示できるウィンドウと、空いているスペースに広がるコンテンツ領域の 2 つです。

    <div data-win-control="WinJS.UI.SplitView">
</div>

    リファレンス: SplitView

  • Viewbox
    1 つの子要素のサイズを変更することなく拡大または縮小して、表示領域内に表示されるようにします。このコントロールは、コンテナーのサイズの変更と子要素のサイズの変更に対応します。たとえば、メディア クエリを実行して縦横比が変化した場合、このコントロールが応答します。

    <div data-win-control="WinJS.UI.ViewBox"></div>

    リファレンス: WinJS.UI.ViewBox

  • ズーム対応スクロール ビュー
    「"スクロール ビュー"」をご覧ください。

メディア コントロール

  • オーディオ
    音楽や効果など、ドキュメントで再生されるサウンドまたはオーディオ コンテンツを指定します。

    <audio>
    <source src="uri" type="audioType" />
</audio>

    リファレンス: audio

  • メディア要素
    「"オーディオ"」および「"ビデオ"」をご覧ください。

  • メディア プレーヤー
    「"オーディオ"」および「"ビデオ"」をご覧ください。

  • ビデオ
    ドキュメントで再生されるビデオ コンテンツを指定します。

    <video controls="controls">
   <source src="url" type="videoType" />
</video>

    リファレンス: video

ナビゲーション

  • HTML コントロール
    HTML ページからコンテンツを表示します。

    <div data-win-control="WinJS.UI.HtmlControl"></div>

    リファレンス: WinJS.UI.HtmlControl

  • iframe
    他のドキュメントを表示できるインライン フローティング フレームです。

    <iframe src="url" />

    リファレンス: iframe

  • ページ コントロール
    ナビゲーション アプリ内のカスタム コントロールまたはページを表します。

    リファレンス: WinJS.UI.Pages.PageControl

    クイック スタート: 単一ページ ナビゲーションの使用

  • 分割ビュー
    領域を 2 つの部分に分割します。端から表示できるウィンドウと、空いているスペースに広がるコンテンツ領域の 2 つです。

    <div data-win-control="WinJS.UI.SplitView">
</div>

    リファレンス: SplitView

  • Web ビュー
    「"iframe"」をご覧ください。

プログレス コントロール

評価コントロール

選択コントロール

  • チェック ボックス
    複数のチェック ボックス コントロール

    ユーザーが選択またはクリアできるチェック ボックスを表します。

    <input type="checkbox" />

    リファレンス: input type=checkbox

    クイック スタート: チェック ボックスの追加

  • コンボ ボックス
    「"選択"」をご覧ください。

  • DatePicker (Windows のみ)
    DatePicker 淡色スタイル

    日付を設定します。

    <div data-win-control="WinJS.UI.DatePicker"></div>

    リファレンス: DatePicker

    クイック スタート: DatePicker の追加

  • ファイル アップロード
    テキスト ボックスと参照ボタンがあるファイル アップロード オブジェクトを作成します。

    <input type="file" />

    リファレンス: input type=file

  • リスト ボックス
    「"選択"」をご覧ください。

  • リスト ビュー
    リストまたはグリッド レイアウト内のデータのコレクションを表示します。

    <div data-win-control="WinJS.UI.ListView"></div>

    リファレンス: WinJS.UI.ListView

    クイック スタート: ListView の追加

  • ラジオ ボタン
    ユーザーが選択できる値を複数の値の中の 1 つに制限する、選択コントロールの種類です。これを行うには、一連のラジオ ボタンの各ボタンに同じ名前を割り当て、相互にリンクさせる必要があります。

    <input type="radio" id="redRadio" name="colorRadio" /><label for="redRadio">Red</label>   
<input type="radio" id="greedRadio" name="colorRadio" /><label for="greedRadio">Green</label>
<input type="radio" id="blueRadio" name="colorRadio" /><label for="blueRadio">Blue</label>

    リファレンス: input type=radio

  • 範囲
    「"スライダー"」をご覧ください。

  • 検索ボックス (Windows のみ)
    ユーザーが検索クエリを実行したり、候補を選ぶことができます。

    <div data-win-control="WinJS.UI.SearchBox"></div>

    リファレンス: WinJS.UI.SearchBox

    SearchBox コントロールのサンプル

  • 選択
    リスト ボックス、コンボ ボックス、またはドロップダウン リストを表します。

    <select>
    <option>Apple</option>
    <option>Banana</option>
    <option>Grape</option>
    <option>Orange</option>
    <option>Pear</option>
    <option>Watermelon</option>
</select>

    リファレンス: select

  • スライダー
    数値を選択するためのスライダーを表示します。

    <input type="range" />

    リファレンス: input type=range

  • TimePicker (Windows のみ)
    TimePicker 淡色スタイル

    ユーザーが時刻を指定できるようにします。

    <div data-win-control="WinJS.UI.TimePicker"></div>

    リファレンス: WinJS.UI.TimePicker

    クイック スタート: TimePicker の追加

  • トグル スイッチ
    2 つの状態を切り替えることができるスイッチを表します。

    <div data-win-control="WinJS.UI.ToggleSwitch"></div>

    リファレンス: ToggleSwitch

テキスト コントロール

  • メール入力ボックス
    1 つ以上のメール アドレスを受け入れる単一行入力コントロールです。

    <input type="email" />

    リファレンス: input type=email

  • 複数行テキスト ボックス
    「"テキスト領域"」をご覧ください。

  • 数値入力ボックス
    数値を受け入れる単一行入力コントロールです。

    <input type="number" />

    リファレンス: input type=number

  • パスワード入力ボックス
    テキスト入力コントロールに似ている単一行テキスト入力コントロールですが、ユーザーが入力するときにテキストが表示されません。

    <input type="password" />

    リファレンス: input type=password

  • リッチ エディット ボックス/リッチ テキスト ボックス
    テキスト入力ボックスと似たテキスト入力機能を備えるコントロールですが、子要素を含むコンテンツを扱うことができます。リッチ テキスト ボックスを作成するには、編集する要素の contentEditable プロパティを設定します。

    <div contentEditable="true">
    <!-- Elements to edit. -->
</div>

    リファレンス: contentEditable

  • 単一行テキスト ボックス
    「"テキスト ボックス"」をご覧ください。

  • テキスト ボックス
    単一行テキスト入力コントロール。

    <input type="text" />

    リファレンス: input type=text

  • テキスト領域
    複数行テキスト入力コントロール。

    <textarea></textarea>

    リファレンス: textarea

  • URL 入力ボックス
    URL を受け入れる単一行テキスト入力コントロールです。

    <input type="url" />

    リファレンス: input type=url

ユーザー ヘルプ

  • ラベル
    ページ上の他の要素のラベルを指定します。

    <label for="otherControl">Label text</label>
<input type="text" id="otherControl" />

    リファレンス: label

  • ヒント (Windows のみ)
    リッチ コンテンツ (画像、書式付きテキストなど) をサポートするリッチなヒントを表示し、より多くの情報を提示します。

    <div data-win-control="WinJS.UI.ToolTip"></div>

    リファレンス: WinJS.UI.Tooltip

  • ヒント (シンプル)
    ある要素について、テキストのみの単純なヒントを表示します。

    <element title="tooltip text" />

    リファレンス: title

関連トピック

コントロールの一覧

try.buildwinjs.com

クイック スタート: コントロールの追加

クイック スタート: WinJS コントロールとスタイルの追加

Windows Phone での WinJS API の変更点