Rhobook

マルチ・モバイル・プラットフォームの開発フレームワークに関する技術情報。
プログラム言語Rubyで実装できるRhodes 3.0、RhoSync 2.1とホスティングサービスRhoHub 3.0、統合開発環境RhoStudio 1.0についての書籍・教育アプリケーションがApp Store(日本のみ)で発売開始。


詳細はサポートサイトで。

rhodesをbitbucketへ

Rhodesプロジェクトをbitbucketにimportした。

$ cat .hgignore
# use glob syntax.
syntax: glob
*.swp
*~

# switch to regexp syntax.
syntax: regexp
^rholog-*
^sim-public-*

[続きを読む]

Testing

以下のドキュメントは、英語の原文を日本語へ翻訳したものをRhomobile社の許可のもと、公開しています。
公式なドキュメントはRhomobile社のサイトをご覧ください。
また、この文書は2010/7/7(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/7 (JST) information.
If you have any question, problem about the Japanese translation, please leave your comment. Except for that, refer contacts in the document.

テスト

中身 1 要件 1.1 テストの必要性 1.2 テストを必要とする機能範囲 1.3 以下の言語でコードをテストする必要性 1.4 テスト環境 2 実装 3 参照 4 ログとレポート 4.1 要件 4.1.1 サポートのためのログ/レポート 4.1.2 ログ/レポート機能 4.2 実装 4.2.1 デバイス上でのログの表示 4.2.2 デバイスからログの送信 4.2.3 サーバー上でのログを見る 4.2.4 ログの設定ファイル 4.2.5 C++ 4.2.6 C 4.2.7 RhoFramework 4.2.8 Java/J2ME 5 性能型テスト 5.1 クライアントDB 6 ブロブテスト 7 プロファイリング 7.1 要件 7.2 実装 7.2.1 C / C + + 7.2.2 Java/J2ME 8 /質問/コメント

要件

テストの必要性

• 動作（specs）
• パフォーマンス速度（profile）
• メモリ消費 - allocation/de-allocation/leak
• ストレスと境界条件
• 継続的なテストサポート

テストを必要とする機能範囲

• sync engine
• DB
• ローカルhttpサーバ
• プラットフォームグルー
• プラットフォーム固有のAPI
• Web表示（それをテストする必要があるか？）
• Ruby（VMとextension） - rubiniusのspecを使う
• rho フレームワーク
• rhom
• アプリケーション

以下の言語でコードをテストする必要性

• C / C + +
• Objective - C
• java
• ruby
• JavaScriptのコード（オプション？）

テスト環境

• Windows
• Mac
• デバイス上の組み込み（およびエミュレータ）

実装

• httpローカルサーバー、ルビー（VMとextensions）、rhoフレームワーク, rhom, アプリケーションのテストには：
  • PC上でテストできるように、Win32シミュレータ開発。
  • Mac上でテストするために、OSXのシミュレータ開発。
  • Linux開発でテストするために、GTKもしくは同様なシミュレータ開発。
  • specフレームワークは、次から構成されます：
    • rhodesアプリケーション内でspecファイルを実行するEmbedded MSpec runner。
    • 定義しているincludeとexcludedディレクトリのrubyクラス、個々のspecファイルとログオプション。
    • 進行中の結果のgranularログ。
    • htmlで表示される結果を収集するためのRubyインターフェイス。
  • コアspec - Ruby実装のテストを行うrubinius specを実行。
  • コアspec - rho, rhomをテストするspecのセットを開発
  • in-controller spec - アプリケーション開発者向けのspecを開発
• 我々がsync engineをリファクタリングしたように、Googleのテストフレームワークを使用してユニットテストを開発

参照

Googleのテスト

• http://code.google.com/p/googletest/wiki/GoogleTestPrimer
• http://code.google.com/p/googletest/

Googleのモック

• http://code.google.com/p/googlemock/
• http://code.google.com/p/googlemock/wiki/ForDummies
• http://www.assembla.com/wiki/show/hippomocks

RSpec

• http://rspec.info/

mspec(ruby言語機能の実行のための（ミニマル rspecのクローン）

• http://github.com/rubyspec/mspec/tree/master

Rubinius

• http://github.com/evanphx/rubinius/tree/master

cppSpec

• http://www.laughingpanda.org/projects/cppspec/

jSpec

• http://drupal.org/project/jspec

vgrind

• http://valgrind.org/info/tools.html

その他

• http://wiki.github.com/arnaudbrejeon/cspec
• http://mockpp.sourceforge.net/
• http://code.google.com/p/amop/
• http://unittest-cpp.sourceforge.net/

単体テストフレームワークの巨大なリスト

• http://en.wikipedia.org/wiki/List_of_unit_testing_frameworks

ログとレポート

• プラットフォーム間で共通のレポートAPIを提供
• レポートおよびコードカバレッジのための一般的なUIを提供する

要件

サポートのためのログ/レポート

• プラットフォームの開発
• アプリケーションの開発
• エンドユーザーのサポート（クラッシュ/問題のロギングおよびレポート）
• 統計情報の収集と報告の簡易アプリケーション

ログレポート機能

レベル別のレポート：

• デバッグとリリースモード。コンパイル時および実行時の定義。
• 重大度レベル - fatalエラー、エラー、warning、info。コンパイル時および実行時の定義。
• 詳細ログ - 追加情報のレベル。
• 名前付きメッセージグループ。各クラスは、自分のメッセージグループを作成することができます。実行時にメッセージのグループを有効\無効にする。
• 条件付きロギング。
• 条件付きスタックトレースロギング。

簡単な書式でコンパクトな構文：

• オプション情報 - メッセージ番号、日付/タイムスタンプ、ソースファイルの場所、スレッドIDなど
• ヘッダ - 初期化時に出力し、プラットフォーム、OSのバージョン、現在の時刻などを含む情報
• メッセージの自動インデント。ネストまたは再帰呼び出しで便利。

ロギング/レポートは以下の出力をサポートする必要があります：

• 標準
• FIFOファイルまたは限られたサイズのメモリバッファ
• コンソールデバッグ埋め込み
• リクエストによるログサーバへのログ出力を送信

オプションと設定

• 実行時にメソッドの呼び出しによって行うログオプション設定
• ロギング/レポートは設定ファイルを介して起動時に設定できる
• コンパイル時に未使用のログ/レポートのコードを削除する。
• 重大度レベルのよって、コンパイル時にログメッセージを取り除く
• 巡回ログ：最大ログサイズをセット。もそらくクラッシュをキャッチを試みるときに有用である。

Logging APIは、クロスプラットフォームである必要があります。(????すべてのプラットフォーム固有の機能は、インターフェイスへ投げる）

実装

デバイス上のログの表示

このコマンドは、ログおよびログオプションをプラットフォーム依存ウィンドウに表示します：

 Rho::RhoConfig.show_log

ログをデバイスから送信

このコマンドは、サーバーにログを送信する：

Rho::RhoConfig.send_log

rhoconfig.txt設定：

 logserver = 'http://logserver.staging.rhohub.com/log_handler' #optional; if not set - syncserver will be used
 logname = <any string> #optional; will use as prefix of the file on server side

ログのパラメータ送信とアクション：ログサーバを実装するにはサーバコントローラー(rhosyncか何か)にアクションを追加します - client_log
例：

http://logserver.staging.rhohub.com/log_handler/client_log?client_id=d4d14463-aeba-4097-b178-57a96bf28380&device_pin=&log_name=geny

もしクライアントがログインして、認証クッキーが送信されるなら、サーバは要求を認証できます、

ログをサーバー上で見る

http://logserver.staging.rhohub.com/log_handlerに移動して、ログファイルを選択します。

ログの設定ファイル

• rhoconfig.txtのconfigファイルに設定します
• フィールド...

 MinSeverity  = 1  
 LogToOutput=1
 LogToFile=1
 LogFilePath=RhoLog.txt
 MaxLogFileSize=20
 LogPrefix=1
 LogCategories=MyClass1,MyClass2
 ExcludeLogCategories=MyClass3

C++

• platform\shared\loggingフォルダに置きます
• testを見てください: platform\shared\logging\test\TestLog.cpp
• メインヘッダ logging\ RhoLog.h
• ストリームベースのログの構文：

 LOG(INFO) + "Found " + num_cookies + " cookies";
 LOG(INFO) + "Hex: " + LOGFMT("%X") + 10 + "; Dec: " + 10;

• クラス内にメッセージグループを作成

 class CLogTest{
   DEFINE_LOGCLASS;
 public:
   CLogTest(){
       LOG(INFO)+"Constructor called.";
   }
 };
 IMPLEMENT_LOGCLASS(CLogTest,"CLogTest");

• STLライブラリが利用できます。SymbianはSDKにstl_portが含まれます。 GoogleTestはSTLを使い、これらはSymbianをサポートします。

C

• logging\RhoPlainLog.hを使います
• testを参照します：platform\shared\logging\test\TestPlainLog.c
• マクロベースの構文：

   RAWLOG_INFO("RAW: Info 1");
   RAWLOG_INFO1("RAW: Info %d", 55);
   RAWLOG_INFO2("RAW: Info %d:%d", 55, 66);

RhoFramework

• 通常のputを使います
• 構文

 puts 'RHO loaded'
 puts 'Cannot initialize'
 puts 'Exception while creating object'

リンク

http://www.codeproject.com/KB/debug/log.aspxhttp://google-glog.googlecode.com/svn/trunk/doc/glog.htmlhttp://pantheios.sourceforge.net/http://log4cpp.sourceforge.net/http://log4cplus.sourceforge.net/http://logging.apache.org/log4cxx/

Java/J2ME

リンク

http://code.google.com/p/gwt-log/http://microlog.sourceforge.net/snapshot/http://sourceforge.net/projects/momelog~~Vhttp://jadabs.berlios.de/jadabs-cldc/multiproject/log4j-j2me/index.htmlhttp://www.mobilelandscape.uklinux.net/j2medownload/MIDPLogger.phphttp://sourceforge.net/projects/emobuslogmehttp://logging.apache.org/log4j/

性能テスト

クライアントのDB

• 10,000件のレコードを特別なsync sourceで作成します
• アプリケーションを作成しtestをデバイス上でテストします
• 同期時間を測定します
• firstname、lastnameなどのユーザフィールド使ってquery時間を測定します。改ページをエミュレートするためにlimitやoffsetを使います

ブロブテスト

• 1日にファイルとしてblobを保存するsync serverを作成します
• サーバーへ写真をpushするため、camera textを変更します。

プロファイル

要件

• ログライブラリをベースに
• ローカルの名前付きのカウンタ：start\stop
• グローバル累積カウンタ：create\start\stop\flush\close
• プラットフォームに依存しないタイムライブラリを使用
• マイクロ秒、ミリ秒、秒、分の時間の表現：1 sec 20 millisec

実装

C / C + +

• テストケースはをshared\statistic\test\TestProfiling.cppを参照してください
• マクロの構文：

   PROF_START(LocalCounter1);
   Sleep(2126);
   PROF_STOP(LocalCounter1);

   PROF_CREATE_COUNTER(GlobalCounter2);
   PROF_START(GlobalCounter2);
   Sleep(1234);
   PROF_STOP(GlobalCounter2);
   PROF_FLUSH_COUNTER(GlobalCounter2,"Step1");
   PROF_START(GlobalCounter2);
   Sleep(1234);
   PROF_STOP(GlobalCounter2);

   PROF_DESTROY_COUNTER(GlobalCounter2);

  int Func1(){
   Sleep(500);
   return 1;
  }
  void testProfCall(){
   int n = 0;
   PROF_CALL(n = Func1());
  }

• PROF_STOP ローカルカウンタの時間を記録します
• PROF_DESTROY_COUNTERとPROF_FLUSH_COUNTERはグロバルカウンタの時刻を記録します

Java/J2ME

コメント/質問

ここに追加する考えなどをとおしてコメントを残します。

そこには何かのタイムラインまたはこれらのすべてのテスト項目が解決される順序があるか？

Resourcesこれらのタスクおよびテストを担当するのは誰？誰か採用が必要とされるか？

プラットフォームのためのテストプラン？

その他の項目：

私見では、rhosyncの継続的インテグレーションサーバ。http://cruisecontrolrb.thoughtworks.com/を参照 。前提条件：test suite。

バックエンドからデバイスまで、完全に端から端までsyncロジックをテストするいくつかの方法ある。現在、我々はこれを手動でテストします。

どのようにRhodesはプラットフォームとして異なるデバイス上でテストされるでしょうか。例えば、BBの8300、8310、8900、9000、9530、などなど、このためのよい解決策がありませんか、それは非常に時間がかかり、高価で....何かアイデアは？

ポリシーの質問。

コードカバレッジ。これは単純にもかかわらず、不完全なメトリックです。我々は、特定の％の目標をテストでカバー設定しますか？？

将来において、テスト・ツールができたら、テストなしのコードでチェックするのはOKか？一部のオープンソースプロジェクトはポリシーとしてこれを許可していない。

[続きを読む]

Blackberry_HTML_and_CSS

以下のドキュメントは、英語の原文を日本語へ翻訳したものをRhomobile社の許可のもと、公開しています。
公式なドキュメントはRhomobile社のサイトをご覧ください。
また、この文書は2010/7/6(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/6 (JST) information.
If you have any question, problem about the Japanese translation, please leave your comment. Except for that, refer contacts in the document.

BlackBerryのHTMLとCSS

BlackBerryのブラウザのバージョン4.2 - ネイティブBlackBerryのアプリケーションに利用できるバージョン - は現代のCSSに非常に限定的なサポートをしています。特に注意すべきは、(floatのあるdivのような)標準ビューに使われるいくつかの重要なスタイルがBlackBerryのブラウザではサポートされません。

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

プロフィールは、標準対応するようにBlackBerryのカスタマイズビューは同じディレクトリありまり、'.bb.erb'のように標準のerb拡張子が置き換わって標準のビューファイルと区別することができます。実行時の読み込みために、これらのビューのファイルは、標準的な対応と同じ名前を持つ必要があります。

他のプラットフォームと同様に、BlackBerryのスタイルシートのデフォルトのスタイルをpageTitle、Toolbarとcontent divに見つけることができます。

BlackBerryビューに追加のスタイルを含めたい場合、the BlackBerry Browser Version 4.2 Content Developer Guideを参照してください。

中身 1 HTMLの構造 1.1 pageTitle（<div id="pageTitle">） 1.2 toolbar（<div id="toolbar">） 1.3 Content（<div id="content">） 1.3.1 リスト 1.3.2 テーブル 2 フォーム 2.1 BlackBerryのカスタム"New"フォームの作成 2.2 BlackBerryのカスタム"編集"フォームの作成 3 フォーム要素 3.1 テキストフィールド 3.2 チェックボックス/スイッチ 3.3 ラジオボタン 3.4 選択ボックス 3.5 テキストエリア 3.6 ボタン

HTMLの構造

pageTitle（<div id="pageTitle">）

pageTitle divはh1タグに包まれた現在のページのタイトルを含んでいます。ページタイトルは、各アプリケーションビューの上部に表示されます。

<div id="pageTitle">

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

toolbar（<div id="toolbar">）

ツールバーのdiv要素は、ユーザーがアクションを実行するとアプリケーションを介して移動できるように対話的要素が含まれています。BlackBerryで、これらの要素はインラインリンクの一連としてスタイルされます。

<div id="toolbar">

        <%= link_to "Back", :action => :index %>
        <%= link_to "Edit", :action => :edit, :id => @uiformdemo.object %>
</div>

ツールバーのdivがpageTitle部のすぐ下に表示されます。

Content（<div id="content">）

標準的なスマートフォンでのように、リスト、フォーム、および他のコンテンツは、生成されたスタイルシートに含まれるスタイルを使用するために、コンテンツdivの中に配置されなければなりません。

リスト

項目とリンクの簡単なリストが、BlackBerryで表示できます。

• <%= url_for :controller => :Product %>
• <%= url_for :controller => :Inventory %>
• <%= url_for :controller => :Location %>
• <%= url_for :controller => :Purchase %>

例は、生成されたアプリケーションとモデルのインデックスファイルで見つけることができます。

テーブル

コンテナの正確なアライメントを必要とするすべてのコンテンツは、テーブルに配置する必要があります。

BlackBerryのブラウザ4.2は、CSSを通してテーブルのデータセルの幅を定義をサポートしていません。フォーム全体を均等間隔の列を維持したい場合は、手動ですべての行に1つの列の幅を定義する必要があります。通常、ラベルを含むセルの幅を125（width="125"）に設定し、ユーザの入力を可能な幅を損なうことなく、説明のラベルの幅を提供します。

定義された幅を持つテーブルの例は、生成されたモデルnew.bb.erbファイルで見つけることができます。幅がない定義されてテーブルの例は、生成されたモデルshow.bb.erbファイルで見ることができます。

フォーム

BlackBerryのカスタム"New"フォームの作成

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

1. <divのid="content">タグ内にフォームタグを配置します。フォームは、現在のコントローラの"create"アクションへすｂみつるpostメソッドを使用してください。

       <form method="POST" action="<%= url_for :action => :create %>">
   
       </form>




2. フォーム内に<table>タグを追加します。複数のグループにフィールドを分割するために、上記のように各グループに1つの<table>タグを配置します。
   注：フィールドのグループにラベルを追加するには、これらのフィールドを含むテーブルの直前の<h2 class="groupTitle">タグの中にラベルを配置します。




3. 各入力フィールド/フィールドのラベルの<table>タグ内に<tr>タグを追加します。BlackBerryの適切なスタイルをアクセスするために、追加するシンタックスが以下の例に見つけるでしょう。
   注：各チェックボックスとラジオボタンは、その行の内側に含まれている必要があります。書式のさらなる議論はこのドキュメントの後半で見つけることができます。




4. "submit"ボタンを配置するのは、最後の閉じ</table>の直後で閉じ</form>の上です。注：ボタンは、<tr>タグ内に含まするべきではありません。

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

BlackBerryのカスタム"Edit"フォームの作成

ビューの"content" divの中の1つまたは複数のテーブルにフォームフィールドを配置することで、ネイティブスタイルのフォームを作成することができます。

1. <div id="content">タグ内にformタグを配置します。フォームは、現在のコントローラの"create"または"update"アクションへsubmitするPOSTメソッドを使用してください。

       <form method="POST" action="<%= url_for :action => : update %>">
   
       </form>




2. フォーム内に<table>タグを追加します。フィールドを複数の分けるには、上記のように各グループに1つ<table>タグを配置します。
   注：フィールドのグループにラベルを追加するには、フィールドを含むテーブルの直前の<h2 class="groupTitle">タグの中にラベルを配置します。




3. 編集フォームを作成するときに、それが編集中のオブジェクトのIDを含む隠しフィールドを含める必要があります。

   <input type="hidden" name="id" value="<%= @model_name.object %>"/>




4. 各入力フィールド/フィールドラベルの<table>タグに<tr>タグを追加します。BlackBerryの適切なスタイルをアクセスするために、以下の例にあるシンタックスを付け加える必要があります。
   注：各チェックボックスとラジオボタンは、その行の内側に含まれている必要があります。書式のさらなる議論はこのドキュメントの後半で見つけることができます。




5. "submit"ボタンは、最後の閉じ</table>タグの直後で閉じ</form>タグの直前に配置します。注：ボタンは、<tr>タグ内に含まするべきではありません。

       <input type="submit" value="Update" />

フォームエレメント

各フォームエレメントは、完全なテーブルの行を取ります。注：各チェックボックスとラジオボタンは、そのリスト項目内に含まれる必要があります。

BlackBerryのブラウザ4.2は、CSSを通してテーブルのデータセルの幅定義をサポートしていません。フォーム全体を均等間隔の列を維持したい場合は、手動ですべての行に1つの列の幅を定義する必要があります。通常、ラベルを含むセルの幅を125（width="125"）に設定すると、ユーザの入力が可能なスペース損なうことなく、説明のラベルに十分な幅を提供します。

テキストフィールド

              <tr>

                  <td width="125">Textbox1: </td>
                  <td><input type="text" name="uiformdemo[textbox1]"/></td>
              </tr>

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

            <tr>

              <td width="125">Checkbox1: </td>
              <td><input type="text" name="uiformdemo[checkbox1]"/></td>
            </tr>

ラジオボタン

        <h2 class="groupTitle">Radio Button</h2>

        <table>
            <tr>
              <td width="125">Radiobutton1: </td>
              <td><input type="text" name="uiformdemo[radiobutton]"  value="radiobutton1" /></td>

            </tr>
 
            <tr>
              <td width="125">Radiobutton2: </td>
              <td><input type="text" name="uiformdemo[radiobutton]"  value="radiobutton2" /></td>

            </tr>
 
            <tr>
              <td width="125">Radiobutton3: </td>
              <td><input type="text" name="uiformdemo[radiobutton]"  value="radiobutton3" /></td>

            </tr>
        </table>

選択ボックス

        <h2 class="groupTitle">Select Box</h2>
        <table>

            <tr>
                <td width="125">Select device</td>
                <td>
                    <select name="uiformdemo[selectbox]">
                        <option selected>Please select</option>

                        <option value="apple">iPhone</option>
                        <option value="android">Android</option>
                        <option value="blackberry">BlackBerry</option>

                        <option value="winmo">Windows Mobile</option>
                    </select>
                </td>
            </tr>
        </table>

テキストエリア

各textareaタグは、行と列の数の属性を含める必要があります。行と列の推奨値は下記にあります。また、それぞれのtextareaタグは<textarea>と</textarea>の両方が必要であり、self-closingタグはアプリケーションで正しく表示されません。

            <tr>

                <td width="125">Textarea: </td>
                <td><textarea name="uiformdemo[textarea]" rows="5" cols="30"></textarea></td>

            </tr>

ボタン

フォームの送信に関わるボタンは、inputタグ、type="submit"として作成する必要があります。ボタンは、最後の閉じ</table>タグと閉じ</form>タグの間に配置されますが、<label>,<tr>,<TD>タグの中にあってはいけません。

フォームに関連するアクションを実行するためにリンクは使われますが、フォームの送信に関連しないsubmit（例えば、削除、キャンセル）は代わりにツールバーの上部配置する必要があります。

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

<button>エレメントは、BlackBerryのプラットフォームでサポートされていません。

[続きを読む]

Standard_Smartphone_CSS_HTML_Architecture

以下のドキュメントは、英語の原文を日本語へ翻訳したものを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アーキテクチャ

目次 1 デフォルトスタイルシートの使用 1.1 pageTitle（<div id="pageTitle">） 1.2 toolbar（<div id="toolbar">） 1.2.1 toolbarのボタンのスタイル 1.3 content（<div id="content">） 1.3.1 リスト 2 フォーム 2.1 フォームの構造 2.2 サンプルコード 2.2.1 フォームのサンプルコード 2.2.2 フォームのサンプルRhodesアプリケーション 2.3 カスタム"New"フォームを作成 2.4 カスタム"Edit"フォームを作成 2.5 フォームフィールド 2.5.1 テキストフィールド 2.5.2 チェックボックス/スイッチ 2.5.3 ラジオボタン 2.5.4 選択ボックス 2.5.5 テキストエリア 2.5.6 ボタン

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

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上のコンテンツに合わせて変更します。

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

1. いくつかのリスト項目に静的な高さを割り当てる：以下のようなクラスを作成して
   • リストエレメントの静的な高さを割り当てて、クラスをそれぞれの項目に適用します。：

     div#content ul li.fixed{
         height:50px;
     }

   • または
   • リストの全てのエレメントに静的な高さを割り当てるために、クラスにulタグを適用します。

      div#content ul.fixed li{
           height:50px;
      }

2. content divのすべてのリストエレメントに静的な高さを割り当てるには、以下のようにデフォルトのkiスタイルを再定義します：

   div#content ul li{
       height:50px;
   }




3. アプリケーションの全てのリストエレメントに静的な高さを割り当てるには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つまたは複数の順不同リストでフォームフィールドを整理することで、ネイティブスタイルのフォームを作成することができます。

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

       <form method="POST" action="<%= url_for :action => :create %>">
   
       </form>




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




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




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

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

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

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

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

       <form method="POST" action="<%= url_for :action => :create %>">
   
       </form>




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




3. 編集フォームを作成するときには、それが編集中のオブジェクトのIDを含む隠しフィールドを含める必要があります。

   <input type="hidden" name="id" value="<%= @model_name.object %>"/>




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




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

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

フォームフィールド

テキストフィールド

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

1. テキストフィールドのラベルにfieldLabelクラスを適用します。fieldLabelクラスは、表示プロパティを"none"に設定することで、iPhone上でラベルの表示を行ないません。
2. テキストフィールドの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>エレメントは、WindowsMobileとBlackBerryではサポートされてません。

[続きを読む]

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の位置が固定されません。

[続きを読む]

Release

以下のドキュメントは、英語の原文を日本語へ翻訳したものを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.

リリース

目次 1 現在のリリース- 2.0.0 2 新バージョンの取得 2.1 1.5.x- > 2.0.xアップグレード手順 2.2 1.4.x- > 1.5.xアップグレード手順 2.3 1.2.2 - > 1.4.xアップグレード手順 2.4 1.2.1 - > 1.2.2アップグレード手順 2.5 1.1.x- > 1.2.xアップグレード手順 2.6 1.0.x- > 1.1.xアップグレード手順 3 Rhodesリリースプロセス 3.1 Gemのローカルインストールとテスト 3.2 リリース＆公開

現在のリリース- 2.0.0

2.0.0変更履歴

新機能の情報は、定期的にRhodesとRhoSyncのページを確認してください。

新バージョンの取得

3つのオプションのいずれかを選択し、ダウンロードしたバージョンのアップグレード手順を確認します。

オプション A：すでにrhodesをgemでインストールしているなら、ただ単に以下のように行ないます：

 [sudo] gem update rhodes
 rhodes-setup
 set-rhodes-sdk (from your application's root folder)

オプションB：特定のブランチでRhodesを追跡しているなら、以下を単に実行します：

 cd rhodes
 git pull

もしくは，

 git checkout <tag> (if you want the specific released version)

オプションC：githubから直接Rhodesをダウンロードした場合は、ここで新しいバージョンをダウンロードすることができます：

http://github.com/rhomobile/rhodes/downloads

1.5.x- > 2.0.xアップグレード手順

2.0でのとてもたくさんの変更がリストされていますので、Rhodesとチュートリアルのページを確認してください。

1.4.x- > 1.5.xアップグレード手順

• 上記オプションの1つでRhodesをアップグレードします。

1.2.2 - > 1.4.xのアップグレード手順

• Rho::RhoConfig::add_source が変わり、source_idを指定してはいけません。

Rho::RhoConfig::add_source("SrcName", {"url"=>"SrcUrl"})

ソースの同期順序を使用優先度を指定する場合：

Rho::RhoConfig::add_source("SrcName", {"url"=>"SrcUrl", "priority"=>0})

0 - 最優先

• アプリケーションディレクトリから、"upgrade-rhodes-app"を実行します。

1.2.1 - > 1.2.2アップグレード手順

• gemをインストールするか、PATHに<rhodescheckout>/binを置く
• アプリケーションフォルダで、コマンドライン'upgrade-rhodes-app'を
  実行します

1.1.x- > 1.2.xアップグレード手順

1.rhoconfig.txtでsyncserverを設定：

syncserver = 'http://mysyncserver.com/apps/NewApp/sources/'

2.'SugarAccount'オブジェクトのためconfig.rbを更新します：

Rho::RhoConfig::add_source("SugarAccount", {"url"=>"#{Rho::RhoConfig.syncserver}SugarAccounts", "source_id"=>9893}) #=> SyncEngine will create the string 'http://mysyncserver.com/apps/NewApp/sources/SugarAccounts'

'http'プレフィックスで始まっているので、Rhodesは完全なURL文字列として利用します。

注：config.rbで相対URLを使うこともできますし、その場合syncserverのプロパティに追加されます：

Rho::RhoConfig::add_source("SugarAccount", {"url"=>"SugarAccounts", "source_id"=>9893}) #=> SyncEngine will create the string 'http://mysyncserver.com/apps/NewApp/sources/SugarAccounts'

3.ログインコード（通常はsettingsコントローラ）を更新し、コールバックを付け加えます：

SyncEngine.login(@params['login'], @params['password'], (url_for :action => :login_callback))

4.ログインコールバックを定義します（または生成されたアプリケーションからログインのコールバックのコードをコピーします）：

def login_callback
  err_code = @params['error_code'].to_i
  if err_code == 0
    # run sync if we were successful
    WebView.navigate Rho::RhoConfig.start_path
    SyncEngine.dosync
  else
    @msg = @params['error_message']
    if @msg == nil or @msg.length == 0 
      @msg = Rho::RhoError.new(err_code).message
    end
    WebView.navigate ( url_for :action => :login, :query => {:msg => @msg} )
  end  
end

5.もしあるようなら、'rho_build.conf'ファイルを削除します。もうそれは必要とされません。ソースからrhodesをビルドするための関連した全ての構成は、rhobuild.ymlで行われます。

6."wait.erb"を作成、またはSettingコントローラのloginアクションでレンダリングするために同様なテンプレートを作成します。このテンプレートは、loginアクションが完了すると表示されます。SyncEngineがRhoSyncにログインが完了したら、login_callbackアクションは呼び出されます。1.2.xの新しいアプリケーションを生成した場合は、このテンプレートは'app/Settings'ディレクトリにあります。

7.すべてのインスタンスを変更します

SyncEngine::trigger_sync_db_reset

を

Rhom::Rhom.database_full_reset

アプリケーションにある（通常はSettingsのコントローラ）インスタンスです。

8.build.ymlのenv->versionを"1.2.x"へ変更します。ここで、xは、最新のRhodesgemのバージョンです（たとえば、"1.2.1")。

9. '[sudo] gem update rhodes'を実行し、1.2.0+のインストールを確認します。

1.0.x- > 1.1.xアップグレード手順

1.アプリケーションのルートフォルダにある"rhoconfig.txt"に以下をコピーします（または新しいアプリケーションを生成し、そこからファイルをコピーします）：

# Startup page for your application
start_path = '/app'

# Path to the options page (in this case handled by javascript)
options_path = '/app/Settings'

# Location of bundle url (i.e. from rhohub.com)
rhobundle_zip_url = nil

# Optional password to access bundle (usually not required)
rhobundle_zip_pwd = nil

# Rhodes runtime properties
MinSeverity  = 0
LogToOutput = 1
LogCategories = *
ExcludeLogCategories =
KeepTrackOfLastVisitedPage = 0 
LastVisitedPage = ''

2.アプリケーションのルートフォルダからconfig.rbを削除。

3"[sudo] gem update rhodes"を実行するか、マシンにローカルgemsをインストールするため以下の手順にしたがってください。もし、ソースからのビルドを望まないなら、prebuild stepは飛ばすことができます。

Rhodes Releaseプロセス

Rhodes Release Processは以下の手順で構成されています：

1. マシンにrhodes gemsをローカルにインストールしテストします（注：もし最新の非安定版のブランチのテストに興味があるだけなら、この手順を実行するだけでいいかもしれません）
2. gemをgemcutter.orgにpushします
3. 関連するwikiドキュメントを更新します（このページ！）

gemsをローカルにインストールして、テスト

MAC：

cd <rhodescheckout>/rhodes/
sudo gem uninstall rhodes
sudo rake install

Windows:

cd <rhodescheckout>\rhodes\
gem uninstall rhodes
rake install

そして、お気に入りのRhodesのアプリケーションをテストする！

cd <myfavoriterhodesapp>
rake -T

rake run:iphone (or any other platform you wish to test)

リリース＆公開

cd <rhodescheckout>/rhodes
rake gem
gem push rhodes-<version>.gem

そしてRhodesインストールのリリースを確認します。

[sudo] gem update rhodes

適切なドキュメントをwikiで更新し、現在のバージョンを上げます。

[続きを読む]