Rhodesによる既存ウェブサービスのアプリ化

RhodesはRubyによる各種スマートフォンのプラットフォームに対応したネイティブアプリ作成ツールです。
Furpeaceを、Rhodeesを使ってできるだけ既存のサービスを再利用した形でネイティブアプリ化する方法について検討して発表しました

Transcript

1. Rhodesによる
   既存ウェブサービスのアプリ化
   2012.06.26
   志田 裕樹
   

   View Slide

2. furpeace
   • 犬になりきってつぶやくサービス
   • 2010年2月～
   • Rails2.3
   • 登録時、飼い主、犬両方を登録
   • PC、スマホ、ガラケー対応
   • Twitter・Facebook同時POST
   • つぶやき、いいね、コメント
   • 血統書による異母・異父兄弟犬さがし
   • グループ
   • 散歩、ごはん、うんち、買い物のキーワードデータベース
   

   View Slide

3. furpeace
   

   View Slide

4. アプリ化したい
   • スマホの投稿が急増中(3割程度)
   • スマホは画像がアップロードできない
   • 画像つぶやきが増えればそれだけサービスも盛り上がる
   • メールに画像添付して投稿する仕組み
   つぶやく → メールが届く → 画像を添付して返信 → 公開される
   • Android 2.2なら直接アップできるものもあるが、できたりできなかったりと
   不安定
   – 選ぶとなぜかリロードがかかって投稿内容が消えるなど
   • 起動もアプリの方が楽
   • 既存のサイトをできるだけそのままでアプリ化したい
   • Android、iPhoneに対応したい
   

   View Slide

5. Rhodes
   • Rubyでマルチプラットフォームに対応
   • ruby + html + javascript + cssで構築可能
   • ローカルウェブサーバーの上にRubyのMVCフレーム
   ワークが動く
   • WebViewを常に使う
   • 学習コストが低い!
   • 実はRhodes歴1日目です。m(_ _)m
   – 資料作成 18:30～
   

   View Slide

6. Rhodesのアーキテクチャ
   

   View Slide

7. インストール
   • eclipse重い
   • emacs 使いたい
   • Linux のサーバーににいれてみるがビルドできない
   • おとなしくWindowsに入れる
   • coLinux(Ubuntu)からWindowsのソースをmount
   • emacsで編集 ^^
   • ビルドもWindowsのコマンドプロンプトからできる
   – rake run:android
   

   View Slide

8. アプリの作成
   $ rhodes app hello_world
   [ADDED] hello_world/rhoconfig.txt
   [ADDED] hello_world/build.yml
   [ADDED] hello_world/.gitignore
   [ADDED] hello_world/app/application.rb
   [ADDED] hello_world/app/index.erb
   [ADDED] hello_world/app/index.bb.erb
   [ADDED] hello_world/app/layout.erb
   [ADDED] hello_world/app/loading.html
   [ADDED] hello_world/Rakefile
   [ADDED] hello_world/app/loading.png
   [ADDED] hello_world/app/helpers
   [ADDED] hello_world/icon
   [ADDED] hello_world/app/Settings
   [ADDED] hello_world/public
   

   View Slide

9. controller
   require 'rho'
   require 'rho/rhocontroller'
   require 'rho/rhoerror'
   require 'helpers/browser_helper'
   class SettingsController < Rho::RhoController
   include BrowserHelper
   def index
   @msg = @params['msg']
   render
   end
   def login
   @msg = @params['msg']
   render :action => :login
   end
   

   View Slide

10. model
    class Image
    include Rhom::PropertyBag
    enable :sync
    property :name, :string
    property :filename, :string
    property :image_uri, :blob, :overwrite
    end
    

    View Slide

11. view
    
    
    HelloWorld
    <% if SyncEngine::logged_in > 0 %>
    
    Sync
    
    
    Logout
    
    <% else %>
    Login
    <% end %>
    
    
    
    Add link here...
    
    
    
    

    View Slide

12. camera API
    • 写真を撮る
    Camera::take_picture(callback_url, settings)
    • 写真を選ぶ
    Camera::choose_picture(callback_url)
    

    View Slide

13. furpeaceのアプリ化
    • アプリ起動と同時にWebViewで
    http://www.furpeace.com を閲覧
    • ネイティブ機能を使いたい時だけ、ローカル
    ウェブサーバーと通信
    • クロスドメインの通信になる
    – iframe
    – クロスドメインメッセージング(html5)
    

    View Slide

14. 画像のアップロード
    

    View Slide

15. デモ
    

    View Slide

16. まとめ
    • Rhodesを使えばRuby, html, CSS,
    JavaScriptで開発できる
    • ローカルウェブサーバーとのクロスドメイン通
    信をどうにかすれば既存のサイトを丸々生か
    して、ネイティブ機能を付与することもできる
    

    View Slide