1. UNICAST・ワークショップ vol.2
Railsを使ったWebサービスの作り方
～Railsの環境でWebサービスを作ってみよう！
～
1

2. 前回のおさらい
• WebSocket
– サーバからブラウザへ好きなタイミングでデータを
送信できる
– Webブラウザによって対応状況がまちまち
• Ruby on Rails
– MVCアーキテクチャ
– アプリに必要な枠組みはRailsが生成
• 開発が楽！
2

3. MVCアーキテクチャ
3

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

6. 準備運動：Rails で Hello world!
6

7. ここまでのまとめ
• アプリに必要なものはRailsが用意してくれる
• railsコマンドはアプリに必要なものを生成する
– モデル、ビュー、コントローラの生成
– サーバの起動
• rake db:migrateコマンドでデータベースのセット
アップが行われる
7

8. 今日の目標
• 実際にWebサービスを作ってWebアプリ開発を
体験します
• 合宿に向けて、Railsの実践的な使い方を学びま
す
8

9. お題
• iOSアプリレビューサイト あぷレビュ！（仮称）
– App Storeからアプリのデータを取得し、レビューを
投稿・共有するサービス
– App Storeにもレビュー投稿機能がありますが、今回
はオリジナルのレビューシステムをRailsで作ります
9

10. お題
• トップページ
10

11. お題
• 検索結果のページ
11

12. お題
• レビュー表示・投稿のページ
12

13. おことわり
• 今回の内容はRubyやHTMLの知識が必要になる部
分が所々に出てきます
• ですが尺の都合上、RubyやHTMLについての説明
は省きます
• よくわからないコードが出てきても、今回はと
りあえずそういうものなのだと思って、後で自
習してください（丸投げ）
13

14. １．アプリの設計
• 作りたいアプリの仕様をざっくりと決めます
• 紙と鉛筆を使って、絵や図を描きながら考えま
しょう
• 開発に関わるメンバー全員で議論しながら考え
ましょう
14

15. １．アプリの設計
• ページフロー
– ページの見た目やページ間のつながりを考えます
– 主にMVCの「ビュー」の部分
15

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

20. ２．Gemの追加
• Rubyのモジュールの単位をGemと呼びます
• たくさんのアプリやライブラリがGemとして公
開されています
• 今回はApp Storeからアプリのデータを取得する
ためにHTTPClientというGemを使います
20

21. ２．Gemの追加
• Railsプロジェクトが使うGemはGemfileという
ファイルに書かれています
• Gemfileの末尾にHTTPClientを追記します
• ファイルの文字コードはUTF-8を指定してくださ
い
…
gem ‘httpclient’
• 終わったらGemをインストールします
appreview> bundle install
21

22. ３．サーバの起動
• 動作確認のためのサーバを起動します
• 新しいコマンドプロンプトを開いて、以下のコ
マンドを実行します
appreview> rails server
• http://localhost:3000 にアクセスできますか？
22

23. ４．トップページ（兼、検索ページ）
を作成
• 今度はトップページ（兼、検索ページ）を作り
ます
• railsコマンドを使って、ページのひな形を生成
します
appreview> rails generate controller Home index search
23

24. ４．トップページ（兼、検索ページ）
を作成
• 先ほどのコマンドで以下のファイルが生成され
ました
– appcontrollershome_controller.rb
• トップページのコントローラ
– appviewshomeindex.html.erb
• トップページのビュー
– appviewshomesearch.html.erb
• 検索ページのビュー
• 生成されたファイルを確認してみてください
24

25. ５．ブラウザで確認
• 次のURLにアクセスして、生成したコントローラ
とビューが無事動くことを確認してみてくださ
い
– http://localhost:3000/home/index
– http://localhost:3000/home/search
25

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

27. ７．トップページのビューを書く
• トップページのビューを書いていきます
• RailsではERB (embedded Ruby)という形式で
ビューを書きます
– ERBでは <% … %>で囲った文字列がRubyの式として解
釈されます
– 例えば <%= 1+1 %> と書いた場合、ブラウザでは2と表
示されます
– つまり、HTMLの中にRubyのプログラムを埋め込める
わけです
27

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

29. ８．検索ページに移動するように
する
• Routing Errorのままでは使い物にならないので、
configroutes.rb を編集して検索ページに飛ぶよ
うにします
Appreview::Application.routes.draw do
get "home/index"
get "home/search"
root :to => 'home#index‘
match ‘/search’ => ‘home#search’
…
• 検索ページに飛ぶようになりましたか？
29

30. ９．検索処理をコントローラに実装す
る
• 検索ページでは、App Storeからアプリデータを
検索し、表示します
• App StoreにはWeｂアプリからアクセスするため
の専用のAPIが公開されています
• 今回はHTTPClientでAPIにアクセスし、アプリの
データを取得します
• 検索処理やDBへのアクセスといった仕事はコン
トローラの役目です
• コントローラに検索処理を実装していきます
30

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

32. １０．検索ページのビューを書く
• 検索処理を実装しましたが、まだビューを書い
ていないので表示できません
• 変数@resultsに格納した検索結果を表形式で出力
するようにします
• appviewshomesearch.html.erb を編集します
32

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

34. １０．検索ページのビューを書く
• ここまですべてがうまくいっていれば、検索窓
から自由にアプリを検索できるようになってい
るはずです
34

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

36. １１．レビューのモデルを生成す
る
• 以下のファイルは生成されたでしょうか
– appmodelsapp.rb
– appmodelsreview.rb
– appcontrollersapps_controller.rb
– appcontrollersreviews_controller.rb
– appviewsappsshow.html.erb
36

37. １２．1対多の関連を設定する
• さて、最初に設計したモデルでは、アプリとレ
ビューは1対多の関連を持っているのでした
• 先ほどのレビューのモデルを生成するコマンド
で、app:references と指定しているのは「Review
はAppと関連している」ということをRailsに伝え
るためだったのです
• 次に「Appは複数のReviewと関連している」とい
うことをRailsに伝えるため、アプリのモデルを
編集します
37

38. １２．1対多の関連を設定する
• appmodelsapp.rb を開いて、以下のように編集
します
class App < ActiveRecord::Base
has_many :reviews
attr_accessible :developer, :price, :store_id, :title
end
• :reviewではなく:reviewsです
• これで1対多の関連が構築されました
38

39. １３．レビューページのビューを作成
する
• レビューを投稿・表示するページのビューを作
成します
• appviewsappsshow.html.erb を編集します
• 長いので、入力が面倒な人はコピペで構いませ
ん
39

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

41. １４．レビューページを新規作成する処理
を書く
• レビューはアプリに関連付けられて投稿されま
す
• レビューを投稿するためには、あらかじめアプ
リの情報がデータベースに登録されている必要
があります
• 検索結果のページからアプリをクリックしたと
き、そのアプリがDBに登録されていなければDB
にアプリ情報を登録する処理を書きます
41

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

43. １５．レビューページに飛ぶリンクを追加
する
• これでレビューページを表示するために必要な
ものが揃いました
• 次に、レビューページに飛ぶためのリンクを検
索結果のページに追加しましょう
43

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

45. １５．レビューページに飛ぶリンクを追加
する
• これで検索結果のページからレビューのページ
に行けるようになりました
• ブラウザで動作を確認してみてください
45

46. １６．投稿したアプリのページに戻るよう
にする
• さて、いよいよ最後です
• レビューの投稿ボタンを押すと、Listing reviews
と表示されるページに飛ぶと思います
• これをレビューの投稿時に、投稿したアプリの
ページに戻るようにします
• これはReviewのコントローラが処理しています
46

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

48. １６．レビューを投稿できるよう
にする
• @review.app_idはReviewオブジェクトの属性app_id
にアクセスするという意味です
• デフォルトでは属性app_idにアクセスするための
設定がReviewオブジェクトにされていないので、
これを修正します
• appmodelsreview.rb を編集します
class Review < ActiveRecord::Base
belongs_to :app
attr_accessible :comment, :name, :rate, :app_id
end
48

49. １６．レビューを投稿できるよう
にする
• これでレビューが投稿できるようになりまし
た！
• すべてがうまくいっているか、ブラウザで確認
してみてください
49

50. １７．さらに拡張
• これで一通りの機能が揃いました
• しかし、まだ課題はあります
– 見た目がまだ不細工です
• HTMLやスタイルシートを工夫して見栄えをよくしてみま
しょう
– レビューが削除ができない
• コントローラに削除の処理を追加してみましょう
– 機能が少なくて、Webサービスとしてはまだまだしょ
ぼい
• 改善点を見つけて、取り組んでみましょう
50

51. スキルアップのために
• Webアプリ開発は非常に広範な知識を要求され
る分野です
• 今回の課題だけでも、Rails、Ruby、HTTP、デー
タベース、HTMLといった知識が必要になりまし
た
• Webアプリ開発を習得するためには、たくさん
書籍を読んで、実際に手を動かしてみるほかあ
りません
51

52. 参考書籍
• 幸い、RubyやRailsは非常に参考になる書籍が出
ています
– たのしいRuby 第3版
• 高橋征義、後藤裕蔵（著）、まつもとゆきひろ（監修）
• 出版：ソフトバンククリエイティブ
– RailsによるアジャイルWebアプリケーション開発第4
版
• Sam Ruby, et al.(著), 前田 修吾 (翻訳)
• 出版：オーム社
• 合宿までの間、図書館で借りるなどして読んで
おくこと良いと思います
52

53. まとめ
• Railsについておさらいしました
– MVCアーキテクチャ
– 自動生成で簡単に作れる
• RailsでWebサービスを作りました
– アプリをざっくり設計し、図に起こしました
– 設計をもとにRailsでモデル、ビュー、コントローラを
生成し、中身を実装しました
– App Storeの検索APIを使って、アプリのレビューサイ
トを構築しました
53

54. おわり
54