読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

Rails:Ionic framework & Ruby on Rails APIを試してみました

Rails Ionic

RailsとIonicの組み合わせってできるのかなと思っていたところ、参考になる動画があったので勉強させてもらいました。

rails new

まずはrails newコマンドで必要なファイルを作成します。

$ rails new agenda_backend -T

f:id:tyoshikawa1106:20150812135312p:plain:w300

『-T』というのは『--skip-test-unit』の省略形です。

cdコマンドで移動

$ cd agenda_backend

f:id:tyoshikawa1106:20150812135637p:plain:w300

rails gコマンドでModelを作成

$ rails g model person name phone

f:id:tyoshikawa1106:20150812135840p:plain:w300

rake db:migrate

DBのマイグレーションを行います。

$ rake db:create
$ rake db:migrate

f:id:tyoshikawa1106:20150812140120p:plain:w300

DB seedファイルの編集

db > seeds.rbを編集します。

Person.create(name: 'Laura', phone: '1800-3137977')
Person.create(name: 'Jeniffer', phone: '1800-123456')
Person.create(name: 'Tom', phone: '1800-654321')

f:id:tyoshikawa1106:20150812140723p:plain

編集したら次のコマンドを実行

$ rake db:seed


実行後は『rails c』コマンドでクエリを実行して確認します。

$ rails c
irb(main):001:0> Person.count
irb(main):002:0> Person.first

f:id:tyoshikawa1106:20150812141220p:plain

configファイルの編集

config > rotues.rbファイルを編集します。

AgendaBackend::Application.routes.draw do
  namespace :api, constrains: { format: :json } do
    get 'people' => 'agenda#all'
  end
end

f:id:tyoshikawa1106:20150812141611p:plain

rack-corsの準備

cyu/rack-cors · GitHub

gemファイルに以下の内容を追加します。

gem 'rack-cors', :require => 'rack/cors'

f:id:tyoshikawa1106:20150812141931p:plain


追加したら次のコマンドを実行

$ bundle

f:id:tyoshikawa1106:20150812142144p:plain

application.rbの編集

config > application.rbを編集します。

config.middleware.use Rack::Cors do
  allow do
    origins '*'
    resource '*', :headers => :any, :methods => [ :get, :post, :options, :delete]
  end
end

f:id:tyoshikawa1106:20150812142727p:plain

active_model_serializersを準備する

rails-api/active_model_serializers · GitHub

Gemに次の内容を追加します。

gem 'active_model_serializers'

f:id:tyoshikawa1106:20150812143205p:plain


追加が終わったら次のコマンドを実行

$ bundle

f:id:tyoshikawa1106:20150812143324p:plain

rails g serializer person

次のコマンドを実行します。

$ rails g serializer person

f:id:tyoshikawa1106:20150812143453p:plain:w300

person_serializer.rbの編集

app > serializers > person_serializer.rbの内容を編集します。

class PersonSerializer < ActiveModel::Serializer
  attributes :id, :name, :phone
end

f:id:tyoshikawa1106:20150812143657p:plain

rails g controller api/agenda all

次のコマンドを実行します。

$ rails g controller api/agenda all --no-helper -- no-assets

f:id:tyoshikawa1106:20150812144304p:plain


ちなみにオプションを付け忘れて実行してしまった場合は次のコマンドで削除できます。

$ rails destroy controller api/agenda all

f:id:tyoshikawa1106:20150812144225p:plain

agenda_controller.rbの編集

app > controller > api > agenda_controller.rbを編集します。

module Api
  class Api::AgendaController < ApplicationController

    respond_to :json

    def all
      render json: Person.all
    end

    def default_serializer_options
      { root: false }
    end
  end
end


これでBackend側の準備が完了しました。試しにrails sコマンドを実行してlocalhostにアクセスできるようにします。

$ rails s

f:id:tyoshikawa1106:20150812145033p:plain


もうひとつターミナルを開いて次のコマンドを実行するとレコードにアクセスできます。

$ curl -X GET 'http://localhost:3000/api/people'


つづいてionic側の準備を行います。

Ionicの準備

どこでもいいのですが、作業ディレクトリに移動します。(今回はデスクトップになっています)

$ cd desktop

ionicコマンドでファイル作成

次のコマンドでテンプレートファイルを作成できます。

$ ionic start agenda blank

f:id:tyoshikawa1106:20150812150313p:plain


このように必要なファイルを用意できました。
f:id:tyoshikawa1106:20150812150405p:plain


cdコマンドで作業ディレクトリに移動します。

$ cd agenda

f:id:tyoshikawa1106:20150812150524p:plain

ionic platformの宣言

次のコマンドでiosで動作させることを宣言します。

$ ionic platform add ios

f:id:tyoshikawa1106:20150812150715p:plain

ionic serveでテスト完了を準備

次のコマンドでテスト完了を準備します。

$ ionic serve

f:id:tyoshikawa1106:20150812151213p:plain


これで準備OKです。
f:id:tyoshikawa1106:20150812151307p:plain:w300

index.htmlの編集

www > index.htmlを編集します。

<ion-header-bar class="bar-stable">
  <h1 class="title">My Ageda</h1>
</ion-header-bar>

f:id:tyoshikawa1106:20150812151600p:plain


タイトル部分が正しく変更されることを確認します。
f:id:tyoshikawa1106:20150812151639p:plain:w300

リストの表示

試しにリスト表示を行ってみます。

<ion-content>
  <ul class="list">
    <li class="item" ng-repeat="name in ['Ulisses', 'Michael', 'Laura']">
      {{name}}
    </li>
  </ul>
</ion-content>

f:id:tyoshikawa1106:20150812152115p:plain


固定値ですがこれでリストを表示できます。
f:id:tyoshikawa1106:20150812152156p:plain:w300

people_controller.jsの作成

www > js > controllers > people_controller.jsという感じでファイルを作成します。

(function() {

  var app = angular.module('peopleController', []);

  app.controller('PeopleController',
    function($scope, $http) {
      $scope.names = ['Jeniffer', 'Jackson', 'Jose'];
    }
  );
})

f:id:tyoshikawa1106:20150812154538p:plain

app.jsの編集

www > js > app.jsを編集

angular.module('starter', ['ionic', 'peopleController'])

f:id:tyoshikawa1106:20150812154458p:plain

リスト値をcontrollerから取得

index.htmlを編集します。まずはscriptタグの追加から。

<script src="js/controllers/people_controller.js"></script>

f:id:tyoshikawa1106:20150812154726p:plain


それとリスト部分の変更です。

<ion-content>
  <ul class="list" ng-controller="PeopleController">
    <li class="item" ng-repeat="name in names">
      {{name}}
    </li>
  </ul>
</ion-content>

f:id:tyoshikawa1106:20150812154741p:plain


これでリスト値をコントローラから取得するようにできます。
f:id:tyoshikawa1106:20150812154828p:plain:w300

rake routesの実行

rails側に戻って次のコマンドを実行します。

$ rake routes

f:id:tyoshikawa1106:20150812162223p:plain:w300


実行したらrails sコマンドを実行して再度ionicに戻ります。

people_controller.jsの編集

app.controller('PeopleController',
    function($scope, $http) {
      var url = 'http://localhost:3000/api/people';
      $http.get(url)
      	.success(function(people) {
      		$scope.people = people;
      	})
      	.error(function(data) {
      		console.log('server side error occurred.');
      	});
  }
);

f:id:tyoshikawa1106:20150812162946p:plain

index.htmlを編集
<ion-content>
  <ul class="list" ng-controller="PeopleController">
    <li class="item" ng-repeat="person in people">
      <h3>{{person.name}}</h3>
      <p>{{person.phone}}</p>
    </li>
  </ul>
</ion-content>

f:id:tyoshikawa1106:20150812163003p:plain



これでRailsのDBから情報を取得して、ionic側で表示ができます。
f:id:tyoshikawa1106:20150812163112p:plain:w300

ionic emulate ios

次のコマンドを実行するとエミュレータを起動できます。

$ ionic emulate ios

f:id:tyoshikawa1106:20150812163523p:plain:w300


以上がRailsをBackEnd側に使用したionicアプリ作成の流れです。