Rails Scaffoldによる

モバイルバックエンド

プロトタイピング

 

Ruby / Ruby on Rails ビギナーズ勉強会 第12回

2016/4/10

宇都宮　諒(@ryo511)

自己紹介

  • 宇都宮　諒（うつのみや　りょう）
  • Twitter, Facebook等では「ryo511」
  • Webアプリケーションエンジニア​
  • 業務で主に使ってる​言語はPHP, JavaScript, C#
  • Rails歴：2016年1月〜
  • IDEが好き（PhpStorm, Visual Studio, RubyMine等）
  • アシアル株式会社所属

Scaffoldとは

  • rails generateコマンドの1つ
  • 特定のモデルのCRUD操作に必要な機能を生成する
  • Rails Tutorialでは2章で使用
  • Rails Tutorialでは触れていないが、scaffoldはHTMLによる画面だけでなく、JSONによるREST APIも自動生成する
  • 本番運用に適したコードが生成されるわけではないので注意が必要
    • コマンド一発で作れるのでプロトタイプには最適

モバイルバックエンドとは

  • モバイルアプリのデータをサーバに保存する仕組み
  • JSONを介したREST APIとして実装されることが多い
  • Parse、ニフティクラウド mobile backendなどのサービスもある
  • RESTfulなルーティングやフォーマットに応じたレンダリング等、Railsはモバイルバックエンドの開発に適した機能を持っている

今回作るアプリ

バックエンドアプリの作成(1)

  • Railsアプリを新規作成
$ rails new todo_backend
$ cd todo_backend
  • Gemfile編集
# CORSサポートを追加する
gem 'rack-cors'

group :development, :test do
  # sqlite3は開発・テスト環境でのみ使用する
  gem 'sqlite3'
end

group :production do
　　# 本番環境ではPostgreSQLを使用する
  gem 'pg'
　　# Railsの挙動をHerokuに最適化する
  gem 'rails_12factor'
end

バックエンドアプリの作成(2)

  • bundle install && rails generate scaffold
$ bundle install --without production
$ rails g scaffold Task title:string done:boolean
  • CORS設定
    • どこからでも参照可能
    • 指定したHTTPメソッドによるリクエストを許可
# config/application.rb
config.middleware.insert_before ActionDispatch::Static, Rack::Cors do
  allow do
    origins '*'
    resource '*', :headers => :any, :methods => [:get, :post, :options, :patch, :delete]
  end
end

寄り道：CORSとは

  • CORS: Cross Origin Resource Sharing
  • 原則：別ドメインに対するXmlHttpRequestは行えない
    • セキュリティ上の理由
  • 例外：CORSという仕様に沿ったHTTPヘッダーをサーバが返せば、別ドメインでもXmlHttpRequestを使うことができる
  • 別ドメインに存在するサイトにWeb APIを提供するような場合には、CORSを使うのがオススメ

バックエンドアプリの作成(3)

  • CSRFトークンが送られてこなかった場合の挙動を変更
    • デフォルト：例外を投げる
    • 変更後：セッションを無効にする
      • 今回のアプリではログイン機能が無いのでセッションが無効になっても問題無い
# app/controllers/application_controller.rb
protect_from_forgency with: :null_session
  • Herokuにデプロイ
$ git init
$ git add -A
$ git commit -m 'Init'
$ heroku create
$ git push heroku master

クライアントアプリの作成

  • 以下のライブラリを使用する
    • AngularJS 1.5
      • Web APIとの通信とデータバインディングを使用
    • OnsenUI 2.0 Beta
      • モバイルUIのためのコンポーネント集
    • Cordova 5.2
      • HTML5アプリケーションをモバイルアプリ化
  • 実装の詳細は割愛

DEMO

ご清聴ありがとう

ございました

Made with Slides.com