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

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

Transcript

1. Rhodesによる 既存ウェブサービスのアプリ化 2012.06.26 志田 裕樹
2. furpeace • 犬になりきってつぶやくサービス • 2010年2月～ • Rails2.3 • 登録時、飼い主、犬両方を登録 • PC、スマホ、ガラケー対応 • Twitter・Facebook同時POST • つぶやき、いいね、コメント • 血統書による異母・異父兄弟犬さがし • グループ • 散歩、ごはん、うんち、買い物のキーワードデータベース
3. furpeace
4. アプリ化したい • スマホの投稿が急増中(3割程度) • スマホは画像がアップロードできない • 画像つぶやきが増えればそれだけサービスも盛り上がる • メールに画像添付して投稿する仕組み つぶやく → メールが届く → 画像を添付して返信 → 公開される • Android 2.2なら直接アップできるものもあるが、できたりできなかったりと 不安定 – 選ぶとなぜかリロードがかかって投稿内容が消えるなど • 起動もアプリの方が楽 • 既存のサイトをできるだけそのままでアプリ化したい • Android、iPhoneに対応したい
5. Rhodes • Rubyでマルチプラットフォームに対応 • ruby + html + javascript + cssで構築可能 • ローカルウェブサーバーの上にRubyのMVCフレーム ワークが動く • WebViewを常に使う • 学習コストが低い! • 実はRhodes歴1日目です。m(_ _)m – 資料作成 18:30～
6. Rhodesのアーキテクチャ
7. インストール • eclipse重い • emacs 使いたい • Linux のサーバーににいれてみるがビルドできない • おとなしくWindowsに入れる • coLinux(Ubuntu)からWindowsのソースをmount • emacsで編集 ^^ • ビルドもWindowsのコマンドプロンプトからできる – rake run:android
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
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
10. model class Image include Rhom::PropertyBag enable :sync property :name, :string property :filename, :string property :image_uri, :blob, :overwrite end
11. view <div data-role="page" data-url="<%= Rho::RhoConfig.start_path %>/"> <div data-role="header" data-position="inline"> <h1>HelloWorld</h1> <% if SyncEngine::logged_in > 0 %> <a href="<%= url_for :controller => :Settings, :action => :do_sync %>" class="ui-btn-left" data-icon="refresh"> Sync </a> <a href="<%= url_for :controller => :Settings, :action => :logout %>" class="ui-btn-right" data-icon="star"> Logout </a> <% else %> <a href="<%= url_for :controller => :Settings, :action => :login %>" class="ui-btn-right" data-icon="star">Login</a> <% end %> </div> <div data-role="content"> <ul data-role="listview"> <li><a href="#">Add link here...</a></li> </ul> </div> </div>
12. camera API • 写真を撮る Camera::take_picture(callback_url, settings) • 写真を選ぶ Camera::choose_picture(callback_url)
13. furpeaceのアプリ化 • アプリ起動と同時にWebViewで http://www.furpeace.com を閲覧 • ネイティブ機能を使いたい時だけ、ローカル ウェブサーバーと通信 • クロスドメインの通信になる – iframe – クロスドメインメッセージング(html5)
14. 画像のアップロード
15. デモ
16. まとめ • Rhodesを使えばRuby, html, CSS, JavaScriptで開発できる • ローカルウェブサーバーとのクロスドメイン通 信をどうにかすれば既存のサイトを丸々生か して、ネイティブ機能を付与することもできる