cordova & rails 4.1 ハイブリッドアプリ開発デモ

Cordova &Rails 4.1ハイブリッドアプリ開発デモWritten by Yoshiyuki Hirano @ HentecoLabs Inc. created_at 2014-07-07 16:02:43 +0900

自己紹介

平野慶之 @yoshi_hirano

» 株式会社へんてこらぼ代表取締役

» 開発（フロントエンド/バックエンド）もやるディレクター

» 技術好き。Rails4/AngularJS/Sass/CoffeeScriptとか。

» 京都住まいの関東人。東京のプロジェクトにも参加しております。

» 8月からの業務委託案件など募集中 щ(ﾟдﾟщ)

コルドバって何!?

JavaScript

モバイルアプリを開発する

フレームワーク

ワンソースで

クロスプラットフォーム対応が可能。

豊富なAPIで

デバイスの操作も可能。

まあ、その辺りの話は、コルドバのサイトを見た方が早いです^^;http://cordova.apache.org/

このスライドでやること

コルドバ入門者向けに

CordovaとRails4.1で

デバイスのカメラで撮影した画像をサーバーに保存するアプリを作るデモ

目次1.環境構築 Android, Cordova

2.クライアントサイドのセットアップ（Cordova）

3.サーバーサイドのセットアップ（Rails）

4.ユーザーモデルを実装・API化（Rails）

5.ユーザーAPIを表示（Cordova）

6.フォトモデルを実装・API化（Rails）

7.カメラで撮影した画像データをアップロード（Cordova）

前提とする環境» Mac OS X 10.9.3

» Xcode 5.1.1, Homebrew 0.9.5

» node v0.10.29, npm 1.4.19

» Ruby 2.1.1p76, Rails 4.1.0

» ImageMagick 6.8.9-1, RMagick 2.13.2

当スライドのサンプルは、上記の環境を準備したうえでお試しください。

Chapter.1環境構築 Android, Cordovapic by Angelo GonzÃ¡lez

1-1. 環境構築 Android

# sdkとantをインストール$ brew install android-sdk ant

# Androidを設定（zshを使っている場合は.zshrc）$ echo "export ANDROID_HOME=/usr/local/opt/android-sdk" >> ~/.bashrc$ source ~/.bashrc

# Android SDK Managerを起動$ android

SDK Manager起動後、必要なSDKを選択してインストールします。

1-2. 環境構築 Cordova

# cordovaをインストール$ npm install cordova -g

# PATHを通します（{version}にはインストールされたversionを記述します）$ echo "export \ PATH=$PATH:/usr/local/Cellar/android-sdk/{version}/tools" >> ~/.bashrc$ echo "export \ PATH=$PATH:/usr/local/Cellar/android-sdk/{version}/platform-tools/" >> ~/.bashrc$ source ~/.bashrc

# iOSシミュレータもインストール$ brew install ios-sim

※スライド作成時点のCordovaは、3.5.0-0.2.4です。

Chapter.2クライアントサイドのセットアップ（Cordova）pic by leafar.

2-1. アプリ作成# まずは、アプリを作成（ディレクトリは任意）$ cordova create helloCordova com.henteco-labs.sample HelloCordova

# アプリ内に移動$ cd helloCordova

# 追加できるプラットフォームを表示$ cordova platform lsInstalled platforms:Available platforms: amazon-fireos, android, blackberry10, firefoxos, ios

# iOSとAndroidを追加$ cordova platform add ios android

2-2. エミュレート# iOSシミュレーターで表示確認$ cordova run ios

こんな画面が表示されます▶# Androidの場合は...$ cordova run android

Androidのエミュレータはものすごい動作が遅いのが難点。（なので未確認でもおｋ）

Chapter.3サーバーサイドのセットアップ（Rails）pic by greg westfall.

3-1. アプリ作成# アプリ作成（Cordovaとは別のdir）$ rails new banana -T$ cd banana

# DBを作成し、マイグレーション$ rake db:create db:migrate

# Railsサーバーを起動$ rails s

http://localhost:3000 ▶

Chapter.4ユーザーモデルを実装・API化（Rails）pic by gagilas

サーバーサイドでは、主にコルドバと連携するためのAPIを作成していきます。

4-1. ユーザーモデルを実装# データ読込用にユーザーモデルを生成$ rails g scaffold user name email

# マイグレーション$ rake db:migrate

# コンソールを起動し、テストデータ挿入$ rails c

irb> 30.times {|i| User.create(name: "バナナ#{i}", email: "banana#{i}@example.com") }

4-2. API用コントローラを生成# api/v{version}という名前空間に生成$ rails g controller api/v1/users

JSONを返すだけならば、スカフォールドのままでも十分。でも、APIはAPIらしく、別の名前空間で実装。

4-3. ルーティングを編集# config/routes.rbRails.application.routes.draw do resources :users

namespace :api do namespace :v1 do resources :users, only: :index end end...

4-4. コントローラを実装# app/controllers/api/v1/users_controller.rbclass Api::V1::UsersController < ApplicationController respond_to :json

def index render status: 200, json: User.all endend

/api/v1/usersがGETリクエストされると、JSONフォーマットでユーザー情報が返されます。

4-5. 動作確認Railsサーバーを起動し、curlコマンドで動作確認します。$ curl http://localhost:3000/api/v1/users[{"id":1,"name":"バナナ0",...

JSONが表示されたら、ユーザーAPIの実装は完了です。

Chapter.5ユーザーAPIを表示（Cordova）pic by dinner series

5-1. Zepto.jsのインストール# Bowerをインストール$ npm install bower -g

# /path/to/helloCordova/www に移動$ cd ~/path/to/helloCordova/www

# Bowerを初期化$ bower init# サンプル用なので、質問にはすべてEnterで、最後はYを入力。

# Zepto.jsをインストール$ bower install zeptojs --save

5-2. クライアントサイドの実装内容処理の流れは次のようになります。1.コルドバの独自イベント（deviceready）が発火

2.サーバー側に、ユーザー情報をリクエスト

3.取得後、DOMを作成・加工・表示devicereadyイベントは、コルドバのデバイスAPIが読み込まれたタイミングで発生（≒readyイベント）

5-3. htmlを編集空のdivタグを配置し、zepto.jsの読込設定を追加。<div id="userlist"></div><script type="text/javascript" src="cordova.js"></script><script type="text/javascript" src="bower_components/zeptojs/src/zepto.js"></script><script type="text/javascript" src="bower_components/zeptojs/src/event.js"></script><script type="text/javascript" src="bower_components/zeptojs/src/ajax.js"></script><script type="text/javascript" src="bower_components/zeptojs/src/form.js"></script>...

5-4. JavaScriptを編集// /path/to/helloCordova/www/js/index.js 38行目以降onDeviceReady: function() { app.receivedEvent('deviceready'); app.displayUsers();},// display Users from /api/v1/usersdisplayUsers: function() { $.ajax({ url: encodeURI("http://localhost:3000/api/v1/users"), // APIにアクセス success: function(res) { // JSONをHTMLに加工 var list = document.createElement('ul'); for (var i = 0; i < res.length; i++) { list.innerHTML += "<li>" + res[i].name + " (" + res[i].email + ")</li>"; } $('#userlist').html(list); // <div id="userlist"></div>に挿入 }, error: function(jqXHR, textStatus, errorThrown) { alert("Error:" + textStatus); } });},

5-5. 動作確認Railsサーバーを起動した状態で、動作確認をします。

# iOSシミュレーターで動作確認$ cordova run ios

▶の画面になれば、OKです。描画後にHTMLを変更しているため、このような画面になりますw

Chapter.6フォトモデルを実装・API化（Rails）pic by Bev Goodwin

6-1. Gemの追加サーバーサイドに画像アップロード機能を実装していきます。まず必要なGem（ライブラリ）を追加し、インストールします。# /path/to/banana/Gemfileを編集（下記2行を追加）gem 'carrierwave'gem 'rmagick', require: 'RMagick'

# Gemfile編集後、下記コマンドでインストール$ bundle install

もし、Railsサーバーが起動していたら、一度停止する必要があります。

6-2. フォトモデルとアップローダーを生成# フォトモデルの生成$ rails g scaffold photo image

# マイグレーションを実行$ rake db:migrate

# アップローダーを生成$ rails g uploader image

6-3. アップローダーを実装# /path/to/banana/app/uploaders/image_uploader.rbclass ImageUploader < CarrierWave::Uploader::Base

include CarrierWave::RMagick storage :file process convert: 'jpg' process resize_to_limit: [300, 300]

version :thumb do process resize_to_fit: [50, 50] end

def store_dir "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}" end

def extension_white_list %w(jpg jpeg gif png) end

def filename super.chomp(File.extname(super)) + '.jpg' if original_filename.present? endend

6-4. フォトモデルを実装フォトモデルにアップローダーをマウントします。# /path/to/banana/app/models/photo.rbclass Photo < ActiveRecord::Base

# 下記を追加 mount_uploader :image, ImageUploader...

これでフォトモデルに画像アップロード機能が実装されました。びっくりするくらいに簡単ですね。

6-5. フォト機能のビューを編集アップロードの動作確認のため、スカフォールドで生成したフォト機能のviews（ERB）を編集します。# /path/to/banana/app/views/photos/_form.html.erb（16行目）<%= f.file_field :image %>

# /path/to/banana/app/views/photos/show.html.erb（5行目）<%= image_tag @photo.image.url %>

# /path/to/banana/app/views/photos/index.html.erb（14行目）<td><%= image_tag photo.image.url %></td>

6-6. 動作確認アップロード機能の動作確認します。# Railsサーバーを起動$ rails s

http://localhost:3000/photos/newを開き、適当な画像ファイルをアップロードしてみます。

アップロードに成功すると、こんな画面になります▶

6-7. フォトAPIのコントローラを作成クライアントと通信するためのフォトAPIを作成します。$ rails g controller api/v1/photos

ユーザーAPIと同じ要領で、ルーティングを編集します。# config/routes.rbRails.application.routes.draw do resources :users

namespace :api do namespace :v1 do resources :users, only: :index # 下記を追加 resources :photos, only: :create...

6-8. フォトAPIのコントローラを実装# /path/to/banana/app/controllers/api/v1/photos_controller.rbclass Api::V1::PhotosController < ApplicationController respond_to :json

def create @photo = Photo.new(photo_params) if @photo.save render status: 200, json: { message: 'success' } else render status: 200, json: { message: 'failure' } end end

private def photo_params params.require(:photo).permit(:image) endend

6-9. 動作確認curlコマンドで、フォトAPIの動作確認をします。# Railsサーバーを起動$ rails s

# /path/to/sample.jpg には、適当な画像のパスを指定$ curl -F "photo[image]=@/path/to/sample.jpg" \ http://localhost:3000/api/v1/photos

しかし、実行すると、JSONではなく、HTMLが表示されてしまいます。どうやら、ActionController::InvalidAuthenticityTokenという例外が発生し、エラーのHTMLが返されているようです。

6-10. アプリケーションコントローラの編集Railsではセキュリティ対策として、POST/PUT/DELETEされた際に、CSRFトークンの値をチェックしています。

CSRFトークンが含まれていないと、例外が発生するため、アプリケーションコントローラを次のように編集します。# /path/to/app/controller/application_controller.rbclass ApplicationController < ActionController::Base protect_from_forgery with: :null_session

あくまでサンプル用の実装なので、実際に利用する際は別の実装を検討してください。

6-11. 動作再確認再び、6-9で実行したcurlコマンドで動作確認すると、「{"message":"success"}」というJSONが返されます。

実行後、http://localhost:3000/photosで、データを確認すると、curlコマンドでPOSTしたデータが下に表示されます。

Chapter.7カメラで撮影した画像データをアップロード（Cordova）pic by Thomas Leuthard

7-1. プラグインのインストールコルドバはデフォルトの状態だと、ミニマムの設定となっているため、カメラを使用する場合は、別途プラグインのインストールが必要です。# /path/to/helloCordovaに移動$ cd /path/to/helloCordova

# プラグインをインストール$ cordova plugin add org.apache.cordova.camera$ cordova plugin add org.apache.cordova.file-transfer

# 各プラットフォームでプラグインを利用できるように$ cordova prepare -d

7-2. クライアントサイドの実装内容処理の流れは次のようになります。1.ボタン（#cameraButton）のclickイベントが発火

2.navigator.camera.getPicture APIを実行

3.画像の取得に成功したら、フォトAPI経由で画像データをPOST

4.転送に成功したら、レスポンスメッセージを表示navigator.camera.getPicture APIで、カメラ/フォト一覧を操作します。

7-3. HTMLの編集①HTMLに次の要素を追加します。1.カメラのトリガーとなるボタン（#cameraButton）

2.取得イメージを表示する画像（#cameraImage）<div id="camera" style="width:100%;text-align:center;"> <img src="img/logo.png" id="cameraImage" style="display:block;max-width:100%;margin:0 auto;" /> <input type="button" id="cameraButton" value="撮影" /></div><div id="userlist"></div>...

7-3. HTMLの編集②絶対配置されている要素があるため、31行目のappクラスを削除します。<div class="app"> ↓<div>

7-4. getPictureの実装変数appのリストに下記を追加します。// /path/to/helloCordova/www/js/index.js...takePicture: function() { navigator.camera.getPicture(this.uploadPicture, function(msg) { alert('Failed because: ' + msg); }, { quality: 50, destinationType: navigator.camera.DestinationType.FILE_URI, // シミュレータではカメラが使用できないので、アルバムを指定 sourceType: navigator.camera.PictureSourceType.SAVEDPHOTOALBUM // sourceType: navigator.camera.PictureSourceType.CAMERA });},

7-5. File Transferの実装続けて、取得したファイルをアップロードする処理を実装します。こちらも変数appのリストに下記を追加します。// /path/to/helloCordova/www/js/index.js...uploadPicture: function(imageURI) { var options = new FileUploadOptions(); options.fileKey = "photo[image]"; options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1); options.mimeType = "image/jpeg"; var ft = new FileTransfer(); ft.upload(imageURI, encodeURI('http://localhost:3000/api/v1/photos'), function(r) { $('#cameraImage').attr('src', imageURI); // 読み込んだデータを表示 var res = $.parseJSON(r.response); // 返されたJSONをパース alert(res.message); // メッセージをアラートで表示 }, function(error){ alert("Error Code: " + error.code); }, options);}

7-6. CLICKイベントをバインド「撮影」ボタン（#cameraButton）をクリックしたときに、takePictureが実行されるようバインドします。// /path/to/helloCordova/www/js/index.js...bindEvents: function() { document.addEventListener('deviceready', this.onDeviceReady, false); // 下記を追加 $('#cameraButton').on('click', function(){ app.takePicture(); });},...

7-7. 動作確認①# iOSシミュレーター起動$ cordova run ios

iOSシミュレーターだと、カメラが動作しないので、アルバムからファイルを選択します。

7-7. 動作確認②「撮影」ボタンを押すと、アルバムへのアクセス許可を求められます。「OK」を押して、許可します▶

7-7. 動作確認③アルバムが表示されるので、画像を選択します▶

7-7. 動作確認④データがPOSTされ、サーバーからJSONが返ります。

アラートが表示されました▶

7-7. 動作確認⑤アラートの「OK」を押すと、選択した画像が表示されます。

7-7. 動作確認⑥http://localhost:3000/photosを開いて、サーバーに画像が転送されたか確認します。

問題なく表示されました▶

7-8. 実機確認の準備シミュレーターでは、撮影が確認できないため、実機確認をしますが、実機確認の場合、http://localhost:3000にアクセスできないので、PowというRackサーバーをインストールします。# Powをインストール$ curl get.pow.cx | sh

7-9. Powの設定Powを簡単に設定できるpowderというGemをインストールします。# powderをインストール（rbenvであればインストール後rehash）$ gem i powder

# Railsルートに移動$ cd /path/to/banana

# ~/.powにシンボリックリンクを作成$ powder link

リンク作成後、http://banana.dev/にアクセスして確認します。

7-10. LAN内のスマホからアクセスxip.ioを利用して、LAN内のスマホからアクセスできるようにします。ifconfigコマンドを実行して、Mac側のローカルIPを確認します。

$ ifconfig... inet 192.168.22.97 netmask ......

調べたローカルIPを元に、LAN内のスマホや別のPCから、http://banana.192.168.22.97.xip.io/にアクセスすると、アプリの表示が確認できます。

7-11. index.jsの修正実機確認のため、コルドバのwww/js/index.jsを修正します。// ホストの変更localhost:3000/ ↓banana.192.168.xx.xx.xip.io/

// sourceTypeの変更（コメントで調整）sourceType: navigator.camera.PictureSourceType.SAVEDPHOTOALBUM ↓sourceType: navigator.camera.PictureSourceType.CAMERA

7-12. 実機確認①Android端末をUSBで接続して、実機確認をします。

# 検証端末にアプリをインストール$ cordova run android

cordova runを実行すると、実機でアプリが表示されます▶

7-12. 実機確認②カメラで撮影すると、successのアラートが表示されます▶

7-12. 実機確認③アラート表示後、撮影した画像が表示されます▶

7-12. 実機確認④PCからhttp://localhost:3000/photosを確認します。

無事、データがPOSTされていました▶

デモは以上となります。

今回のサンプルコード一式はGitHubからクローンできます

https://github.com/henteco-labs/cordova-demo

最後にお知らせです

弊社では、2014年8月より、ウェブアプリやソーシャルゲーム開発の業務委託を積極的に行う予定です。

企画・ディレクション

フロントエンド開発UI, HTML, CSS, JS

バックエンド開発

Rails

ご興味をお持ちの場合は、[email protected]までお気軽にお問い合わせください。

参考資料pic by Sara Cimino

API ドキュメント

» Apache Cordova API Documentation（http://cordova.apache.org/docs/ja/3.5.0/index.html）

» 日本語が妙なので、英語版の方がいいかも。

書籍

» iOS/Android対応 HTML5ハイブリッドアプリ開発［実践］入門（著・久保田光則、アシアル株式会社、発行・技術評論社）

» 手元に一冊あって損しません。アシアルさんは昔から好きな会社。

雑誌

» WEB+DB PRESS Vol.74（技術評論社）P116 スマートフォン開発最新トレンド［1］（著・ニャンパス株式会社登尾徳誠）

» v2.5と、ちょっと古めな記事だけど、とても参考になりました。

ウェブサイト» Macbook AirにAndroid SDKをインストールする - ハードコイルド・ワンダーランド（http://weathercook.hatenadiary.jp/entry/2014/01/09/020249）

» Cordovaを用いた開発環境を構築する - Build Insider（http://www.buildinsider.net/mobile/bookhtml5hybrid/0401）

» Bower（http://bower.io/）

ウェブサイト» Zepto.js: the aerogel-weight jQuery-compatible

JavaScript library（http://zeptojs.com/）

» Rails 超お手軽な画像アップローダー CarrierWave の使い方 | Workabroad.jp（http://www.workabroad.jp/tech/1118）

» 開発サーバをThinからPowに切り替えて開発効率アップ！ (Mac限定) - 酒と泪とRubyとRailsと（http://morizyun.github.io/blog/pow-guard-rails/）

最後までご覧いただきありがとうございました

cordova & rails 4.1 ハイブリッドアプリ開発デモ

Engineering