2. 前回のおさらい
? WebSocket
– サーバからブラウザへ好きなタイミングでデータを
送信できる
– Webブラウザによって対応状況がまちまち
? Ruby on Rails
– MVCアーキテクチャ
– アプリに必要な枠組みはRailsが生成
? 開発が楽！
2
4. Ruby on Rails (Rails) とは？
? Ruby によるWebアプリケーション向
けのMVCフレームワーク
? 37signalsのプログラマ、David
Heinemeier Hansson が開発
? Railsを利用しているサービス
– クックパッド
– 食べログ
– Twitter（～2008）
4
5. 準備運動：Rails で Hello world!
(1) Railsプロジェクトを新規作成す
る work> rails new hello
work> cd hello
hello> rails generate scaffold greeting
hello> rake db:migrate
(2) app/views/hello/index.html.erb を編集し下行で置き換え
る <p>hello, world!</p>
(3) サーバを起動する
hello> rails server
(4) ブラウザでサーバにアクセス
http://localhost:3000/greetings
5
16. １．アプリの設計
? テーブルの設計
– アプリが使うデータについて考えます
– MVCの「モデル」の部分
– どんなデータを扱うのかを、分類ごとに箇条書きで書きま
す
– モデル同士に関連があれば、それも描きこみます
16
17. １．アプリの設計
? モデルの関連
– モデルには1対1、1対多、多対多などの関連がありま
す
– あぷレビュ！の場合、一つのアプリに複数のレ
ビューがつくと考えられるので、アプリとレビュー
は1対多の関係となります
アプリ 1 0…*
アプリ レビュー
レビュー レビュー ???
17
18. １．アプリの設計
? その他、開発に必要なことを色々考えておきま
す
– どのぐらいの期間で完成できる？
? 今回は3時間。終わらなかったら次回にやるかも。
– 必ず実装しなくてはいけない部分は？
? iTunes Storeからデータを取得
? アプリのデータとレビューの情報の紐づけ
– 逆に、必ずしも実装しなくてもよい部分は？
? 新着レビューの表示（なくても見栄えは悪いが一応動く）
– 一番実装が難しい部分は？
? iTunes Storeからレコードを取得する部分？
– どんな技術や知識が必要？
? Rails、Ruby、HTTP、データベース
18
19. ２．プロジェクトの新規作成
? いよいよ実際にプログラムを書いていきます
? まずはプロジェクトの作成
work> rails new appreview
create
create README.rdoc
create Rakefile
…
中略
…
Using sqlite3 (1.3.6)
Using uglifier (1.2.7)
Your bundle is complete! Use `bundle show [gemname]` to
see where a bundled gem is installed.
work> cd appreview
19
26. ６．トップページを変える
? まだ http://localhost:3000 はデフォルトのままです
? configroutes.rb を編集して、先ほど作成したトップペー
ジに移動するようにします
Appreview::Application.routes.draw do
get "home/index"
get "home/search"
root :to => 'home#index‘
…
? デフォルトのトップページである publicindex.html は削
除します
appreview> del publicindex.html
? トップページは変わりましたか？
26
28. ７．トップページのビューを書く
? appviewshomeindex.html.erb を編集して、タイト
ルと検索窓を持つトップページを実装します
<div id=“top”>
<h1>あぷレビュ!</h1>
<p class=“search_field”>
<%= form_tag "/search", :method => "get" do %>
<%= search_field_tag "q", "アプリを検索" %>
<%= submit_tag "検索", :name => nil %>
<% end %>
</p>
</div>
? ブラウザをリロードして、出来栄えを確認しましょ
う
? 検索窓で何か検索してみてください（おそらく
Routing Errorになりますが）
28
31. ９．検索処理をコントローラに実装す
る
? appcontrollershomehome_controller.rbを編集し
ます
def search
# 検索する文字列を取得
@query = params[:q]
content = HTTPClient.new.get_content(
"http://itunes.apple.com/search",
"term" => @query, # 検索キーワード
"country" => "jp",
"entity" => "software")
# JSON形式のレスポンスを解析する
json = JSON.parse(content)
# 変数@resultsにアプリのリストを格納する
@results = json["results"]
# app/views/home/search.html.erb を表示
render :action => "search"
end
31
33. １０．検索ページのビューを書く
<h2>検索結果</h2>
<%= form_tag "/search", :method => "get" do %>
<%= search_field_tag "q", @query %>
<%= submit_tag "検索", :name => nil %>
<% end %>
<hr />
<table class="results">
<tr>
<th></th><th>タイトル</th><th>ジャンル</th><th>開発者</th><th>価格</th>
</tr>
<% @results.each do |record| %>
<tr>
<td><%= image_tag record["artworkUrl60"] %></th>
<td><%= record["trackName"] %></td>
<td><%= record["genres"].join(', ') %></td>
<td><%= record["artistName"] %></td>
<td><%= record["formattedPrice"] %></td>
</tr>
<% end %>
</table>
<hr />
<%= link_to "トップ", "/" %>
33
35. １１．レビューのモデルを生成す
る
? トップページと検索ページが完成しました
? 次はレビュー機能を実装します
? 投稿されたレビューや、レビューされたアプリ
の情報を保存するためのモデルを生成しましょ
う
appreview> rails generate scaffold App store_id:integer
title:string developer:string price:decimal
appreview> rails generate scaffold Review name:string
comment:string rate:integer app:references
appreview> rake db:migrate
35
37. １２．1対多の関連を設定する
? さて、最初に設計したモデルでは、アプリとレ
ビューは1対多の関連を持っているのでした
? 先ほどのレビューのモデルを生成するコマンド
で、app:references と指定しているのは「Review
はAppと関連している」ということをRailsに伝え
るためだったのです
? 次に「Appは複数のReviewと関連している」とい
うことをRailsに伝えるため、アプリのモデルを
編集します
37
40. １３．レビューページのビューを作成
する
<h2><%= @app.title %> - レビュー</h2>
<p id="notice">
<%= notice %>
</p>
<hr />
<table class="info">
<tr><th>開発者</th><td><%= @app.developer %></td><th>価格</th><td><%= @app.price %>円</td></tr>
</table>
<table class="reviews">
<tr><th>お名前</th><th>レート</th><th>レビュー</th></tr>
<% @app.reviews.each do |r| %>
<tr><td><%= r.name %></td><td><%= "★" * r.rate %></td><td><%= r.comment %></td></tr> <% end %>
</table>
<hr />
<h3>レビューを書く!</h3>
<%= form_for([@app.reviews.build]) do |f| %>
<%= f.hidden_field :app_id, value: @app.id %>
<div class="field">
<%= f.label "お名前" %><br /> <%= f.text_field :name %>
</div>
<div class="field">
<%= f.label "レート" %><br /> <%= f.select :rate,
(0..5).to_a.collect {|i| ["★"*i, i]} %>
</div>
<div class="field">
<%= f.label "レビュー" %><br /> <%= f.text_area :comment %>
</div>
<div class="actions">
<%= f.submit "投稿" %>
</div>
<% end %>
<hr />
<%= link_to "トップ", "/" %>
40
42. １４．レビューページを新規作成する処理
を書く
? appcontrollersapps_controller.rb を編集し、index
メソッドを以下で置き換えます
class AppsController < ApplicationController
# GET /apps
# GET /apps.json
def index
if params[:store_id]
app = App.where("store_id = :store_id", params).first
# もしアプリの情報がDBになければ新規作成する
unless app
app = App.new
app.store_id = params[:store_id].to_i
app.title = params[:title]
app.developer = params[:developer]
app.price = params[:price].to_f
app.save
end
# レビューのページに飛ぶ
redirect_to action: "show", id: app.id
end
end
42
44. １５．レビューページに飛ぶリンクを追加
する
? appviewshomesearch.html.erb を編集します
? アプリタイトルの所にレビューページへのリン
クが張られるように、以下のように修正します
<% @results.each do |record| %>
<tr>
<td><%= image_tag record["artworkUrl60"] %>
<td>
<%= link_to record["trackName"], apps_path(
store_id: record["trackId"],
title: record["trackName"],
developer: record["artistName"],
price: record["price"]) %>
</td>
<td><%= record["genres"].join(', ') %></td>
<td><%= record["artistName"] %></td>
<td><%= record["formattedPrice"] %></td>
</tr>
<% end %>
44
47. １６．レビューを投稿できるよう
にする
? appcontrollersreviews_controller.rb のcreateメ
ソッドを以下のように編集します
def create
@review = Review.new(params[:review])
respond_to do |format|
if @review.save
format.html { redirect_to App.find(@review.app_id),
notice: 'Review was successfully created.' }
format.json { render json: @review, status: :created, location: @review }
else
format.html { render action: "new" }
format.json { render json: @review.errors, status: :unprocessable_entity }
end
end
end
47
52. 参考書籍
? 幸い、RubyやRailsは非常に参考になる書籍が出
ています
– たのしいRuby 第3版
? 高橋征義、後藤裕蔵（著）、まつもとゆきひろ（監修）
? 出版：ソフトバンククリエイティブ
– RailsによるアジャイルWebアプリケーション開発第4
版
? Sam Ruby, et al.(著), 前田 修吾 (翻訳)
? 出版：オーム社
? 合宿までの間、図書館で借りるなどして読んで
おくこと良いと思います
52
53. まとめ
? Railsについておさらいしました
– MVCアーキテクチャ
– 自動生成で簡単に作れる
? RailsでWebサービスを作りました
– アプリをざっくり設計し、図に起こしました
– 設計をもとにRailsでモデル、ビュー、コントローラを
生成し、中身を実装しました
– App Storeの検索APIを使って、アプリのレビューサイ
トを構築しました
53
![２．プロジェクトの新規作成
? いよいよ実際にプログラムを書いていきます
? まずはプロジェクトの作成
work> rails new appreview
create
create README.rdoc
create Rakefile
…
中略
…
Using sqlite3 (1.3.6)
Using uglifier (1.2.7)
Your bundle is complete! Use `bundle show [gemname]` to
see where a bundled gem is installed.
work> cd appreview
19](https://image.slidesharecdn.com/unicastvol2-120825004516-phpapp01/85/UnicastWS-vol-2-19-320.jpg)
![９．検索処理をコントローラに実装す
る
? appcontrollershomehome_controller.rbを編集し
ます
def search
# 検索する文字列を取得
@query = params[:q]
content = HTTPClient.new.get_content(
"http://itunes.apple.com/search",
"term" => @query, # 検索キーワード
"country" => "jp",
"entity" => "software")
# JSON形式のレスポンスを解析する
json = JSON.parse(content)
# 変数@resultsにアプリのリストを格納する
@results = json["results"]
# app/views/home/search.html.erb を表示
render :action => "search"
end
31](https://image.slidesharecdn.com/unicastvol2-120825004516-phpapp01/85/UnicastWS-vol-2-31-320.jpg)
![１０．検索ページのビューを書く
<h2>検索結果</h2>
<%= form_tag "/search", :method => "get" do %>
<%= search_field_tag "q", @query %>
<%= submit_tag "検索", :name => nil %>
<% end %>
<hr />
<table class="results">
<tr>
<th></th><th>タイトル</th><th>ジャンル</th><th>開発者</th><th>価格</th>
</tr>
<% @results.each do |record| %>
<tr>
<td><%= image_tag record["artworkUrl60"] %></th>
<td><%= record["trackName"] %></td>
<td><%= record["genres"].join(', ') %></td>
<td><%= record["artistName"] %></td>
<td><%= record["formattedPrice"] %></td>
</tr>
<% end %>
</table>
<hr />
<%= link_to "トップ", "/" %>
33](https://image.slidesharecdn.com/unicastvol2-120825004516-phpapp01/85/UnicastWS-vol-2-33-320.jpg)
![１３．レビューページのビューを作成
する
<h2><%= @app.title %> - レビュー</h2>
<p id="notice">
<%= notice %>
</p>
<hr />
<table class="info">
<tr><th>開発者</th><td><%= @app.developer %></td><th>価格</th><td><%= @app.price %>円</td></tr>
</table>
<table class="reviews">
<tr><th>お名前</th><th>レート</th><th>レビュー</th></tr>
<% @app.reviews.each do |r| %>
<tr><td><%= r.name %></td><td><%= "★" * r.rate %></td><td><%= r.comment %></td></tr> <% end %>
</table>
<hr />
<h3>レビューを書く!</h3>
<%= form_for([@app.reviews.build]) do |f| %>
<%= f.hidden_field :app_id, value: @app.id %>
<div class="field">
<%= f.label "お名前" %><br /> <%= f.text_field :name %>
</div>
<div class="field">
<%= f.label "レート" %><br /> <%= f.select :rate,
(0..5).to_a.collect {|i| ["★"*i, i]} %>
</div>
<div class="field">
<%= f.label "レビュー" %><br /> <%= f.text_area :comment %>
</div>
<div class="actions">
<%= f.submit "投稿" %>
</div>
<% end %>
<hr />
<%= link_to "トップ", "/" %>
40](https://image.slidesharecdn.com/unicastvol2-120825004516-phpapp01/85/UnicastWS-vol-2-40-320.jpg)
![１４．レビューページを新規作成する処理
を書く
? appcontrollersapps_controller.rb を編集し、index
メソッドを以下で置き換えます
class AppsController < ApplicationController
# GET /apps
# GET /apps.json
def index
if params[:store_id]
app = App.where("store_id = :store_id", params).first
# もしアプリの情報がDBになければ新規作成する
unless app
app = App.new
app.store_id = params[:store_id].to_i
app.title = params[:title]
app.developer = params[:developer]
app.price = params[:price].to_f
app.save
end
# レビューのページに飛ぶ
redirect_to action: "show", id: app.id
end
end
42](https://image.slidesharecdn.com/unicastvol2-120825004516-phpapp01/85/UnicastWS-vol-2-42-320.jpg)
![１５．レビューページに飛ぶリンクを追加
する
? appviewshomesearch.html.erb を編集します
? アプリタイトルの所にレビューページへのリン
クが張られるように、以下のように修正します
<% @results.each do |record| %>
<tr>
<td><%= image_tag record["artworkUrl60"] %>
<td>
<%= link_to record["trackName"], apps_path(
store_id: record["trackId"],
title: record["trackName"],
developer: record["artistName"],
price: record["price"]) %>
</td>
<td><%= record["genres"].join(', ') %></td>
<td><%= record["artistName"] %></td>
<td><%= record["formattedPrice"] %></td>
</tr>
<% end %>
44](https://image.slidesharecdn.com/unicastvol2-120825004516-phpapp01/85/UnicastWS-vol-2-44-320.jpg)
![１６．レビューを投稿できるよう
にする
? appcontrollersreviews_controller.rb のcreateメ
ソッドを以下のように編集します
def create
@review = Review.new(params[:review])
respond_to do |format|
if @review.save
format.html { redirect_to App.find(@review.app_id),
notice: 'Review was successfully created.' }
format.json { render json: @review, status: :created, location: @review }
else
format.html { render action: "new" }
format.json { render json: @review.errors, status: :unprocessable_entity }
end
end
end
47](https://image.slidesharecdn.com/unicastvol2-120825004516-phpapp01/85/UnicastWS-vol-2-47-320.jpg)
