Firefox OS ビルディングブロックは、OS 全体のデザインパターンを反映した、再利用可能な UI コンポーネントです (「一般コントロール」とも呼ばれます)。ビルディングブロックはすべての Gaia 標準アプリのインタフェース作成に使用されています。これらのコンポーネントは、独自の Firefox OS アプリや一般的な Web アプリでも自由に活用できます。
Firefox OS ビルディングブロックの使用
Firefox OS ビルディングブロックのコードは Gaia Github レポジトリ の shared/style 以下にあります。ここでは、その特定のビルディングブロックのためのスタイルを含んだ CSS ファイルと、部分的な HTML コードや画像素材を含むサブディレクトリを見つけることができます。独自のスタンドアロン Web アプリを作成しているなら、その CSS、HTML、画像素材ファイルをあなたのプロジェクトにコピーするだけです。そのアプリが Firefox OS へのインストールのみを目的としたものであるなら (Firefox OS でのアプリ使用時に限ってそれらの機能を使用したいなら)、Gaia 内部で使用可能なバージョンへリンクさせることができます。
個別ビルディングブロック実装のページは、各ビルディングブロックのページにあります。次のセクションを参照してください。これらのページにはその実装方法に関する説明があります。
注: バージョン 2.0 ビルディングブロックコードは Firefox OS のバージョン 2.0 から 2.2 までで使われています。バージョン 2.3 ではWeb コンポーネントを使って再実装されたビルディングブロックによって更新されています。同じものですが、より一層パワフルな、柔軟な方法で実装されています。2.3 のページは、情報が入り次第、メインのビルディングブロックページ以下に追加され、それらの Web コンポーネントについて取り上げます。
注: より古いバージョンの Firefox OS で使われていた v1.x ビルディングブロック について取り上げた古いガイドもあります。これは主に情報のアーカイブとして残されています。
Web コンポーネントの事前設定
このセクションでは Gaia Web コンポーネントを使うのに必要な事前設定について詳しく説明します。
Web コンポーネントのブラウザ対応
仮に Gaia Web コンポーネント を使う場合、Web コンポーネントに対応しているブラウザを使ってそれらを実行する必要があります。対応状況は以下の通りです。
- Firefox: Firefox 23 (Android 版では 33) 以降で対応していますが、初期設定では無効化されています。Web コンポーネントを有効化するには
about:configを開いてdom.webcomponents.enabledの値をtrueにしてください。 - Chrome: Chrome 33 (Android 版では 39) 以降で対応しています。
- Opera: Opera 20 (Android 版では 24) 以降で対応しています。
- Android ブラウザ: 4.4.4 以降で対応しています。
- Safari/iOS Mobile と IE/IE Mobile: 未対応です。
Firefox OS はバージョン 2.1 以降で Web コンポーネントに対応しています。ただしそれらの大部分は実際のところバージョン 2.3 まで実装されていません。また、現在のところ Web コンポーネントは内部 (公認) レベル以下の Firefox OS アプリでは動作しません。この制限は将来的に緩和されるはずです。
注: あなたのアプリが公認であれば、コンポーネントは普通に動作するはずです。何か特定のマニフェスト許可設定を追加する必要もありません。
Web コンポーネントのインストールについて
Gaia Web コンポーネントは Bower パッケージマネージャを使ってあなたのアプリにインストールできます。これをインストールするには、まず Node.js/npm と Git が必要です。これらがインストールできたら、以下のコマンドで Bower をインストールできます。
npm install -g bower
この時点で Firefox OS で使われている Gaia Fira Sans フォントをインストールすることもできます。
bower install gaia-components/gaia-fonts
以後、ページのヘッダに以下の行を含めることでこのフォントを利用できます (font-family に FiraSans を指定してください)。
<link rel="stylesheet" type="text/css" href="bower_components/gaia-fonts/style.css"></link>
Firefox OS ビルディングブロック
- アクションメニュー
- アクションメニューは、ユーザが取り得る選択肢の中から、アプリのコンテンツに関連したアクションのリストを提示します。
- バナー
- ステータスバー (Firefox OS のより最近のバージョンではバナーと呼ばれています) は一時的な方法でユーザに情報を提供します。一般的に、アクションを確認したり、システムイベントを通知したりといった用途に使われます。
- ボタン
- ボタンは明確なアクションを実行するのに使われます。テキストや画像として表示される場合もあります。
- コンテキストメニュー
- コンテキストメニュー (Firefox OS の以前のバージョンではオブジェクトメニューと呼ばれていました) は、タップして画面を押し続ける (よく「長押し」と呼ばれる) ジェスチャーを通じてアクセス可能で、ユーザは現在のビューを離れることなくオブジェクトに対するアクションを実行できます。
- ダイアログ
- ダイアログ (Firefox OS の以前のバージョンでは確認ダイアログと呼ばれていました) は、ユーザに重要な情報を提供したり、アクションを起こすか確認するか尋ねたり、情報を選択もしくは入力させたりするのに使われます。
- ドロワー
- ドロワーは、ユーザがビュー間を移動したりビューを絞り込んだりできる拡張可能な方法です。アプリの設定や他のツールへのリンクが含まれる場合もあります。
- ヘッダ
- ヘッダは画面上部にある専用スペースで、主にビューのタイトルを表示するのに使われます。ナビゲーション、アクションボタン、その他のコントロールが含まれる場合もあります。
- 入力エリア
- 入力エリアはデータ入力欄で、テキストのみの入力欄のような単純なものから、テキスト入力、値選択、ボタンを含む複雑な多項目フォームまで、あらゆる形態が考えられます。
- レイアウト
- レイアウトユーティリティは Firefox OS アプリの一般的なレイアウト構造を作成する差に役立つでしょう。なお、レイアウトは Firefox OS 2.1 以上でのみ使用可能です。
- リスト項目
- リスト項目は一般的に、新しい画面への移動や、情報もしくはコントロールの表示に使われます。
- ビッカー
- ピッカーは、メッセージやメール用の添付ファイルなど、アイテムのグループを選択するために設計されています。
- 進捗とアクティビティ
- 進捗とアクティビティインジケータは、プロセス (リソースの読み込みなど) がアクティブであるという視覚的フィードバックをユーザに提供します。
- スクロール
- スクロールエリアは、端末の画面内でユーザがテキストや画像を移動することを可能にします。
- 検索
- 検索は、一覧を絞り込んだり、コンテキスト固有のコンテンツを発見するために使われます。
- スライダー
- シークバー (Gaia のより最近のバージョンではスライダーと呼ばれています) は、ハンドルをドラッグすることで、連続した、あるいは不連続な値の範囲の中からひとつの値を選択するのに使われます。
- 編集モード
- 編集モード (Gaia のより最近のバージョンでは選択モードと呼ばれています) は、アイテム上でアクションを選択、実行するために設計されています。
- サブヘッダ
- サブヘッダはコンテンツのサブセクションに説明を加えるために使われます。
- スイッチ
- スイッチは、項目の有効、無効を切り替えるのに使われます。また、リスト内の項目を選択するのにも使われます。
- タブ・フィルタ
- タブ・フィルタは、ビューを簡単に切り替えたり、一連のデータを絞り込んだりする方法を提供します。
- ツールバー
- ツールバーには、現在のビューに関連付けられたアクション、インジケータ、ナビゲーション要素が含まれます。
- 値セレクタ
- 値セレクタは、ユーザが取り得る値のリストからひとつを選ぶのに使われます。
-
注: アラビア語ロケール(双方向な)選択時のビルディングブロックで従うべきデザインパターンの詳細なガイドは、アラビア語のFirefox OS を見てください。
クロスブラウザCSS
Arnau March 氏はクロスブラウザCSSというファイルを書いており、これにはFirefox 2.0 のビルディングブロックがさまざまなブラウザ(ie 9, Firefox 18, Chrome 24, Safari 5.1.)で適切にレンダリングされるようなルールが含まれています。さまざまなブラウザ間で見栄えがokなホスト型アプリを書く場合、プロジェクトにこの CSS を入れます。
バージョン別 Firefox OS ビルディングブロック実装
以下のページは、Firefox OS のバージョンごとに Firefox OS ビルディングブロック実装を取り上げたページにリンクしています。
- Firefox OS 2.3 Web コンポーネント
- Firefox OS 2.0 ビルディングブロック (Firefox OS 2.0 から 2.2 まで)
- Firefox OS 1.x ビルディングブロック (より古いバージョンの Firefox OS 向け)
