Windows で RhoStudio を使ってみる

前準備

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

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

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

   【関連する外部ページ】

   • Android Studio 3.6 のインストール，Android 仮想デバイスの作成，プログラムの起動，NDK のインストール（Windows 上）: 別ページ »で説明
   • Ubuntu で Android Studio のダウンロードとインストールとテスト実行: 別ページ »で説明
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 を起動する
   
2. RhoMobile アプリケーション・プロジェクトの新規作成
   1. 「File」→ 「New」→ 「Project」と操作する
      
   2. RhoMobile application を選ぶ
      
   3. プロジェクト名の設定

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

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

モデル

1. プロジェクトを右クリックし、「New」を選び、「RhoMobile model」を選ぶ
   
2. モデルを定義する

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

   • モデル名: Product
   • 属性名の並び: id,name,price,quantity
   
3. モデルが生成されたことを確認する
   

   ビュー

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

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

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

      

      実行

      1. ビルド用の設定ファイルは build.yml である
         
      2. プロジェクトを右クリックし、「Run As...」を選び、「Run Configurations...」 を選ぶ
         
      3. 「RhoMoblie Application」を右クリックし、「New」を選ぶ
         
      4. Android SDK のバージョンを指定して、「Apply」をクリック
         
      5. 引き続き「Run」をクリック
         
      6. シミュレータの画面が現れる
         
      7. 「Products」をクリックしてみる
         
      8. 「New」をクリックしてみる
         
      9. 値を入れ、「Create」をクリック
         
      10. リストに新しいデータ「1」が増えている。 「2」をクリック
          
      11. データが現れる
          

      Web Inspector を使ってみる

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

      

      デバッガを使ってみる

      1. 「Run」→「Debug」と操作する
         
      2. 「Ruby Test」を選び、「OK」をクリック
         
      3. プロジェクトを右クリックし、「Debug As...」を選び、「Ruby Configurations ...」 を選ぶ
         
      4. 「Debug」をクリック
         
      5. デバッグ画面が現れる
         
      6. 画面を「RhoStudio」に切り替える
         
      7. デバッグしたいファイルをダブルクリックする

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

         
      8. 画面を「Debug」に切り替える
         
      9. ソースコードのウインドウの左端をダブルクリックすると、ブレークポイントが設定される
         
      10. シミュレータのウインドウで「Product」をクリック
          
      11. ブレークポイントが設定されているので、実行が中断する。変数の中身などが表示される。
          
      12. 続行したいときは「Resume」を選ぶ
          

      金子邦彦研究室公式Webページへようこそ． サイト内検索は専用ページをご利用ください． サイトマップも用意しています．

      公開資料は「クリエイティブコモンズ BY NC SA」ライセンスを適用しています． 資料の利用条件等については別ページで説明しています．

      問い合わせ先： 金子邦彦（かねこ くにひこ）