以下のドキュメントは、英語の原文を日本語へ翻訳したものをRhomobile社の許可のもと、公開しています。
公式なドキュメントはRhomobile社のサイトをご覧ください。
また、この文書は2010/7/2(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/2 (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/HTMLアーキテクチャ

デフォルトスタイルシートの使用

pageTitle（<div id="pageTitle">）

pageTitle divは、現在のページのタイトルを含み、h1タグにラップされています。ページタイトルは、各デバイスの適切な場所に表示されます。

pageTitle divは、Windows Mobileデバイスでは表示されません。

<div id="pageTitle">

      <h1>Things</h1>
</div>

toolbar (<div id="toolbar">)

toolbar divは、ユーザをアクションを行ったりアプリケーションで移動したりすることをができる対話型エレメントを含んでいます。最も頻繁に、これらのエレメントはボタンのリンクスタイルです。

toolbar divは、標準スマートフォンのページ上部に表示されます。

iPhoneでは、ツールバーのコンテンツはpageTitle divのの上にオーバーレイされます。
Androidでは、アプリケーションのツールバーは、通常、画面の下部に表示されます。しかし、position:fixed属性は、WebKitベースのモバイルブラウザでは期待される動作をしません。ビューが適切な解像度で描画されるようにするには、モバイルWebKitベースのブラウザは、どのコンテンツを表示するか決定するためにviewpointを使用します。

この文書の末尾にviewpointとfixed positioning間のコンフリクトについての詳細を読むことができます。

    <div id="toolbar">

        <div id="leftItem" class="regularButton"><%= link_to "Home", Rho::RhoConfig.start_path %></div>
        <div id="rightItem" class="regularButton"><%= link_to "New", :controller => :Thing, :action => :new %></div>

    </div>

ツールバーのdivエレメントは3つのポジションをサポートします：

#leftItem
#rightItem
#centerItem

注：＃centerItem div内の項目を配置することは、iPhone上でページタイトルが表示されるのを防ぎ、Apple human interface guidlineに背くことになります。iPhoneを対象にしたアプリケーションに2つ以上の項目を含むようにしたい場合は、アプリケーションのツールバーのすぐ下に次のツールバーを追加することがあります。

ツールバーのボタンのスタイル

4つのボタンのスタイルが、ツールバーにサポートされています。高さと幅の変動は、プラットフォーム間のtoolbarの高さの変動によるものです。また、Windows Mobileでは、ボタンは黒の背景に装飾のない単純なテキストベースのリンクです。

class	iPhone	Android	Windows Mobile
.regularButton
.blueButton
.backButton
.deleteButton

注：Androidのボタンの幅の変動は、ボタンのテキストの長さによるもので、このセクションの説明のクラスの属性に起因するものではありません。

Content (<div id="content">)

以下の機能は、content divの中で使用されるときに、アクセスできるようになります。

content divはネイティブスタイルフォームとリストをサポートしています。

リストタイプ	ノート	Example
静的リスト（タイトル）	<ul> <li>Item A</li> <li>Item B </li> <li>Item C </li> </ul>	現在の例
リンクの一覧	<ul> <li><%= link_to :controller => :Product %></li> <li><%= link_to :controller => :Inventory %></li> <li><%= link_to :controller => :Location %></li> <li><%= link_to :controller => :Purchase %></li> </ul>
開示指標(">")を持つリスト	<ul> <li> <a href="<%= url_for :action => :show, :id => obj.object %>"> <span class="title">Product</span> <span class="disclosure_indicator"></span> </a> </li> <li> <a href="<%= url_for :action => :show, :id => obj.object %>"> <span class="title"> Inventory </span> <span class="disclosure_indicator"></span> </a> </li> <li> <a href="<%= url_for :action => :show, :id => obj.object %>"> <span class="title"> Location </span> <span class="disclosure_indicator"></span> </a> </li> </ul>	アプリケーションindex.erbページ	開示の指標のみ、iPhone上で表示され、AndroidのまたはWindows Mobile上に表示されていません。
左のリストは、右（テキストを整列ラベル/値のペア）	<ul> <li>Item A</li> <li>Item B </li> <li>Item C </li> </ul>	モデルshow.erb

WindowsMobileではテキストは切れます。Overflowが動作しません。

デフォルトでは、リスト項目を動的にiPhoneとAndroid上のコンテンツに合わせて変更します。

リスト項目に標準の高さを適用するには、次のオプションのいずれかを選択します：

いくつかのリスト項目に静的な高さを割り当てる：以下のようなクラスを作成して
- リストエレメントの静的な高さを割り当てて、クラスをそれぞれの項目に適用します。：
```
div#content ul li.fixed{
    height:50px;
}
```
- または
- リストの全てのエレメントに静的な高さを割り当てるために、クラスにulタグを適用します。
```
 div#content ul.fixed li{
      height:50px;
 }
```
content divのすべてのリストエレメントに静的な高さを割り当てるには、以下のようにデフォルトのkiスタイルを再定義します：
```
div#content ul li{
    height:50px;
}
```

アプリケーションの全てのリストエレメントに静的な高さを割り当てるにはliの挙動をグローバルに再定義します：
```
ul li{
    height:50px;
}
```

これらの変更をもともとのデバイスのスタイルシートに行うことができますが、最大の柔軟性のため、別のスタイルシートかアプリケーションレイアウトのheadエレメントのカスタムスタイルを持つことをおすすめします。

cssの継承の一般的ルールが適用されることに注意してください。つまり、BかCのオプションを使うなら、スタイルが上書きされるために標準のデバイススタイルシートの後に、スタイルを再定義されていることを確認してください。

フォーム

Rhodesアプリケーションでは、オブジェクトの属性は文字列として保存されるので、デフォルトでは、モデルを生成したとき、生成されたビューの全ての編集可能なフィールドはテキストフィールドになります。ただし、各フィールドは簡単に希望の入力タイプをサポートするように変更することができます。デフォルトのデバイススタイルシートを使用したフォームエレメントのスタイリングは、次のガイドラインを参照してください。

フォームの構造

水平方向の制約された空間で、フォームのレイアウトを簡素化するために、フォームフィールドは1つ以上の順不同なリストで編成されます。各デバイスのカスタムスタイルにアクセスするために、以下のガイドラインに従ってください。フィールドの1つのセット、または関連フィールドのグループセットでフォームを構築することができます。

フォーム内に<ul>タグを追加して、シングル・クラスタにフィールドを表示します。フォーム内の関連したフィールドのグループを作成するには、別々の<ul>タグにフィールドを集めます。各<ul>はデバイスのデフォルトのフォームスタイリルで表示されます。

フィールドのグループにネィティブ・スタイルなラベルを適用させるには、グループ化した<ul>タグのすぐ外側に<h4>タグにgroupTitleクラスを適用します。

         <h2 class="groupTitle">Person</h2>

         <ul>  
                <li>...</li>
                <li>...</li>
         </ul>
 
          <h2 class="groupTitle">Address</h2> 
         <ul>  
                <li>...</li>

                <li>...</li>
         </ul>

一般的に、フォームの各リスト項目は、ラベルエレメントと入力エレメントを含んでいる必要があります。すべての例外は下記になります。

サンプルコード

フォームのサンプルコード

http://github.com/rhomobile/rhodes-system-api-samples/tree/master/app/UIFormDemo/

フォームを使用したrhodesアプリケーションのサンプル

http://github.com/rhomobile/rhodes-system-api-samples/

カスタム"New"フォームを作成

iPhone、Android、およびWindows Mobileプラットフォーム用の"New"フォームを作成する

ビューの"content" divの中の1つまたは複数の順不同リストでフォームフィールドを整理することで、ネイティブスタイルのフォームを作成することができます。

<div id="content">タグ内にフォームタグを置きます。フォームは、現在のフォームのコントローラのcreateもしくはupdateアクションへsumbitするpostメソッドを使います。
```
    <form method="POST" action="<%= url_for :action => :create %>">

    </form>
```

フォームに<ul>にタグを追加します。複数のグループにフィールドを分けるには、上で述べたように各グループを含む一つの<ul>タグを追加します。
注：フィールドのグループにラベルを追加するには、各プラットフォームに適切なスタイリングを適用するために、<h2 class="groupTitle">タグを使います。

各入力フィールドの<ul>タグ内に<li>タグを一つ追加します。各プラットフォームのネイティブスタイルのフォーム要素にアクセスするには、以下の例にあるシンタックスを付け加えなければなりません。
注：各チェックボックスとラジオボタンは、そのリスト項目内に含まれる必要があります。書式のさらなる議論はこのドキュメントの後半で見つけることができます。

"submit"ボタンは、最後の閉じ</ul>タグの直後で、閉じ</form>タグの直前に追加すします。注：ボタンは<li>タグの中にあってはいけませんし、また、適切なスタイルのためstandardButtonクラスがなければなりません。
```
    <input type="submit" class="standardButton" value="Create" />
```

カスタム"Edit"フォームを作成

ビューの"contetn" <div>の中の一つ以上の順不同リスト内のフォームフィールドを整理することで、ネイティブのフォームフィールドを作成することができます。

<div id="content">タグ内にformタグを追加します。フォームは、現在のコントローラの"create"または"update"アクションへすｂみつるpostメソッドを使用してください。
```
    <form method="POST" action="<%= url_for :action => :create %>">

    </form>
```

フォーム内に<ul>にタグを追加します。複数のグループにフィールドを分けるには、上記のように、各グループに1つの<ul>タグを配置します。
注：フィールドのグループにラベルを追加するには、各プラットフォームに適切なスタイルを適用するために、<h2 class="groupTitle">を使います。

編集フォームを作成するときには、それが編集中のオブジェクトのIDを含む隠しフィールドを含める必要があります。
```
<input type="hidden" name="id" value="<%= @model_name.object %>"/>
```

各入力フィールドの<ul>タグ内に一つの<li>タグを追加します。各プラットフォームのネイティブスタイルのフォームエレメントにアクセスするには、以下の例で見つかるようなシンタックスを付け加えなければなりません。
注：各チェックボックスとラジオボタンは、そのリスト項目内に含まれる必要があります。書式のさらなる議論はこのドキュメントの後半で見つけることができます。

フォームのsubmissionボタンは、最後の閉じ</ul>タグの直後で、かつ閉じ</form>タグの直前に配置します。注：ボタンは、<li>タグ中に含まれてはなりませんし、適切なスタイリングのためstandardButtonクラスがなければなりません。
```
    <input type="submit" class="standardButton" value="Create" />
```

フォームフィールド

テキストフィールド

WindowsMobileやAndroidデバイスでは標準的なラベル/値のペアですが、ネイティブのiPhoneアプリケーションでは、テキストフィールドはplaceholder属性を表示します。サポートされるすべてのデバイスで、テキストフィールドが正しく表示するには、テキストフィールドの追加や編集のときに以下の手順に従います：

テキストフィールドのラベルにfieldLabelクラスを適用します。fieldLabelクラスは、表示プロパティを"none"に設定することで、iPhone上でラベルの表示を行ないません。
テキストフィールドのinputタグ内のplaceholderのメソッドを呼び出し、引数として必要なplaceholderのテキストを設定します。テキストフィールドの入力タグは、iPhoneでプレースホルダのテキストだけを表示するplaceholderメソッドをcallするembedded rubyタグが必要です。placeholderメソッドは、アプリケーションがiPhone上で動作しているとき、プレースホルダの属性を返すだけです。なぜなら、ネイティブiPhoneアプリケーションだけが、ラベルの代わりにplaceholderを使うからです。

<ul>  
       <li>

                <label for="thing[name]" class="fieldLabel">Name</label>
                <input type="text" name="thing[name]" <%= placeholder( "Name" ) %> />

      </li>
 
       <li>
                 <label for="thing[desc]" class="fieldLabel">Desc</label>
                <input type="text" name="thing[desc]" <%= placeholder( "Desc" ) %> />

       </li>
</ul>

チェックボックス/スイッチ

チェックボックスは、ユーザーが2つのバイナリ状態を区別できるようにするために使用する必要があります。AndroidとWidowsMobileでは、チェックボックスはチェックボックスのように見えます。しかし、伝統的なチェックボックスはiPhoneのネィティブ・コンポーネントではないので、AppleHumanInterfaceGiudeに応じるため、チェックボックスは相対する状態'on/off'のラベルを持ったスイッチとして表示されます。

   <ul>
         <li>

             <label for="todo[description1]">C2</label>
             <input type="checkbox" name="todo[description1]" />
         </li>

         <li>
             <label for="todo[description2]">C2</label>
             <input type="checkbox" name="todo[description2]" />

         </li>
     </ul>

以下のように、div#content form input[type="checkbox"]を再定義することで、iPhone上のカスタムスタイルをオーバーライドできます：

div#content form input[type="checkbox"]{
    background: none;
    -webkit-appearance: checkbox;  #explain webkit appearance
    width:20px;
}

ラジオボタン

AndroidとiPhoneアプリケーションは、ネイティブなインターフェイスで使用されるものと一致するスタイルされたラジオボタンを表示します。iPhoneでは、選択したラジオボタンがチェックマークでマークが付いてしまうことに注意してください。

WindowMobileアプリケーションは、デフォルトのラジオボタンのスタイルを利用します。

 <h4 class="groupTitle">Current status</h4>

 <ul>
      <li><label for="task[status]">Not started</label>
          <input type="radio" name="task[status]" value="new"/>

      </li>
      <li><label for="task[status]">In progress</label>
          <input type="radio" name="task[status]" value="current"/>

      </li>
      <li><label for="task[status]">Finished</label>
          <input type="radio" name="task[status]" value="complete"/>

      </li>
 </ul>

選択ボックス

Rhodesアプリケーションのスタイルシートは、フォームで表示される選択びっくすエレメントのスタイルをカスタマイズできます。選択ボックスはデバイスのネイティブの選択コンポーネントを使用し、変更することはできません。

<h4 class="groupTitle">Select</h4>
<ul>

    <li>
        <select name="cars">
            <option value="volvo" selected>Please select</option>
            <option value="volvo">Volvo</option>

            <option value="saab">Saab</option>
            <option value="fiat">Fiat</option>
            <option value="gremlin">Gremlin</option>

        </select>
    </li>
</ul>

テキストエリア

テキストエリアは習慣として各デバイスのｃｓｓでスタイリングされ、それぞれのtextareaタグは行と列の数の属性を含める必要があります。行と列の推奨値は下記にあります。また各テキストエリアのタグは、開始の<textarea>タグと終了の</textarea>タグがあり、self-closingタグはアプリケーションでは正しく表示されません。

<h4 class="groupTitle">Textarea</h4>

<ul>
    <li class="textarea">
        <textarea rows="5" cols="30" ></textarea>
    </li>

 
</ul>

アプリケーションがWindowsMobileをターゲットとしたものなら、リストアイテムが正しい高さになるように、テキストエリアを持つどんな<li>タグにもtextareaクラスを指定します。

ボタン

フォームの送信に関わるボタンは、inputタグ、type="submit"として作成する必要があります。ボタンは<li>タグの中にあってはいけませんし、適切なスタイルのためstandardButtonクラスでなければなりません。

リンク/ボタンはフォームに関連したアクションを実行するために利用されますが、フォーム送信には関係しません（例えば、削除、キャンセル）。これらは代わりに上部のtoolbarに置かれるべきでしょう。

<input type="submit" class="standardButton" value="Create"/>

<button>

[続きを読む]

プロミネンス

2010年7月2日金曜日

Standard_Smartphone_CSS_HTML_Architecture

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

目次

デフォルトスタイルシートの使用

pageTitle（<div id="pageTitle">）

toolbar (<div id="toolbar">)

ツールバーのボタンのスタイル

Content (<div id="content">)

リスト

フォーム

フォームの構造

サンプルコード

フォームのサンプルコード

フォームを使用したrhodesアプリケーションのサンプル

カスタム"New"フォームを作成

カスタム"Edit"フォームを作成

フォームフィールド

テキストフィールド

チェックボックス/スイッチ

ラジオボタン

選択ボックス

テキストエリア

ボタン

0 件のコメント:

Rhobook

ブログアーカイブ

ラベル

自己紹介

プロミネンス

2010年7月2日金曜日

Standard_Smartphone_CSS_HTML_Architecture

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

目次

デフォルトスタイルシートの使用

pageTitle（<div id="pageTitle">）

toolbar (<div id="toolbar">)

ツールバーのボタンのスタイル

Content (<div id="content">)

リスト

フォーム

フォームの構造

サンプル コード

フォームのサンプルコード

フォームを使用したrhodesアプリケーションのサンプル

カスタム"New"フォームを作成

カスタム"Edit"フォームを作成

フォームフィールド

テキストフィールド

チェックボックス/スイッチ

ラジオボタン

選択ボックス

テキストエリア

ボタン

0 件のコメント:

Rhobook

ブログ アーカイブ

ラベル

自己紹介

登録

サンプルコード

ブログアーカイブ