金子邦彦研究室プログラミングJavaScript による Web プログラミングWindows で RhoStudio を使ってみる

Windows で RhoStudio を使ってみる

このページでは,次のことを行う.

前準備

前準備として,下記のインストールが済んでいること.

  1. JDK と RhoMobile Studio のインストール が終わっていること
  2. Android SDK のインストールが終わっていること

    Aptana Studio 3 は、http://www.aptana.com/からダウンロード

    関連する外部ページ

  3. Android NDK のインストール が終わっていること
  4. Android 2.2 を、次のような手順でインストールしておくこと
    1. Android SDK and AVD Manager の起動

      コマンドプロンプトを開き、「android」と実行。

      android
      
    2. パッケージとして次のものを選ぶ
      • Android SDK Tools
      • Android SDK Platform-tools
      • Android 2.2 (API 9)

RhoStudio を用いた RhoMobile アプリケーションの作成と起動

RhoMobile アプリケーションのひな形

関連する外部ページhttps://en.wikipedia.org/wiki/RhoMobile_Suite

  1. RhoStudio を起動する

    [image]
  2. RhoMobile アプリケーション・プロジェクトの新規作成
    1. 「File」→ 「New」→ 「Project」と操作する

      [image]
    2. RhoMobile application を選ぶ

      [image]
    3. プロジェクト名の設定

      ◆ この実行例では「storemanager」と設定している

      [image]
    4. プロジェクトが作成できたことの確認

      [image]

モデル

  1. プロジェクトを右クリックし、「New」を選び、「RhoMobile model」を選ぶ

    [image]
  2. モデルを定義する

    ◆ この実行例では次のように設定している

    [image]
  3. モデルが生成されたことを確認する

    [image]

    ビュー

    1. app/test/index.erb をダブルクリック
    2. 「Add link here」の部分を書き換え

      次のプログラムを記述する

      <li>
          <a href="Product">
              <span class="title">Products</span>
          </a>
      </li>
      

      [image]

      実行

      1. ビルド用の設定ファイルは build.yml である

        [image]
      2. プロジェクトを右クリックし、「Run As...」を選び、「Run Configurations...」 を選ぶ

        [image]
      3. RhoMoblie Application」を右クリックし、「New」を選ぶ

        [image]
      4. Android SDK のバージョンを指定して、「Apply」をクリック

        [image]
      5. 引き続き「Run」をクリック

        [image]
      6. シミュレータの画面が現れる

        [image]
      7. 「Products」をクリックしてみる

        [image]
      8. 「New」をクリックしてみる

        [image]
      9. 値を入れ、「Create」をクリック

        [image]
      10. リストに新しいデータ「1」が増えている。 「2」をクリック

        [image]
      11. データが現れる

        [image]

      Web Inspector を使ってみる

      Web Inspector のウインドウで、要素をクリックすると、スタイルに関する情報などが右側のウインドウに表示される

      [image]

      デバッガを使ってみる

      1. 「Run」→「Debug」と操作する

        [image]
      2. Ruby Test」を選び、「OK」をクリック

        [image]
      3. プロジェクトを右クリックし、「Debug As...」を選び、「Ruby Configurations ...」 を選ぶ

        [image]
      4. Debug」をクリック

        [image]
      5. デバッグ画面が現れる

        [image]
      6. 画面を「RhoStudio」に切り替える

        [image]
      7. デバッグしたいファイルをダブルクリックする

        ◆ ここでは、デバッグしたいファイルとして product_controller.rb を選んでいる.

        [image]
      8. 画面を「Debug」に切り替える

        [image]
      9. ソースコードのウインドウの左端をダブルクリックすると、ブレークポイントが設定される

        [image]
      10. シミュレータのウインドウで「Product」をクリック

        [image]
      11. ブレークポイントが設定されているので、実行が中断する。変数の中身などが表示される。

        [image]
      12. 続行したいときは「Resume」を選ぶ

        [image]