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

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

rails new

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

$ rails new agenda_backend -T

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

cdコマンドで移動

$ cd agenda_backend

rails gコマンドでModelを作成

$ rails g model person name phone

rake db:migrate

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

$ rake db:create
$ rake db:migrate

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')

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

$ rake db:seed

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

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

configファイルの編集

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

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

rack-corsの準備

cyu/rack-cors · GitHub

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

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

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

$ bundle

application.rbの編集

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

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

active_model_serializersを準備する

rails-api/active_model_serializers · GitHub

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

gem 'active_model_serializers'

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

$ bundle

rails g serializer person

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

$ rails g serializer person

person_serializer.rbの編集

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

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

rails g controller api/agenda all

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

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

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

$ rails destroy controller api/agenda all

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

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

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

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

Ionicの準備

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

$ cd desktop

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

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

$ ionic start agenda blank

このように必要なファイルを用意できました。

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

$ cd agenda

ionic platformの宣言

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

$ ionic platform add ios

ionic serveでテスト完了を準備

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

$ ionic serve

これで準備OKです。

index.htmlの編集

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

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

タイトル部分が正しく変更されることを確認します。

リストの表示

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

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

固定値ですがこれでリストを表示できます。

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'];
    }
  );
})

app.jsの編集

www > js > app.jsを編集

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

リスト値をcontrollerから取得

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

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

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

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

これでリスト値をコントローラから取得するようにできます。

rake routesの実行

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

$ rake routes

実行したら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.');
      	});
  }
);

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>

これでRailsのDBから情報を取得して、ionic側で表示ができます。

ionic emulate ios

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

$ ionic emulate ios

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

参考

• railsコマンド(rails) - - Railsドキュメント
• The Ionic Bookで覚えるIonicの使い方 - Qiita