X-tag と独自要素

X-tag とは、HTML5 アプリ開発に使える一連のビルディングブロック (コンポーネント) を提供する独自 HTML 要素です。必要なコンポーネントが見当たらなければ、独自の X-tag を定義して、他の正式な HTML タグと同様に使うことができます。以下に 10 個の X-tag と、その使い道の説明を挙げます。

X-tag は Web コンポーネント技術を元にしています。

警告ポップアップ

警告ポップアップは、現在のアクティビティに関連したユーザの入力を求める小さなウィンドウです。現在のアクティビティをすべて無効化し、ユーザがアクションを確認したかダイアログをキャンセルした場合のみ消えます。

ドロップダウンメニューは、現在のアクティビティに関連したオプションの一覧を示します。ユーザがドロップダウンアイコンにタッチしたときに開かれます。テキスト、画像、あるいはその両方を含められます。

日付・時刻ピッカー

ピッカーは、時刻、日付、その他の情報をユーザが素早く選択できるようにします。例えばあらかじめ定義された一連の値から場所を選ぶといったことが可能です。データを正しい形式で入力させるためにも使用されます。

選択リスト

選択リストは、現在のアクティビティに関連したオプションの一覧を示すポップアップダイアログです。現在のアクティビティをすべて無効化し、ユーザがアクションを確認したかダイアログをキャンセルした場合のみ消えます。通常のリストは、ユーザがひとつの項目を選択できるようにするもので、複数選択リストは複数項目の選択を可能にします。テキスト、画像、あるいはその両方を含められます。

スライドボックス

スライドボックスは、水平または垂直 (両方向ではなく) に動く前後のナビゲーションを伴った、回転スライド表示です。

スライダー

スライダーは、ユーザがハンドルを動かすことで、あらかじめ定義された範囲から値を調整、選択できるようにします。変更はただちに目に見える形で反映されるため、ユーザはそれに応じて値 (明度など)を微調整できます。ユーザが直接値を入力した方が簡単な場合はテキストボックスを使うべきでしょう。

タブボックス

タブは通常、いくつかの表示ペインを切り替えるためのグループに使用されます。

トースト

トーストは、イベントの通知 (新着メールなど) や、ユーザのアクションに対する押し付けがましくない即座のフィードバック (メールの保存など) を提供する小さなポップアップです。最小限のテキストが含まれ、ユーザのインタラクションを必要とせず、数秒後に自動的に消えます。テキスト、画像、あるいはその両方を含められます。

切り替えスイッチ

切り替えスイッチは、ユーザが 2 つの状態のいずれかを選択できるようにします。変更は即座に反映され、ユーザは繰り返し切り替えることが可能です。