6 BlackBerry 4.2から4.5向けの設計ガイドライン

この章では、BlackBerryブラウザ4.2から4.5の動作に対応する方法について説明します。

この章は次の項を含みます:

6.1項「BlackBerryブラウザの表示動作について」
6.2項「折返しを回避するための表の書式設定」
6.3項「ラベルおよびメッセージ・パネルの書式設定」
6.4項「列幅の書式設定」
6.5項「BlackBerryスマートフォンでの表示の差異についての考慮事項」

6.1 BlackBerryブラウザの表示動作について

BlackBerryブラウザの動作は、水平スクロールを使用してページを表示しないという点で、他の多くのブラウザとは異なります。かわりに、ページは画面の幅にあわせて表示されます。この章では、BlackBerryスマートフォン上で適切に表示されるようにページを書式設定するのに役立つガイドラインを示します。

6.2 折返しを回避するための表の書式設定

ブラウザ上において長い単語がフィールド間で折り返されるため、表の書式設定時に、複数のフィールドを含む行で長い単語を使用しないようにします。

注意:

この章で使用している単語とは、一連の文字列のことです。この場合、単語に空白文字は含まれません。

BlackBerryブラウザのデフォルト・モードではブラウザの幅が物理的な画面の幅に制限されるため、行内に収まらないフィールドは次の行に表示されます。アプリケーションで複数の要素を1行に表示するには、フィールドの全体の幅をブラウザの幅以下にする必要があります。他のブラウザと同様、BlackBerryブラウザでは複数の行が必要に応じて折り返されます。フィールド内にある最も長い単語のサイズよりも列の幅を小さくすることはできません。

6.2.1 表内におけるフィールドの折返しの回避方法

表の行内にあるすべてのフィールドが入力フィールドである場合、フィールドが折り返されないようにするには、行のサイズ属性値の合計が次の式を満たしていることを確認します。

3*Number of columns + the Sum of the size attributes in all columns <=X, when X=48

一般的に、表の列内にあるフィールドのサイズは、次の式を満たしている必要があります。

3 * Number of Columns + 
Sum of size attributes in all input field columns + 
Sum of number of characters in longest words in all output field columns <=X, when X=48

これでもフィールドが折り返される場合は、行内に収まるまでXの値を小さくします。

6.3 ラベルおよびメッセージ・パネルの書式設定

プログラミングによる処理の柔軟性を維持するため、nowrap属性がサポートされており、この属性をTrinidadコンポーネントに対して明示的にプログラムすることで挿入できます。ページのプログラム時にコンポーネント定義にnowrapを追加した場合、問題が発生する可能性があります。

6.4 列幅の書式設定

列を書式設定する場合は、tr:panelFormLayoutコンポーネント内のラベルとフィールドの両方にパーセント幅を設定して、その合計の幅が100%になるようにします。

6.5 BlackBerryスマートフォンでの表示の差異についての考慮事項

この項では、異なるデバイス上で同じアプリケーションがどのように違って表示されるのかを説明します。この項のトピックは、次のとおりです。

最小フォント・サイズの変更
フォーム・ファクタの違い

6.5.1 最小フォント・サイズの変更

ユーザー設定で最小フォント・サイズを変更すると、ADFモバイル・ブラウザ・レンダラの書式設定機能が影響を受けます。たとえば、図6-1に示すように、フォントがデフォルト・サイズである6ポイントに設定されている場合、入力フィールドおよびそれに対応するラベルは適切に並んで表示されます。

図6-1 デフォルト・フォント・サイズの6ポイントで表示されたアプリケーション

一方、フォント・サイズを10ポイントに拡大すると、入力フィールドがそれに対応するラベルの下に移動するため、レイアウトが崩れます。この結果、ページが読みづらくなります。

図6-2のページは、表示画面に対して大きすぎます。

図6-2 フォント・サイズの拡大

6.5.2 フォーム・ファクタの違い

画面のサイズが異なると、表示に影響が出ることがあります。(図6-1に示すように)フォント・サイズがデフォルトの6ポイントになっている場合でも、異なるデバイス上では同じアプリケーションが異なって表示されます。図6-3では、入力フィールドが辛うじてデバイスの画面に収まっていますが、同じアプリケーションを他のデバイス(図6-1)で実行したときは表示スペースにまだ余裕がありました。

図6-3 フォント・サイズ6ポイントで辛うじて画面に収まっている入力フィールドおよびラベル

さらに、あるデバイスの画面上で適切に表示された入力フィールドが、異なるタイプのデバイスの画面上では窮屈に表示される場合もあります。

図6-4に示したアプリケーションでは、表のセルの幅が不十分であるため、テキストが折り返されています。

図6-4 折り返されたテキスト