20090418 イケテルRails勉強会第1部Rails編

イケテル Rails 勉強会@東京
(1部:Rails編)
2009.04.18

ナカオヒロシ

1部での目的
• ActiveResource という機能をつかって食べログをはじめとした
WebAPI を使えるようになろう!!
• paperclip プラグインを使ってファイルの添付を出来るようになろう!!
• AIR と連携をしてみよう!!
• 習うよりとにかく慣れてみよう!!

Don’t think, feel.
(考えるな、感じるんだ。)

2

1部でやること
Ruby on Rails のプロジェクトを作成
1.
ActiveResource をつかって食べログAPIを表示する
2.
食べログの画面に検索条件を追加する
3.
レストランに1行メモを追加できるようにする
4.
paperclip を使って画像を添付できるようにする
5.
AIR との連携の準備をする
6.

3

Chapter １
Ruby on Rails のプロジェクトを作成

１．Ruby on Rails のプロジェクトを作成
その前に環境の確認

• まずは Rubyのバージョンを確認しましょう。
>ruby -v
ruby 1.8.6 (2008-08-11 patchlevel 287) [i386-mswin32]

• Rails のバージョンは 2.3.2
>rails -v
Rails 2.3.2

• DBはSQLite3 を使用します
>sqlite3 --version
3.6.11

• RailsとSQLite3を接続する sqlite3-rubyは必須
>gem install sqlite3-ruby --version 1.2.3
>gem list sqlite3-ruby ←(Windowsの場合)
>gem list --local | grep sqlite3-ruby ←(Macの場合)
sqlite3-ruby (1.2.3)

5


今回の勉強会では
C:¥rbcフォルダで作業している事を前提に説明します。

Cドライブ直下にrbcフォルダを作成してください。

6

それでは、さっそくRailsプロジェクトを作成しましょう。
以下のコマンドを入力してください。

C:¥Users¥***>cd c:¥rbc
“rails” コマンドでRailsのプロジェクトを作成
“-d” で使用するDBを指定する
c:¥rbc>rails rbc_tabelog -d sqlite3
create
create app/controllers
create app/helpers
(省略)
create log/production.log
create log/development.log
create log/test.log

これでRailsのプロジェクトの作成は完了です。

7

以下の様に、
rbc_tabelog プロジェクトができていれば成功

8

ついでにデータベースも作成
以下のコマンドを入力しましょう

c:¥rbc>cd rbc_tabelog

c:¥rbc¥rbc_tabelog>rake db:create
(in c:/rbc/rbc_tabelog)

“rake db:create” コマンドでデータベースを作成します。
C:¥rbc¥rbc_tabelog¥db フォルダに
development.sqlite3 というファイルができていればオッケー！

コマンドに失敗した場合、rbc_tabelog¥config¥database.yml を編集してください
参考: ¥1部資料¥Chap_1¥rbc_tabelog¥config¥database.yml

9

サーバの起動
c:¥rbc¥rbc_tabelog>ruby script/server
=> Booting Mongrel
=> Rails 2.3.2 application starting on http://0.0.0.0:3000
=> Call with -d to detach
=> Ctrl-C to shutdown server

“ruby script/server” コマンドでサーバを起動します

サーバが実行できたらブラウザで以下のURLを実行してみましょう。
http://localhost:3000

10

この画面が表示されたら準備オッケーです!!

11

2部に進む前にちょっとだけRailsについて説明
Rails は MVC というパターンによって設計、実装していきます。

Model(モデル)･･･データを格納する部分、DBから取り出したデータを保持する
・Railsでは、｢app¥models¥基本名(単数形).rb｣
・NetBeansでは｢モデル¥基本名.rb」で表示されます

View(ビュー)･･･ユーザに向けた見た目(画面表示)部分。ユーザーインターフェース
・Railsでは、｢app¥views¥基本名(複数形)¥画面名.html.erb｣
・NetBeansでは｢ビュー¥基本名(複数形)¥画面名.html.erb ｣

Controller(コントローラ)･･･ユーザからの入力を処理する部分。
・Railsでは、｢app¥views¥基本名(複数形)_controller.rb｣
・NetBeansでは｢コントローラ¥基本名(複数形) _controller.rb ｣

12

Chapter ２
ActiveResource をつかって
食べログAPIを表示する

２．ActiveResource をつかって食べログAPIを表示する
ActiveResource って？
・簡単に説明すると、Webサービスを簡単に処理することが出来るRails の機能です。
Rails2.0以降で追加されました。
→ http://api.rubyonrails.org/classes/ActiveRecord/Base.html#M001298(英語)

今回は｢食べログ.com｣の WebAPI を使って、レストランの一覧の表示を行います
・食べログ.comとは？
日本最大級の口コミグルメサイト
→ http://tabelog.com/
・食べログAPI
レストランの口コミ情報を取得できます
→ http://r.tabelog.com/help/api
→ http://tabelog.com/help/api_manual#rst-api
※マニュアルは｢¥¥1部資料¥_食べログAPIマニュアル｣にも置いています

14


まずはAPI を表示するために
画面を作っていきます

以下のコマンドを実行
c:¥rbc¥rbc_tabelog>ruby script/generate scaffold Restaurant

15

生成された rbc_tabelog/app/models/restaurant.rb を以下のように変更

class Restaurant < ActiveRecord::Base
end

class Restaurant < ActiveResource::Base
end

ActiveResource とは、
簡単にRESTfulなAPIを使えるようにする機能です
ActiveRecord を使うのと同じような感覚でWebAPIが使用できます

16

rbc_tabelog/app/models/restaurant.rb をさらに変更
class Restaurant < ActiveResource::Base
API の URL を設定
self.site = quot;http://api.tabelog.com/quot;

def self.find_restaurants(restautant_params = {})
restautant_params[:Key] = quot;96448b290b6556976f047110914fcf91e88c38b9quot;
Hash.from_xml(
self.find( 食べログAPIのキーを設定します。
:one, ご自分のキーを持っている方は、こちらに入力
:from => quot;/Ver2.1/RestaurantSearch/quot;,
:params => restautant_params
検索メソッドを作成
).to_xml
今回は引数をハッシュで渡します
)
end
Hash.from_xmlでxmlをハッシュに(無理矢理)変換しています。
end

これで model は完成！
17

次は rbc_tabelog/app/controllers/restaurant_controller.rb
先ほどモデルで作ったメソッドを呼び出します
赤字部分を変更していきます

class RestaurantsController < ApplicationController
# GET /restaurants
# GET /restaurants.xml
def index
@restaurants = Restaurant.find_restaurants(request.query_parameters)[quot;restaurantquot;]

respond_to do |format|
request.query_parameters
format.html # index.html.erb
リクエストパラメータを引数にします
format.xml { render :xml => @restaurants }
end
end

･･････
end

今回は index 以外は使わないので削除しましょう(コメントアウトでもいいよ)
最終行の end も削除してしまわないように注意
18

続いて rbc_tabelog/app/views/restaurants/index.html.erb の修正
ココはこんな感じでごっそり置き換えましょう
ActiveResouece から値を取得します。
<h1>RBC食べログ</h1>
<ul>
<% @restaurants[quot;itemquot;].each do |item| -%>
<li>
<%= link_to item[quot;restaurant_namequot;],
item[quot;tabelog_urlquot;], {:target => '_blank'} %>
</li>
<% end -%>
</ul> 食べログAPI結果
<RestaurantInfo>
<Item>
<RestaurantName>千松しま</RestaurantName>
<TabelogUrl>http://r.tabelog.com/miyagi/A0404/A040404/4001636/</TabelogUrl>
<TotalScore>4.67</TotalScore>
<TasteScore>4.64</TasteScore>
<ServiceScore>4.69</ServiceScore>
<MoodScore>4.32</MoodScore>
<Situation>友人・同僚と、デート、接待</Situation>
<DinnerPrice>￥10,000 ～￥14,999</DinnerPrice>
<LunchPrice>￥10,000 ～￥14,999</LunchPrice>
<Category>割烹・小料理</Category>
<Station>東塩釜、本塩釜、西塩釜</Station>
</Item>
19
･･･


サーバーの起動
c:¥rbc¥rbc_tabelog>ruby script/server
=> Booting Mongrel
=> Rails 2.3.2 application starting on http://0.0.0.0:3000
=> Call with -d to detach
=> Ctrl-C to shutdown server

サーバーが実行できたら
http://localhost:3000/restaurants

20


こんな画面が表示されていれば成功です。
Rails だと WebAPI を画面表示させるのはこんなに簡単です。


21

Chapter 3
食べログの画面に検索条件を追加する

3．食べログの画面に検索条件を追加する
このままだとチョット寂しいので検索条件を追加していきましょう
今回追加する条件は以下の3つです。

・都道府県名
・ページ番号

都道府県名はプルダウンの
データを scaffold で作っていきます
ページ番号は最後に簡単につくります

23

さっそく都道府県名の作成
まずは土台を scaffold で作成しちゃいます

c:¥rbc¥rbc_tabelog>
ruby script/generate scaffold Prefecture en:string ja:string

24

続いてデータの中身を作成していきます
c:¥rbc¥rbc_tabelog>ruby script/generate migration InsertPrefectures

25

rbc_tabelog/db/migrate/(数字)_insert_prefectures.rb

class InsertPrefectures < ActiveRecord::Migration
def self.up
items = [
{:en => 'japan', :ja => '全国'},
{:en => 'hokkaido', :ja => '北海道'},
･･･(省略)･･･
{:en => 'kagoshima', :ja => '鹿児島'},
{:en => 'okinawa', :ja => '沖縄'}
]
items.each do |item|
Prefecture.create item
end
end

def self.down
Prefecture.delete_all
end
end

ココは単調かつメンドーな作業なのでコピペしましょう!!
｢¥1部資料¥_insert_prefectures¥insert_prefecturesコピー用.txt｣ 26

以下のコマンドを実行して、データをSQLite3に反映させます。

c:¥rbc¥rbc_tabelog> rake db:migrate
・・・

ブラウザで以下のURLを実行してみましょう。
http://localhost:3000/prefectures
右のような画面が表示されればオッケーです。

27

それでは、さっそく都道府県名とページ数をレストラン画面に組み込んでいきましょう
rbc_tabelog/app/controllers/restaurants_controller.rb の修正
Index メソッドの最初に2行を追加、さらに create メソッドを追加します。

def index
@prefectures = Prefecture.find(:all) Prefecture.find(:all) で先ほど作った
@pages = Array.new(100){|i| i+1} 都道府県名をすべて表示
･･･
end
ページ数は100回カウントアップした
整数をセットしているだけ
def create
restaurants_params = {
:prefecture => params[:prefecture],
:pageNum => params[:pageNum].to_i
}
redirect_to :controller => :restaurants, :action => :index, :params => restaurants_params
end
検索条件を設定して index にリダイレクトするだけ

28

続いてrbc_tabelog/app/views/restaurants/index.html.erb の修正
赤字部分を追記していきます
<% form_tag({}, {:multipart => true} ) do -%>

都道府県：<%= select_tag :prefecture,
options_from_collection_for_select(@prefectures, :en, :ja, params[:prefecture]) %>


ページ：<%= select_tag :pageNum, options_for_select(@pages, params[:pageNum].to_i) %>

<%= submit_tag quot;検索quot;, {:name => quot;searchquot;} %>
<hr />
<ul>
<% @restaurants[“itemquot;].each do |item| -%>
<li>
<%= link_to item[“restaurant_namequot;],
item[“tabelog_urlquot;], {:target => '_blank'} %>
</li>
<% end -%>
</ul>
<% end -%>

最後の “end” も忘れずに!!

29

こんな感じで検索条件部分が表示されていればオッケー。
検索条件を変更して検索ボタンを押してみましょう


30

Chapter 4
レストランに1行メモを
追加できるようにする

4．レストランに1行メモを追加できるようにする
さてさて次は画面に一言メモを残していけるようにしていきましょう。
こちらもサクサク作っていきます

32

まずはメモを残すためのモデルとテーブル作ります
以下のコマンドを実行

c:¥rbc¥rbc_tabelog>
ruby script/generate model Bookmark rcd:string memo:string
・・・
・・・

33

では実際に画面に項目を追加してみます
rbc_tabelog/app/views/restaurants/index.html.erb
赤字部分を追加
･･･(省略)･･･
<hr />
<ul>
<% @restaurants[quot;Itemquot;].each do |item| -%>
<li>
<%= radio_button_tag :rcd, item[quot;rcdquot;] %>
item [“tabelog_urlquot;], {:target => '_blank'} %>
<%= item[”memoquot;] %>
</li>
<% end -%>
</ul>

メモ：<%= text_field_tag :memo %>

<%= submit_tag quot;登録quot;, {:name => quot;createquot;} %>
<% end -%>

34

続いて、コントローラを修正
rbc_tabelog/app/controllers/restaurants_controller.rb
create メソッドの中の赤字部分を追加して画面に入力されたデータを登録できるようにします

def create
if params[:create] && params[:rcd]
bookmark_params = {
登録ボタンが押された
:rcd => params[:rcd],
かつラジオボタンのチェックがあったらたら if の中身を実行
:memo => params[:memo]
}
bookmark = Bookmark.find_or_initialize_by_rcd bookmark_params
bookmark.attributes = bookmark_params
bookmark.save
find_or_initialize_by_XXX
end
データがあれば取得、なければ作成する
restaurant_params = {
:sortOrder => params[:sortOrder],
}
redirect_to :controller => :restaurants, :action => :index, :params => restaurant_params
end

35

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index
@prefectures = Prefecture.find(:all)
@pages = Array.new(100){|i| i+1}
食べログAPIの検索結果分ループを実行
@restaurants[quot;itemquot;].each do |item|
bookmark = Bookmark.find_by_rcd item[quot;rcdquot;]
if bookmark
登録したブックマークを
item[quot;memoquot;] = bookmark.memo
食べログのレストランCDで検索
end
end
食べログAPIの結果に
”memo”として登録しているデータを追加
end
end

36

では画面を確認してみましょう

メモ欄が追加されていますか？
登録してみてください。
結果が各レストラン横に追加されるのを確認できます。

37

Chapter 5
paperclip を使って
画像をアップできるようにする

5．paperclip を使って画像をアップできるようにする
コンテンツの完成も近づいてきました
次は画像のアップを出来るようにしましょう

画像のアップ機能を追加するには paperclip というプラグインを使えば簡単です!!

paperclip
Rails上でファイルのアップロードを簡単に実装できるプラグイン

【参考リンク】
http://www.thoughtbot.com/projects/paperclip
http://github.com/thoughtbot/paperclip/tree/master/README.rdoc

39

さっそく paprtclip プラグインをインストールしましょう

paperclip プラグインは git を使って入手できますが、
最新版はなぜか Windows 環境では動きません…。

ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須)
ruby script/plugin install git://github.com/thoughtbot/paperclip.git

なので古いバージョン 2.2.2 を使います。
資料の中にプラグイン本体を準備しています。
｢¥1部資料¥_paperclipプラグイン¥paperclip｣

ベンダー/plugins にドラッグオンドロップしましょう
rbc_tabelog¥vendor¥plugins にコピーしてもいいです。

40

まずはテーブルに項目を追加します
マイグレーションファイルの作成も paperclip でできちゃいます。

以下のコマンドを実行しましょう

c:¥rbc¥rbc_tabelog> ruby script/generate paperclip Bookmark photo
・・・
・・・

41

ちなみに先ほどのコマンドを実行する事で、
Bookmarks テーブルに画像を保存するためのマイグレーションファイルが追加されました。

rbc_tabelog/db/migrate/数字_add_attachments_photo_to_bookmark.rb

class AddAttachmentsPhotoToBookmark < ActiveRecord::Migration
def self.up
add_column :bookmarks, :photo_file_name, :string
add_column :bookmarks, :photo_content_type, :string
add_column :bookmarks, :photo_file_size, :integer
end

def self.down
remove_column :bookmarks, :photo_file_name
remove_column :bookmarks, :photo_content_type
remove_column :bookmarks, :photo_file_size
end
end

42

次に画像情報を保存するためにモデル修正しましょう。
修正するモデルはメモを書きこめるように作った Bookmark というモデルです。

モデル/bookmark.rb
赤字部分を追記して終わりです。

class Bookmark < ActiveRecord::Base
has_attached_file :photo
end
今回は “photo” という名前で画像を保存する事にします

43

引き続き画面に項目を追加していきましょう

rbc_tabelog/app/views/restaurants/index.html.erb
赤字部分を追加
･･･(省略)･･･
<hr />
<ul>
<% @restaurants[quot;itemquot;].each do |item| -%>
<li>
<%= radio_button_tag :rcd, item[quot;rcd”] %>
<%= item[quot;memoquot;] %>
<% unless item[quot;image_urlquot;].blank? -%>
 <%= image_tag item[quot;image_urlquot;] %>
<% end -%>
画像があれば unless の中を実行
</li>
<% end -%>
</ul>

メモ：<%= text_field_tag :memo %>
画像をアップするファイルフィールド


イメージ：<%= file_field_tag :photo %>

<%= submit_tag quot;登録quot;, {:name => quot;createquot;} %>
44
<% end -%>

んで、コントローラも修正
create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create
if params[:create] && params[:rcd]
bookmark_params = {
カンマも忘れずに追加
:rcd => params[:rcd],
:memo => params[:memo],
:photo => params[:photo]
}
bookmark = Bookmark.find_or_initialize_by_rcd bookmark_params
bookmark.attributes = bookmark_params
bookmark.save
end
restaurant_params = {
:sortOrder => params[:sortOrder],
}
redirect_to :controller => :restaurants, :action => :index, :params => restaurant_params
end

45

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

@restaurants[quot;itemquot;].each do |item|
bookmark = Bookmark.find_by_rcditem[“tabelog_rcdquot;]
if bookmark
item[quot;memoquot;] = bookmark.memo
item[quot;image_urlquot;] = bookmark.photo_file_name ? bookmark.photo.url : nil
end
end
“.url” でアップしたファイルのURL を取得できる
end
end

46

これで写真のアップ機能が追加できました
イメージ欄が追加されていますか？
登録してみてください。

いくつかサンプル画像を用意しています。
｢¥1部資料¥_レストラン画像サンプル｣

結果が各レストラン横に追加されるのを確認できます。

47

Chapter 6
AIR との連携の準備をする

6． AIR との連携の準備をする
最後に 2部で開発する AIR アプリとの連携する部分を作ります。

とは言っても、実はほとんどが出来ています。

Rails と AIR を連携!!

49

具体的にどのようにして連携するのでしょう？

http://localhost:3000/restaurants.xml

左図のような xml が出てきましたよね？
コレをAIRに読み込んでもらいます!!

ちなみに検索条件の追加時に作った
｢都道府県名｣も
以下のURLでXMLを呼び出せちゃいます。
(今回のAIR編では使いません)

http://localhost:3000/prefectures.xml

50

ただ、AIRとの連携で以下の問題があります。

・同じタグ名が重なると同じく処理が面倒
・paperclip で追加した画像のURLが相対URLである
・タグ名にハイフンが含まれているとAIR側の処理が面倒

“Item”タグが下の階層にもあってそれが面倒
<hash> そもそも array のタグが単数系なのも個人的に気持ち悪い
<num-of-result>10483</num-of-result>
<item type=quot;arrayquot;>
<item>
<image-url>/photos/1/original/100x100_233565.jpg</image-url>
<tabelog-mobile-url>
画像のURLがhttpから始まっていない
http://m.tabelog.com/hokkaido/A0101/A010105/1000049/
</tabelog-mobile-url>
<category>フレンチ</category>

タグ名にハイフンが含まれている

51

さっそく問題を解決しましょう
・同じタグ名が重なると同じく処理が面倒、
・要素の名前にハイフンが含まれているとAIR側の処理が面倒
赤字部分を変更、追記してください。

rbc_tabelog/app/controller/restaurant_controller.rb
def index

@restaurants = Restaurant.find_restaurants(request.query_parameters)[“restaurantquot;]
@restaurants[“itemquot;].each do |item|
bookmark = Bookmark.find_by_url item[“tabelog_urlquot;]
画像のURLにhttp://～を追加します
if bookmark
item.attributes[“memoquot;] = bookmark.memo
item.attributes[“image_urlquot;] = bookmark.photo_file_name ? request.protocol + request.host_with_port +
bookmark.photo.url : nil
end
“item”→”items”に変更
end

@restaurants[quot;itemsquot;] = @restaurants[quot;itemquot;]
@restaurants.delete quot;itemquot;

root オプションでxml の先頭タグ名を変更できます
format.xml { render :xml => @restaurants.to_xml(:root => quot;restaurantquot;, :dasherize => false) }
end 52
dasherizeオプションfalseでアンスコをハイフンに変換しなくなります
end

このままだと、画面が動かなくなっちゃうので画面もちょっと修正。

ビュー/restaurants/index.html.erb

<% form_tag({:action => quot;indexquot;}, {:multipart => true}) do -%>
･･･（省略）･･･
<hr />
<ul>
<% @restaurants[quot;itemsquot;].each do |item| -%>
<li>
<%= radio_button_tag :url, item[quot;tabelog_urlquot;] %>
<%= item[quot;memoquot;] %>
<% unless item[quot;image_urlquot;].blank? -%>
 <%= image_tag item[quot;image_urlquot;] %>
<% end -%>
</li>
<% end -%>
</ul>
･･･（省略）･･･
<% end -%>

53

これで以下の問題の対応が完了しました
・同じタグ名が重なると同じく処理が面倒
ついでに先頭タグを”restaurant” に変更してみました
<restaurant>
<items type=quot;arrayquot;>
このタグ名が “Item” → “Items” に変わりました
<item>
<image_url>
http://localhost:3000/photos/1/original/100x100_233565.jpg
</image_url>
<tabelog_mobile_url>
http://m.tabelog.com/hokkaido/A0101/A010105/1000049/
“http://” から始まるURLになりました
</tabelog_mobile_url>
<category>フレンチ</category>

タグ名がアンスコ区切りに戻りました

54

これで、完成しました!!
コレで1部のアプリケーションが完成しました!!

・ActiveResource を使うことで、
簡単に WebAPI を取り込む事が出来ました!!

ぜひ食べログAPIだけでなく、他のWebAPIでも試してみてください。
・amazon
・Twitter
・その他：MA4(Mashup Award 4th)のAPI一覧
http://mashupaward.jp/api/all/

55

ありがとうございました!!

それでは2部にバトンタッチです

20090418 イケテルRails勉強会第1部Rails編

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (7)

Similar a 20090418 イケテルRails勉強会第1部Rails編

Similar a 20090418 イケテルRails勉強会第1部Rails編 (20)