金子邦彦研究室プログラミングJavaScript による Web プログラミングWindows で RhoConnect アプリケーションを作ってみる

Windows で RhoConnect アプリケーションを作ってみる

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

前準備

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

  1. JDK と RhoMobile Studio のインストール が終わっていること
  2. Android SDK のインストール が終わっていること
  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. プロジェクト名の設定

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

      ※ Use RhoElementsを使う予定があるならば「Use RhoElements」をチェックする

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

      [image]

モデル

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

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

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

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

    ビュー

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

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

      <li>
          <a href="Product">
              <span class="title">Add link here...</span>
          </a>
      </li>
      

      [image]

      実行

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

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

        [image]
      3. RhoMobile アプリケーションを右クリックし、「New」を選ぶ

        [image]
      4. バージョンを指定して、「Apply」をクリック. 引き続き「Run」をクリック

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

        [image]
      6. 「Add link here...」をクリックしてみる
      7. 「New」をクリックしてみる
      8. 値を入れ、「Create」をクリック
      9. リストに新しいデータ「1」が増えている。 「2」をクリック
      10. データが現れる

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

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

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

      RhoMobile アプリケーション・プロジェクトの新規作成を行う.

      1. 「File」→ 「New」→ 「Project」と操作する

        [image]
      2. RhoConnect application を選ぶ

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

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

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

        [image]

        ソース・アダプタの設定

        1. プロジェクトを右クリックし、「Nを選び、「RhoConnect source adapter」 を選ぶ

          [image]
        2. RhoMobile アプリケーションを右クリックし、「New」を選ぶ

          [image]
        3. ソース・アダプタ名を指定して「Finish」をクリック
        4. ソース・アダプタ名が作成できたことの確認

          sourcesの下にファイルができる

          [image]

        実行

        1. ビルド用の設定ファイルは build.yml である
        2. プロジェクトを右クリックし、「New」を選び、「Run Configurations...」 を選ぶ

          [image]
        3. RhoConnect アプリケーションを右クリックし、「New」を選ぶ

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

          [image]
        5. 画面が現れる

          [image]

          [image]

          RhoMobile アプリケーションと RhoConnect アプリケーションの連携

          1. RhoMobile アプリケーションの rhoconfig.txt に、次のように設定する
            syncserver = 'http://<RhoConnect を稼働させるマシンの IP アドレス>:9292/application'
            

            [image]
          2. モデルのファイルに「enable: sync」を書き加える

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

            [image]
          4. RhoMobile アプリケーションの下の設定ファイル(先ほど作成したもの)をクリックし、引き続き「Run」をクリック

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

            「Login」ができるようになっている

            [image]
          6. 任意のユーザ名、パスワードでログインできる(設定をしていないので)

            [image]
          7. ログインしたら、 「Add link here ... 」や、画面下の設定ボタンをクリックしてみる。ここでは、まず、 「Add link here ... 」をクリックしてみる。

            [image]
          8. 「New」をクリック

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

            [image]
          10. 行が増えた

            [image]
          11. 今度は、画面下の設定ボタンをクリックしてみる。すると設定用のメニューが現れる

            [image]