CSS_Framework

以下のドキュメントは、英語の原文を日本語へ翻訳したものをRhomobile社の許可のもと、公開しています。
公式なドキュメントはRhomobile社のサイトをご覧ください。
また、この文書は2010/7/1(JST)の情報がもとになっています。
この日本語の翻訳について問題・質問などがある場合、コメントを残してください。それ以外については、本ドキュメント内にある問い合わせ先にお願いします。

The following document (a translation of the English original into Japanese) is published with Rhomobile permission.
If you need official documents, please visit Rhomobile site.
In addition, the following document is based on 2010/July/1 (JST) information.
If you have any question, problem about the Japanese translation, please leave your comment. Except for that, refer contacts in the document.

CSSフレームワーク

Rhodesフレームワークは、アプリケーションにネイティブなlook&feelを提供するたおめの各デバイス用にカスタマイズされたスタイルシートを持っています。これらのスタイルシートは、生成されたすべてRhodesアプリケーションにデフォルトで含まれており(public/css/)、アプリケーションのレイアウトファイルに含まれます（app/layout.erb)。

デフォルトのスタイルは自動的に"toolbar"、"pageTitle"、および"content"divにあるすべてのサポートされるコンテンツへ適応されます。もし、これらのdivのどれかでも違う名前で利用したいならば、ネイティブなスタイリングを維持するために、新しい名前を反映するようにスタイルシートを更新する必要があります。逆に、アプリケーションでカスタマイズされたスタイルを使用しないようにしたい場合は、アプリケーションからデフォルトのスタイルシートへのリンクを削除するか、"toolbar","pageTitle","content"から降りていないdivのカスタム・スタイルを作成することを望むどんなcontentも単に配置します。

目次 1 複数のブラウザへ向けての設計... 1.1 1ビュー・ファイルでの条件付き表示 1.2 2カレント・プラットフォームに基くカスタム・ビュー・ファイルの動的読み込み 2 別のプラットフォームに別のスタイル 3 BlackBerryのCSS/HTMLのアーキテクチャ 4 標準スマートフォンのCSS/HTMLのアーキテクチャ 5 カスタムスタイルの作成 5.1 ヒントとコツ： 5.1.1 リンク 5.1.2 リスト 6 様々なデバイスで起こり得るかもしれない既知の癖... 6.1 Windows Mobile 6.2 Webkitベースのブラウザ

複数のブラウザへ向けての設計...

任意のクロスプラットフォーム開発の取り組みにおいても、Rhodesプラットフォームによりサポートされる各デバイスのブラウザ間で重大な違いが存在します。また、各デバイスのネイティブルック＆フィールがとても多様です。このため、Rhodesでサポートされる各デバイスは、ヴィジュアル・デザインのためカスタムCSSフレームワークが必要となります。

プラットフォームをまたがって一つのファイルビューの利用機能はほとんどのブラウザで十分に似ていますが、特定のデバイスのカスタム・ビュー・ファイルの利用を必要とするかかもしれないいくつかの違いに遭遇するでしょう。Rhodesは、いくつかの方法でこのような違いをサポートしています：

1.ビューファイルでの条件付き表示

一部のブラウザでコンテンツを表示し他では表示しないために、ビュー内に条件文を含めることができます。たとえば、このコードは条件付きで、モデルのビューで、携帯電話のオペレーティングシステムの名前を表示するために使用することができます。

  <% if platform == 'APPLE' %>

                        iPhone 
  <% elsif  platform == 'ANDROID' %>
                        Android
  <% elsif platform == 'Blackberry' %>
                        BlackBerry
  <% else %>

   Windows Mobile
  <% end %>

アプリケーションのindexで現在のプラットフォームを求める、適切な条件を理解するには、生成されたアプリケーションのlayout.erbを参照してください -このファイルは、適切に自動的に生成されたスタイルシートをロードする条件付きロジックが含まれています。

通常の場合において、より複雑な条件を使用するするなら、/app/helpers/browser_helper.rbでカスタム・ヘルパー・メソッドを作成することもできます。次のヘルパーメソッドを使用することができます

a) ブラウザがwebkitベースかどうか

    def is_webkit?
         platform == "APPLE" || platform == "ANDROID"
    end

b）そして、さらに、アプリケーションlayoutファイルにあるhtmlヘッダのカスタムwebkitスタイルシートに含めます。

    <%=    '<link href="/public/css/my_custom_webkit.css" type="text/css" rel="stylesheet"/>'  if is_webkit? %>％の>

2カレント・プラットフォームに基くカスタム・ビュー・ファイルの動的読み込み

ブラウザ間のより大きな違いは、Rhodesはビューファイルのプラットフォーム固有の読み込みをサポートしています。実行時に、アプリケーションは現在のプラットフォームを検出し、デフォルトのビューファイルをロードする前にプラットフォーム固有のファイルを最初にチェックします。

プラットフォーム固有のビューを作成するには、以下の構成に従って[action_name].[platform_abbreviation].erbのようにファイルに名前をつけるだけです。（例えば、index.bb.erb、show.wm.erb）

Android：	android	index.android.erb
BlackBerry：	bb	index.bb.erb
iPhone：	iphone	index.iphone.erb
Windows Mobile：	wm	index.wm.erb

例としては、BlackBerryのブラウザは近代的なCSSを厳しく制限付きでサポートしています。iPhone、Android、WindowsMobileデバイス上のより高度なブラウザの機能をフルに活用するために、BBデバイス上で実行されるときにロードされるBlackBerry用にカスタムされたビューファイルを含むビューファイルがrhogenコマンドで生成されます。上記のように、BlackBerryのためにカスタマイズされたファイルは、標準のerb拡張子の前に"bb"が指定されます。(たとえば、app/index.bb.erb)

標準ビューに加えられたいかなる変更もカスタムビューには取り込まれないことに注意してください。従って、特定のプラットフォームへのカスタム・ビューを開発しているならば、必要な変更が全ての関連したビューファイルに適応されることを確認してください。

異なるプラットフォームに異なるスタイル

1つのプラットフォームで必要な多くのカスタムスタイルは、他のプラットフォーム上には関連する対応がありません。たとえば、iphoneはいくつかのtoolbarボタンスタイルをサポートしますが、AndroidやWindows Mobileプラットフォームには対応するスタイルがありません。結果として、iPhoneスタイルシートはそれらのボタンのそれぞれのカスタムスタイルを提供しますが、残りのデバイスは全ての４つのボタンスタイルに同じスタイルがで既往されることになります。どのスタイルが特定のユースケースに適用するかの詳細については、この文書の残りの部分を参照ください。

BlackBerryのCSS/HTMLのアーキテクチャ

BlackBerryのブラウザのバージョン4.2 - このバージョンはネイティブBlackBerryのアプリケーションに利用可能 - 現代的なCSSに非常に限定的なサポートであり、スタンダードビューで利用されるdiv、floatなどに適応されるキースタイルに特に注意しなければなりません。代わりに、BlackBerryでアプリケーションが実行されると、テーブルベースのレイアウトを使ったビューファイルがロードされます。

他のサポートされたデバイス上の近代的なブラウザになる機能の特徴を活用するために、BlackBerryの限定された近代的なCSSスタイルを軽減する構造を持つ別のビューファイルを提供することが必要です。代わりに、RhodesアプリケーションがBlackBerryデバイスで動作するときは、テーブルベースのビューのファイルが読み込まれます。

BBでのスタイルの使用に関する議論はBlackberry HTML and CSSを参照してください。

標準スマートフォンのCSS/HTMLのアーキテクチャ

pageTitle divを例外とし、以下のセクションで一般的にスタンダードなスマートフォンとして言及されるiPhone、Android、WindowsMobileデバイスでスタイルの利用を記述しています。

標準的なスマートフォンで利用できるhtmlマークアップとスタイルのディスカッションはStandard Smartphone CSS/HTML Architectureを参照してください。

カスタムスタイルを作成する

アプリケーション用に独自のカスタムスタイルを生成したい場合は、いくつかの方法で行うことができます：

1. pageTitle、toolbar、content divの外にコンテンツを置きます

   body, h1, aタグに適応されるいくつかのスタイルを例外として、プラットフォーム固有のスタイルシートはpageTitle、toolbar、content div内のコンテンツにのみ適用されます。このオプションは、事前定義されたスタイルのいくつかを利用したいイベントで、最も柔軟性を提供します。

2. カスタムスタイルシートを作成する

   生成されたスタイルシートの事前に定義されたスタイルの一部またはすべてを上書きする、アプリケーションのカスタム・スタイルシートを作成することができます。これらのスタイルシートは、生成されたスタイルシートの後、それらが連鎖の最後になるように、レイアウトに含まれることを確認してください。

3. 生成されたスタイルシートを変更する

   アプリケーションの柔軟性を最大に保ちますが、これは推奨されません。

ヒントとコツ：

Rhodesアプリケーションで使用する独自のスタイルを開発している場合は、次のヒントに役立つかもしれません。

リンク

linkを使ってナビゲーション要素を作成するとき、それらを標準的なリンクに見えないようにしたいかもしれません。

• リンク全体の親コンテナをクリッカブルにするためには、<a>タグをdisplay:blockでスタイリングする必要があります
• 下線リンクを防ぐには、<a>タグをtext-decoration:noneでスタイリングする必要があります

リスト

• 行頭文字または番号なしのリストを表示するには、リストの親ulおよびolタグに"list-style-type:none"を適応します。

様々なデバイスで起こり得るかもしれない既知の癖...

Windows Mobile

Windows Mobileは、float要素のサポートを制限しています。すべてのfloated要素とその親コンテナは、適切な表示のため固定の高さを割り当てる必要があり、それらが動的に生成されるコンテンツに使用するのが難しくなります。また、Windows Mobileは、overflow:hiddenメソッドをサポートしていないので、その親コンテナの境界上を流れるテキストを非表示にできません。

プレースホルダのテキストは、ネイティブのiPhoneアプリケーション上のテキストフィールドでのみ使われます。ただし、そのプレースホルダはWindows Mobileでは表示されないことに注意してください。また、テキストフィールドの一つのユーザに対面する記述としては除去されるねきではないでしょう。

Webkitベースのブラウザ

css3やhtml5などの高度な機能が利用な多くの実装により、WebKitベースのブラウザは特に柔軟性があります。

-webkit-appearance

Webkitベースのブラウザでは、-webkit-appearanceプロパティが、ユーザインタフェースエレメントとして高度なブラウザ固有のスタイルにアクセスすることを許可します。しかしながら、これらのUI要素の外観をカスタマイズするには、デフォルトのwebkitの外観をオフにする必要があります。

-webkit-appearance:none

入力要素、ボタンなどのスタイル定義で指定します。

AndroidとiPhoneの生成されたスタイルシートにこの例を見つけることができ、- -webkit-appearanceが全てのformエレメントで上書きされています。それは、formエレメントがブラウザで使われるスタイルよりもむしろネィティブ・アプリケーション・コンポーネントに似せたスタイリングにするためです。

-webkit-appearanceに関するより詳細な情報は、http://developer.apple.com/safari/articles/cssrecipes.htmlで見つけることができます。

Viewports vs postion:fixed

position:fixed属性はWebKitベースのモバイル・ブラウザでは期待した動作は発生しません。ビューが適切な解像度で描画されるようにするには、モバイルWebKitベースのブラウザはどのコンテンツが表示されるか決定するためにviewportを使用します。

viewpointでのスクロールがデスクトップ・ブラウザでのスクロールと如何に異なるかを理解するために、机の上に置かれた新聞を想像してください。大きな一枚の画用紙を持って、画用紙の中心480mmx320mmの四角形を切ります。画用紙を新聞の上に置いたら、いつもコンテンツの小さな一部を見ることができ、追加のコンテンツを参照するには画用紙を移動する必要があります。同様に、モバイルWebKitベースのブラウザは、ページ全体をレンダリングし、ユーザーがページの上に480x320pxウィンドウを移動できるようにしています。デスクトップ・ブラウザで見られるページの動的レンダリングとは対照的です。ページ全体が一度に表示されるので、ブラウザは適切な場所にツールバーを再生成することができません。その結果、position:fixedのアイテムは、viewpointではなくページ本体に固定化した相対として解釈され、ユーザの視点からtoolbarの位置が固定されません。

[続きを読む]