トップページ -> 実践知識 -> JavaScript による Web プログラミング -> Windows で RhoConnect アプリケーションを作ってみる
[サイトマップへ], サイト内検索:

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

サイト構成 連絡先,業績など 実践知識 データの扱い コンピュータ 教材 サポートページ

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


前準備

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

  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 アプリケーションのひな形

参考Webページ: http://docs.rhomobile.com/home

  1. RhoStudio を起動する

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

    2. RhoMobile application を選ぶ

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

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

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

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

モデル

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

  2. モデルを定義する

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

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

ビュー

  1. app/test/index.erb をダブルクリック

  2. 「Add link here」の部分を書き換え

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

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

実行

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

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

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

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

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

  6. 「Add link here...」をクリックしてみる

  7. 「New」をクリックしてみる

  8. 値を入れ、「Create」をクリック

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

  10. データが現れる

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

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

参考Webページ: http://docs.rhomobile.com/home

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

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

  2. RhoConnect application を選ぶ

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

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

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

ソース・アダプタの設定

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

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

  3. ソース・アダプタ名を指定して「Finish」をクリック

  4. ソース・アダプタ名が作成できたことの確認

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

実行

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

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

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

  4. Run」をクリック

  5. 画面が現れる

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

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

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

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

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

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

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

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

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

  8. 「New」をクリック

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

  10. 行が増えた

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