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

56
イケテル Rails 勉強会@東京 (1:Rails) 2009.04.18 ナカオヒロシ

Upload: mochiko-astech

Post on 19-Jan-2015

4.451 views

Category:

Documents


0 download

DESCRIPTION

http://www.ustream.tv/channel/rubybizcommonsで配信した2009年4月18日のイケテルRails勉強会@東京の資料。作成者はナカオ氏。http://twitter.com/nakaohiroshi

TRANSCRIPT

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

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

20090418

ナカオヒロシ

2

1部での目的

bull ActiveResource という機能をつかって食べログをはじめとしたWebAPI を使えるようになろう

bull paperclip プラグインを使ってファイルの添付を出来るようになろう

bull AIR と連携をしてみよう

bull 習うよりとにかく慣れてみよう

Donrsquot think feel(考えるな感じるんだ)

3

1部でやること

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

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

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

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

5 paperclip を使って画像を添付できるようにする

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

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

5

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

その前に環境の確認

bull まずは Rubyのバージョンを確認しましょうgtruby -vruby 186 (2008-08-11 patchlevel 287) [i386-mswin32]

bull Rails のバージョンは 232 gtrails -vRails 232

bull DBはSQLite3 を使用しますgtsqlite3 --version3611

bull RailsとSQLite3を接続する sqlite3-rubyは必須gtgem install sqlite3-ruby --version 123

gtgem list sqlite3-ruby larr(Windowsの場合)gtgem list --local | grep sqlite3-ruby larr(Macの場合)sqlite3-ruby (123)

6

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

今回の勉強会では

Cyenrbcフォルダで作業している事を前提に説明します

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

7

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

それではさっそくRailsプロジェクトを作成しましょう

以下のコマンドを入力してください

CyenUsersyengtcd cyenrbc

cyenrbcgtrails rbc_tabelog -d sqlite3

create

create appcontrollers

create apphelpers

(省略)

create logproductionlog

create logdevelopmentlog

create logtestlog

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

ldquorailsrdquo コマンドでRailsのプロジェクトを作成ldquo-drdquo で使用するDBを指定する

8

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

以下の様に

rbc_tabelog プロジェクトができていれば成功

9

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

ついでにデータベースも作成

以下のコマンドを入力しましょう

cyenrbcgtcd rbc_tabelog

cyenrbcyenrbc_tabeloggtrake dbcreate

(in crbcrbc_tabelog)

ldquorake dbcreaterdquo コマンドでデータベースを作成します

Cyenrbcyenrbc_tabelogyendb フォルダに

developmentsqlite3 というファイルができていればオッケー

コマンドに失敗した場合rbc_tabelogyenconfigyendatabaseyml を編集してください

参考 yen1部資料yenChap_1yenrbc_tabelogyenconfigyendatabaseyml

10

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

サーバの起動

cyenrbcyenrbc_tabeloggtruby scriptserver

=gt Booting Mongrel

=gt Rails 232 application starting on http00003000

=gt Call with -d to detach

=gt Ctrl-C to shutdown server

ldquoruby scriptserverrdquo コマンドでサーバを起動します

サーバが実行できたらブラウザで以下のURLを実行してみましょうhttplocalhost3000

11

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

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

12

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

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

Model(モデル)データを格納する部分DBから取り出したデータを保持する

Railsでは「appyenmodelsyen基本名(単数形)rb」

NetBeansでは「モデルyen基本名rb」で表示されます

View(ビュー)ユーザに向けた見た目(画面表示)部分ユーザーインターフェース

Railsでは「appyenviewsyen基本名(複数形)yen画面名htmlerb」

NetBeansでは「ビューyen基本名(複数形)yen画面名htmlerb 」

Controller(コントローラ)ユーザからの入力を処理する部分

Railsでは「appyenviewsyen基本名(複数形)_controllerrb」

NetBeansでは「コントローラyen基本名(複数形) _controllerrb 」

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

14

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

ActiveResource って

簡単に説明するとWebサービスを簡単に処理することが出来るRails の機能です

Rails20以降で追加されました

rarr httpapirubyonrailsorgclassesActiveRecordBasehtmlM001298(英語)

今回は「食べログcom」のWebAPI を使ってレストランの一覧の表示を行います

食べログcomとは

日本最大級の口コミグルメサイト

rarr httptabelogcom

食べログAPI

レストランの口コミ情報を取得できます

rarr httprtabelogcomhelpapi

rarr httptabelogcomhelpapi_manualrst-api

マニュアルは「yenyen1部資料yen_食べログAPIマニュアル」にも置いています

15

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

まずはAPI を表示するために

画面を作っていきます

以下のコマンドを実行

cyenrbcyenrbc_tabeloggtruby scriptgenerate scaffold Restaurant

16

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

生成された rbc_tabelogappmodelsrestaurantrbを以下のように変更

class Restaurant lt ActiveRecordBase

end

class Restaurant lt ActiveResourceBase

end

ActiveResource とは

簡単にRESTfulなAPIを使えるようにする機能です

ActiveRecord を使うのと同じような感覚でWebAPIが使用できます

17

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

rbc_tabelogappmodelsrestaurantrbをさらに変更

class Restaurant lt ActiveResourceBase

selfsite = httpapitabelogcom

def selffind_restaurants(restautant_params = )

restautant_params[Key] = 96448b290b6556976f047110914fcf91e88c38b9

Hashfrom_xml(

selffind(

one

from =gt Ver21RestaurantSearch

params =gt restautant_params

)to_xml

)

end

end

これで model は完成

API の URL を設定

検索メソッドを作成今回は引数をハッシュで渡します

食べログAPIのキーを設定しますご自分のキーを持っている方はこちらに入力

Hashfrom_xmlでxmlをハッシュに(無理矢理)変換しています

18

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

次は rbc_tabelogappcontrollersrestaurant_controllerrb

先ほどモデルで作ったメソッドを呼び出します赤字部分を変更していきます

class RestaurantsController lt ApplicationController

GET restaurants

GET restaurantsxml

def index

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

end

今回は index 以外は使わないので削除しましょう(コメントアウトでもいいよ)

最終行の end も削除してしまわないように注意

requestquery_parameters

リクエストパラメータを引数にします

19

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

続いて rbc_tabelogappviewsrestaurantsindexhtmlerbの修正

ココはこんな感じでごっそり置き換えましょう

lth1gtRBC食べログlth1gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

ActiveResouece から値を取得します

ltRestaurantInfogt

ltItemgt

ltRestaurantNamegt千松しまltRestaurantNamegt

ltTabelogUrlgthttprtabelogcommiyagiA0404A0404044001636ltTabelogUrlgt

ltTotalScoregt467ltTotalScoregt

ltTasteScoregt464ltTasteScoregt

ltServiceScoregt469ltServiceScoregt

ltMoodScoregt432ltMoodScoregt

ltSituationgt友人同僚とデート接待ltSituationgt

ltDinnerPricegt¥10000 ~¥14999ltDinnerPricegt

ltLunchPricegt¥10000 ~¥14999ltLunchPricegt

ltCategorygt割烹小料理ltCategorygt

ltStationgt東塩釜本塩釜西塩釜ltStationgt

ltItemgt

食べログAPI結果

20

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

サーバーの起動

cyenrbcyenrbc_tabeloggtruby scriptserver

=gt Booting Mongrel

=gt Rails 232 application starting on http00003000

=gt Call with -d to detach

=gt Ctrl-C to shutdown server

サーバーが実行できたら

httplocalhost3000restaurants

21

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

こんな画面が表示されていれば成功です

Rails だと WebAPI を画面表示させるのはこんなに簡単です

httplocalhost3000restaurants

Chapter 3

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

23

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

このままだとチョット寂しいので検索条件を追加していきましょう

今回追加する条件は以下の3つです

都道府県名

ページ番号

都道府県名はプルダウンの

データを scaffold で作っていきます

ページ番号は最後に簡単につくります

24

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

さっそく都道府県名の作成

まずは土台を scaffold で作成しちゃいます

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate scaffold Prefecture enstring jastring

25

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

続いてデータの中身を作成していきます

cyenrbcyenrbc_tabeloggtruby scriptgenerate migration InsertPrefectures

26

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

rbc_tabelogdbmigrate(数字)_insert_prefecturesrb

class InsertPrefectures lt ActiveRecordMigration

def selfup

items = [

en =gt japan ja =gt 全国

en =gt hokkaido ja =gt 北海道

(省略)en =gt kagoshima ja =gt 鹿児島

en =gt okinawa ja =gt 沖縄

]

itemseach do |item|

Prefecturecreate item

end

end

def selfdown

Prefecturedelete_all

end

end

ココは単調かつメンドーな作業なのでコピペしましょう

「yen1部資料yen_insert_prefecturesyeninsert_prefecturesコピー用txt」

27

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

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

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

ブラウザで以下のURLを実行してみましょう

httplocalhost3000prefectures

右のような画面が表示されればオッケーです

28

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

それではさっそく都道府県名とページ数をレストラン画面に組み込んでいきましょう

rbc_tabelogappcontrollersrestaurants_controllerrb の修正

Index メソッドの最初に2行を追加さらに create メソッドを追加します

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

end

def create

restaurants_params =

prefecture =gt params[prefecture]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurants_params

end

検索条件を設定して index にリダイレクトするだけ

ページ数は100回カウントアップした整数をセットしているだけ

Prefecturefind(all) で先ほど作った都道府県名をすべて表示

29

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

続いてrbc_tabelogappviewsrestaurantsindexhtmlerb の修正

赤字部分を追記していきます

lth1gtRBC食べログlth1gt

lt form_tag( multipart =gt true ) do -gt

ltpgt

都道府県lt= select_tag prefecture

options_from_collection_for_select(prefectures en ja params[prefecture]) gt

ltpgt

ltpgt

ページlt= select_tag pageNum options_for_select(pages params[pageNum]to_i) gt

ltpgt

lt= submit_tag 検索 name =gt search gt

lthr gt

ltulgt

lt restaurants[ldquoitem]each do |item| -gt

ltligt

lt= link_to item[ldquorestaurant_name]

item[ldquotabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

lt end -gt

最後の ldquoendrdquo も忘れずに

30

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

こんな感じで検索条件部分が表示されていればオッケー

検索条件を変更して検索ボタンを押してみましょう

httplocalhost3000restaurants

Chapter 4

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

32

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

さてさて次は画面に一言メモを残していけるようにしていきましょうこちらもサクサク作っていきます

33

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

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

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate model Bookmark rcdstring memostring

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

34

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

では実際に画面に項目を追加してみますrbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[Item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcd] gt

lt= link_to item[restaurant_name]

item [ldquotabelog_url] target =gt _blank gt

lt= item[rdquomemo] gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

35

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

続いてコントローラを修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加して画面に入力されたデータを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

登録ボタンが押されたかつラジオボタンのチェックがあったらたら if の中身を実行

find_or_initialize_by_XXX

データがあれば取得なければ作成する

36

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

rbc_tabelogappcontrollersrestaurants_controllerrb

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

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcd item[rcd]

if bookmark

item[memo] = bookmarkmemo

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

食べログAPIの検索結果分ループを実行

食べログAPIの結果にrdquomemordquoとして登録しているデータを追加

登録したブックマークを食べログのレストランCDで検索

37

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

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

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

httplocalhost3000restaurants

Chapter 5

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

39

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

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

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

paperclip

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

【参考リンク】httpwwwthoughtbotcomprojectspaperclip

httpgithubcomthoughtbotpapercliptreemasterREADMErdoc

40

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

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

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

ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須)

ruby scriptplugin install gitgithubcomthoughtbotpaperclipgit

なので古いバージョン 222 を使います資料の中にプラグイン本体を準備しています「yen1部資料yen_paperclipプラグインyenpaperclip」

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

41

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

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

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

cyenrbcyenrbc_tabeloggt ruby scriptgenerate paperclip Bookmark photo

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

42

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

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

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

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

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

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

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

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

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

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

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

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

rbc_tabelogappcontrollersrestaurants_controllerrb

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

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

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

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

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

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

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

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

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

Rails と AIR を連携

50

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

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

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

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

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

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

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

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

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

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

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

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

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

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

55

これで完成しました

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

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

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

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

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

2

1部での目的

bull ActiveResource という機能をつかって食べログをはじめとしたWebAPI を使えるようになろう

bull paperclip プラグインを使ってファイルの添付を出来るようになろう

bull AIR と連携をしてみよう

bull 習うよりとにかく慣れてみよう

Donrsquot think feel(考えるな感じるんだ)

3

1部でやること

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

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

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

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

5 paperclip を使って画像を添付できるようにする

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

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

5

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

その前に環境の確認

bull まずは Rubyのバージョンを確認しましょうgtruby -vruby 186 (2008-08-11 patchlevel 287) [i386-mswin32]

bull Rails のバージョンは 232 gtrails -vRails 232

bull DBはSQLite3 を使用しますgtsqlite3 --version3611

bull RailsとSQLite3を接続する sqlite3-rubyは必須gtgem install sqlite3-ruby --version 123

gtgem list sqlite3-ruby larr(Windowsの場合)gtgem list --local | grep sqlite3-ruby larr(Macの場合)sqlite3-ruby (123)

6

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

今回の勉強会では

Cyenrbcフォルダで作業している事を前提に説明します

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

7

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

それではさっそくRailsプロジェクトを作成しましょう

以下のコマンドを入力してください

CyenUsersyengtcd cyenrbc

cyenrbcgtrails rbc_tabelog -d sqlite3

create

create appcontrollers

create apphelpers

(省略)

create logproductionlog

create logdevelopmentlog

create logtestlog

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

ldquorailsrdquo コマンドでRailsのプロジェクトを作成ldquo-drdquo で使用するDBを指定する

8

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

以下の様に

rbc_tabelog プロジェクトができていれば成功

9

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

ついでにデータベースも作成

以下のコマンドを入力しましょう

cyenrbcgtcd rbc_tabelog

cyenrbcyenrbc_tabeloggtrake dbcreate

(in crbcrbc_tabelog)

ldquorake dbcreaterdquo コマンドでデータベースを作成します

Cyenrbcyenrbc_tabelogyendb フォルダに

developmentsqlite3 というファイルができていればオッケー

コマンドに失敗した場合rbc_tabelogyenconfigyendatabaseyml を編集してください

参考 yen1部資料yenChap_1yenrbc_tabelogyenconfigyendatabaseyml

10

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

サーバの起動

cyenrbcyenrbc_tabeloggtruby scriptserver

=gt Booting Mongrel

=gt Rails 232 application starting on http00003000

=gt Call with -d to detach

=gt Ctrl-C to shutdown server

ldquoruby scriptserverrdquo コマンドでサーバを起動します

サーバが実行できたらブラウザで以下のURLを実行してみましょうhttplocalhost3000

11

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

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

12

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

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

Model(モデル)データを格納する部分DBから取り出したデータを保持する

Railsでは「appyenmodelsyen基本名(単数形)rb」

NetBeansでは「モデルyen基本名rb」で表示されます

View(ビュー)ユーザに向けた見た目(画面表示)部分ユーザーインターフェース

Railsでは「appyenviewsyen基本名(複数形)yen画面名htmlerb」

NetBeansでは「ビューyen基本名(複数形)yen画面名htmlerb 」

Controller(コントローラ)ユーザからの入力を処理する部分

Railsでは「appyenviewsyen基本名(複数形)_controllerrb」

NetBeansでは「コントローラyen基本名(複数形) _controllerrb 」

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

14

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

ActiveResource って

簡単に説明するとWebサービスを簡単に処理することが出来るRails の機能です

Rails20以降で追加されました

rarr httpapirubyonrailsorgclassesActiveRecordBasehtmlM001298(英語)

今回は「食べログcom」のWebAPI を使ってレストランの一覧の表示を行います

食べログcomとは

日本最大級の口コミグルメサイト

rarr httptabelogcom

食べログAPI

レストランの口コミ情報を取得できます

rarr httprtabelogcomhelpapi

rarr httptabelogcomhelpapi_manualrst-api

マニュアルは「yenyen1部資料yen_食べログAPIマニュアル」にも置いています

15

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

まずはAPI を表示するために

画面を作っていきます

以下のコマンドを実行

cyenrbcyenrbc_tabeloggtruby scriptgenerate scaffold Restaurant

16

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

生成された rbc_tabelogappmodelsrestaurantrbを以下のように変更

class Restaurant lt ActiveRecordBase

end

class Restaurant lt ActiveResourceBase

end

ActiveResource とは

簡単にRESTfulなAPIを使えるようにする機能です

ActiveRecord を使うのと同じような感覚でWebAPIが使用できます

17

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

rbc_tabelogappmodelsrestaurantrbをさらに変更

class Restaurant lt ActiveResourceBase

selfsite = httpapitabelogcom

def selffind_restaurants(restautant_params = )

restautant_params[Key] = 96448b290b6556976f047110914fcf91e88c38b9

Hashfrom_xml(

selffind(

one

from =gt Ver21RestaurantSearch

params =gt restautant_params

)to_xml

)

end

end

これで model は完成

API の URL を設定

検索メソッドを作成今回は引数をハッシュで渡します

食べログAPIのキーを設定しますご自分のキーを持っている方はこちらに入力

Hashfrom_xmlでxmlをハッシュに(無理矢理)変換しています

18

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

次は rbc_tabelogappcontrollersrestaurant_controllerrb

先ほどモデルで作ったメソッドを呼び出します赤字部分を変更していきます

class RestaurantsController lt ApplicationController

GET restaurants

GET restaurantsxml

def index

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

end

今回は index 以外は使わないので削除しましょう(コメントアウトでもいいよ)

最終行の end も削除してしまわないように注意

requestquery_parameters

リクエストパラメータを引数にします

19

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

続いて rbc_tabelogappviewsrestaurantsindexhtmlerbの修正

ココはこんな感じでごっそり置き換えましょう

lth1gtRBC食べログlth1gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

ActiveResouece から値を取得します

ltRestaurantInfogt

ltItemgt

ltRestaurantNamegt千松しまltRestaurantNamegt

ltTabelogUrlgthttprtabelogcommiyagiA0404A0404044001636ltTabelogUrlgt

ltTotalScoregt467ltTotalScoregt

ltTasteScoregt464ltTasteScoregt

ltServiceScoregt469ltServiceScoregt

ltMoodScoregt432ltMoodScoregt

ltSituationgt友人同僚とデート接待ltSituationgt

ltDinnerPricegt¥10000 ~¥14999ltDinnerPricegt

ltLunchPricegt¥10000 ~¥14999ltLunchPricegt

ltCategorygt割烹小料理ltCategorygt

ltStationgt東塩釜本塩釜西塩釜ltStationgt

ltItemgt

食べログAPI結果

20

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

サーバーの起動

cyenrbcyenrbc_tabeloggtruby scriptserver

=gt Booting Mongrel

=gt Rails 232 application starting on http00003000

=gt Call with -d to detach

=gt Ctrl-C to shutdown server

サーバーが実行できたら

httplocalhost3000restaurants

21

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

こんな画面が表示されていれば成功です

Rails だと WebAPI を画面表示させるのはこんなに簡単です

httplocalhost3000restaurants

Chapter 3

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

23

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

このままだとチョット寂しいので検索条件を追加していきましょう

今回追加する条件は以下の3つです

都道府県名

ページ番号

都道府県名はプルダウンの

データを scaffold で作っていきます

ページ番号は最後に簡単につくります

24

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

さっそく都道府県名の作成

まずは土台を scaffold で作成しちゃいます

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate scaffold Prefecture enstring jastring

25

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

続いてデータの中身を作成していきます

cyenrbcyenrbc_tabeloggtruby scriptgenerate migration InsertPrefectures

26

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

rbc_tabelogdbmigrate(数字)_insert_prefecturesrb

class InsertPrefectures lt ActiveRecordMigration

def selfup

items = [

en =gt japan ja =gt 全国

en =gt hokkaido ja =gt 北海道

(省略)en =gt kagoshima ja =gt 鹿児島

en =gt okinawa ja =gt 沖縄

]

itemseach do |item|

Prefecturecreate item

end

end

def selfdown

Prefecturedelete_all

end

end

ココは単調かつメンドーな作業なのでコピペしましょう

「yen1部資料yen_insert_prefecturesyeninsert_prefecturesコピー用txt」

27

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

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

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

ブラウザで以下のURLを実行してみましょう

httplocalhost3000prefectures

右のような画面が表示されればオッケーです

28

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

それではさっそく都道府県名とページ数をレストラン画面に組み込んでいきましょう

rbc_tabelogappcontrollersrestaurants_controllerrb の修正

Index メソッドの最初に2行を追加さらに create メソッドを追加します

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

end

def create

restaurants_params =

prefecture =gt params[prefecture]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurants_params

end

検索条件を設定して index にリダイレクトするだけ

ページ数は100回カウントアップした整数をセットしているだけ

Prefecturefind(all) で先ほど作った都道府県名をすべて表示

29

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

続いてrbc_tabelogappviewsrestaurantsindexhtmlerb の修正

赤字部分を追記していきます

lth1gtRBC食べログlth1gt

lt form_tag( multipart =gt true ) do -gt

ltpgt

都道府県lt= select_tag prefecture

options_from_collection_for_select(prefectures en ja params[prefecture]) gt

ltpgt

ltpgt

ページlt= select_tag pageNum options_for_select(pages params[pageNum]to_i) gt

ltpgt

lt= submit_tag 検索 name =gt search gt

lthr gt

ltulgt

lt restaurants[ldquoitem]each do |item| -gt

ltligt

lt= link_to item[ldquorestaurant_name]

item[ldquotabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

lt end -gt

最後の ldquoendrdquo も忘れずに

30

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

こんな感じで検索条件部分が表示されていればオッケー

検索条件を変更して検索ボタンを押してみましょう

httplocalhost3000restaurants

Chapter 4

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

32

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

さてさて次は画面に一言メモを残していけるようにしていきましょうこちらもサクサク作っていきます

33

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

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

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate model Bookmark rcdstring memostring

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

34

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

では実際に画面に項目を追加してみますrbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[Item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcd] gt

lt= link_to item[restaurant_name]

item [ldquotabelog_url] target =gt _blank gt

lt= item[rdquomemo] gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

35

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

続いてコントローラを修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加して画面に入力されたデータを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

登録ボタンが押されたかつラジオボタンのチェックがあったらたら if の中身を実行

find_or_initialize_by_XXX

データがあれば取得なければ作成する

36

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

rbc_tabelogappcontrollersrestaurants_controllerrb

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

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcd item[rcd]

if bookmark

item[memo] = bookmarkmemo

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

食べログAPIの検索結果分ループを実行

食べログAPIの結果にrdquomemordquoとして登録しているデータを追加

登録したブックマークを食べログのレストランCDで検索

37

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

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

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

httplocalhost3000restaurants

Chapter 5

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

39

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

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

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

paperclip

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

【参考リンク】httpwwwthoughtbotcomprojectspaperclip

httpgithubcomthoughtbotpapercliptreemasterREADMErdoc

40

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

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

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

ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須)

ruby scriptplugin install gitgithubcomthoughtbotpaperclipgit

なので古いバージョン 222 を使います資料の中にプラグイン本体を準備しています「yen1部資料yen_paperclipプラグインyenpaperclip」

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

41

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

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

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

cyenrbcyenrbc_tabeloggt ruby scriptgenerate paperclip Bookmark photo

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

42

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

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

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

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

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

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

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

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

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

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

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

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

rbc_tabelogappcontrollersrestaurants_controllerrb

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

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

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

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

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

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

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

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

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

Rails と AIR を連携

50

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

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

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

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

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

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

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

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

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

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

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

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

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

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

55

これで完成しました

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

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

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

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

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

3

1部でやること

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

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

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

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

5 paperclip を使って画像を添付できるようにする

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

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

5

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

その前に環境の確認

bull まずは Rubyのバージョンを確認しましょうgtruby -vruby 186 (2008-08-11 patchlevel 287) [i386-mswin32]

bull Rails のバージョンは 232 gtrails -vRails 232

bull DBはSQLite3 を使用しますgtsqlite3 --version3611

bull RailsとSQLite3を接続する sqlite3-rubyは必須gtgem install sqlite3-ruby --version 123

gtgem list sqlite3-ruby larr(Windowsの場合)gtgem list --local | grep sqlite3-ruby larr(Macの場合)sqlite3-ruby (123)

6

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

今回の勉強会では

Cyenrbcフォルダで作業している事を前提に説明します

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

7

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

それではさっそくRailsプロジェクトを作成しましょう

以下のコマンドを入力してください

CyenUsersyengtcd cyenrbc

cyenrbcgtrails rbc_tabelog -d sqlite3

create

create appcontrollers

create apphelpers

(省略)

create logproductionlog

create logdevelopmentlog

create logtestlog

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

ldquorailsrdquo コマンドでRailsのプロジェクトを作成ldquo-drdquo で使用するDBを指定する

8

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

以下の様に

rbc_tabelog プロジェクトができていれば成功

9

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

ついでにデータベースも作成

以下のコマンドを入力しましょう

cyenrbcgtcd rbc_tabelog

cyenrbcyenrbc_tabeloggtrake dbcreate

(in crbcrbc_tabelog)

ldquorake dbcreaterdquo コマンドでデータベースを作成します

Cyenrbcyenrbc_tabelogyendb フォルダに

developmentsqlite3 というファイルができていればオッケー

コマンドに失敗した場合rbc_tabelogyenconfigyendatabaseyml を編集してください

参考 yen1部資料yenChap_1yenrbc_tabelogyenconfigyendatabaseyml

10

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

サーバの起動

cyenrbcyenrbc_tabeloggtruby scriptserver

=gt Booting Mongrel

=gt Rails 232 application starting on http00003000

=gt Call with -d to detach

=gt Ctrl-C to shutdown server

ldquoruby scriptserverrdquo コマンドでサーバを起動します

サーバが実行できたらブラウザで以下のURLを実行してみましょうhttplocalhost3000

11

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

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

12

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

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

Model(モデル)データを格納する部分DBから取り出したデータを保持する

Railsでは「appyenmodelsyen基本名(単数形)rb」

NetBeansでは「モデルyen基本名rb」で表示されます

View(ビュー)ユーザに向けた見た目(画面表示)部分ユーザーインターフェース

Railsでは「appyenviewsyen基本名(複数形)yen画面名htmlerb」

NetBeansでは「ビューyen基本名(複数形)yen画面名htmlerb 」

Controller(コントローラ)ユーザからの入力を処理する部分

Railsでは「appyenviewsyen基本名(複数形)_controllerrb」

NetBeansでは「コントローラyen基本名(複数形) _controllerrb 」

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

14

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

ActiveResource って

簡単に説明するとWebサービスを簡単に処理することが出来るRails の機能です

Rails20以降で追加されました

rarr httpapirubyonrailsorgclassesActiveRecordBasehtmlM001298(英語)

今回は「食べログcom」のWebAPI を使ってレストランの一覧の表示を行います

食べログcomとは

日本最大級の口コミグルメサイト

rarr httptabelogcom

食べログAPI

レストランの口コミ情報を取得できます

rarr httprtabelogcomhelpapi

rarr httptabelogcomhelpapi_manualrst-api

マニュアルは「yenyen1部資料yen_食べログAPIマニュアル」にも置いています

15

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

まずはAPI を表示するために

画面を作っていきます

以下のコマンドを実行

cyenrbcyenrbc_tabeloggtruby scriptgenerate scaffold Restaurant

16

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

生成された rbc_tabelogappmodelsrestaurantrbを以下のように変更

class Restaurant lt ActiveRecordBase

end

class Restaurant lt ActiveResourceBase

end

ActiveResource とは

簡単にRESTfulなAPIを使えるようにする機能です

ActiveRecord を使うのと同じような感覚でWebAPIが使用できます

17

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

rbc_tabelogappmodelsrestaurantrbをさらに変更

class Restaurant lt ActiveResourceBase

selfsite = httpapitabelogcom

def selffind_restaurants(restautant_params = )

restautant_params[Key] = 96448b290b6556976f047110914fcf91e88c38b9

Hashfrom_xml(

selffind(

one

from =gt Ver21RestaurantSearch

params =gt restautant_params

)to_xml

)

end

end

これで model は完成

API の URL を設定

検索メソッドを作成今回は引数をハッシュで渡します

食べログAPIのキーを設定しますご自分のキーを持っている方はこちらに入力

Hashfrom_xmlでxmlをハッシュに(無理矢理)変換しています

18

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

次は rbc_tabelogappcontrollersrestaurant_controllerrb

先ほどモデルで作ったメソッドを呼び出します赤字部分を変更していきます

class RestaurantsController lt ApplicationController

GET restaurants

GET restaurantsxml

def index

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

end

今回は index 以外は使わないので削除しましょう(コメントアウトでもいいよ)

最終行の end も削除してしまわないように注意

requestquery_parameters

リクエストパラメータを引数にします

19

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

続いて rbc_tabelogappviewsrestaurantsindexhtmlerbの修正

ココはこんな感じでごっそり置き換えましょう

lth1gtRBC食べログlth1gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

ActiveResouece から値を取得します

ltRestaurantInfogt

ltItemgt

ltRestaurantNamegt千松しまltRestaurantNamegt

ltTabelogUrlgthttprtabelogcommiyagiA0404A0404044001636ltTabelogUrlgt

ltTotalScoregt467ltTotalScoregt

ltTasteScoregt464ltTasteScoregt

ltServiceScoregt469ltServiceScoregt

ltMoodScoregt432ltMoodScoregt

ltSituationgt友人同僚とデート接待ltSituationgt

ltDinnerPricegt¥10000 ~¥14999ltDinnerPricegt

ltLunchPricegt¥10000 ~¥14999ltLunchPricegt

ltCategorygt割烹小料理ltCategorygt

ltStationgt東塩釜本塩釜西塩釜ltStationgt

ltItemgt

食べログAPI結果

20

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

サーバーの起動

cyenrbcyenrbc_tabeloggtruby scriptserver

=gt Booting Mongrel

=gt Rails 232 application starting on http00003000

=gt Call with -d to detach

=gt Ctrl-C to shutdown server

サーバーが実行できたら

httplocalhost3000restaurants

21

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

こんな画面が表示されていれば成功です

Rails だと WebAPI を画面表示させるのはこんなに簡単です

httplocalhost3000restaurants

Chapter 3

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

23

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

このままだとチョット寂しいので検索条件を追加していきましょう

今回追加する条件は以下の3つです

都道府県名

ページ番号

都道府県名はプルダウンの

データを scaffold で作っていきます

ページ番号は最後に簡単につくります

24

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

さっそく都道府県名の作成

まずは土台を scaffold で作成しちゃいます

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate scaffold Prefecture enstring jastring

25

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

続いてデータの中身を作成していきます

cyenrbcyenrbc_tabeloggtruby scriptgenerate migration InsertPrefectures

26

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

rbc_tabelogdbmigrate(数字)_insert_prefecturesrb

class InsertPrefectures lt ActiveRecordMigration

def selfup

items = [

en =gt japan ja =gt 全国

en =gt hokkaido ja =gt 北海道

(省略)en =gt kagoshima ja =gt 鹿児島

en =gt okinawa ja =gt 沖縄

]

itemseach do |item|

Prefecturecreate item

end

end

def selfdown

Prefecturedelete_all

end

end

ココは単調かつメンドーな作業なのでコピペしましょう

「yen1部資料yen_insert_prefecturesyeninsert_prefecturesコピー用txt」

27

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

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

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

ブラウザで以下のURLを実行してみましょう

httplocalhost3000prefectures

右のような画面が表示されればオッケーです

28

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

それではさっそく都道府県名とページ数をレストラン画面に組み込んでいきましょう

rbc_tabelogappcontrollersrestaurants_controllerrb の修正

Index メソッドの最初に2行を追加さらに create メソッドを追加します

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

end

def create

restaurants_params =

prefecture =gt params[prefecture]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurants_params

end

検索条件を設定して index にリダイレクトするだけ

ページ数は100回カウントアップした整数をセットしているだけ

Prefecturefind(all) で先ほど作った都道府県名をすべて表示

29

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

続いてrbc_tabelogappviewsrestaurantsindexhtmlerb の修正

赤字部分を追記していきます

lth1gtRBC食べログlth1gt

lt form_tag( multipart =gt true ) do -gt

ltpgt

都道府県lt= select_tag prefecture

options_from_collection_for_select(prefectures en ja params[prefecture]) gt

ltpgt

ltpgt

ページlt= select_tag pageNum options_for_select(pages params[pageNum]to_i) gt

ltpgt

lt= submit_tag 検索 name =gt search gt

lthr gt

ltulgt

lt restaurants[ldquoitem]each do |item| -gt

ltligt

lt= link_to item[ldquorestaurant_name]

item[ldquotabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

lt end -gt

最後の ldquoendrdquo も忘れずに

30

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

こんな感じで検索条件部分が表示されていればオッケー

検索条件を変更して検索ボタンを押してみましょう

httplocalhost3000restaurants

Chapter 4

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

32

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

さてさて次は画面に一言メモを残していけるようにしていきましょうこちらもサクサク作っていきます

33

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

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

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate model Bookmark rcdstring memostring

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

34

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

では実際に画面に項目を追加してみますrbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[Item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcd] gt

lt= link_to item[restaurant_name]

item [ldquotabelog_url] target =gt _blank gt

lt= item[rdquomemo] gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

35

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

続いてコントローラを修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加して画面に入力されたデータを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

登録ボタンが押されたかつラジオボタンのチェックがあったらたら if の中身を実行

find_or_initialize_by_XXX

データがあれば取得なければ作成する

36

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

rbc_tabelogappcontrollersrestaurants_controllerrb

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

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcd item[rcd]

if bookmark

item[memo] = bookmarkmemo

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

食べログAPIの検索結果分ループを実行

食べログAPIの結果にrdquomemordquoとして登録しているデータを追加

登録したブックマークを食べログのレストランCDで検索

37

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

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

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

httplocalhost3000restaurants

Chapter 5

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

39

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

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

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

paperclip

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

【参考リンク】httpwwwthoughtbotcomprojectspaperclip

httpgithubcomthoughtbotpapercliptreemasterREADMErdoc

40

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

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

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

ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須)

ruby scriptplugin install gitgithubcomthoughtbotpaperclipgit

なので古いバージョン 222 を使います資料の中にプラグイン本体を準備しています「yen1部資料yen_paperclipプラグインyenpaperclip」

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

41

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

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

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

cyenrbcyenrbc_tabeloggt ruby scriptgenerate paperclip Bookmark photo

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

42

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

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

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

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

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

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

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

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

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

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

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

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

rbc_tabelogappcontrollersrestaurants_controllerrb

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

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

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

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

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

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

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

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

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

Rails と AIR を連携

50

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

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

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

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

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

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

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

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

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

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

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

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

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

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

55

これで完成しました

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

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

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

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

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

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

5

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

その前に環境の確認

bull まずは Rubyのバージョンを確認しましょうgtruby -vruby 186 (2008-08-11 patchlevel 287) [i386-mswin32]

bull Rails のバージョンは 232 gtrails -vRails 232

bull DBはSQLite3 を使用しますgtsqlite3 --version3611

bull RailsとSQLite3を接続する sqlite3-rubyは必須gtgem install sqlite3-ruby --version 123

gtgem list sqlite3-ruby larr(Windowsの場合)gtgem list --local | grep sqlite3-ruby larr(Macの場合)sqlite3-ruby (123)

6

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

今回の勉強会では

Cyenrbcフォルダで作業している事を前提に説明します

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

7

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

それではさっそくRailsプロジェクトを作成しましょう

以下のコマンドを入力してください

CyenUsersyengtcd cyenrbc

cyenrbcgtrails rbc_tabelog -d sqlite3

create

create appcontrollers

create apphelpers

(省略)

create logproductionlog

create logdevelopmentlog

create logtestlog

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

ldquorailsrdquo コマンドでRailsのプロジェクトを作成ldquo-drdquo で使用するDBを指定する

8

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

以下の様に

rbc_tabelog プロジェクトができていれば成功

9

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

ついでにデータベースも作成

以下のコマンドを入力しましょう

cyenrbcgtcd rbc_tabelog

cyenrbcyenrbc_tabeloggtrake dbcreate

(in crbcrbc_tabelog)

ldquorake dbcreaterdquo コマンドでデータベースを作成します

Cyenrbcyenrbc_tabelogyendb フォルダに

developmentsqlite3 というファイルができていればオッケー

コマンドに失敗した場合rbc_tabelogyenconfigyendatabaseyml を編集してください

参考 yen1部資料yenChap_1yenrbc_tabelogyenconfigyendatabaseyml

10

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

サーバの起動

cyenrbcyenrbc_tabeloggtruby scriptserver

=gt Booting Mongrel

=gt Rails 232 application starting on http00003000

=gt Call with -d to detach

=gt Ctrl-C to shutdown server

ldquoruby scriptserverrdquo コマンドでサーバを起動します

サーバが実行できたらブラウザで以下のURLを実行してみましょうhttplocalhost3000

11

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

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

12

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

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

Model(モデル)データを格納する部分DBから取り出したデータを保持する

Railsでは「appyenmodelsyen基本名(単数形)rb」

NetBeansでは「モデルyen基本名rb」で表示されます

View(ビュー)ユーザに向けた見た目(画面表示)部分ユーザーインターフェース

Railsでは「appyenviewsyen基本名(複数形)yen画面名htmlerb」

NetBeansでは「ビューyen基本名(複数形)yen画面名htmlerb 」

Controller(コントローラ)ユーザからの入力を処理する部分

Railsでは「appyenviewsyen基本名(複数形)_controllerrb」

NetBeansでは「コントローラyen基本名(複数形) _controllerrb 」

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

14

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

ActiveResource って

簡単に説明するとWebサービスを簡単に処理することが出来るRails の機能です

Rails20以降で追加されました

rarr httpapirubyonrailsorgclassesActiveRecordBasehtmlM001298(英語)

今回は「食べログcom」のWebAPI を使ってレストランの一覧の表示を行います

食べログcomとは

日本最大級の口コミグルメサイト

rarr httptabelogcom

食べログAPI

レストランの口コミ情報を取得できます

rarr httprtabelogcomhelpapi

rarr httptabelogcomhelpapi_manualrst-api

マニュアルは「yenyen1部資料yen_食べログAPIマニュアル」にも置いています

15

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

まずはAPI を表示するために

画面を作っていきます

以下のコマンドを実行

cyenrbcyenrbc_tabeloggtruby scriptgenerate scaffold Restaurant

16

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

生成された rbc_tabelogappmodelsrestaurantrbを以下のように変更

class Restaurant lt ActiveRecordBase

end

class Restaurant lt ActiveResourceBase

end

ActiveResource とは

簡単にRESTfulなAPIを使えるようにする機能です

ActiveRecord を使うのと同じような感覚でWebAPIが使用できます

17

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

rbc_tabelogappmodelsrestaurantrbをさらに変更

class Restaurant lt ActiveResourceBase

selfsite = httpapitabelogcom

def selffind_restaurants(restautant_params = )

restautant_params[Key] = 96448b290b6556976f047110914fcf91e88c38b9

Hashfrom_xml(

selffind(

one

from =gt Ver21RestaurantSearch

params =gt restautant_params

)to_xml

)

end

end

これで model は完成

API の URL を設定

検索メソッドを作成今回は引数をハッシュで渡します

食べログAPIのキーを設定しますご自分のキーを持っている方はこちらに入力

Hashfrom_xmlでxmlをハッシュに(無理矢理)変換しています

18

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

次は rbc_tabelogappcontrollersrestaurant_controllerrb

先ほどモデルで作ったメソッドを呼び出します赤字部分を変更していきます

class RestaurantsController lt ApplicationController

GET restaurants

GET restaurantsxml

def index

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

end

今回は index 以外は使わないので削除しましょう(コメントアウトでもいいよ)

最終行の end も削除してしまわないように注意

requestquery_parameters

リクエストパラメータを引数にします

19

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

続いて rbc_tabelogappviewsrestaurantsindexhtmlerbの修正

ココはこんな感じでごっそり置き換えましょう

lth1gtRBC食べログlth1gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

ActiveResouece から値を取得します

ltRestaurantInfogt

ltItemgt

ltRestaurantNamegt千松しまltRestaurantNamegt

ltTabelogUrlgthttprtabelogcommiyagiA0404A0404044001636ltTabelogUrlgt

ltTotalScoregt467ltTotalScoregt

ltTasteScoregt464ltTasteScoregt

ltServiceScoregt469ltServiceScoregt

ltMoodScoregt432ltMoodScoregt

ltSituationgt友人同僚とデート接待ltSituationgt

ltDinnerPricegt¥10000 ~¥14999ltDinnerPricegt

ltLunchPricegt¥10000 ~¥14999ltLunchPricegt

ltCategorygt割烹小料理ltCategorygt

ltStationgt東塩釜本塩釜西塩釜ltStationgt

ltItemgt

食べログAPI結果

20

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

サーバーの起動

cyenrbcyenrbc_tabeloggtruby scriptserver

=gt Booting Mongrel

=gt Rails 232 application starting on http00003000

=gt Call with -d to detach

=gt Ctrl-C to shutdown server

サーバーが実行できたら

httplocalhost3000restaurants

21

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

こんな画面が表示されていれば成功です

Rails だと WebAPI を画面表示させるのはこんなに簡単です

httplocalhost3000restaurants

Chapter 3

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

23

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

このままだとチョット寂しいので検索条件を追加していきましょう

今回追加する条件は以下の3つです

都道府県名

ページ番号

都道府県名はプルダウンの

データを scaffold で作っていきます

ページ番号は最後に簡単につくります

24

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

さっそく都道府県名の作成

まずは土台を scaffold で作成しちゃいます

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate scaffold Prefecture enstring jastring

25

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

続いてデータの中身を作成していきます

cyenrbcyenrbc_tabeloggtruby scriptgenerate migration InsertPrefectures

26

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

rbc_tabelogdbmigrate(数字)_insert_prefecturesrb

class InsertPrefectures lt ActiveRecordMigration

def selfup

items = [

en =gt japan ja =gt 全国

en =gt hokkaido ja =gt 北海道

(省略)en =gt kagoshima ja =gt 鹿児島

en =gt okinawa ja =gt 沖縄

]

itemseach do |item|

Prefecturecreate item

end

end

def selfdown

Prefecturedelete_all

end

end

ココは単調かつメンドーな作業なのでコピペしましょう

「yen1部資料yen_insert_prefecturesyeninsert_prefecturesコピー用txt」

27

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

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

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

ブラウザで以下のURLを実行してみましょう

httplocalhost3000prefectures

右のような画面が表示されればオッケーです

28

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

それではさっそく都道府県名とページ数をレストラン画面に組み込んでいきましょう

rbc_tabelogappcontrollersrestaurants_controllerrb の修正

Index メソッドの最初に2行を追加さらに create メソッドを追加します

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

end

def create

restaurants_params =

prefecture =gt params[prefecture]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurants_params

end

検索条件を設定して index にリダイレクトするだけ

ページ数は100回カウントアップした整数をセットしているだけ

Prefecturefind(all) で先ほど作った都道府県名をすべて表示

29

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

続いてrbc_tabelogappviewsrestaurantsindexhtmlerb の修正

赤字部分を追記していきます

lth1gtRBC食べログlth1gt

lt form_tag( multipart =gt true ) do -gt

ltpgt

都道府県lt= select_tag prefecture

options_from_collection_for_select(prefectures en ja params[prefecture]) gt

ltpgt

ltpgt

ページlt= select_tag pageNum options_for_select(pages params[pageNum]to_i) gt

ltpgt

lt= submit_tag 検索 name =gt search gt

lthr gt

ltulgt

lt restaurants[ldquoitem]each do |item| -gt

ltligt

lt= link_to item[ldquorestaurant_name]

item[ldquotabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

lt end -gt

最後の ldquoendrdquo も忘れずに

30

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

こんな感じで検索条件部分が表示されていればオッケー

検索条件を変更して検索ボタンを押してみましょう

httplocalhost3000restaurants

Chapter 4

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

32

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

さてさて次は画面に一言メモを残していけるようにしていきましょうこちらもサクサク作っていきます

33

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

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

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate model Bookmark rcdstring memostring

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

34

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

では実際に画面に項目を追加してみますrbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[Item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcd] gt

lt= link_to item[restaurant_name]

item [ldquotabelog_url] target =gt _blank gt

lt= item[rdquomemo] gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

35

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

続いてコントローラを修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加して画面に入力されたデータを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

登録ボタンが押されたかつラジオボタンのチェックがあったらたら if の中身を実行

find_or_initialize_by_XXX

データがあれば取得なければ作成する

36

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

rbc_tabelogappcontrollersrestaurants_controllerrb

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

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcd item[rcd]

if bookmark

item[memo] = bookmarkmemo

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

食べログAPIの検索結果分ループを実行

食べログAPIの結果にrdquomemordquoとして登録しているデータを追加

登録したブックマークを食べログのレストランCDで検索

37

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

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

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

httplocalhost3000restaurants

Chapter 5

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

39

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

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

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

paperclip

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

【参考リンク】httpwwwthoughtbotcomprojectspaperclip

httpgithubcomthoughtbotpapercliptreemasterREADMErdoc

40

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

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

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

ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須)

ruby scriptplugin install gitgithubcomthoughtbotpaperclipgit

なので古いバージョン 222 を使います資料の中にプラグイン本体を準備しています「yen1部資料yen_paperclipプラグインyenpaperclip」

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

41

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

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

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

cyenrbcyenrbc_tabeloggt ruby scriptgenerate paperclip Bookmark photo

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

42

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

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

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

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

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

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

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

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

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

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

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

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

rbc_tabelogappcontrollersrestaurants_controllerrb

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

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

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

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

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

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

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

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

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

Rails と AIR を連携

50

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

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

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

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

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

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

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

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

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

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

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

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

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

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

55

これで完成しました

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

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

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

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

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

5

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

その前に環境の確認

bull まずは Rubyのバージョンを確認しましょうgtruby -vruby 186 (2008-08-11 patchlevel 287) [i386-mswin32]

bull Rails のバージョンは 232 gtrails -vRails 232

bull DBはSQLite3 を使用しますgtsqlite3 --version3611

bull RailsとSQLite3を接続する sqlite3-rubyは必須gtgem install sqlite3-ruby --version 123

gtgem list sqlite3-ruby larr(Windowsの場合)gtgem list --local | grep sqlite3-ruby larr(Macの場合)sqlite3-ruby (123)

6

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

今回の勉強会では

Cyenrbcフォルダで作業している事を前提に説明します

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

7

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

それではさっそくRailsプロジェクトを作成しましょう

以下のコマンドを入力してください

CyenUsersyengtcd cyenrbc

cyenrbcgtrails rbc_tabelog -d sqlite3

create

create appcontrollers

create apphelpers

(省略)

create logproductionlog

create logdevelopmentlog

create logtestlog

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

ldquorailsrdquo コマンドでRailsのプロジェクトを作成ldquo-drdquo で使用するDBを指定する

8

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

以下の様に

rbc_tabelog プロジェクトができていれば成功

9

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

ついでにデータベースも作成

以下のコマンドを入力しましょう

cyenrbcgtcd rbc_tabelog

cyenrbcyenrbc_tabeloggtrake dbcreate

(in crbcrbc_tabelog)

ldquorake dbcreaterdquo コマンドでデータベースを作成します

Cyenrbcyenrbc_tabelogyendb フォルダに

developmentsqlite3 というファイルができていればオッケー

コマンドに失敗した場合rbc_tabelogyenconfigyendatabaseyml を編集してください

参考 yen1部資料yenChap_1yenrbc_tabelogyenconfigyendatabaseyml

10

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

サーバの起動

cyenrbcyenrbc_tabeloggtruby scriptserver

=gt Booting Mongrel

=gt Rails 232 application starting on http00003000

=gt Call with -d to detach

=gt Ctrl-C to shutdown server

ldquoruby scriptserverrdquo コマンドでサーバを起動します

サーバが実行できたらブラウザで以下のURLを実行してみましょうhttplocalhost3000

11

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

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

12

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

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

Model(モデル)データを格納する部分DBから取り出したデータを保持する

Railsでは「appyenmodelsyen基本名(単数形)rb」

NetBeansでは「モデルyen基本名rb」で表示されます

View(ビュー)ユーザに向けた見た目(画面表示)部分ユーザーインターフェース

Railsでは「appyenviewsyen基本名(複数形)yen画面名htmlerb」

NetBeansでは「ビューyen基本名(複数形)yen画面名htmlerb 」

Controller(コントローラ)ユーザからの入力を処理する部分

Railsでは「appyenviewsyen基本名(複数形)_controllerrb」

NetBeansでは「コントローラyen基本名(複数形) _controllerrb 」

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

14

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

ActiveResource って

簡単に説明するとWebサービスを簡単に処理することが出来るRails の機能です

Rails20以降で追加されました

rarr httpapirubyonrailsorgclassesActiveRecordBasehtmlM001298(英語)

今回は「食べログcom」のWebAPI を使ってレストランの一覧の表示を行います

食べログcomとは

日本最大級の口コミグルメサイト

rarr httptabelogcom

食べログAPI

レストランの口コミ情報を取得できます

rarr httprtabelogcomhelpapi

rarr httptabelogcomhelpapi_manualrst-api

マニュアルは「yenyen1部資料yen_食べログAPIマニュアル」にも置いています

15

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

まずはAPI を表示するために

画面を作っていきます

以下のコマンドを実行

cyenrbcyenrbc_tabeloggtruby scriptgenerate scaffold Restaurant

16

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

生成された rbc_tabelogappmodelsrestaurantrbを以下のように変更

class Restaurant lt ActiveRecordBase

end

class Restaurant lt ActiveResourceBase

end

ActiveResource とは

簡単にRESTfulなAPIを使えるようにする機能です

ActiveRecord を使うのと同じような感覚でWebAPIが使用できます

17

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

rbc_tabelogappmodelsrestaurantrbをさらに変更

class Restaurant lt ActiveResourceBase

selfsite = httpapitabelogcom

def selffind_restaurants(restautant_params = )

restautant_params[Key] = 96448b290b6556976f047110914fcf91e88c38b9

Hashfrom_xml(

selffind(

one

from =gt Ver21RestaurantSearch

params =gt restautant_params

)to_xml

)

end

end

これで model は完成

API の URL を設定

検索メソッドを作成今回は引数をハッシュで渡します

食べログAPIのキーを設定しますご自分のキーを持っている方はこちらに入力

Hashfrom_xmlでxmlをハッシュに(無理矢理)変換しています

18

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

次は rbc_tabelogappcontrollersrestaurant_controllerrb

先ほどモデルで作ったメソッドを呼び出します赤字部分を変更していきます

class RestaurantsController lt ApplicationController

GET restaurants

GET restaurantsxml

def index

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

end

今回は index 以外は使わないので削除しましょう(コメントアウトでもいいよ)

最終行の end も削除してしまわないように注意

requestquery_parameters

リクエストパラメータを引数にします

19

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

続いて rbc_tabelogappviewsrestaurantsindexhtmlerbの修正

ココはこんな感じでごっそり置き換えましょう

lth1gtRBC食べログlth1gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

ActiveResouece から値を取得します

ltRestaurantInfogt

ltItemgt

ltRestaurantNamegt千松しまltRestaurantNamegt

ltTabelogUrlgthttprtabelogcommiyagiA0404A0404044001636ltTabelogUrlgt

ltTotalScoregt467ltTotalScoregt

ltTasteScoregt464ltTasteScoregt

ltServiceScoregt469ltServiceScoregt

ltMoodScoregt432ltMoodScoregt

ltSituationgt友人同僚とデート接待ltSituationgt

ltDinnerPricegt¥10000 ~¥14999ltDinnerPricegt

ltLunchPricegt¥10000 ~¥14999ltLunchPricegt

ltCategorygt割烹小料理ltCategorygt

ltStationgt東塩釜本塩釜西塩釜ltStationgt

ltItemgt

食べログAPI結果

20

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

サーバーの起動

cyenrbcyenrbc_tabeloggtruby scriptserver

=gt Booting Mongrel

=gt Rails 232 application starting on http00003000

=gt Call with -d to detach

=gt Ctrl-C to shutdown server

サーバーが実行できたら

httplocalhost3000restaurants

21

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

こんな画面が表示されていれば成功です

Rails だと WebAPI を画面表示させるのはこんなに簡単です

httplocalhost3000restaurants

Chapter 3

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

23

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

このままだとチョット寂しいので検索条件を追加していきましょう

今回追加する条件は以下の3つです

都道府県名

ページ番号

都道府県名はプルダウンの

データを scaffold で作っていきます

ページ番号は最後に簡単につくります

24

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

さっそく都道府県名の作成

まずは土台を scaffold で作成しちゃいます

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate scaffold Prefecture enstring jastring

25

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

続いてデータの中身を作成していきます

cyenrbcyenrbc_tabeloggtruby scriptgenerate migration InsertPrefectures

26

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

rbc_tabelogdbmigrate(数字)_insert_prefecturesrb

class InsertPrefectures lt ActiveRecordMigration

def selfup

items = [

en =gt japan ja =gt 全国

en =gt hokkaido ja =gt 北海道

(省略)en =gt kagoshima ja =gt 鹿児島

en =gt okinawa ja =gt 沖縄

]

itemseach do |item|

Prefecturecreate item

end

end

def selfdown

Prefecturedelete_all

end

end

ココは単調かつメンドーな作業なのでコピペしましょう

「yen1部資料yen_insert_prefecturesyeninsert_prefecturesコピー用txt」

27

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

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

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

ブラウザで以下のURLを実行してみましょう

httplocalhost3000prefectures

右のような画面が表示されればオッケーです

28

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

それではさっそく都道府県名とページ数をレストラン画面に組み込んでいきましょう

rbc_tabelogappcontrollersrestaurants_controllerrb の修正

Index メソッドの最初に2行を追加さらに create メソッドを追加します

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

end

def create

restaurants_params =

prefecture =gt params[prefecture]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurants_params

end

検索条件を設定して index にリダイレクトするだけ

ページ数は100回カウントアップした整数をセットしているだけ

Prefecturefind(all) で先ほど作った都道府県名をすべて表示

29

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

続いてrbc_tabelogappviewsrestaurantsindexhtmlerb の修正

赤字部分を追記していきます

lth1gtRBC食べログlth1gt

lt form_tag( multipart =gt true ) do -gt

ltpgt

都道府県lt= select_tag prefecture

options_from_collection_for_select(prefectures en ja params[prefecture]) gt

ltpgt

ltpgt

ページlt= select_tag pageNum options_for_select(pages params[pageNum]to_i) gt

ltpgt

lt= submit_tag 検索 name =gt search gt

lthr gt

ltulgt

lt restaurants[ldquoitem]each do |item| -gt

ltligt

lt= link_to item[ldquorestaurant_name]

item[ldquotabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

lt end -gt

最後の ldquoendrdquo も忘れずに

30

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

こんな感じで検索条件部分が表示されていればオッケー

検索条件を変更して検索ボタンを押してみましょう

httplocalhost3000restaurants

Chapter 4

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

32

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

さてさて次は画面に一言メモを残していけるようにしていきましょうこちらもサクサク作っていきます

33

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

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

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate model Bookmark rcdstring memostring

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

34

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

では実際に画面に項目を追加してみますrbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[Item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcd] gt

lt= link_to item[restaurant_name]

item [ldquotabelog_url] target =gt _blank gt

lt= item[rdquomemo] gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

35

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

続いてコントローラを修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加して画面に入力されたデータを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

登録ボタンが押されたかつラジオボタンのチェックがあったらたら if の中身を実行

find_or_initialize_by_XXX

データがあれば取得なければ作成する

36

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

rbc_tabelogappcontrollersrestaurants_controllerrb

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

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcd item[rcd]

if bookmark

item[memo] = bookmarkmemo

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

食べログAPIの検索結果分ループを実行

食べログAPIの結果にrdquomemordquoとして登録しているデータを追加

登録したブックマークを食べログのレストランCDで検索

37

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

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

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

httplocalhost3000restaurants

Chapter 5

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

39

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

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

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

paperclip

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

【参考リンク】httpwwwthoughtbotcomprojectspaperclip

httpgithubcomthoughtbotpapercliptreemasterREADMErdoc

40

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

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

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

ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須)

ruby scriptplugin install gitgithubcomthoughtbotpaperclipgit

なので古いバージョン 222 を使います資料の中にプラグイン本体を準備しています「yen1部資料yen_paperclipプラグインyenpaperclip」

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

41

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

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

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

cyenrbcyenrbc_tabeloggt ruby scriptgenerate paperclip Bookmark photo

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

42

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

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

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

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

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

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

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

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

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

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

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

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

rbc_tabelogappcontrollersrestaurants_controllerrb

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

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

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

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

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

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

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

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

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

Rails と AIR を連携

50

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

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

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

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

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

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

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

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

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

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

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

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

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

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

55

これで完成しました

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

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

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

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

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

6

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

今回の勉強会では

Cyenrbcフォルダで作業している事を前提に説明します

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

7

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

それではさっそくRailsプロジェクトを作成しましょう

以下のコマンドを入力してください

CyenUsersyengtcd cyenrbc

cyenrbcgtrails rbc_tabelog -d sqlite3

create

create appcontrollers

create apphelpers

(省略)

create logproductionlog

create logdevelopmentlog

create logtestlog

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

ldquorailsrdquo コマンドでRailsのプロジェクトを作成ldquo-drdquo で使用するDBを指定する

8

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

以下の様に

rbc_tabelog プロジェクトができていれば成功

9

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

ついでにデータベースも作成

以下のコマンドを入力しましょう

cyenrbcgtcd rbc_tabelog

cyenrbcyenrbc_tabeloggtrake dbcreate

(in crbcrbc_tabelog)

ldquorake dbcreaterdquo コマンドでデータベースを作成します

Cyenrbcyenrbc_tabelogyendb フォルダに

developmentsqlite3 というファイルができていればオッケー

コマンドに失敗した場合rbc_tabelogyenconfigyendatabaseyml を編集してください

参考 yen1部資料yenChap_1yenrbc_tabelogyenconfigyendatabaseyml

10

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

サーバの起動

cyenrbcyenrbc_tabeloggtruby scriptserver

=gt Booting Mongrel

=gt Rails 232 application starting on http00003000

=gt Call with -d to detach

=gt Ctrl-C to shutdown server

ldquoruby scriptserverrdquo コマンドでサーバを起動します

サーバが実行できたらブラウザで以下のURLを実行してみましょうhttplocalhost3000

11

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

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

12

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

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

Model(モデル)データを格納する部分DBから取り出したデータを保持する

Railsでは「appyenmodelsyen基本名(単数形)rb」

NetBeansでは「モデルyen基本名rb」で表示されます

View(ビュー)ユーザに向けた見た目(画面表示)部分ユーザーインターフェース

Railsでは「appyenviewsyen基本名(複数形)yen画面名htmlerb」

NetBeansでは「ビューyen基本名(複数形)yen画面名htmlerb 」

Controller(コントローラ)ユーザからの入力を処理する部分

Railsでは「appyenviewsyen基本名(複数形)_controllerrb」

NetBeansでは「コントローラyen基本名(複数形) _controllerrb 」

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

14

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

ActiveResource って

簡単に説明するとWebサービスを簡単に処理することが出来るRails の機能です

Rails20以降で追加されました

rarr httpapirubyonrailsorgclassesActiveRecordBasehtmlM001298(英語)

今回は「食べログcom」のWebAPI を使ってレストランの一覧の表示を行います

食べログcomとは

日本最大級の口コミグルメサイト

rarr httptabelogcom

食べログAPI

レストランの口コミ情報を取得できます

rarr httprtabelogcomhelpapi

rarr httptabelogcomhelpapi_manualrst-api

マニュアルは「yenyen1部資料yen_食べログAPIマニュアル」にも置いています

15

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

まずはAPI を表示するために

画面を作っていきます

以下のコマンドを実行

cyenrbcyenrbc_tabeloggtruby scriptgenerate scaffold Restaurant

16

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

生成された rbc_tabelogappmodelsrestaurantrbを以下のように変更

class Restaurant lt ActiveRecordBase

end

class Restaurant lt ActiveResourceBase

end

ActiveResource とは

簡単にRESTfulなAPIを使えるようにする機能です

ActiveRecord を使うのと同じような感覚でWebAPIが使用できます

17

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

rbc_tabelogappmodelsrestaurantrbをさらに変更

class Restaurant lt ActiveResourceBase

selfsite = httpapitabelogcom

def selffind_restaurants(restautant_params = )

restautant_params[Key] = 96448b290b6556976f047110914fcf91e88c38b9

Hashfrom_xml(

selffind(

one

from =gt Ver21RestaurantSearch

params =gt restautant_params

)to_xml

)

end

end

これで model は完成

API の URL を設定

検索メソッドを作成今回は引数をハッシュで渡します

食べログAPIのキーを設定しますご自分のキーを持っている方はこちらに入力

Hashfrom_xmlでxmlをハッシュに(無理矢理)変換しています

18

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

次は rbc_tabelogappcontrollersrestaurant_controllerrb

先ほどモデルで作ったメソッドを呼び出します赤字部分を変更していきます

class RestaurantsController lt ApplicationController

GET restaurants

GET restaurantsxml

def index

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

end

今回は index 以外は使わないので削除しましょう(コメントアウトでもいいよ)

最終行の end も削除してしまわないように注意

requestquery_parameters

リクエストパラメータを引数にします

19

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

続いて rbc_tabelogappviewsrestaurantsindexhtmlerbの修正

ココはこんな感じでごっそり置き換えましょう

lth1gtRBC食べログlth1gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

ActiveResouece から値を取得します

ltRestaurantInfogt

ltItemgt

ltRestaurantNamegt千松しまltRestaurantNamegt

ltTabelogUrlgthttprtabelogcommiyagiA0404A0404044001636ltTabelogUrlgt

ltTotalScoregt467ltTotalScoregt

ltTasteScoregt464ltTasteScoregt

ltServiceScoregt469ltServiceScoregt

ltMoodScoregt432ltMoodScoregt

ltSituationgt友人同僚とデート接待ltSituationgt

ltDinnerPricegt¥10000 ~¥14999ltDinnerPricegt

ltLunchPricegt¥10000 ~¥14999ltLunchPricegt

ltCategorygt割烹小料理ltCategorygt

ltStationgt東塩釜本塩釜西塩釜ltStationgt

ltItemgt

食べログAPI結果

20

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

サーバーの起動

cyenrbcyenrbc_tabeloggtruby scriptserver

=gt Booting Mongrel

=gt Rails 232 application starting on http00003000

=gt Call with -d to detach

=gt Ctrl-C to shutdown server

サーバーが実行できたら

httplocalhost3000restaurants

21

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

こんな画面が表示されていれば成功です

Rails だと WebAPI を画面表示させるのはこんなに簡単です

httplocalhost3000restaurants

Chapter 3

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

23

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

このままだとチョット寂しいので検索条件を追加していきましょう

今回追加する条件は以下の3つです

都道府県名

ページ番号

都道府県名はプルダウンの

データを scaffold で作っていきます

ページ番号は最後に簡単につくります

24

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

さっそく都道府県名の作成

まずは土台を scaffold で作成しちゃいます

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate scaffold Prefecture enstring jastring

25

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

続いてデータの中身を作成していきます

cyenrbcyenrbc_tabeloggtruby scriptgenerate migration InsertPrefectures

26

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

rbc_tabelogdbmigrate(数字)_insert_prefecturesrb

class InsertPrefectures lt ActiveRecordMigration

def selfup

items = [

en =gt japan ja =gt 全国

en =gt hokkaido ja =gt 北海道

(省略)en =gt kagoshima ja =gt 鹿児島

en =gt okinawa ja =gt 沖縄

]

itemseach do |item|

Prefecturecreate item

end

end

def selfdown

Prefecturedelete_all

end

end

ココは単調かつメンドーな作業なのでコピペしましょう

「yen1部資料yen_insert_prefecturesyeninsert_prefecturesコピー用txt」

27

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

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

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

ブラウザで以下のURLを実行してみましょう

httplocalhost3000prefectures

右のような画面が表示されればオッケーです

28

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

それではさっそく都道府県名とページ数をレストラン画面に組み込んでいきましょう

rbc_tabelogappcontrollersrestaurants_controllerrb の修正

Index メソッドの最初に2行を追加さらに create メソッドを追加します

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

end

def create

restaurants_params =

prefecture =gt params[prefecture]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurants_params

end

検索条件を設定して index にリダイレクトするだけ

ページ数は100回カウントアップした整数をセットしているだけ

Prefecturefind(all) で先ほど作った都道府県名をすべて表示

29

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

続いてrbc_tabelogappviewsrestaurantsindexhtmlerb の修正

赤字部分を追記していきます

lth1gtRBC食べログlth1gt

lt form_tag( multipart =gt true ) do -gt

ltpgt

都道府県lt= select_tag prefecture

options_from_collection_for_select(prefectures en ja params[prefecture]) gt

ltpgt

ltpgt

ページlt= select_tag pageNum options_for_select(pages params[pageNum]to_i) gt

ltpgt

lt= submit_tag 検索 name =gt search gt

lthr gt

ltulgt

lt restaurants[ldquoitem]each do |item| -gt

ltligt

lt= link_to item[ldquorestaurant_name]

item[ldquotabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

lt end -gt

最後の ldquoendrdquo も忘れずに

30

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

こんな感じで検索条件部分が表示されていればオッケー

検索条件を変更して検索ボタンを押してみましょう

httplocalhost3000restaurants

Chapter 4

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

32

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

さてさて次は画面に一言メモを残していけるようにしていきましょうこちらもサクサク作っていきます

33

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

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

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate model Bookmark rcdstring memostring

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

34

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

では実際に画面に項目を追加してみますrbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[Item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcd] gt

lt= link_to item[restaurant_name]

item [ldquotabelog_url] target =gt _blank gt

lt= item[rdquomemo] gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

35

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

続いてコントローラを修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加して画面に入力されたデータを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

登録ボタンが押されたかつラジオボタンのチェックがあったらたら if の中身を実行

find_or_initialize_by_XXX

データがあれば取得なければ作成する

36

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

rbc_tabelogappcontrollersrestaurants_controllerrb

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

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcd item[rcd]

if bookmark

item[memo] = bookmarkmemo

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

食べログAPIの検索結果分ループを実行

食べログAPIの結果にrdquomemordquoとして登録しているデータを追加

登録したブックマークを食べログのレストランCDで検索

37

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

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

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

httplocalhost3000restaurants

Chapter 5

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

39

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

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

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

paperclip

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

【参考リンク】httpwwwthoughtbotcomprojectspaperclip

httpgithubcomthoughtbotpapercliptreemasterREADMErdoc

40

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

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

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

ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須)

ruby scriptplugin install gitgithubcomthoughtbotpaperclipgit

なので古いバージョン 222 を使います資料の中にプラグイン本体を準備しています「yen1部資料yen_paperclipプラグインyenpaperclip」

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

41

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

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

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

cyenrbcyenrbc_tabeloggt ruby scriptgenerate paperclip Bookmark photo

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

42

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

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

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

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

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

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

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

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

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

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

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

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

rbc_tabelogappcontrollersrestaurants_controllerrb

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

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

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

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

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

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

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

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

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

Rails と AIR を連携

50

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

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

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

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

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

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

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

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

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

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

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

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

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

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

55

これで完成しました

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

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

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

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

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

7

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

それではさっそくRailsプロジェクトを作成しましょう

以下のコマンドを入力してください

CyenUsersyengtcd cyenrbc

cyenrbcgtrails rbc_tabelog -d sqlite3

create

create appcontrollers

create apphelpers

(省略)

create logproductionlog

create logdevelopmentlog

create logtestlog

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

ldquorailsrdquo コマンドでRailsのプロジェクトを作成ldquo-drdquo で使用するDBを指定する

8

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

以下の様に

rbc_tabelog プロジェクトができていれば成功

9

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

ついでにデータベースも作成

以下のコマンドを入力しましょう

cyenrbcgtcd rbc_tabelog

cyenrbcyenrbc_tabeloggtrake dbcreate

(in crbcrbc_tabelog)

ldquorake dbcreaterdquo コマンドでデータベースを作成します

Cyenrbcyenrbc_tabelogyendb フォルダに

developmentsqlite3 というファイルができていればオッケー

コマンドに失敗した場合rbc_tabelogyenconfigyendatabaseyml を編集してください

参考 yen1部資料yenChap_1yenrbc_tabelogyenconfigyendatabaseyml

10

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

サーバの起動

cyenrbcyenrbc_tabeloggtruby scriptserver

=gt Booting Mongrel

=gt Rails 232 application starting on http00003000

=gt Call with -d to detach

=gt Ctrl-C to shutdown server

ldquoruby scriptserverrdquo コマンドでサーバを起動します

サーバが実行できたらブラウザで以下のURLを実行してみましょうhttplocalhost3000

11

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

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

12

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

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

Model(モデル)データを格納する部分DBから取り出したデータを保持する

Railsでは「appyenmodelsyen基本名(単数形)rb」

NetBeansでは「モデルyen基本名rb」で表示されます

View(ビュー)ユーザに向けた見た目(画面表示)部分ユーザーインターフェース

Railsでは「appyenviewsyen基本名(複数形)yen画面名htmlerb」

NetBeansでは「ビューyen基本名(複数形)yen画面名htmlerb 」

Controller(コントローラ)ユーザからの入力を処理する部分

Railsでは「appyenviewsyen基本名(複数形)_controllerrb」

NetBeansでは「コントローラyen基本名(複数形) _controllerrb 」

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

14

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

ActiveResource って

簡単に説明するとWebサービスを簡単に処理することが出来るRails の機能です

Rails20以降で追加されました

rarr httpapirubyonrailsorgclassesActiveRecordBasehtmlM001298(英語)

今回は「食べログcom」のWebAPI を使ってレストランの一覧の表示を行います

食べログcomとは

日本最大級の口コミグルメサイト

rarr httptabelogcom

食べログAPI

レストランの口コミ情報を取得できます

rarr httprtabelogcomhelpapi

rarr httptabelogcomhelpapi_manualrst-api

マニュアルは「yenyen1部資料yen_食べログAPIマニュアル」にも置いています

15

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

まずはAPI を表示するために

画面を作っていきます

以下のコマンドを実行

cyenrbcyenrbc_tabeloggtruby scriptgenerate scaffold Restaurant

16

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

生成された rbc_tabelogappmodelsrestaurantrbを以下のように変更

class Restaurant lt ActiveRecordBase

end

class Restaurant lt ActiveResourceBase

end

ActiveResource とは

簡単にRESTfulなAPIを使えるようにする機能です

ActiveRecord を使うのと同じような感覚でWebAPIが使用できます

17

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

rbc_tabelogappmodelsrestaurantrbをさらに変更

class Restaurant lt ActiveResourceBase

selfsite = httpapitabelogcom

def selffind_restaurants(restautant_params = )

restautant_params[Key] = 96448b290b6556976f047110914fcf91e88c38b9

Hashfrom_xml(

selffind(

one

from =gt Ver21RestaurantSearch

params =gt restautant_params

)to_xml

)

end

end

これで model は完成

API の URL を設定

検索メソッドを作成今回は引数をハッシュで渡します

食べログAPIのキーを設定しますご自分のキーを持っている方はこちらに入力

Hashfrom_xmlでxmlをハッシュに(無理矢理)変換しています

18

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

次は rbc_tabelogappcontrollersrestaurant_controllerrb

先ほどモデルで作ったメソッドを呼び出します赤字部分を変更していきます

class RestaurantsController lt ApplicationController

GET restaurants

GET restaurantsxml

def index

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

end

今回は index 以外は使わないので削除しましょう(コメントアウトでもいいよ)

最終行の end も削除してしまわないように注意

requestquery_parameters

リクエストパラメータを引数にします

19

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

続いて rbc_tabelogappviewsrestaurantsindexhtmlerbの修正

ココはこんな感じでごっそり置き換えましょう

lth1gtRBC食べログlth1gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

ActiveResouece から値を取得します

ltRestaurantInfogt

ltItemgt

ltRestaurantNamegt千松しまltRestaurantNamegt

ltTabelogUrlgthttprtabelogcommiyagiA0404A0404044001636ltTabelogUrlgt

ltTotalScoregt467ltTotalScoregt

ltTasteScoregt464ltTasteScoregt

ltServiceScoregt469ltServiceScoregt

ltMoodScoregt432ltMoodScoregt

ltSituationgt友人同僚とデート接待ltSituationgt

ltDinnerPricegt¥10000 ~¥14999ltDinnerPricegt

ltLunchPricegt¥10000 ~¥14999ltLunchPricegt

ltCategorygt割烹小料理ltCategorygt

ltStationgt東塩釜本塩釜西塩釜ltStationgt

ltItemgt

食べログAPI結果

20

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

サーバーの起動

cyenrbcyenrbc_tabeloggtruby scriptserver

=gt Booting Mongrel

=gt Rails 232 application starting on http00003000

=gt Call with -d to detach

=gt Ctrl-C to shutdown server

サーバーが実行できたら

httplocalhost3000restaurants

21

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

こんな画面が表示されていれば成功です

Rails だと WebAPI を画面表示させるのはこんなに簡単です

httplocalhost3000restaurants

Chapter 3

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

23

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

このままだとチョット寂しいので検索条件を追加していきましょう

今回追加する条件は以下の3つです

都道府県名

ページ番号

都道府県名はプルダウンの

データを scaffold で作っていきます

ページ番号は最後に簡単につくります

24

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

さっそく都道府県名の作成

まずは土台を scaffold で作成しちゃいます

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate scaffold Prefecture enstring jastring

25

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

続いてデータの中身を作成していきます

cyenrbcyenrbc_tabeloggtruby scriptgenerate migration InsertPrefectures

26

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

rbc_tabelogdbmigrate(数字)_insert_prefecturesrb

class InsertPrefectures lt ActiveRecordMigration

def selfup

items = [

en =gt japan ja =gt 全国

en =gt hokkaido ja =gt 北海道

(省略)en =gt kagoshima ja =gt 鹿児島

en =gt okinawa ja =gt 沖縄

]

itemseach do |item|

Prefecturecreate item

end

end

def selfdown

Prefecturedelete_all

end

end

ココは単調かつメンドーな作業なのでコピペしましょう

「yen1部資料yen_insert_prefecturesyeninsert_prefecturesコピー用txt」

27

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

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

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

ブラウザで以下のURLを実行してみましょう

httplocalhost3000prefectures

右のような画面が表示されればオッケーです

28

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

それではさっそく都道府県名とページ数をレストラン画面に組み込んでいきましょう

rbc_tabelogappcontrollersrestaurants_controllerrb の修正

Index メソッドの最初に2行を追加さらに create メソッドを追加します

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

end

def create

restaurants_params =

prefecture =gt params[prefecture]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurants_params

end

検索条件を設定して index にリダイレクトするだけ

ページ数は100回カウントアップした整数をセットしているだけ

Prefecturefind(all) で先ほど作った都道府県名をすべて表示

29

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

続いてrbc_tabelogappviewsrestaurantsindexhtmlerb の修正

赤字部分を追記していきます

lth1gtRBC食べログlth1gt

lt form_tag( multipart =gt true ) do -gt

ltpgt

都道府県lt= select_tag prefecture

options_from_collection_for_select(prefectures en ja params[prefecture]) gt

ltpgt

ltpgt

ページlt= select_tag pageNum options_for_select(pages params[pageNum]to_i) gt

ltpgt

lt= submit_tag 検索 name =gt search gt

lthr gt

ltulgt

lt restaurants[ldquoitem]each do |item| -gt

ltligt

lt= link_to item[ldquorestaurant_name]

item[ldquotabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

lt end -gt

最後の ldquoendrdquo も忘れずに

30

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

こんな感じで検索条件部分が表示されていればオッケー

検索条件を変更して検索ボタンを押してみましょう

httplocalhost3000restaurants

Chapter 4

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

32

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

さてさて次は画面に一言メモを残していけるようにしていきましょうこちらもサクサク作っていきます

33

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

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

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate model Bookmark rcdstring memostring

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

34

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

では実際に画面に項目を追加してみますrbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[Item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcd] gt

lt= link_to item[restaurant_name]

item [ldquotabelog_url] target =gt _blank gt

lt= item[rdquomemo] gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

35

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

続いてコントローラを修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加して画面に入力されたデータを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

登録ボタンが押されたかつラジオボタンのチェックがあったらたら if の中身を実行

find_or_initialize_by_XXX

データがあれば取得なければ作成する

36

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

rbc_tabelogappcontrollersrestaurants_controllerrb

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

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcd item[rcd]

if bookmark

item[memo] = bookmarkmemo

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

食べログAPIの検索結果分ループを実行

食べログAPIの結果にrdquomemordquoとして登録しているデータを追加

登録したブックマークを食べログのレストランCDで検索

37

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

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

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

httplocalhost3000restaurants

Chapter 5

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

39

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

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

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

paperclip

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

【参考リンク】httpwwwthoughtbotcomprojectspaperclip

httpgithubcomthoughtbotpapercliptreemasterREADMErdoc

40

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

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

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

ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須)

ruby scriptplugin install gitgithubcomthoughtbotpaperclipgit

なので古いバージョン 222 を使います資料の中にプラグイン本体を準備しています「yen1部資料yen_paperclipプラグインyenpaperclip」

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

41

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

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

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

cyenrbcyenrbc_tabeloggt ruby scriptgenerate paperclip Bookmark photo

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

42

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

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

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

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

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

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

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

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

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

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

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

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

rbc_tabelogappcontrollersrestaurants_controllerrb

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

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

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

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

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

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

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

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

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

Rails と AIR を連携

50

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

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

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

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

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

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

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

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

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

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

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

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

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

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

55

これで完成しました

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

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

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

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

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

8

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

以下の様に

rbc_tabelog プロジェクトができていれば成功

9

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

ついでにデータベースも作成

以下のコマンドを入力しましょう

cyenrbcgtcd rbc_tabelog

cyenrbcyenrbc_tabeloggtrake dbcreate

(in crbcrbc_tabelog)

ldquorake dbcreaterdquo コマンドでデータベースを作成します

Cyenrbcyenrbc_tabelogyendb フォルダに

developmentsqlite3 というファイルができていればオッケー

コマンドに失敗した場合rbc_tabelogyenconfigyendatabaseyml を編集してください

参考 yen1部資料yenChap_1yenrbc_tabelogyenconfigyendatabaseyml

10

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

サーバの起動

cyenrbcyenrbc_tabeloggtruby scriptserver

=gt Booting Mongrel

=gt Rails 232 application starting on http00003000

=gt Call with -d to detach

=gt Ctrl-C to shutdown server

ldquoruby scriptserverrdquo コマンドでサーバを起動します

サーバが実行できたらブラウザで以下のURLを実行してみましょうhttplocalhost3000

11

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

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

12

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

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

Model(モデル)データを格納する部分DBから取り出したデータを保持する

Railsでは「appyenmodelsyen基本名(単数形)rb」

NetBeansでは「モデルyen基本名rb」で表示されます

View(ビュー)ユーザに向けた見た目(画面表示)部分ユーザーインターフェース

Railsでは「appyenviewsyen基本名(複数形)yen画面名htmlerb」

NetBeansでは「ビューyen基本名(複数形)yen画面名htmlerb 」

Controller(コントローラ)ユーザからの入力を処理する部分

Railsでは「appyenviewsyen基本名(複数形)_controllerrb」

NetBeansでは「コントローラyen基本名(複数形) _controllerrb 」

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

14

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

ActiveResource って

簡単に説明するとWebサービスを簡単に処理することが出来るRails の機能です

Rails20以降で追加されました

rarr httpapirubyonrailsorgclassesActiveRecordBasehtmlM001298(英語)

今回は「食べログcom」のWebAPI を使ってレストランの一覧の表示を行います

食べログcomとは

日本最大級の口コミグルメサイト

rarr httptabelogcom

食べログAPI

レストランの口コミ情報を取得できます

rarr httprtabelogcomhelpapi

rarr httptabelogcomhelpapi_manualrst-api

マニュアルは「yenyen1部資料yen_食べログAPIマニュアル」にも置いています

15

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

まずはAPI を表示するために

画面を作っていきます

以下のコマンドを実行

cyenrbcyenrbc_tabeloggtruby scriptgenerate scaffold Restaurant

16

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

生成された rbc_tabelogappmodelsrestaurantrbを以下のように変更

class Restaurant lt ActiveRecordBase

end

class Restaurant lt ActiveResourceBase

end

ActiveResource とは

簡単にRESTfulなAPIを使えるようにする機能です

ActiveRecord を使うのと同じような感覚でWebAPIが使用できます

17

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

rbc_tabelogappmodelsrestaurantrbをさらに変更

class Restaurant lt ActiveResourceBase

selfsite = httpapitabelogcom

def selffind_restaurants(restautant_params = )

restautant_params[Key] = 96448b290b6556976f047110914fcf91e88c38b9

Hashfrom_xml(

selffind(

one

from =gt Ver21RestaurantSearch

params =gt restautant_params

)to_xml

)

end

end

これで model は完成

API の URL を設定

検索メソッドを作成今回は引数をハッシュで渡します

食べログAPIのキーを設定しますご自分のキーを持っている方はこちらに入力

Hashfrom_xmlでxmlをハッシュに(無理矢理)変換しています

18

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

次は rbc_tabelogappcontrollersrestaurant_controllerrb

先ほどモデルで作ったメソッドを呼び出します赤字部分を変更していきます

class RestaurantsController lt ApplicationController

GET restaurants

GET restaurantsxml

def index

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

end

今回は index 以外は使わないので削除しましょう(コメントアウトでもいいよ)

最終行の end も削除してしまわないように注意

requestquery_parameters

リクエストパラメータを引数にします

19

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

続いて rbc_tabelogappviewsrestaurantsindexhtmlerbの修正

ココはこんな感じでごっそり置き換えましょう

lth1gtRBC食べログlth1gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

ActiveResouece から値を取得します

ltRestaurantInfogt

ltItemgt

ltRestaurantNamegt千松しまltRestaurantNamegt

ltTabelogUrlgthttprtabelogcommiyagiA0404A0404044001636ltTabelogUrlgt

ltTotalScoregt467ltTotalScoregt

ltTasteScoregt464ltTasteScoregt

ltServiceScoregt469ltServiceScoregt

ltMoodScoregt432ltMoodScoregt

ltSituationgt友人同僚とデート接待ltSituationgt

ltDinnerPricegt¥10000 ~¥14999ltDinnerPricegt

ltLunchPricegt¥10000 ~¥14999ltLunchPricegt

ltCategorygt割烹小料理ltCategorygt

ltStationgt東塩釜本塩釜西塩釜ltStationgt

ltItemgt

食べログAPI結果

20

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

サーバーの起動

cyenrbcyenrbc_tabeloggtruby scriptserver

=gt Booting Mongrel

=gt Rails 232 application starting on http00003000

=gt Call with -d to detach

=gt Ctrl-C to shutdown server

サーバーが実行できたら

httplocalhost3000restaurants

21

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

こんな画面が表示されていれば成功です

Rails だと WebAPI を画面表示させるのはこんなに簡単です

httplocalhost3000restaurants

Chapter 3

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

23

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

このままだとチョット寂しいので検索条件を追加していきましょう

今回追加する条件は以下の3つです

都道府県名

ページ番号

都道府県名はプルダウンの

データを scaffold で作っていきます

ページ番号は最後に簡単につくります

24

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

さっそく都道府県名の作成

まずは土台を scaffold で作成しちゃいます

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate scaffold Prefecture enstring jastring

25

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

続いてデータの中身を作成していきます

cyenrbcyenrbc_tabeloggtruby scriptgenerate migration InsertPrefectures

26

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

rbc_tabelogdbmigrate(数字)_insert_prefecturesrb

class InsertPrefectures lt ActiveRecordMigration

def selfup

items = [

en =gt japan ja =gt 全国

en =gt hokkaido ja =gt 北海道

(省略)en =gt kagoshima ja =gt 鹿児島

en =gt okinawa ja =gt 沖縄

]

itemseach do |item|

Prefecturecreate item

end

end

def selfdown

Prefecturedelete_all

end

end

ココは単調かつメンドーな作業なのでコピペしましょう

「yen1部資料yen_insert_prefecturesyeninsert_prefecturesコピー用txt」

27

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

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

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

ブラウザで以下のURLを実行してみましょう

httplocalhost3000prefectures

右のような画面が表示されればオッケーです

28

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

それではさっそく都道府県名とページ数をレストラン画面に組み込んでいきましょう

rbc_tabelogappcontrollersrestaurants_controllerrb の修正

Index メソッドの最初に2行を追加さらに create メソッドを追加します

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

end

def create

restaurants_params =

prefecture =gt params[prefecture]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurants_params

end

検索条件を設定して index にリダイレクトするだけ

ページ数は100回カウントアップした整数をセットしているだけ

Prefecturefind(all) で先ほど作った都道府県名をすべて表示

29

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

続いてrbc_tabelogappviewsrestaurantsindexhtmlerb の修正

赤字部分を追記していきます

lth1gtRBC食べログlth1gt

lt form_tag( multipart =gt true ) do -gt

ltpgt

都道府県lt= select_tag prefecture

options_from_collection_for_select(prefectures en ja params[prefecture]) gt

ltpgt

ltpgt

ページlt= select_tag pageNum options_for_select(pages params[pageNum]to_i) gt

ltpgt

lt= submit_tag 検索 name =gt search gt

lthr gt

ltulgt

lt restaurants[ldquoitem]each do |item| -gt

ltligt

lt= link_to item[ldquorestaurant_name]

item[ldquotabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

lt end -gt

最後の ldquoendrdquo も忘れずに

30

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

こんな感じで検索条件部分が表示されていればオッケー

検索条件を変更して検索ボタンを押してみましょう

httplocalhost3000restaurants

Chapter 4

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

32

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

さてさて次は画面に一言メモを残していけるようにしていきましょうこちらもサクサク作っていきます

33

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

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

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate model Bookmark rcdstring memostring

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

34

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

では実際に画面に項目を追加してみますrbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[Item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcd] gt

lt= link_to item[restaurant_name]

item [ldquotabelog_url] target =gt _blank gt

lt= item[rdquomemo] gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

35

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

続いてコントローラを修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加して画面に入力されたデータを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

登録ボタンが押されたかつラジオボタンのチェックがあったらたら if の中身を実行

find_or_initialize_by_XXX

データがあれば取得なければ作成する

36

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

rbc_tabelogappcontrollersrestaurants_controllerrb

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

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcd item[rcd]

if bookmark

item[memo] = bookmarkmemo

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

食べログAPIの検索結果分ループを実行

食べログAPIの結果にrdquomemordquoとして登録しているデータを追加

登録したブックマークを食べログのレストランCDで検索

37

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

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

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

httplocalhost3000restaurants

Chapter 5

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

39

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

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

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

paperclip

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

【参考リンク】httpwwwthoughtbotcomprojectspaperclip

httpgithubcomthoughtbotpapercliptreemasterREADMErdoc

40

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

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

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

ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須)

ruby scriptplugin install gitgithubcomthoughtbotpaperclipgit

なので古いバージョン 222 を使います資料の中にプラグイン本体を準備しています「yen1部資料yen_paperclipプラグインyenpaperclip」

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

41

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

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

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

cyenrbcyenrbc_tabeloggt ruby scriptgenerate paperclip Bookmark photo

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

42

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

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

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

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

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

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

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

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

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

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

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

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

rbc_tabelogappcontrollersrestaurants_controllerrb

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

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

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

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

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

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

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

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

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

Rails と AIR を連携

50

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

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

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

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

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

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

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

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

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

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

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

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

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

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

55

これで完成しました

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

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

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

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

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

9

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

ついでにデータベースも作成

以下のコマンドを入力しましょう

cyenrbcgtcd rbc_tabelog

cyenrbcyenrbc_tabeloggtrake dbcreate

(in crbcrbc_tabelog)

ldquorake dbcreaterdquo コマンドでデータベースを作成します

Cyenrbcyenrbc_tabelogyendb フォルダに

developmentsqlite3 というファイルができていればオッケー

コマンドに失敗した場合rbc_tabelogyenconfigyendatabaseyml を編集してください

参考 yen1部資料yenChap_1yenrbc_tabelogyenconfigyendatabaseyml

10

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

サーバの起動

cyenrbcyenrbc_tabeloggtruby scriptserver

=gt Booting Mongrel

=gt Rails 232 application starting on http00003000

=gt Call with -d to detach

=gt Ctrl-C to shutdown server

ldquoruby scriptserverrdquo コマンドでサーバを起動します

サーバが実行できたらブラウザで以下のURLを実行してみましょうhttplocalhost3000

11

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

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

12

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

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

Model(モデル)データを格納する部分DBから取り出したデータを保持する

Railsでは「appyenmodelsyen基本名(単数形)rb」

NetBeansでは「モデルyen基本名rb」で表示されます

View(ビュー)ユーザに向けた見た目(画面表示)部分ユーザーインターフェース

Railsでは「appyenviewsyen基本名(複数形)yen画面名htmlerb」

NetBeansでは「ビューyen基本名(複数形)yen画面名htmlerb 」

Controller(コントローラ)ユーザからの入力を処理する部分

Railsでは「appyenviewsyen基本名(複数形)_controllerrb」

NetBeansでは「コントローラyen基本名(複数形) _controllerrb 」

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

14

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

ActiveResource って

簡単に説明するとWebサービスを簡単に処理することが出来るRails の機能です

Rails20以降で追加されました

rarr httpapirubyonrailsorgclassesActiveRecordBasehtmlM001298(英語)

今回は「食べログcom」のWebAPI を使ってレストランの一覧の表示を行います

食べログcomとは

日本最大級の口コミグルメサイト

rarr httptabelogcom

食べログAPI

レストランの口コミ情報を取得できます

rarr httprtabelogcomhelpapi

rarr httptabelogcomhelpapi_manualrst-api

マニュアルは「yenyen1部資料yen_食べログAPIマニュアル」にも置いています

15

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

まずはAPI を表示するために

画面を作っていきます

以下のコマンドを実行

cyenrbcyenrbc_tabeloggtruby scriptgenerate scaffold Restaurant

16

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

生成された rbc_tabelogappmodelsrestaurantrbを以下のように変更

class Restaurant lt ActiveRecordBase

end

class Restaurant lt ActiveResourceBase

end

ActiveResource とは

簡単にRESTfulなAPIを使えるようにする機能です

ActiveRecord を使うのと同じような感覚でWebAPIが使用できます

17

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

rbc_tabelogappmodelsrestaurantrbをさらに変更

class Restaurant lt ActiveResourceBase

selfsite = httpapitabelogcom

def selffind_restaurants(restautant_params = )

restautant_params[Key] = 96448b290b6556976f047110914fcf91e88c38b9

Hashfrom_xml(

selffind(

one

from =gt Ver21RestaurantSearch

params =gt restautant_params

)to_xml

)

end

end

これで model は完成

API の URL を設定

検索メソッドを作成今回は引数をハッシュで渡します

食べログAPIのキーを設定しますご自分のキーを持っている方はこちらに入力

Hashfrom_xmlでxmlをハッシュに(無理矢理)変換しています

18

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

次は rbc_tabelogappcontrollersrestaurant_controllerrb

先ほどモデルで作ったメソッドを呼び出します赤字部分を変更していきます

class RestaurantsController lt ApplicationController

GET restaurants

GET restaurantsxml

def index

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

end

今回は index 以外は使わないので削除しましょう(コメントアウトでもいいよ)

最終行の end も削除してしまわないように注意

requestquery_parameters

リクエストパラメータを引数にします

19

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

続いて rbc_tabelogappviewsrestaurantsindexhtmlerbの修正

ココはこんな感じでごっそり置き換えましょう

lth1gtRBC食べログlth1gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

ActiveResouece から値を取得します

ltRestaurantInfogt

ltItemgt

ltRestaurantNamegt千松しまltRestaurantNamegt

ltTabelogUrlgthttprtabelogcommiyagiA0404A0404044001636ltTabelogUrlgt

ltTotalScoregt467ltTotalScoregt

ltTasteScoregt464ltTasteScoregt

ltServiceScoregt469ltServiceScoregt

ltMoodScoregt432ltMoodScoregt

ltSituationgt友人同僚とデート接待ltSituationgt

ltDinnerPricegt¥10000 ~¥14999ltDinnerPricegt

ltLunchPricegt¥10000 ~¥14999ltLunchPricegt

ltCategorygt割烹小料理ltCategorygt

ltStationgt東塩釜本塩釜西塩釜ltStationgt

ltItemgt

食べログAPI結果

20

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

サーバーの起動

cyenrbcyenrbc_tabeloggtruby scriptserver

=gt Booting Mongrel

=gt Rails 232 application starting on http00003000

=gt Call with -d to detach

=gt Ctrl-C to shutdown server

サーバーが実行できたら

httplocalhost3000restaurants

21

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

こんな画面が表示されていれば成功です

Rails だと WebAPI を画面表示させるのはこんなに簡単です

httplocalhost3000restaurants

Chapter 3

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

23

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

このままだとチョット寂しいので検索条件を追加していきましょう

今回追加する条件は以下の3つです

都道府県名

ページ番号

都道府県名はプルダウンの

データを scaffold で作っていきます

ページ番号は最後に簡単につくります

24

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

さっそく都道府県名の作成

まずは土台を scaffold で作成しちゃいます

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate scaffold Prefecture enstring jastring

25

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

続いてデータの中身を作成していきます

cyenrbcyenrbc_tabeloggtruby scriptgenerate migration InsertPrefectures

26

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

rbc_tabelogdbmigrate(数字)_insert_prefecturesrb

class InsertPrefectures lt ActiveRecordMigration

def selfup

items = [

en =gt japan ja =gt 全国

en =gt hokkaido ja =gt 北海道

(省略)en =gt kagoshima ja =gt 鹿児島

en =gt okinawa ja =gt 沖縄

]

itemseach do |item|

Prefecturecreate item

end

end

def selfdown

Prefecturedelete_all

end

end

ココは単調かつメンドーな作業なのでコピペしましょう

「yen1部資料yen_insert_prefecturesyeninsert_prefecturesコピー用txt」

27

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

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

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

ブラウザで以下のURLを実行してみましょう

httplocalhost3000prefectures

右のような画面が表示されればオッケーです

28

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

それではさっそく都道府県名とページ数をレストラン画面に組み込んでいきましょう

rbc_tabelogappcontrollersrestaurants_controllerrb の修正

Index メソッドの最初に2行を追加さらに create メソッドを追加します

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

end

def create

restaurants_params =

prefecture =gt params[prefecture]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurants_params

end

検索条件を設定して index にリダイレクトするだけ

ページ数は100回カウントアップした整数をセットしているだけ

Prefecturefind(all) で先ほど作った都道府県名をすべて表示

29

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

続いてrbc_tabelogappviewsrestaurantsindexhtmlerb の修正

赤字部分を追記していきます

lth1gtRBC食べログlth1gt

lt form_tag( multipart =gt true ) do -gt

ltpgt

都道府県lt= select_tag prefecture

options_from_collection_for_select(prefectures en ja params[prefecture]) gt

ltpgt

ltpgt

ページlt= select_tag pageNum options_for_select(pages params[pageNum]to_i) gt

ltpgt

lt= submit_tag 検索 name =gt search gt

lthr gt

ltulgt

lt restaurants[ldquoitem]each do |item| -gt

ltligt

lt= link_to item[ldquorestaurant_name]

item[ldquotabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

lt end -gt

最後の ldquoendrdquo も忘れずに

30

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

こんな感じで検索条件部分が表示されていればオッケー

検索条件を変更して検索ボタンを押してみましょう

httplocalhost3000restaurants

Chapter 4

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

32

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

さてさて次は画面に一言メモを残していけるようにしていきましょうこちらもサクサク作っていきます

33

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

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

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate model Bookmark rcdstring memostring

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

34

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

では実際に画面に項目を追加してみますrbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[Item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcd] gt

lt= link_to item[restaurant_name]

item [ldquotabelog_url] target =gt _blank gt

lt= item[rdquomemo] gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

35

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

続いてコントローラを修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加して画面に入力されたデータを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

登録ボタンが押されたかつラジオボタンのチェックがあったらたら if の中身を実行

find_or_initialize_by_XXX

データがあれば取得なければ作成する

36

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

rbc_tabelogappcontrollersrestaurants_controllerrb

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

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcd item[rcd]

if bookmark

item[memo] = bookmarkmemo

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

食べログAPIの検索結果分ループを実行

食べログAPIの結果にrdquomemordquoとして登録しているデータを追加

登録したブックマークを食べログのレストランCDで検索

37

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

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

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

httplocalhost3000restaurants

Chapter 5

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

39

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

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

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

paperclip

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

【参考リンク】httpwwwthoughtbotcomprojectspaperclip

httpgithubcomthoughtbotpapercliptreemasterREADMErdoc

40

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

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

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

ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須)

ruby scriptplugin install gitgithubcomthoughtbotpaperclipgit

なので古いバージョン 222 を使います資料の中にプラグイン本体を準備しています「yen1部資料yen_paperclipプラグインyenpaperclip」

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

41

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

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

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

cyenrbcyenrbc_tabeloggt ruby scriptgenerate paperclip Bookmark photo

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

42

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

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

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

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

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

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

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

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

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

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

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

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

rbc_tabelogappcontrollersrestaurants_controllerrb

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

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

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

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

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

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

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

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

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

Rails と AIR を連携

50

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

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

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

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

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

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

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

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

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

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

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

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

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

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

55

これで完成しました

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

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

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

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

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

10

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

サーバの起動

cyenrbcyenrbc_tabeloggtruby scriptserver

=gt Booting Mongrel

=gt Rails 232 application starting on http00003000

=gt Call with -d to detach

=gt Ctrl-C to shutdown server

ldquoruby scriptserverrdquo コマンドでサーバを起動します

サーバが実行できたらブラウザで以下のURLを実行してみましょうhttplocalhost3000

11

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

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

12

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

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

Model(モデル)データを格納する部分DBから取り出したデータを保持する

Railsでは「appyenmodelsyen基本名(単数形)rb」

NetBeansでは「モデルyen基本名rb」で表示されます

View(ビュー)ユーザに向けた見た目(画面表示)部分ユーザーインターフェース

Railsでは「appyenviewsyen基本名(複数形)yen画面名htmlerb」

NetBeansでは「ビューyen基本名(複数形)yen画面名htmlerb 」

Controller(コントローラ)ユーザからの入力を処理する部分

Railsでは「appyenviewsyen基本名(複数形)_controllerrb」

NetBeansでは「コントローラyen基本名(複数形) _controllerrb 」

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

14

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

ActiveResource って

簡単に説明するとWebサービスを簡単に処理することが出来るRails の機能です

Rails20以降で追加されました

rarr httpapirubyonrailsorgclassesActiveRecordBasehtmlM001298(英語)

今回は「食べログcom」のWebAPI を使ってレストランの一覧の表示を行います

食べログcomとは

日本最大級の口コミグルメサイト

rarr httptabelogcom

食べログAPI

レストランの口コミ情報を取得できます

rarr httprtabelogcomhelpapi

rarr httptabelogcomhelpapi_manualrst-api

マニュアルは「yenyen1部資料yen_食べログAPIマニュアル」にも置いています

15

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

まずはAPI を表示するために

画面を作っていきます

以下のコマンドを実行

cyenrbcyenrbc_tabeloggtruby scriptgenerate scaffold Restaurant

16

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

生成された rbc_tabelogappmodelsrestaurantrbを以下のように変更

class Restaurant lt ActiveRecordBase

end

class Restaurant lt ActiveResourceBase

end

ActiveResource とは

簡単にRESTfulなAPIを使えるようにする機能です

ActiveRecord を使うのと同じような感覚でWebAPIが使用できます

17

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

rbc_tabelogappmodelsrestaurantrbをさらに変更

class Restaurant lt ActiveResourceBase

selfsite = httpapitabelogcom

def selffind_restaurants(restautant_params = )

restautant_params[Key] = 96448b290b6556976f047110914fcf91e88c38b9

Hashfrom_xml(

selffind(

one

from =gt Ver21RestaurantSearch

params =gt restautant_params

)to_xml

)

end

end

これで model は完成

API の URL を設定

検索メソッドを作成今回は引数をハッシュで渡します

食べログAPIのキーを設定しますご自分のキーを持っている方はこちらに入力

Hashfrom_xmlでxmlをハッシュに(無理矢理)変換しています

18

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

次は rbc_tabelogappcontrollersrestaurant_controllerrb

先ほどモデルで作ったメソッドを呼び出します赤字部分を変更していきます

class RestaurantsController lt ApplicationController

GET restaurants

GET restaurantsxml

def index

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

end

今回は index 以外は使わないので削除しましょう(コメントアウトでもいいよ)

最終行の end も削除してしまわないように注意

requestquery_parameters

リクエストパラメータを引数にします

19

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

続いて rbc_tabelogappviewsrestaurantsindexhtmlerbの修正

ココはこんな感じでごっそり置き換えましょう

lth1gtRBC食べログlth1gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

ActiveResouece から値を取得します

ltRestaurantInfogt

ltItemgt

ltRestaurantNamegt千松しまltRestaurantNamegt

ltTabelogUrlgthttprtabelogcommiyagiA0404A0404044001636ltTabelogUrlgt

ltTotalScoregt467ltTotalScoregt

ltTasteScoregt464ltTasteScoregt

ltServiceScoregt469ltServiceScoregt

ltMoodScoregt432ltMoodScoregt

ltSituationgt友人同僚とデート接待ltSituationgt

ltDinnerPricegt¥10000 ~¥14999ltDinnerPricegt

ltLunchPricegt¥10000 ~¥14999ltLunchPricegt

ltCategorygt割烹小料理ltCategorygt

ltStationgt東塩釜本塩釜西塩釜ltStationgt

ltItemgt

食べログAPI結果

20

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

サーバーの起動

cyenrbcyenrbc_tabeloggtruby scriptserver

=gt Booting Mongrel

=gt Rails 232 application starting on http00003000

=gt Call with -d to detach

=gt Ctrl-C to shutdown server

サーバーが実行できたら

httplocalhost3000restaurants

21

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

こんな画面が表示されていれば成功です

Rails だと WebAPI を画面表示させるのはこんなに簡単です

httplocalhost3000restaurants

Chapter 3

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

23

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

このままだとチョット寂しいので検索条件を追加していきましょう

今回追加する条件は以下の3つです

都道府県名

ページ番号

都道府県名はプルダウンの

データを scaffold で作っていきます

ページ番号は最後に簡単につくります

24

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

さっそく都道府県名の作成

まずは土台を scaffold で作成しちゃいます

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate scaffold Prefecture enstring jastring

25

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

続いてデータの中身を作成していきます

cyenrbcyenrbc_tabeloggtruby scriptgenerate migration InsertPrefectures

26

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

rbc_tabelogdbmigrate(数字)_insert_prefecturesrb

class InsertPrefectures lt ActiveRecordMigration

def selfup

items = [

en =gt japan ja =gt 全国

en =gt hokkaido ja =gt 北海道

(省略)en =gt kagoshima ja =gt 鹿児島

en =gt okinawa ja =gt 沖縄

]

itemseach do |item|

Prefecturecreate item

end

end

def selfdown

Prefecturedelete_all

end

end

ココは単調かつメンドーな作業なのでコピペしましょう

「yen1部資料yen_insert_prefecturesyeninsert_prefecturesコピー用txt」

27

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

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

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

ブラウザで以下のURLを実行してみましょう

httplocalhost3000prefectures

右のような画面が表示されればオッケーです

28

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

それではさっそく都道府県名とページ数をレストラン画面に組み込んでいきましょう

rbc_tabelogappcontrollersrestaurants_controllerrb の修正

Index メソッドの最初に2行を追加さらに create メソッドを追加します

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

end

def create

restaurants_params =

prefecture =gt params[prefecture]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurants_params

end

検索条件を設定して index にリダイレクトするだけ

ページ数は100回カウントアップした整数をセットしているだけ

Prefecturefind(all) で先ほど作った都道府県名をすべて表示

29

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

続いてrbc_tabelogappviewsrestaurantsindexhtmlerb の修正

赤字部分を追記していきます

lth1gtRBC食べログlth1gt

lt form_tag( multipart =gt true ) do -gt

ltpgt

都道府県lt= select_tag prefecture

options_from_collection_for_select(prefectures en ja params[prefecture]) gt

ltpgt

ltpgt

ページlt= select_tag pageNum options_for_select(pages params[pageNum]to_i) gt

ltpgt

lt= submit_tag 検索 name =gt search gt

lthr gt

ltulgt

lt restaurants[ldquoitem]each do |item| -gt

ltligt

lt= link_to item[ldquorestaurant_name]

item[ldquotabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

lt end -gt

最後の ldquoendrdquo も忘れずに

30

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

こんな感じで検索条件部分が表示されていればオッケー

検索条件を変更して検索ボタンを押してみましょう

httplocalhost3000restaurants

Chapter 4

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

32

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

さてさて次は画面に一言メモを残していけるようにしていきましょうこちらもサクサク作っていきます

33

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

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

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate model Bookmark rcdstring memostring

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

34

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

では実際に画面に項目を追加してみますrbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[Item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcd] gt

lt= link_to item[restaurant_name]

item [ldquotabelog_url] target =gt _blank gt

lt= item[rdquomemo] gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

35

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

続いてコントローラを修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加して画面に入力されたデータを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

登録ボタンが押されたかつラジオボタンのチェックがあったらたら if の中身を実行

find_or_initialize_by_XXX

データがあれば取得なければ作成する

36

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

rbc_tabelogappcontrollersrestaurants_controllerrb

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

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcd item[rcd]

if bookmark

item[memo] = bookmarkmemo

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

食べログAPIの検索結果分ループを実行

食べログAPIの結果にrdquomemordquoとして登録しているデータを追加

登録したブックマークを食べログのレストランCDで検索

37

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

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

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

httplocalhost3000restaurants

Chapter 5

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

39

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

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

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

paperclip

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

【参考リンク】httpwwwthoughtbotcomprojectspaperclip

httpgithubcomthoughtbotpapercliptreemasterREADMErdoc

40

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

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

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

ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須)

ruby scriptplugin install gitgithubcomthoughtbotpaperclipgit

なので古いバージョン 222 を使います資料の中にプラグイン本体を準備しています「yen1部資料yen_paperclipプラグインyenpaperclip」

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

41

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

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

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

cyenrbcyenrbc_tabeloggt ruby scriptgenerate paperclip Bookmark photo

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

42

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

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

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

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

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

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

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

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

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

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

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

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

rbc_tabelogappcontrollersrestaurants_controllerrb

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

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

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

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

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

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

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

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

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

Rails と AIR を連携

50

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

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

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

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

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 11: 20090418 イケテルRails勉強会 第1部Rails編

11

1Ruby on Rails のプロジェクトを作成

この画面が表示されたら準備オッケーです

12

1Ruby on Rails のプロジェクトを作成

2部に進む前にちょっとだけRailsについて説明Rails は MVC というパターンによって設計実装していきます

Model(モデル)データを格納する部分DBから取り出したデータを保持する

Railsでは「appyenmodelsyen基本名(単数形)rb」

NetBeansでは「モデルyen基本名rb」で表示されます

View(ビュー)ユーザに向けた見た目(画面表示)部分ユーザーインターフェース

Railsでは「appyenviewsyen基本名(複数形)yen画面名htmlerb」

NetBeansでは「ビューyen基本名(複数形)yen画面名htmlerb 」

Controller(コントローラ)ユーザからの入力を処理する部分

Railsでは「appyenviewsyen基本名(複数形)_controllerrb」

NetBeansでは「コントローラyen基本名(複数形) _controllerrb 」

Chapter 2ActiveResource をつかって食べログAPIを表示する

14

2ActiveResource をつかって食べログAPIを表示する

ActiveResource って

簡単に説明するとWebサービスを簡単に処理することが出来るRails の機能です

Rails20以降で追加されました

rarr httpapirubyonrailsorgclassesActiveRecordBasehtmlM001298(英語)

今回は「食べログcom」のWebAPI を使ってレストランの一覧の表示を行います

食べログcomとは

日本最大級の口コミグルメサイト

rarr httptabelogcom

食べログAPI

レストランの口コミ情報を取得できます

rarr httprtabelogcomhelpapi

rarr httptabelogcomhelpapi_manualrst-api

マニュアルは「yenyen1部資料yen_食べログAPIマニュアル」にも置いています

15

2ActiveResource をつかって食べログAPIを表示する

まずはAPI を表示するために

画面を作っていきます

以下のコマンドを実行

cyenrbcyenrbc_tabeloggtruby scriptgenerate scaffold Restaurant

16

2ActiveResource をつかって食べログAPIを表示する

生成された rbc_tabelogappmodelsrestaurantrbを以下のように変更

class Restaurant lt ActiveRecordBase

end

class Restaurant lt ActiveResourceBase

end

ActiveResource とは

簡単にRESTfulなAPIを使えるようにする機能です

ActiveRecord を使うのと同じような感覚でWebAPIが使用できます

17

2ActiveResource をつかって食べログAPIを表示する

rbc_tabelogappmodelsrestaurantrbをさらに変更

class Restaurant lt ActiveResourceBase

selfsite = httpapitabelogcom

def selffind_restaurants(restautant_params = )

restautant_params[Key] = 96448b290b6556976f047110914fcf91e88c38b9

Hashfrom_xml(

selffind(

one

from =gt Ver21RestaurantSearch

params =gt restautant_params

)to_xml

)

end

end

これで model は完成

API の URL を設定

検索メソッドを作成今回は引数をハッシュで渡します

食べログAPIのキーを設定しますご自分のキーを持っている方はこちらに入力

Hashfrom_xmlでxmlをハッシュに(無理矢理)変換しています

18

2ActiveResource をつかって食べログAPIを表示する

次は rbc_tabelogappcontrollersrestaurant_controllerrb

先ほどモデルで作ったメソッドを呼び出します赤字部分を変更していきます

class RestaurantsController lt ApplicationController

GET restaurants

GET restaurantsxml

def index

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

end

今回は index 以外は使わないので削除しましょう(コメントアウトでもいいよ)

最終行の end も削除してしまわないように注意

requestquery_parameters

リクエストパラメータを引数にします

19

2ActiveResource をつかって食べログAPIを表示する

続いて rbc_tabelogappviewsrestaurantsindexhtmlerbの修正

ココはこんな感じでごっそり置き換えましょう

lth1gtRBC食べログlth1gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

ActiveResouece から値を取得します

ltRestaurantInfogt

ltItemgt

ltRestaurantNamegt千松しまltRestaurantNamegt

ltTabelogUrlgthttprtabelogcommiyagiA0404A0404044001636ltTabelogUrlgt

ltTotalScoregt467ltTotalScoregt

ltTasteScoregt464ltTasteScoregt

ltServiceScoregt469ltServiceScoregt

ltMoodScoregt432ltMoodScoregt

ltSituationgt友人同僚とデート接待ltSituationgt

ltDinnerPricegt¥10000 ~¥14999ltDinnerPricegt

ltLunchPricegt¥10000 ~¥14999ltLunchPricegt

ltCategorygt割烹小料理ltCategorygt

ltStationgt東塩釜本塩釜西塩釜ltStationgt

ltItemgt

食べログAPI結果

20

2ActiveResource をつかって食べログAPIを表示する

サーバーの起動

cyenrbcyenrbc_tabeloggtruby scriptserver

=gt Booting Mongrel

=gt Rails 232 application starting on http00003000

=gt Call with -d to detach

=gt Ctrl-C to shutdown server

サーバーが実行できたら

httplocalhost3000restaurants

21

2ActiveResource をつかって食べログAPIを表示する

こんな画面が表示されていれば成功です

Rails だと WebAPI を画面表示させるのはこんなに簡単です

httplocalhost3000restaurants

Chapter 3

食べログの画面に検索条件を追加する

23

3食べログの画面に検索条件を追加する

このままだとチョット寂しいので検索条件を追加していきましょう

今回追加する条件は以下の3つです

都道府県名

ページ番号

都道府県名はプルダウンの

データを scaffold で作っていきます

ページ番号は最後に簡単につくります

24

3食べログの画面に検索条件を追加する

さっそく都道府県名の作成

まずは土台を scaffold で作成しちゃいます

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate scaffold Prefecture enstring jastring

25

3食べログの画面に検索条件を追加する

続いてデータの中身を作成していきます

cyenrbcyenrbc_tabeloggtruby scriptgenerate migration InsertPrefectures

26

3食べログの画面に検索条件を追加する

rbc_tabelogdbmigrate(数字)_insert_prefecturesrb

class InsertPrefectures lt ActiveRecordMigration

def selfup

items = [

en =gt japan ja =gt 全国

en =gt hokkaido ja =gt 北海道

(省略)en =gt kagoshima ja =gt 鹿児島

en =gt okinawa ja =gt 沖縄

]

itemseach do |item|

Prefecturecreate item

end

end

def selfdown

Prefecturedelete_all

end

end

ココは単調かつメンドーな作業なのでコピペしましょう

「yen1部資料yen_insert_prefecturesyeninsert_prefecturesコピー用txt」

27

3食べログの画面に検索条件を追加する

以下のコマンドを実行してデータをSQLite3に反映させます

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

ブラウザで以下のURLを実行してみましょう

httplocalhost3000prefectures

右のような画面が表示されればオッケーです

28

3食べログの画面に検索条件を追加する

それではさっそく都道府県名とページ数をレストラン画面に組み込んでいきましょう

rbc_tabelogappcontrollersrestaurants_controllerrb の修正

Index メソッドの最初に2行を追加さらに create メソッドを追加します

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

end

def create

restaurants_params =

prefecture =gt params[prefecture]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurants_params

end

検索条件を設定して index にリダイレクトするだけ

ページ数は100回カウントアップした整数をセットしているだけ

Prefecturefind(all) で先ほど作った都道府県名をすべて表示

29

3食べログの画面に検索条件を追加する

続いてrbc_tabelogappviewsrestaurantsindexhtmlerb の修正

赤字部分を追記していきます

lth1gtRBC食べログlth1gt

lt form_tag( multipart =gt true ) do -gt

ltpgt

都道府県lt= select_tag prefecture

options_from_collection_for_select(prefectures en ja params[prefecture]) gt

ltpgt

ltpgt

ページlt= select_tag pageNum options_for_select(pages params[pageNum]to_i) gt

ltpgt

lt= submit_tag 検索 name =gt search gt

lthr gt

ltulgt

lt restaurants[ldquoitem]each do |item| -gt

ltligt

lt= link_to item[ldquorestaurant_name]

item[ldquotabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

lt end -gt

最後の ldquoendrdquo も忘れずに

30

3食べログの画面に検索条件を追加する

こんな感じで検索条件部分が表示されていればオッケー

検索条件を変更して検索ボタンを押してみましょう

httplocalhost3000restaurants

Chapter 4

レストランに1行メモを追加できるようにする

32

4レストランに1行メモを追加できるようにする

さてさて次は画面に一言メモを残していけるようにしていきましょうこちらもサクサク作っていきます

33

4レストランに1行メモを追加できるようにする

まずはメモを残すためのモデルとテーブル作ります以下のコマンドを実行

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate model Bookmark rcdstring memostring

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

34

4レストランに1行メモを追加できるようにする

では実際に画面に項目を追加してみますrbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[Item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcd] gt

lt= link_to item[restaurant_name]

item [ldquotabelog_url] target =gt _blank gt

lt= item[rdquomemo] gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

35

4レストランに1行メモを追加できるようにする

続いてコントローラを修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加して画面に入力されたデータを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

登録ボタンが押されたかつラジオボタンのチェックがあったらたら if の中身を実行

find_or_initialize_by_XXX

データがあれば取得なければ作成する

36

4レストランに1行メモを追加できるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcd item[rcd]

if bookmark

item[memo] = bookmarkmemo

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

食べログAPIの検索結果分ループを実行

食べログAPIの結果にrdquomemordquoとして登録しているデータを追加

登録したブックマークを食べログのレストランCDで検索

37

4レストランに1行メモを追加できるようにする

では画面を確認してみましょう

メモ欄が追加されていますか登録してみてください結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 5

paperclip を使って画像をアップできるようにする

39

5paperclip を使って画像をアップできるようにする

コンテンツの完成も近づいてきました次は画像のアップを出来るようにしましょう

画像のアップ機能を追加するには paperclip というプラグインを使えば簡単です

paperclip

Rails上でファイルのアップロードを簡単に実装できるプラグイン

【参考リンク】httpwwwthoughtbotcomprojectspaperclip

httpgithubcomthoughtbotpapercliptreemasterREADMErdoc

40

5paperclip を使って画像をアップできるようにする

さっそく paprtclip プラグインをインストールしましょう

paperclip プラグインは git を使って入手できますが最新版はなぜかWindows 環境では動きませんhellip

ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須)

ruby scriptplugin install gitgithubcomthoughtbotpaperclipgit

なので古いバージョン 222 を使います資料の中にプラグイン本体を準備しています「yen1部資料yen_paperclipプラグインyenpaperclip」

ベンダーpluginsにドラッグオンドロップしましょうrbc_tabelogyenvendoryenplugins にコピーしてもいいです

41

5paperclip を使って画像をアップできるようにする

まずは テーブルに項目を追加しますマイグレーションファイルの作成も paperclip でできちゃいます

以下のコマンドを実行しましょう

cyenrbcyenrbc_tabeloggt ruby scriptgenerate paperclip Bookmark photo

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

42

5paperclip を使って画像をアップできるようにする

ちなみに先ほどのコマンドを実行する事でBookmarks テーブルに画像を保存するためのマイグレーションファイルが追加されました

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

5paperclip を使って画像をアップできるようにする

次に画像情報を保存するためにモデル修正しましょう修正するモデルはメモを書きこめるように作った Bookmark というモデルです

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

5paperclip を使って画像をアップできるようにする

引き続き画面に項目を追加していきましょう

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

5paperclip を使って画像をアップできるようにする

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

5paperclip を使って画像をアップできるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

5paperclip を使って画像をアップできるようにする

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

6 AIR との連携の準備をする

最後に 2部で開発する AIR アプリとの連携する部分を作ります

とは言っても実はほとんどが出来ています

Rails と AIR を連携

50

6 AIR との連携の準備をする

具体的にどのようにして連携するのでしょう

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

6 AIR との連携の準備をする

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 12: 20090418 イケテルRails勉強会 第1部Rails編

12

1Ruby on Rails のプロジェクトを作成

2部に進む前にちょっとだけRailsについて説明Rails は MVC というパターンによって設計実装していきます

Model(モデル)データを格納する部分DBから取り出したデータを保持する

Railsでは「appyenmodelsyen基本名(単数形)rb」

NetBeansでは「モデルyen基本名rb」で表示されます

View(ビュー)ユーザに向けた見た目(画面表示)部分ユーザーインターフェース

Railsでは「appyenviewsyen基本名(複数形)yen画面名htmlerb」

NetBeansでは「ビューyen基本名(複数形)yen画面名htmlerb 」

Controller(コントローラ)ユーザからの入力を処理する部分

Railsでは「appyenviewsyen基本名(複数形)_controllerrb」

NetBeansでは「コントローラyen基本名(複数形) _controllerrb 」

Chapter 2ActiveResource をつかって食べログAPIを表示する

14

2ActiveResource をつかって食べログAPIを表示する

ActiveResource って

簡単に説明するとWebサービスを簡単に処理することが出来るRails の機能です

Rails20以降で追加されました

rarr httpapirubyonrailsorgclassesActiveRecordBasehtmlM001298(英語)

今回は「食べログcom」のWebAPI を使ってレストランの一覧の表示を行います

食べログcomとは

日本最大級の口コミグルメサイト

rarr httptabelogcom

食べログAPI

レストランの口コミ情報を取得できます

rarr httprtabelogcomhelpapi

rarr httptabelogcomhelpapi_manualrst-api

マニュアルは「yenyen1部資料yen_食べログAPIマニュアル」にも置いています

15

2ActiveResource をつかって食べログAPIを表示する

まずはAPI を表示するために

画面を作っていきます

以下のコマンドを実行

cyenrbcyenrbc_tabeloggtruby scriptgenerate scaffold Restaurant

16

2ActiveResource をつかって食べログAPIを表示する

生成された rbc_tabelogappmodelsrestaurantrbを以下のように変更

class Restaurant lt ActiveRecordBase

end

class Restaurant lt ActiveResourceBase

end

ActiveResource とは

簡単にRESTfulなAPIを使えるようにする機能です

ActiveRecord を使うのと同じような感覚でWebAPIが使用できます

17

2ActiveResource をつかって食べログAPIを表示する

rbc_tabelogappmodelsrestaurantrbをさらに変更

class Restaurant lt ActiveResourceBase

selfsite = httpapitabelogcom

def selffind_restaurants(restautant_params = )

restautant_params[Key] = 96448b290b6556976f047110914fcf91e88c38b9

Hashfrom_xml(

selffind(

one

from =gt Ver21RestaurantSearch

params =gt restautant_params

)to_xml

)

end

end

これで model は完成

API の URL を設定

検索メソッドを作成今回は引数をハッシュで渡します

食べログAPIのキーを設定しますご自分のキーを持っている方はこちらに入力

Hashfrom_xmlでxmlをハッシュに(無理矢理)変換しています

18

2ActiveResource をつかって食べログAPIを表示する

次は rbc_tabelogappcontrollersrestaurant_controllerrb

先ほどモデルで作ったメソッドを呼び出します赤字部分を変更していきます

class RestaurantsController lt ApplicationController

GET restaurants

GET restaurantsxml

def index

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

end

今回は index 以外は使わないので削除しましょう(コメントアウトでもいいよ)

最終行の end も削除してしまわないように注意

requestquery_parameters

リクエストパラメータを引数にします

19

2ActiveResource をつかって食べログAPIを表示する

続いて rbc_tabelogappviewsrestaurantsindexhtmlerbの修正

ココはこんな感じでごっそり置き換えましょう

lth1gtRBC食べログlth1gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

ActiveResouece から値を取得します

ltRestaurantInfogt

ltItemgt

ltRestaurantNamegt千松しまltRestaurantNamegt

ltTabelogUrlgthttprtabelogcommiyagiA0404A0404044001636ltTabelogUrlgt

ltTotalScoregt467ltTotalScoregt

ltTasteScoregt464ltTasteScoregt

ltServiceScoregt469ltServiceScoregt

ltMoodScoregt432ltMoodScoregt

ltSituationgt友人同僚とデート接待ltSituationgt

ltDinnerPricegt¥10000 ~¥14999ltDinnerPricegt

ltLunchPricegt¥10000 ~¥14999ltLunchPricegt

ltCategorygt割烹小料理ltCategorygt

ltStationgt東塩釜本塩釜西塩釜ltStationgt

ltItemgt

食べログAPI結果

20

2ActiveResource をつかって食べログAPIを表示する

サーバーの起動

cyenrbcyenrbc_tabeloggtruby scriptserver

=gt Booting Mongrel

=gt Rails 232 application starting on http00003000

=gt Call with -d to detach

=gt Ctrl-C to shutdown server

サーバーが実行できたら

httplocalhost3000restaurants

21

2ActiveResource をつかって食べログAPIを表示する

こんな画面が表示されていれば成功です

Rails だと WebAPI を画面表示させるのはこんなに簡単です

httplocalhost3000restaurants

Chapter 3

食べログの画面に検索条件を追加する

23

3食べログの画面に検索条件を追加する

このままだとチョット寂しいので検索条件を追加していきましょう

今回追加する条件は以下の3つです

都道府県名

ページ番号

都道府県名はプルダウンの

データを scaffold で作っていきます

ページ番号は最後に簡単につくります

24

3食べログの画面に検索条件を追加する

さっそく都道府県名の作成

まずは土台を scaffold で作成しちゃいます

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate scaffold Prefecture enstring jastring

25

3食べログの画面に検索条件を追加する

続いてデータの中身を作成していきます

cyenrbcyenrbc_tabeloggtruby scriptgenerate migration InsertPrefectures

26

3食べログの画面に検索条件を追加する

rbc_tabelogdbmigrate(数字)_insert_prefecturesrb

class InsertPrefectures lt ActiveRecordMigration

def selfup

items = [

en =gt japan ja =gt 全国

en =gt hokkaido ja =gt 北海道

(省略)en =gt kagoshima ja =gt 鹿児島

en =gt okinawa ja =gt 沖縄

]

itemseach do |item|

Prefecturecreate item

end

end

def selfdown

Prefecturedelete_all

end

end

ココは単調かつメンドーな作業なのでコピペしましょう

「yen1部資料yen_insert_prefecturesyeninsert_prefecturesコピー用txt」

27

3食べログの画面に検索条件を追加する

以下のコマンドを実行してデータをSQLite3に反映させます

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

ブラウザで以下のURLを実行してみましょう

httplocalhost3000prefectures

右のような画面が表示されればオッケーです

28

3食べログの画面に検索条件を追加する

それではさっそく都道府県名とページ数をレストラン画面に組み込んでいきましょう

rbc_tabelogappcontrollersrestaurants_controllerrb の修正

Index メソッドの最初に2行を追加さらに create メソッドを追加します

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

end

def create

restaurants_params =

prefecture =gt params[prefecture]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurants_params

end

検索条件を設定して index にリダイレクトするだけ

ページ数は100回カウントアップした整数をセットしているだけ

Prefecturefind(all) で先ほど作った都道府県名をすべて表示

29

3食べログの画面に検索条件を追加する

続いてrbc_tabelogappviewsrestaurantsindexhtmlerb の修正

赤字部分を追記していきます

lth1gtRBC食べログlth1gt

lt form_tag( multipart =gt true ) do -gt

ltpgt

都道府県lt= select_tag prefecture

options_from_collection_for_select(prefectures en ja params[prefecture]) gt

ltpgt

ltpgt

ページlt= select_tag pageNum options_for_select(pages params[pageNum]to_i) gt

ltpgt

lt= submit_tag 検索 name =gt search gt

lthr gt

ltulgt

lt restaurants[ldquoitem]each do |item| -gt

ltligt

lt= link_to item[ldquorestaurant_name]

item[ldquotabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

lt end -gt

最後の ldquoendrdquo も忘れずに

30

3食べログの画面に検索条件を追加する

こんな感じで検索条件部分が表示されていればオッケー

検索条件を変更して検索ボタンを押してみましょう

httplocalhost3000restaurants

Chapter 4

レストランに1行メモを追加できるようにする

32

4レストランに1行メモを追加できるようにする

さてさて次は画面に一言メモを残していけるようにしていきましょうこちらもサクサク作っていきます

33

4レストランに1行メモを追加できるようにする

まずはメモを残すためのモデルとテーブル作ります以下のコマンドを実行

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate model Bookmark rcdstring memostring

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

34

4レストランに1行メモを追加できるようにする

では実際に画面に項目を追加してみますrbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[Item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcd] gt

lt= link_to item[restaurant_name]

item [ldquotabelog_url] target =gt _blank gt

lt= item[rdquomemo] gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

35

4レストランに1行メモを追加できるようにする

続いてコントローラを修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加して画面に入力されたデータを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

登録ボタンが押されたかつラジオボタンのチェックがあったらたら if の中身を実行

find_or_initialize_by_XXX

データがあれば取得なければ作成する

36

4レストランに1行メモを追加できるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcd item[rcd]

if bookmark

item[memo] = bookmarkmemo

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

食べログAPIの検索結果分ループを実行

食べログAPIの結果にrdquomemordquoとして登録しているデータを追加

登録したブックマークを食べログのレストランCDで検索

37

4レストランに1行メモを追加できるようにする

では画面を確認してみましょう

メモ欄が追加されていますか登録してみてください結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 5

paperclip を使って画像をアップできるようにする

39

5paperclip を使って画像をアップできるようにする

コンテンツの完成も近づいてきました次は画像のアップを出来るようにしましょう

画像のアップ機能を追加するには paperclip というプラグインを使えば簡単です

paperclip

Rails上でファイルのアップロードを簡単に実装できるプラグイン

【参考リンク】httpwwwthoughtbotcomprojectspaperclip

httpgithubcomthoughtbotpapercliptreemasterREADMErdoc

40

5paperclip を使って画像をアップできるようにする

さっそく paprtclip プラグインをインストールしましょう

paperclip プラグインは git を使って入手できますが最新版はなぜかWindows 環境では動きませんhellip

ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須)

ruby scriptplugin install gitgithubcomthoughtbotpaperclipgit

なので古いバージョン 222 を使います資料の中にプラグイン本体を準備しています「yen1部資料yen_paperclipプラグインyenpaperclip」

ベンダーpluginsにドラッグオンドロップしましょうrbc_tabelogyenvendoryenplugins にコピーしてもいいです

41

5paperclip を使って画像をアップできるようにする

まずは テーブルに項目を追加しますマイグレーションファイルの作成も paperclip でできちゃいます

以下のコマンドを実行しましょう

cyenrbcyenrbc_tabeloggt ruby scriptgenerate paperclip Bookmark photo

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

42

5paperclip を使って画像をアップできるようにする

ちなみに先ほどのコマンドを実行する事でBookmarks テーブルに画像を保存するためのマイグレーションファイルが追加されました

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

5paperclip を使って画像をアップできるようにする

次に画像情報を保存するためにモデル修正しましょう修正するモデルはメモを書きこめるように作った Bookmark というモデルです

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

5paperclip を使って画像をアップできるようにする

引き続き画面に項目を追加していきましょう

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

5paperclip を使って画像をアップできるようにする

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

5paperclip を使って画像をアップできるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

5paperclip を使って画像をアップできるようにする

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

6 AIR との連携の準備をする

最後に 2部で開発する AIR アプリとの連携する部分を作ります

とは言っても実はほとんどが出来ています

Rails と AIR を連携

50

6 AIR との連携の準備をする

具体的にどのようにして連携するのでしょう

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

6 AIR との連携の準備をする

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 13: 20090418 イケテルRails勉強会 第1部Rails編

Chapter 2ActiveResource をつかって食べログAPIを表示する

14

2ActiveResource をつかって食べログAPIを表示する

ActiveResource って

簡単に説明するとWebサービスを簡単に処理することが出来るRails の機能です

Rails20以降で追加されました

rarr httpapirubyonrailsorgclassesActiveRecordBasehtmlM001298(英語)

今回は「食べログcom」のWebAPI を使ってレストランの一覧の表示を行います

食べログcomとは

日本最大級の口コミグルメサイト

rarr httptabelogcom

食べログAPI

レストランの口コミ情報を取得できます

rarr httprtabelogcomhelpapi

rarr httptabelogcomhelpapi_manualrst-api

マニュアルは「yenyen1部資料yen_食べログAPIマニュアル」にも置いています

15

2ActiveResource をつかって食べログAPIを表示する

まずはAPI を表示するために

画面を作っていきます

以下のコマンドを実行

cyenrbcyenrbc_tabeloggtruby scriptgenerate scaffold Restaurant

16

2ActiveResource をつかって食べログAPIを表示する

生成された rbc_tabelogappmodelsrestaurantrbを以下のように変更

class Restaurant lt ActiveRecordBase

end

class Restaurant lt ActiveResourceBase

end

ActiveResource とは

簡単にRESTfulなAPIを使えるようにする機能です

ActiveRecord を使うのと同じような感覚でWebAPIが使用できます

17

2ActiveResource をつかって食べログAPIを表示する

rbc_tabelogappmodelsrestaurantrbをさらに変更

class Restaurant lt ActiveResourceBase

selfsite = httpapitabelogcom

def selffind_restaurants(restautant_params = )

restautant_params[Key] = 96448b290b6556976f047110914fcf91e88c38b9

Hashfrom_xml(

selffind(

one

from =gt Ver21RestaurantSearch

params =gt restautant_params

)to_xml

)

end

end

これで model は完成

API の URL を設定

検索メソッドを作成今回は引数をハッシュで渡します

食べログAPIのキーを設定しますご自分のキーを持っている方はこちらに入力

Hashfrom_xmlでxmlをハッシュに(無理矢理)変換しています

18

2ActiveResource をつかって食べログAPIを表示する

次は rbc_tabelogappcontrollersrestaurant_controllerrb

先ほどモデルで作ったメソッドを呼び出します赤字部分を変更していきます

class RestaurantsController lt ApplicationController

GET restaurants

GET restaurantsxml

def index

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

end

今回は index 以外は使わないので削除しましょう(コメントアウトでもいいよ)

最終行の end も削除してしまわないように注意

requestquery_parameters

リクエストパラメータを引数にします

19

2ActiveResource をつかって食べログAPIを表示する

続いて rbc_tabelogappviewsrestaurantsindexhtmlerbの修正

ココはこんな感じでごっそり置き換えましょう

lth1gtRBC食べログlth1gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

ActiveResouece から値を取得します

ltRestaurantInfogt

ltItemgt

ltRestaurantNamegt千松しまltRestaurantNamegt

ltTabelogUrlgthttprtabelogcommiyagiA0404A0404044001636ltTabelogUrlgt

ltTotalScoregt467ltTotalScoregt

ltTasteScoregt464ltTasteScoregt

ltServiceScoregt469ltServiceScoregt

ltMoodScoregt432ltMoodScoregt

ltSituationgt友人同僚とデート接待ltSituationgt

ltDinnerPricegt¥10000 ~¥14999ltDinnerPricegt

ltLunchPricegt¥10000 ~¥14999ltLunchPricegt

ltCategorygt割烹小料理ltCategorygt

ltStationgt東塩釜本塩釜西塩釜ltStationgt

ltItemgt

食べログAPI結果

20

2ActiveResource をつかって食べログAPIを表示する

サーバーの起動

cyenrbcyenrbc_tabeloggtruby scriptserver

=gt Booting Mongrel

=gt Rails 232 application starting on http00003000

=gt Call with -d to detach

=gt Ctrl-C to shutdown server

サーバーが実行できたら

httplocalhost3000restaurants

21

2ActiveResource をつかって食べログAPIを表示する

こんな画面が表示されていれば成功です

Rails だと WebAPI を画面表示させるのはこんなに簡単です

httplocalhost3000restaurants

Chapter 3

食べログの画面に検索条件を追加する

23

3食べログの画面に検索条件を追加する

このままだとチョット寂しいので検索条件を追加していきましょう

今回追加する条件は以下の3つです

都道府県名

ページ番号

都道府県名はプルダウンの

データを scaffold で作っていきます

ページ番号は最後に簡単につくります

24

3食べログの画面に検索条件を追加する

さっそく都道府県名の作成

まずは土台を scaffold で作成しちゃいます

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate scaffold Prefecture enstring jastring

25

3食べログの画面に検索条件を追加する

続いてデータの中身を作成していきます

cyenrbcyenrbc_tabeloggtruby scriptgenerate migration InsertPrefectures

26

3食べログの画面に検索条件を追加する

rbc_tabelogdbmigrate(数字)_insert_prefecturesrb

class InsertPrefectures lt ActiveRecordMigration

def selfup

items = [

en =gt japan ja =gt 全国

en =gt hokkaido ja =gt 北海道

(省略)en =gt kagoshima ja =gt 鹿児島

en =gt okinawa ja =gt 沖縄

]

itemseach do |item|

Prefecturecreate item

end

end

def selfdown

Prefecturedelete_all

end

end

ココは単調かつメンドーな作業なのでコピペしましょう

「yen1部資料yen_insert_prefecturesyeninsert_prefecturesコピー用txt」

27

3食べログの画面に検索条件を追加する

以下のコマンドを実行してデータをSQLite3に反映させます

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

ブラウザで以下のURLを実行してみましょう

httplocalhost3000prefectures

右のような画面が表示されればオッケーです

28

3食べログの画面に検索条件を追加する

それではさっそく都道府県名とページ数をレストラン画面に組み込んでいきましょう

rbc_tabelogappcontrollersrestaurants_controllerrb の修正

Index メソッドの最初に2行を追加さらに create メソッドを追加します

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

end

def create

restaurants_params =

prefecture =gt params[prefecture]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurants_params

end

検索条件を設定して index にリダイレクトするだけ

ページ数は100回カウントアップした整数をセットしているだけ

Prefecturefind(all) で先ほど作った都道府県名をすべて表示

29

3食べログの画面に検索条件を追加する

続いてrbc_tabelogappviewsrestaurantsindexhtmlerb の修正

赤字部分を追記していきます

lth1gtRBC食べログlth1gt

lt form_tag( multipart =gt true ) do -gt

ltpgt

都道府県lt= select_tag prefecture

options_from_collection_for_select(prefectures en ja params[prefecture]) gt

ltpgt

ltpgt

ページlt= select_tag pageNum options_for_select(pages params[pageNum]to_i) gt

ltpgt

lt= submit_tag 検索 name =gt search gt

lthr gt

ltulgt

lt restaurants[ldquoitem]each do |item| -gt

ltligt

lt= link_to item[ldquorestaurant_name]

item[ldquotabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

lt end -gt

最後の ldquoendrdquo も忘れずに

30

3食べログの画面に検索条件を追加する

こんな感じで検索条件部分が表示されていればオッケー

検索条件を変更して検索ボタンを押してみましょう

httplocalhost3000restaurants

Chapter 4

レストランに1行メモを追加できるようにする

32

4レストランに1行メモを追加できるようにする

さてさて次は画面に一言メモを残していけるようにしていきましょうこちらもサクサク作っていきます

33

4レストランに1行メモを追加できるようにする

まずはメモを残すためのモデルとテーブル作ります以下のコマンドを実行

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate model Bookmark rcdstring memostring

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

34

4レストランに1行メモを追加できるようにする

では実際に画面に項目を追加してみますrbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[Item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcd] gt

lt= link_to item[restaurant_name]

item [ldquotabelog_url] target =gt _blank gt

lt= item[rdquomemo] gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

35

4レストランに1行メモを追加できるようにする

続いてコントローラを修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加して画面に入力されたデータを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

登録ボタンが押されたかつラジオボタンのチェックがあったらたら if の中身を実行

find_or_initialize_by_XXX

データがあれば取得なければ作成する

36

4レストランに1行メモを追加できるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcd item[rcd]

if bookmark

item[memo] = bookmarkmemo

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

食べログAPIの検索結果分ループを実行

食べログAPIの結果にrdquomemordquoとして登録しているデータを追加

登録したブックマークを食べログのレストランCDで検索

37

4レストランに1行メモを追加できるようにする

では画面を確認してみましょう

メモ欄が追加されていますか登録してみてください結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 5

paperclip を使って画像をアップできるようにする

39

5paperclip を使って画像をアップできるようにする

コンテンツの完成も近づいてきました次は画像のアップを出来るようにしましょう

画像のアップ機能を追加するには paperclip というプラグインを使えば簡単です

paperclip

Rails上でファイルのアップロードを簡単に実装できるプラグイン

【参考リンク】httpwwwthoughtbotcomprojectspaperclip

httpgithubcomthoughtbotpapercliptreemasterREADMErdoc

40

5paperclip を使って画像をアップできるようにする

さっそく paprtclip プラグインをインストールしましょう

paperclip プラグインは git を使って入手できますが最新版はなぜかWindows 環境では動きませんhellip

ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須)

ruby scriptplugin install gitgithubcomthoughtbotpaperclipgit

なので古いバージョン 222 を使います資料の中にプラグイン本体を準備しています「yen1部資料yen_paperclipプラグインyenpaperclip」

ベンダーpluginsにドラッグオンドロップしましょうrbc_tabelogyenvendoryenplugins にコピーしてもいいです

41

5paperclip を使って画像をアップできるようにする

まずは テーブルに項目を追加しますマイグレーションファイルの作成も paperclip でできちゃいます

以下のコマンドを実行しましょう

cyenrbcyenrbc_tabeloggt ruby scriptgenerate paperclip Bookmark photo

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

42

5paperclip を使って画像をアップできるようにする

ちなみに先ほどのコマンドを実行する事でBookmarks テーブルに画像を保存するためのマイグレーションファイルが追加されました

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

5paperclip を使って画像をアップできるようにする

次に画像情報を保存するためにモデル修正しましょう修正するモデルはメモを書きこめるように作った Bookmark というモデルです

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

5paperclip を使って画像をアップできるようにする

引き続き画面に項目を追加していきましょう

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

5paperclip を使って画像をアップできるようにする

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

5paperclip を使って画像をアップできるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

5paperclip を使って画像をアップできるようにする

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

6 AIR との連携の準備をする

最後に 2部で開発する AIR アプリとの連携する部分を作ります

とは言っても実はほとんどが出来ています

Rails と AIR を連携

50

6 AIR との連携の準備をする

具体的にどのようにして連携するのでしょう

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

6 AIR との連携の準備をする

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 14: 20090418 イケテルRails勉強会 第1部Rails編

14

2ActiveResource をつかって食べログAPIを表示する

ActiveResource って

簡単に説明するとWebサービスを簡単に処理することが出来るRails の機能です

Rails20以降で追加されました

rarr httpapirubyonrailsorgclassesActiveRecordBasehtmlM001298(英語)

今回は「食べログcom」のWebAPI を使ってレストランの一覧の表示を行います

食べログcomとは

日本最大級の口コミグルメサイト

rarr httptabelogcom

食べログAPI

レストランの口コミ情報を取得できます

rarr httprtabelogcomhelpapi

rarr httptabelogcomhelpapi_manualrst-api

マニュアルは「yenyen1部資料yen_食べログAPIマニュアル」にも置いています

15

2ActiveResource をつかって食べログAPIを表示する

まずはAPI を表示するために

画面を作っていきます

以下のコマンドを実行

cyenrbcyenrbc_tabeloggtruby scriptgenerate scaffold Restaurant

16

2ActiveResource をつかって食べログAPIを表示する

生成された rbc_tabelogappmodelsrestaurantrbを以下のように変更

class Restaurant lt ActiveRecordBase

end

class Restaurant lt ActiveResourceBase

end

ActiveResource とは

簡単にRESTfulなAPIを使えるようにする機能です

ActiveRecord を使うのと同じような感覚でWebAPIが使用できます

17

2ActiveResource をつかって食べログAPIを表示する

rbc_tabelogappmodelsrestaurantrbをさらに変更

class Restaurant lt ActiveResourceBase

selfsite = httpapitabelogcom

def selffind_restaurants(restautant_params = )

restautant_params[Key] = 96448b290b6556976f047110914fcf91e88c38b9

Hashfrom_xml(

selffind(

one

from =gt Ver21RestaurantSearch

params =gt restautant_params

)to_xml

)

end

end

これで model は完成

API の URL を設定

検索メソッドを作成今回は引数をハッシュで渡します

食べログAPIのキーを設定しますご自分のキーを持っている方はこちらに入力

Hashfrom_xmlでxmlをハッシュに(無理矢理)変換しています

18

2ActiveResource をつかって食べログAPIを表示する

次は rbc_tabelogappcontrollersrestaurant_controllerrb

先ほどモデルで作ったメソッドを呼び出します赤字部分を変更していきます

class RestaurantsController lt ApplicationController

GET restaurants

GET restaurantsxml

def index

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

end

今回は index 以外は使わないので削除しましょう(コメントアウトでもいいよ)

最終行の end も削除してしまわないように注意

requestquery_parameters

リクエストパラメータを引数にします

19

2ActiveResource をつかって食べログAPIを表示する

続いて rbc_tabelogappviewsrestaurantsindexhtmlerbの修正

ココはこんな感じでごっそり置き換えましょう

lth1gtRBC食べログlth1gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

ActiveResouece から値を取得します

ltRestaurantInfogt

ltItemgt

ltRestaurantNamegt千松しまltRestaurantNamegt

ltTabelogUrlgthttprtabelogcommiyagiA0404A0404044001636ltTabelogUrlgt

ltTotalScoregt467ltTotalScoregt

ltTasteScoregt464ltTasteScoregt

ltServiceScoregt469ltServiceScoregt

ltMoodScoregt432ltMoodScoregt

ltSituationgt友人同僚とデート接待ltSituationgt

ltDinnerPricegt¥10000 ~¥14999ltDinnerPricegt

ltLunchPricegt¥10000 ~¥14999ltLunchPricegt

ltCategorygt割烹小料理ltCategorygt

ltStationgt東塩釜本塩釜西塩釜ltStationgt

ltItemgt

食べログAPI結果

20

2ActiveResource をつかって食べログAPIを表示する

サーバーの起動

cyenrbcyenrbc_tabeloggtruby scriptserver

=gt Booting Mongrel

=gt Rails 232 application starting on http00003000

=gt Call with -d to detach

=gt Ctrl-C to shutdown server

サーバーが実行できたら

httplocalhost3000restaurants

21

2ActiveResource をつかって食べログAPIを表示する

こんな画面が表示されていれば成功です

Rails だと WebAPI を画面表示させるのはこんなに簡単です

httplocalhost3000restaurants

Chapter 3

食べログの画面に検索条件を追加する

23

3食べログの画面に検索条件を追加する

このままだとチョット寂しいので検索条件を追加していきましょう

今回追加する条件は以下の3つです

都道府県名

ページ番号

都道府県名はプルダウンの

データを scaffold で作っていきます

ページ番号は最後に簡単につくります

24

3食べログの画面に検索条件を追加する

さっそく都道府県名の作成

まずは土台を scaffold で作成しちゃいます

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate scaffold Prefecture enstring jastring

25

3食べログの画面に検索条件を追加する

続いてデータの中身を作成していきます

cyenrbcyenrbc_tabeloggtruby scriptgenerate migration InsertPrefectures

26

3食べログの画面に検索条件を追加する

rbc_tabelogdbmigrate(数字)_insert_prefecturesrb

class InsertPrefectures lt ActiveRecordMigration

def selfup

items = [

en =gt japan ja =gt 全国

en =gt hokkaido ja =gt 北海道

(省略)en =gt kagoshima ja =gt 鹿児島

en =gt okinawa ja =gt 沖縄

]

itemseach do |item|

Prefecturecreate item

end

end

def selfdown

Prefecturedelete_all

end

end

ココは単調かつメンドーな作業なのでコピペしましょう

「yen1部資料yen_insert_prefecturesyeninsert_prefecturesコピー用txt」

27

3食べログの画面に検索条件を追加する

以下のコマンドを実行してデータをSQLite3に反映させます

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

ブラウザで以下のURLを実行してみましょう

httplocalhost3000prefectures

右のような画面が表示されればオッケーです

28

3食べログの画面に検索条件を追加する

それではさっそく都道府県名とページ数をレストラン画面に組み込んでいきましょう

rbc_tabelogappcontrollersrestaurants_controllerrb の修正

Index メソッドの最初に2行を追加さらに create メソッドを追加します

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

end

def create

restaurants_params =

prefecture =gt params[prefecture]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurants_params

end

検索条件を設定して index にリダイレクトするだけ

ページ数は100回カウントアップした整数をセットしているだけ

Prefecturefind(all) で先ほど作った都道府県名をすべて表示

29

3食べログの画面に検索条件を追加する

続いてrbc_tabelogappviewsrestaurantsindexhtmlerb の修正

赤字部分を追記していきます

lth1gtRBC食べログlth1gt

lt form_tag( multipart =gt true ) do -gt

ltpgt

都道府県lt= select_tag prefecture

options_from_collection_for_select(prefectures en ja params[prefecture]) gt

ltpgt

ltpgt

ページlt= select_tag pageNum options_for_select(pages params[pageNum]to_i) gt

ltpgt

lt= submit_tag 検索 name =gt search gt

lthr gt

ltulgt

lt restaurants[ldquoitem]each do |item| -gt

ltligt

lt= link_to item[ldquorestaurant_name]

item[ldquotabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

lt end -gt

最後の ldquoendrdquo も忘れずに

30

3食べログの画面に検索条件を追加する

こんな感じで検索条件部分が表示されていればオッケー

検索条件を変更して検索ボタンを押してみましょう

httplocalhost3000restaurants

Chapter 4

レストランに1行メモを追加できるようにする

32

4レストランに1行メモを追加できるようにする

さてさて次は画面に一言メモを残していけるようにしていきましょうこちらもサクサク作っていきます

33

4レストランに1行メモを追加できるようにする

まずはメモを残すためのモデルとテーブル作ります以下のコマンドを実行

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate model Bookmark rcdstring memostring

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

34

4レストランに1行メモを追加できるようにする

では実際に画面に項目を追加してみますrbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[Item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcd] gt

lt= link_to item[restaurant_name]

item [ldquotabelog_url] target =gt _blank gt

lt= item[rdquomemo] gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

35

4レストランに1行メモを追加できるようにする

続いてコントローラを修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加して画面に入力されたデータを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

登録ボタンが押されたかつラジオボタンのチェックがあったらたら if の中身を実行

find_or_initialize_by_XXX

データがあれば取得なければ作成する

36

4レストランに1行メモを追加できるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcd item[rcd]

if bookmark

item[memo] = bookmarkmemo

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

食べログAPIの検索結果分ループを実行

食べログAPIの結果にrdquomemordquoとして登録しているデータを追加

登録したブックマークを食べログのレストランCDで検索

37

4レストランに1行メモを追加できるようにする

では画面を確認してみましょう

メモ欄が追加されていますか登録してみてください結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 5

paperclip を使って画像をアップできるようにする

39

5paperclip を使って画像をアップできるようにする

コンテンツの完成も近づいてきました次は画像のアップを出来るようにしましょう

画像のアップ機能を追加するには paperclip というプラグインを使えば簡単です

paperclip

Rails上でファイルのアップロードを簡単に実装できるプラグイン

【参考リンク】httpwwwthoughtbotcomprojectspaperclip

httpgithubcomthoughtbotpapercliptreemasterREADMErdoc

40

5paperclip を使って画像をアップできるようにする

さっそく paprtclip プラグインをインストールしましょう

paperclip プラグインは git を使って入手できますが最新版はなぜかWindows 環境では動きませんhellip

ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須)

ruby scriptplugin install gitgithubcomthoughtbotpaperclipgit

なので古いバージョン 222 を使います資料の中にプラグイン本体を準備しています「yen1部資料yen_paperclipプラグインyenpaperclip」

ベンダーpluginsにドラッグオンドロップしましょうrbc_tabelogyenvendoryenplugins にコピーしてもいいです

41

5paperclip を使って画像をアップできるようにする

まずは テーブルに項目を追加しますマイグレーションファイルの作成も paperclip でできちゃいます

以下のコマンドを実行しましょう

cyenrbcyenrbc_tabeloggt ruby scriptgenerate paperclip Bookmark photo

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

42

5paperclip を使って画像をアップできるようにする

ちなみに先ほどのコマンドを実行する事でBookmarks テーブルに画像を保存するためのマイグレーションファイルが追加されました

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

5paperclip を使って画像をアップできるようにする

次に画像情報を保存するためにモデル修正しましょう修正するモデルはメモを書きこめるように作った Bookmark というモデルです

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

5paperclip を使って画像をアップできるようにする

引き続き画面に項目を追加していきましょう

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

5paperclip を使って画像をアップできるようにする

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

5paperclip を使って画像をアップできるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

5paperclip を使って画像をアップできるようにする

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

6 AIR との連携の準備をする

最後に 2部で開発する AIR アプリとの連携する部分を作ります

とは言っても実はほとんどが出来ています

Rails と AIR を連携

50

6 AIR との連携の準備をする

具体的にどのようにして連携するのでしょう

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

6 AIR との連携の準備をする

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 15: 20090418 イケテルRails勉強会 第1部Rails編

15

2ActiveResource をつかって食べログAPIを表示する

まずはAPI を表示するために

画面を作っていきます

以下のコマンドを実行

cyenrbcyenrbc_tabeloggtruby scriptgenerate scaffold Restaurant

16

2ActiveResource をつかって食べログAPIを表示する

生成された rbc_tabelogappmodelsrestaurantrbを以下のように変更

class Restaurant lt ActiveRecordBase

end

class Restaurant lt ActiveResourceBase

end

ActiveResource とは

簡単にRESTfulなAPIを使えるようにする機能です

ActiveRecord を使うのと同じような感覚でWebAPIが使用できます

17

2ActiveResource をつかって食べログAPIを表示する

rbc_tabelogappmodelsrestaurantrbをさらに変更

class Restaurant lt ActiveResourceBase

selfsite = httpapitabelogcom

def selffind_restaurants(restautant_params = )

restautant_params[Key] = 96448b290b6556976f047110914fcf91e88c38b9

Hashfrom_xml(

selffind(

one

from =gt Ver21RestaurantSearch

params =gt restautant_params

)to_xml

)

end

end

これで model は完成

API の URL を設定

検索メソッドを作成今回は引数をハッシュで渡します

食べログAPIのキーを設定しますご自分のキーを持っている方はこちらに入力

Hashfrom_xmlでxmlをハッシュに(無理矢理)変換しています

18

2ActiveResource をつかって食べログAPIを表示する

次は rbc_tabelogappcontrollersrestaurant_controllerrb

先ほどモデルで作ったメソッドを呼び出します赤字部分を変更していきます

class RestaurantsController lt ApplicationController

GET restaurants

GET restaurantsxml

def index

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

end

今回は index 以外は使わないので削除しましょう(コメントアウトでもいいよ)

最終行の end も削除してしまわないように注意

requestquery_parameters

リクエストパラメータを引数にします

19

2ActiveResource をつかって食べログAPIを表示する

続いて rbc_tabelogappviewsrestaurantsindexhtmlerbの修正

ココはこんな感じでごっそり置き換えましょう

lth1gtRBC食べログlth1gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

ActiveResouece から値を取得します

ltRestaurantInfogt

ltItemgt

ltRestaurantNamegt千松しまltRestaurantNamegt

ltTabelogUrlgthttprtabelogcommiyagiA0404A0404044001636ltTabelogUrlgt

ltTotalScoregt467ltTotalScoregt

ltTasteScoregt464ltTasteScoregt

ltServiceScoregt469ltServiceScoregt

ltMoodScoregt432ltMoodScoregt

ltSituationgt友人同僚とデート接待ltSituationgt

ltDinnerPricegt¥10000 ~¥14999ltDinnerPricegt

ltLunchPricegt¥10000 ~¥14999ltLunchPricegt

ltCategorygt割烹小料理ltCategorygt

ltStationgt東塩釜本塩釜西塩釜ltStationgt

ltItemgt

食べログAPI結果

20

2ActiveResource をつかって食べログAPIを表示する

サーバーの起動

cyenrbcyenrbc_tabeloggtruby scriptserver

=gt Booting Mongrel

=gt Rails 232 application starting on http00003000

=gt Call with -d to detach

=gt Ctrl-C to shutdown server

サーバーが実行できたら

httplocalhost3000restaurants

21

2ActiveResource をつかって食べログAPIを表示する

こんな画面が表示されていれば成功です

Rails だと WebAPI を画面表示させるのはこんなに簡単です

httplocalhost3000restaurants

Chapter 3

食べログの画面に検索条件を追加する

23

3食べログの画面に検索条件を追加する

このままだとチョット寂しいので検索条件を追加していきましょう

今回追加する条件は以下の3つです

都道府県名

ページ番号

都道府県名はプルダウンの

データを scaffold で作っていきます

ページ番号は最後に簡単につくります

24

3食べログの画面に検索条件を追加する

さっそく都道府県名の作成

まずは土台を scaffold で作成しちゃいます

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate scaffold Prefecture enstring jastring

25

3食べログの画面に検索条件を追加する

続いてデータの中身を作成していきます

cyenrbcyenrbc_tabeloggtruby scriptgenerate migration InsertPrefectures

26

3食べログの画面に検索条件を追加する

rbc_tabelogdbmigrate(数字)_insert_prefecturesrb

class InsertPrefectures lt ActiveRecordMigration

def selfup

items = [

en =gt japan ja =gt 全国

en =gt hokkaido ja =gt 北海道

(省略)en =gt kagoshima ja =gt 鹿児島

en =gt okinawa ja =gt 沖縄

]

itemseach do |item|

Prefecturecreate item

end

end

def selfdown

Prefecturedelete_all

end

end

ココは単調かつメンドーな作業なのでコピペしましょう

「yen1部資料yen_insert_prefecturesyeninsert_prefecturesコピー用txt」

27

3食べログの画面に検索条件を追加する

以下のコマンドを実行してデータをSQLite3に反映させます

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

ブラウザで以下のURLを実行してみましょう

httplocalhost3000prefectures

右のような画面が表示されればオッケーです

28

3食べログの画面に検索条件を追加する

それではさっそく都道府県名とページ数をレストラン画面に組み込んでいきましょう

rbc_tabelogappcontrollersrestaurants_controllerrb の修正

Index メソッドの最初に2行を追加さらに create メソッドを追加します

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

end

def create

restaurants_params =

prefecture =gt params[prefecture]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurants_params

end

検索条件を設定して index にリダイレクトするだけ

ページ数は100回カウントアップした整数をセットしているだけ

Prefecturefind(all) で先ほど作った都道府県名をすべて表示

29

3食べログの画面に検索条件を追加する

続いてrbc_tabelogappviewsrestaurantsindexhtmlerb の修正

赤字部分を追記していきます

lth1gtRBC食べログlth1gt

lt form_tag( multipart =gt true ) do -gt

ltpgt

都道府県lt= select_tag prefecture

options_from_collection_for_select(prefectures en ja params[prefecture]) gt

ltpgt

ltpgt

ページlt= select_tag pageNum options_for_select(pages params[pageNum]to_i) gt

ltpgt

lt= submit_tag 検索 name =gt search gt

lthr gt

ltulgt

lt restaurants[ldquoitem]each do |item| -gt

ltligt

lt= link_to item[ldquorestaurant_name]

item[ldquotabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

lt end -gt

最後の ldquoendrdquo も忘れずに

30

3食べログの画面に検索条件を追加する

こんな感じで検索条件部分が表示されていればオッケー

検索条件を変更して検索ボタンを押してみましょう

httplocalhost3000restaurants

Chapter 4

レストランに1行メモを追加できるようにする

32

4レストランに1行メモを追加できるようにする

さてさて次は画面に一言メモを残していけるようにしていきましょうこちらもサクサク作っていきます

33

4レストランに1行メモを追加できるようにする

まずはメモを残すためのモデルとテーブル作ります以下のコマンドを実行

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate model Bookmark rcdstring memostring

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

34

4レストランに1行メモを追加できるようにする

では実際に画面に項目を追加してみますrbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[Item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcd] gt

lt= link_to item[restaurant_name]

item [ldquotabelog_url] target =gt _blank gt

lt= item[rdquomemo] gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

35

4レストランに1行メモを追加できるようにする

続いてコントローラを修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加して画面に入力されたデータを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

登録ボタンが押されたかつラジオボタンのチェックがあったらたら if の中身を実行

find_or_initialize_by_XXX

データがあれば取得なければ作成する

36

4レストランに1行メモを追加できるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcd item[rcd]

if bookmark

item[memo] = bookmarkmemo

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

食べログAPIの検索結果分ループを実行

食べログAPIの結果にrdquomemordquoとして登録しているデータを追加

登録したブックマークを食べログのレストランCDで検索

37

4レストランに1行メモを追加できるようにする

では画面を確認してみましょう

メモ欄が追加されていますか登録してみてください結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 5

paperclip を使って画像をアップできるようにする

39

5paperclip を使って画像をアップできるようにする

コンテンツの完成も近づいてきました次は画像のアップを出来るようにしましょう

画像のアップ機能を追加するには paperclip というプラグインを使えば簡単です

paperclip

Rails上でファイルのアップロードを簡単に実装できるプラグイン

【参考リンク】httpwwwthoughtbotcomprojectspaperclip

httpgithubcomthoughtbotpapercliptreemasterREADMErdoc

40

5paperclip を使って画像をアップできるようにする

さっそく paprtclip プラグインをインストールしましょう

paperclip プラグインは git を使って入手できますが最新版はなぜかWindows 環境では動きませんhellip

ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須)

ruby scriptplugin install gitgithubcomthoughtbotpaperclipgit

なので古いバージョン 222 を使います資料の中にプラグイン本体を準備しています「yen1部資料yen_paperclipプラグインyenpaperclip」

ベンダーpluginsにドラッグオンドロップしましょうrbc_tabelogyenvendoryenplugins にコピーしてもいいです

41

5paperclip を使って画像をアップできるようにする

まずは テーブルに項目を追加しますマイグレーションファイルの作成も paperclip でできちゃいます

以下のコマンドを実行しましょう

cyenrbcyenrbc_tabeloggt ruby scriptgenerate paperclip Bookmark photo

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

42

5paperclip を使って画像をアップできるようにする

ちなみに先ほどのコマンドを実行する事でBookmarks テーブルに画像を保存するためのマイグレーションファイルが追加されました

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

5paperclip を使って画像をアップできるようにする

次に画像情報を保存するためにモデル修正しましょう修正するモデルはメモを書きこめるように作った Bookmark というモデルです

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

5paperclip を使って画像をアップできるようにする

引き続き画面に項目を追加していきましょう

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

5paperclip を使って画像をアップできるようにする

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

5paperclip を使って画像をアップできるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

5paperclip を使って画像をアップできるようにする

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

6 AIR との連携の準備をする

最後に 2部で開発する AIR アプリとの連携する部分を作ります

とは言っても実はほとんどが出来ています

Rails と AIR を連携

50

6 AIR との連携の準備をする

具体的にどのようにして連携するのでしょう

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

6 AIR との連携の準備をする

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 16: 20090418 イケテルRails勉強会 第1部Rails編

16

2ActiveResource をつかって食べログAPIを表示する

生成された rbc_tabelogappmodelsrestaurantrbを以下のように変更

class Restaurant lt ActiveRecordBase

end

class Restaurant lt ActiveResourceBase

end

ActiveResource とは

簡単にRESTfulなAPIを使えるようにする機能です

ActiveRecord を使うのと同じような感覚でWebAPIが使用できます

17

2ActiveResource をつかって食べログAPIを表示する

rbc_tabelogappmodelsrestaurantrbをさらに変更

class Restaurant lt ActiveResourceBase

selfsite = httpapitabelogcom

def selffind_restaurants(restautant_params = )

restautant_params[Key] = 96448b290b6556976f047110914fcf91e88c38b9

Hashfrom_xml(

selffind(

one

from =gt Ver21RestaurantSearch

params =gt restautant_params

)to_xml

)

end

end

これで model は完成

API の URL を設定

検索メソッドを作成今回は引数をハッシュで渡します

食べログAPIのキーを設定しますご自分のキーを持っている方はこちらに入力

Hashfrom_xmlでxmlをハッシュに(無理矢理)変換しています

18

2ActiveResource をつかって食べログAPIを表示する

次は rbc_tabelogappcontrollersrestaurant_controllerrb

先ほどモデルで作ったメソッドを呼び出します赤字部分を変更していきます

class RestaurantsController lt ApplicationController

GET restaurants

GET restaurantsxml

def index

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

end

今回は index 以外は使わないので削除しましょう(コメントアウトでもいいよ)

最終行の end も削除してしまわないように注意

requestquery_parameters

リクエストパラメータを引数にします

19

2ActiveResource をつかって食べログAPIを表示する

続いて rbc_tabelogappviewsrestaurantsindexhtmlerbの修正

ココはこんな感じでごっそり置き換えましょう

lth1gtRBC食べログlth1gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

ActiveResouece から値を取得します

ltRestaurantInfogt

ltItemgt

ltRestaurantNamegt千松しまltRestaurantNamegt

ltTabelogUrlgthttprtabelogcommiyagiA0404A0404044001636ltTabelogUrlgt

ltTotalScoregt467ltTotalScoregt

ltTasteScoregt464ltTasteScoregt

ltServiceScoregt469ltServiceScoregt

ltMoodScoregt432ltMoodScoregt

ltSituationgt友人同僚とデート接待ltSituationgt

ltDinnerPricegt¥10000 ~¥14999ltDinnerPricegt

ltLunchPricegt¥10000 ~¥14999ltLunchPricegt

ltCategorygt割烹小料理ltCategorygt

ltStationgt東塩釜本塩釜西塩釜ltStationgt

ltItemgt

食べログAPI結果

20

2ActiveResource をつかって食べログAPIを表示する

サーバーの起動

cyenrbcyenrbc_tabeloggtruby scriptserver

=gt Booting Mongrel

=gt Rails 232 application starting on http00003000

=gt Call with -d to detach

=gt Ctrl-C to shutdown server

サーバーが実行できたら

httplocalhost3000restaurants

21

2ActiveResource をつかって食べログAPIを表示する

こんな画面が表示されていれば成功です

Rails だと WebAPI を画面表示させるのはこんなに簡単です

httplocalhost3000restaurants

Chapter 3

食べログの画面に検索条件を追加する

23

3食べログの画面に検索条件を追加する

このままだとチョット寂しいので検索条件を追加していきましょう

今回追加する条件は以下の3つです

都道府県名

ページ番号

都道府県名はプルダウンの

データを scaffold で作っていきます

ページ番号は最後に簡単につくります

24

3食べログの画面に検索条件を追加する

さっそく都道府県名の作成

まずは土台を scaffold で作成しちゃいます

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate scaffold Prefecture enstring jastring

25

3食べログの画面に検索条件を追加する

続いてデータの中身を作成していきます

cyenrbcyenrbc_tabeloggtruby scriptgenerate migration InsertPrefectures

26

3食べログの画面に検索条件を追加する

rbc_tabelogdbmigrate(数字)_insert_prefecturesrb

class InsertPrefectures lt ActiveRecordMigration

def selfup

items = [

en =gt japan ja =gt 全国

en =gt hokkaido ja =gt 北海道

(省略)en =gt kagoshima ja =gt 鹿児島

en =gt okinawa ja =gt 沖縄

]

itemseach do |item|

Prefecturecreate item

end

end

def selfdown

Prefecturedelete_all

end

end

ココは単調かつメンドーな作業なのでコピペしましょう

「yen1部資料yen_insert_prefecturesyeninsert_prefecturesコピー用txt」

27

3食べログの画面に検索条件を追加する

以下のコマンドを実行してデータをSQLite3に反映させます

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

ブラウザで以下のURLを実行してみましょう

httplocalhost3000prefectures

右のような画面が表示されればオッケーです

28

3食べログの画面に検索条件を追加する

それではさっそく都道府県名とページ数をレストラン画面に組み込んでいきましょう

rbc_tabelogappcontrollersrestaurants_controllerrb の修正

Index メソッドの最初に2行を追加さらに create メソッドを追加します

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

end

def create

restaurants_params =

prefecture =gt params[prefecture]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurants_params

end

検索条件を設定して index にリダイレクトするだけ

ページ数は100回カウントアップした整数をセットしているだけ

Prefecturefind(all) で先ほど作った都道府県名をすべて表示

29

3食べログの画面に検索条件を追加する

続いてrbc_tabelogappviewsrestaurantsindexhtmlerb の修正

赤字部分を追記していきます

lth1gtRBC食べログlth1gt

lt form_tag( multipart =gt true ) do -gt

ltpgt

都道府県lt= select_tag prefecture

options_from_collection_for_select(prefectures en ja params[prefecture]) gt

ltpgt

ltpgt

ページlt= select_tag pageNum options_for_select(pages params[pageNum]to_i) gt

ltpgt

lt= submit_tag 検索 name =gt search gt

lthr gt

ltulgt

lt restaurants[ldquoitem]each do |item| -gt

ltligt

lt= link_to item[ldquorestaurant_name]

item[ldquotabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

lt end -gt

最後の ldquoendrdquo も忘れずに

30

3食べログの画面に検索条件を追加する

こんな感じで検索条件部分が表示されていればオッケー

検索条件を変更して検索ボタンを押してみましょう

httplocalhost3000restaurants

Chapter 4

レストランに1行メモを追加できるようにする

32

4レストランに1行メモを追加できるようにする

さてさて次は画面に一言メモを残していけるようにしていきましょうこちらもサクサク作っていきます

33

4レストランに1行メモを追加できるようにする

まずはメモを残すためのモデルとテーブル作ります以下のコマンドを実行

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate model Bookmark rcdstring memostring

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

34

4レストランに1行メモを追加できるようにする

では実際に画面に項目を追加してみますrbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[Item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcd] gt

lt= link_to item[restaurant_name]

item [ldquotabelog_url] target =gt _blank gt

lt= item[rdquomemo] gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

35

4レストランに1行メモを追加できるようにする

続いてコントローラを修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加して画面に入力されたデータを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

登録ボタンが押されたかつラジオボタンのチェックがあったらたら if の中身を実行

find_or_initialize_by_XXX

データがあれば取得なければ作成する

36

4レストランに1行メモを追加できるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcd item[rcd]

if bookmark

item[memo] = bookmarkmemo

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

食べログAPIの検索結果分ループを実行

食べログAPIの結果にrdquomemordquoとして登録しているデータを追加

登録したブックマークを食べログのレストランCDで検索

37

4レストランに1行メモを追加できるようにする

では画面を確認してみましょう

メモ欄が追加されていますか登録してみてください結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 5

paperclip を使って画像をアップできるようにする

39

5paperclip を使って画像をアップできるようにする

コンテンツの完成も近づいてきました次は画像のアップを出来るようにしましょう

画像のアップ機能を追加するには paperclip というプラグインを使えば簡単です

paperclip

Rails上でファイルのアップロードを簡単に実装できるプラグイン

【参考リンク】httpwwwthoughtbotcomprojectspaperclip

httpgithubcomthoughtbotpapercliptreemasterREADMErdoc

40

5paperclip を使って画像をアップできるようにする

さっそく paprtclip プラグインをインストールしましょう

paperclip プラグインは git を使って入手できますが最新版はなぜかWindows 環境では動きませんhellip

ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須)

ruby scriptplugin install gitgithubcomthoughtbotpaperclipgit

なので古いバージョン 222 を使います資料の中にプラグイン本体を準備しています「yen1部資料yen_paperclipプラグインyenpaperclip」

ベンダーpluginsにドラッグオンドロップしましょうrbc_tabelogyenvendoryenplugins にコピーしてもいいです

41

5paperclip を使って画像をアップできるようにする

まずは テーブルに項目を追加しますマイグレーションファイルの作成も paperclip でできちゃいます

以下のコマンドを実行しましょう

cyenrbcyenrbc_tabeloggt ruby scriptgenerate paperclip Bookmark photo

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

42

5paperclip を使って画像をアップできるようにする

ちなみに先ほどのコマンドを実行する事でBookmarks テーブルに画像を保存するためのマイグレーションファイルが追加されました

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

5paperclip を使って画像をアップできるようにする

次に画像情報を保存するためにモデル修正しましょう修正するモデルはメモを書きこめるように作った Bookmark というモデルです

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

5paperclip を使って画像をアップできるようにする

引き続き画面に項目を追加していきましょう

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

5paperclip を使って画像をアップできるようにする

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

5paperclip を使って画像をアップできるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

5paperclip を使って画像をアップできるようにする

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

6 AIR との連携の準備をする

最後に 2部で開発する AIR アプリとの連携する部分を作ります

とは言っても実はほとんどが出来ています

Rails と AIR を連携

50

6 AIR との連携の準備をする

具体的にどのようにして連携するのでしょう

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

6 AIR との連携の準備をする

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 17: 20090418 イケテルRails勉強会 第1部Rails編

17

2ActiveResource をつかって食べログAPIを表示する

rbc_tabelogappmodelsrestaurantrbをさらに変更

class Restaurant lt ActiveResourceBase

selfsite = httpapitabelogcom

def selffind_restaurants(restautant_params = )

restautant_params[Key] = 96448b290b6556976f047110914fcf91e88c38b9

Hashfrom_xml(

selffind(

one

from =gt Ver21RestaurantSearch

params =gt restautant_params

)to_xml

)

end

end

これで model は完成

API の URL を設定

検索メソッドを作成今回は引数をハッシュで渡します

食べログAPIのキーを設定しますご自分のキーを持っている方はこちらに入力

Hashfrom_xmlでxmlをハッシュに(無理矢理)変換しています

18

2ActiveResource をつかって食べログAPIを表示する

次は rbc_tabelogappcontrollersrestaurant_controllerrb

先ほどモデルで作ったメソッドを呼び出します赤字部分を変更していきます

class RestaurantsController lt ApplicationController

GET restaurants

GET restaurantsxml

def index

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

end

今回は index 以外は使わないので削除しましょう(コメントアウトでもいいよ)

最終行の end も削除してしまわないように注意

requestquery_parameters

リクエストパラメータを引数にします

19

2ActiveResource をつかって食べログAPIを表示する

続いて rbc_tabelogappviewsrestaurantsindexhtmlerbの修正

ココはこんな感じでごっそり置き換えましょう

lth1gtRBC食べログlth1gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

ActiveResouece から値を取得します

ltRestaurantInfogt

ltItemgt

ltRestaurantNamegt千松しまltRestaurantNamegt

ltTabelogUrlgthttprtabelogcommiyagiA0404A0404044001636ltTabelogUrlgt

ltTotalScoregt467ltTotalScoregt

ltTasteScoregt464ltTasteScoregt

ltServiceScoregt469ltServiceScoregt

ltMoodScoregt432ltMoodScoregt

ltSituationgt友人同僚とデート接待ltSituationgt

ltDinnerPricegt¥10000 ~¥14999ltDinnerPricegt

ltLunchPricegt¥10000 ~¥14999ltLunchPricegt

ltCategorygt割烹小料理ltCategorygt

ltStationgt東塩釜本塩釜西塩釜ltStationgt

ltItemgt

食べログAPI結果

20

2ActiveResource をつかって食べログAPIを表示する

サーバーの起動

cyenrbcyenrbc_tabeloggtruby scriptserver

=gt Booting Mongrel

=gt Rails 232 application starting on http00003000

=gt Call with -d to detach

=gt Ctrl-C to shutdown server

サーバーが実行できたら

httplocalhost3000restaurants

21

2ActiveResource をつかって食べログAPIを表示する

こんな画面が表示されていれば成功です

Rails だと WebAPI を画面表示させるのはこんなに簡単です

httplocalhost3000restaurants

Chapter 3

食べログの画面に検索条件を追加する

23

3食べログの画面に検索条件を追加する

このままだとチョット寂しいので検索条件を追加していきましょう

今回追加する条件は以下の3つです

都道府県名

ページ番号

都道府県名はプルダウンの

データを scaffold で作っていきます

ページ番号は最後に簡単につくります

24

3食べログの画面に検索条件を追加する

さっそく都道府県名の作成

まずは土台を scaffold で作成しちゃいます

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate scaffold Prefecture enstring jastring

25

3食べログの画面に検索条件を追加する

続いてデータの中身を作成していきます

cyenrbcyenrbc_tabeloggtruby scriptgenerate migration InsertPrefectures

26

3食べログの画面に検索条件を追加する

rbc_tabelogdbmigrate(数字)_insert_prefecturesrb

class InsertPrefectures lt ActiveRecordMigration

def selfup

items = [

en =gt japan ja =gt 全国

en =gt hokkaido ja =gt 北海道

(省略)en =gt kagoshima ja =gt 鹿児島

en =gt okinawa ja =gt 沖縄

]

itemseach do |item|

Prefecturecreate item

end

end

def selfdown

Prefecturedelete_all

end

end

ココは単調かつメンドーな作業なのでコピペしましょう

「yen1部資料yen_insert_prefecturesyeninsert_prefecturesコピー用txt」

27

3食べログの画面に検索条件を追加する

以下のコマンドを実行してデータをSQLite3に反映させます

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

ブラウザで以下のURLを実行してみましょう

httplocalhost3000prefectures

右のような画面が表示されればオッケーです

28

3食べログの画面に検索条件を追加する

それではさっそく都道府県名とページ数をレストラン画面に組み込んでいきましょう

rbc_tabelogappcontrollersrestaurants_controllerrb の修正

Index メソッドの最初に2行を追加さらに create メソッドを追加します

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

end

def create

restaurants_params =

prefecture =gt params[prefecture]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurants_params

end

検索条件を設定して index にリダイレクトするだけ

ページ数は100回カウントアップした整数をセットしているだけ

Prefecturefind(all) で先ほど作った都道府県名をすべて表示

29

3食べログの画面に検索条件を追加する

続いてrbc_tabelogappviewsrestaurantsindexhtmlerb の修正

赤字部分を追記していきます

lth1gtRBC食べログlth1gt

lt form_tag( multipart =gt true ) do -gt

ltpgt

都道府県lt= select_tag prefecture

options_from_collection_for_select(prefectures en ja params[prefecture]) gt

ltpgt

ltpgt

ページlt= select_tag pageNum options_for_select(pages params[pageNum]to_i) gt

ltpgt

lt= submit_tag 検索 name =gt search gt

lthr gt

ltulgt

lt restaurants[ldquoitem]each do |item| -gt

ltligt

lt= link_to item[ldquorestaurant_name]

item[ldquotabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

lt end -gt

最後の ldquoendrdquo も忘れずに

30

3食べログの画面に検索条件を追加する

こんな感じで検索条件部分が表示されていればオッケー

検索条件を変更して検索ボタンを押してみましょう

httplocalhost3000restaurants

Chapter 4

レストランに1行メモを追加できるようにする

32

4レストランに1行メモを追加できるようにする

さてさて次は画面に一言メモを残していけるようにしていきましょうこちらもサクサク作っていきます

33

4レストランに1行メモを追加できるようにする

まずはメモを残すためのモデルとテーブル作ります以下のコマンドを実行

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate model Bookmark rcdstring memostring

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

34

4レストランに1行メモを追加できるようにする

では実際に画面に項目を追加してみますrbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[Item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcd] gt

lt= link_to item[restaurant_name]

item [ldquotabelog_url] target =gt _blank gt

lt= item[rdquomemo] gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

35

4レストランに1行メモを追加できるようにする

続いてコントローラを修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加して画面に入力されたデータを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

登録ボタンが押されたかつラジオボタンのチェックがあったらたら if の中身を実行

find_or_initialize_by_XXX

データがあれば取得なければ作成する

36

4レストランに1行メモを追加できるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcd item[rcd]

if bookmark

item[memo] = bookmarkmemo

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

食べログAPIの検索結果分ループを実行

食べログAPIの結果にrdquomemordquoとして登録しているデータを追加

登録したブックマークを食べログのレストランCDで検索

37

4レストランに1行メモを追加できるようにする

では画面を確認してみましょう

メモ欄が追加されていますか登録してみてください結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 5

paperclip を使って画像をアップできるようにする

39

5paperclip を使って画像をアップできるようにする

コンテンツの完成も近づいてきました次は画像のアップを出来るようにしましょう

画像のアップ機能を追加するには paperclip というプラグインを使えば簡単です

paperclip

Rails上でファイルのアップロードを簡単に実装できるプラグイン

【参考リンク】httpwwwthoughtbotcomprojectspaperclip

httpgithubcomthoughtbotpapercliptreemasterREADMErdoc

40

5paperclip を使って画像をアップできるようにする

さっそく paprtclip プラグインをインストールしましょう

paperclip プラグインは git を使って入手できますが最新版はなぜかWindows 環境では動きませんhellip

ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須)

ruby scriptplugin install gitgithubcomthoughtbotpaperclipgit

なので古いバージョン 222 を使います資料の中にプラグイン本体を準備しています「yen1部資料yen_paperclipプラグインyenpaperclip」

ベンダーpluginsにドラッグオンドロップしましょうrbc_tabelogyenvendoryenplugins にコピーしてもいいです

41

5paperclip を使って画像をアップできるようにする

まずは テーブルに項目を追加しますマイグレーションファイルの作成も paperclip でできちゃいます

以下のコマンドを実行しましょう

cyenrbcyenrbc_tabeloggt ruby scriptgenerate paperclip Bookmark photo

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

42

5paperclip を使って画像をアップできるようにする

ちなみに先ほどのコマンドを実行する事でBookmarks テーブルに画像を保存するためのマイグレーションファイルが追加されました

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

5paperclip を使って画像をアップできるようにする

次に画像情報を保存するためにモデル修正しましょう修正するモデルはメモを書きこめるように作った Bookmark というモデルです

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

5paperclip を使って画像をアップできるようにする

引き続き画面に項目を追加していきましょう

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

5paperclip を使って画像をアップできるようにする

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

5paperclip を使って画像をアップできるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

5paperclip を使って画像をアップできるようにする

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

6 AIR との連携の準備をする

最後に 2部で開発する AIR アプリとの連携する部分を作ります

とは言っても実はほとんどが出来ています

Rails と AIR を連携

50

6 AIR との連携の準備をする

具体的にどのようにして連携するのでしょう

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

6 AIR との連携の準備をする

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 18: 20090418 イケテルRails勉強会 第1部Rails編

18

2ActiveResource をつかって食べログAPIを表示する

次は rbc_tabelogappcontrollersrestaurant_controllerrb

先ほどモデルで作ったメソッドを呼び出します赤字部分を変更していきます

class RestaurantsController lt ApplicationController

GET restaurants

GET restaurantsxml

def index

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

end

今回は index 以外は使わないので削除しましょう(コメントアウトでもいいよ)

最終行の end も削除してしまわないように注意

requestquery_parameters

リクエストパラメータを引数にします

19

2ActiveResource をつかって食べログAPIを表示する

続いて rbc_tabelogappviewsrestaurantsindexhtmlerbの修正

ココはこんな感じでごっそり置き換えましょう

lth1gtRBC食べログlth1gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

ActiveResouece から値を取得します

ltRestaurantInfogt

ltItemgt

ltRestaurantNamegt千松しまltRestaurantNamegt

ltTabelogUrlgthttprtabelogcommiyagiA0404A0404044001636ltTabelogUrlgt

ltTotalScoregt467ltTotalScoregt

ltTasteScoregt464ltTasteScoregt

ltServiceScoregt469ltServiceScoregt

ltMoodScoregt432ltMoodScoregt

ltSituationgt友人同僚とデート接待ltSituationgt

ltDinnerPricegt¥10000 ~¥14999ltDinnerPricegt

ltLunchPricegt¥10000 ~¥14999ltLunchPricegt

ltCategorygt割烹小料理ltCategorygt

ltStationgt東塩釜本塩釜西塩釜ltStationgt

ltItemgt

食べログAPI結果

20

2ActiveResource をつかって食べログAPIを表示する

サーバーの起動

cyenrbcyenrbc_tabeloggtruby scriptserver

=gt Booting Mongrel

=gt Rails 232 application starting on http00003000

=gt Call with -d to detach

=gt Ctrl-C to shutdown server

サーバーが実行できたら

httplocalhost3000restaurants

21

2ActiveResource をつかって食べログAPIを表示する

こんな画面が表示されていれば成功です

Rails だと WebAPI を画面表示させるのはこんなに簡単です

httplocalhost3000restaurants

Chapter 3

食べログの画面に検索条件を追加する

23

3食べログの画面に検索条件を追加する

このままだとチョット寂しいので検索条件を追加していきましょう

今回追加する条件は以下の3つです

都道府県名

ページ番号

都道府県名はプルダウンの

データを scaffold で作っていきます

ページ番号は最後に簡単につくります

24

3食べログの画面に検索条件を追加する

さっそく都道府県名の作成

まずは土台を scaffold で作成しちゃいます

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate scaffold Prefecture enstring jastring

25

3食べログの画面に検索条件を追加する

続いてデータの中身を作成していきます

cyenrbcyenrbc_tabeloggtruby scriptgenerate migration InsertPrefectures

26

3食べログの画面に検索条件を追加する

rbc_tabelogdbmigrate(数字)_insert_prefecturesrb

class InsertPrefectures lt ActiveRecordMigration

def selfup

items = [

en =gt japan ja =gt 全国

en =gt hokkaido ja =gt 北海道

(省略)en =gt kagoshima ja =gt 鹿児島

en =gt okinawa ja =gt 沖縄

]

itemseach do |item|

Prefecturecreate item

end

end

def selfdown

Prefecturedelete_all

end

end

ココは単調かつメンドーな作業なのでコピペしましょう

「yen1部資料yen_insert_prefecturesyeninsert_prefecturesコピー用txt」

27

3食べログの画面に検索条件を追加する

以下のコマンドを実行してデータをSQLite3に反映させます

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

ブラウザで以下のURLを実行してみましょう

httplocalhost3000prefectures

右のような画面が表示されればオッケーです

28

3食べログの画面に検索条件を追加する

それではさっそく都道府県名とページ数をレストラン画面に組み込んでいきましょう

rbc_tabelogappcontrollersrestaurants_controllerrb の修正

Index メソッドの最初に2行を追加さらに create メソッドを追加します

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

end

def create

restaurants_params =

prefecture =gt params[prefecture]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurants_params

end

検索条件を設定して index にリダイレクトするだけ

ページ数は100回カウントアップした整数をセットしているだけ

Prefecturefind(all) で先ほど作った都道府県名をすべて表示

29

3食べログの画面に検索条件を追加する

続いてrbc_tabelogappviewsrestaurantsindexhtmlerb の修正

赤字部分を追記していきます

lth1gtRBC食べログlth1gt

lt form_tag( multipart =gt true ) do -gt

ltpgt

都道府県lt= select_tag prefecture

options_from_collection_for_select(prefectures en ja params[prefecture]) gt

ltpgt

ltpgt

ページlt= select_tag pageNum options_for_select(pages params[pageNum]to_i) gt

ltpgt

lt= submit_tag 検索 name =gt search gt

lthr gt

ltulgt

lt restaurants[ldquoitem]each do |item| -gt

ltligt

lt= link_to item[ldquorestaurant_name]

item[ldquotabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

lt end -gt

最後の ldquoendrdquo も忘れずに

30

3食べログの画面に検索条件を追加する

こんな感じで検索条件部分が表示されていればオッケー

検索条件を変更して検索ボタンを押してみましょう

httplocalhost3000restaurants

Chapter 4

レストランに1行メモを追加できるようにする

32

4レストランに1行メモを追加できるようにする

さてさて次は画面に一言メモを残していけるようにしていきましょうこちらもサクサク作っていきます

33

4レストランに1行メモを追加できるようにする

まずはメモを残すためのモデルとテーブル作ります以下のコマンドを実行

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate model Bookmark rcdstring memostring

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

34

4レストランに1行メモを追加できるようにする

では実際に画面に項目を追加してみますrbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[Item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcd] gt

lt= link_to item[restaurant_name]

item [ldquotabelog_url] target =gt _blank gt

lt= item[rdquomemo] gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

35

4レストランに1行メモを追加できるようにする

続いてコントローラを修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加して画面に入力されたデータを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

登録ボタンが押されたかつラジオボタンのチェックがあったらたら if の中身を実行

find_or_initialize_by_XXX

データがあれば取得なければ作成する

36

4レストランに1行メモを追加できるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcd item[rcd]

if bookmark

item[memo] = bookmarkmemo

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

食べログAPIの検索結果分ループを実行

食べログAPIの結果にrdquomemordquoとして登録しているデータを追加

登録したブックマークを食べログのレストランCDで検索

37

4レストランに1行メモを追加できるようにする

では画面を確認してみましょう

メモ欄が追加されていますか登録してみてください結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 5

paperclip を使って画像をアップできるようにする

39

5paperclip を使って画像をアップできるようにする

コンテンツの完成も近づいてきました次は画像のアップを出来るようにしましょう

画像のアップ機能を追加するには paperclip というプラグインを使えば簡単です

paperclip

Rails上でファイルのアップロードを簡単に実装できるプラグイン

【参考リンク】httpwwwthoughtbotcomprojectspaperclip

httpgithubcomthoughtbotpapercliptreemasterREADMErdoc

40

5paperclip を使って画像をアップできるようにする

さっそく paprtclip プラグインをインストールしましょう

paperclip プラグインは git を使って入手できますが最新版はなぜかWindows 環境では動きませんhellip

ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須)

ruby scriptplugin install gitgithubcomthoughtbotpaperclipgit

なので古いバージョン 222 を使います資料の中にプラグイン本体を準備しています「yen1部資料yen_paperclipプラグインyenpaperclip」

ベンダーpluginsにドラッグオンドロップしましょうrbc_tabelogyenvendoryenplugins にコピーしてもいいです

41

5paperclip を使って画像をアップできるようにする

まずは テーブルに項目を追加しますマイグレーションファイルの作成も paperclip でできちゃいます

以下のコマンドを実行しましょう

cyenrbcyenrbc_tabeloggt ruby scriptgenerate paperclip Bookmark photo

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

42

5paperclip を使って画像をアップできるようにする

ちなみに先ほどのコマンドを実行する事でBookmarks テーブルに画像を保存するためのマイグレーションファイルが追加されました

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

5paperclip を使って画像をアップできるようにする

次に画像情報を保存するためにモデル修正しましょう修正するモデルはメモを書きこめるように作った Bookmark というモデルです

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

5paperclip を使って画像をアップできるようにする

引き続き画面に項目を追加していきましょう

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

5paperclip を使って画像をアップできるようにする

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

5paperclip を使って画像をアップできるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

5paperclip を使って画像をアップできるようにする

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

6 AIR との連携の準備をする

最後に 2部で開発する AIR アプリとの連携する部分を作ります

とは言っても実はほとんどが出来ています

Rails と AIR を連携

50

6 AIR との連携の準備をする

具体的にどのようにして連携するのでしょう

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

6 AIR との連携の準備をする

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 19: 20090418 イケテルRails勉強会 第1部Rails編

19

2ActiveResource をつかって食べログAPIを表示する

続いて rbc_tabelogappviewsrestaurantsindexhtmlerbの修正

ココはこんな感じでごっそり置き換えましょう

lth1gtRBC食べログlth1gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

ActiveResouece から値を取得します

ltRestaurantInfogt

ltItemgt

ltRestaurantNamegt千松しまltRestaurantNamegt

ltTabelogUrlgthttprtabelogcommiyagiA0404A0404044001636ltTabelogUrlgt

ltTotalScoregt467ltTotalScoregt

ltTasteScoregt464ltTasteScoregt

ltServiceScoregt469ltServiceScoregt

ltMoodScoregt432ltMoodScoregt

ltSituationgt友人同僚とデート接待ltSituationgt

ltDinnerPricegt¥10000 ~¥14999ltDinnerPricegt

ltLunchPricegt¥10000 ~¥14999ltLunchPricegt

ltCategorygt割烹小料理ltCategorygt

ltStationgt東塩釜本塩釜西塩釜ltStationgt

ltItemgt

食べログAPI結果

20

2ActiveResource をつかって食べログAPIを表示する

サーバーの起動

cyenrbcyenrbc_tabeloggtruby scriptserver

=gt Booting Mongrel

=gt Rails 232 application starting on http00003000

=gt Call with -d to detach

=gt Ctrl-C to shutdown server

サーバーが実行できたら

httplocalhost3000restaurants

21

2ActiveResource をつかって食べログAPIを表示する

こんな画面が表示されていれば成功です

Rails だと WebAPI を画面表示させるのはこんなに簡単です

httplocalhost3000restaurants

Chapter 3

食べログの画面に検索条件を追加する

23

3食べログの画面に検索条件を追加する

このままだとチョット寂しいので検索条件を追加していきましょう

今回追加する条件は以下の3つです

都道府県名

ページ番号

都道府県名はプルダウンの

データを scaffold で作っていきます

ページ番号は最後に簡単につくります

24

3食べログの画面に検索条件を追加する

さっそく都道府県名の作成

まずは土台を scaffold で作成しちゃいます

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate scaffold Prefecture enstring jastring

25

3食べログの画面に検索条件を追加する

続いてデータの中身を作成していきます

cyenrbcyenrbc_tabeloggtruby scriptgenerate migration InsertPrefectures

26

3食べログの画面に検索条件を追加する

rbc_tabelogdbmigrate(数字)_insert_prefecturesrb

class InsertPrefectures lt ActiveRecordMigration

def selfup

items = [

en =gt japan ja =gt 全国

en =gt hokkaido ja =gt 北海道

(省略)en =gt kagoshima ja =gt 鹿児島

en =gt okinawa ja =gt 沖縄

]

itemseach do |item|

Prefecturecreate item

end

end

def selfdown

Prefecturedelete_all

end

end

ココは単調かつメンドーな作業なのでコピペしましょう

「yen1部資料yen_insert_prefecturesyeninsert_prefecturesコピー用txt」

27

3食べログの画面に検索条件を追加する

以下のコマンドを実行してデータをSQLite3に反映させます

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

ブラウザで以下のURLを実行してみましょう

httplocalhost3000prefectures

右のような画面が表示されればオッケーです

28

3食べログの画面に検索条件を追加する

それではさっそく都道府県名とページ数をレストラン画面に組み込んでいきましょう

rbc_tabelogappcontrollersrestaurants_controllerrb の修正

Index メソッドの最初に2行を追加さらに create メソッドを追加します

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

end

def create

restaurants_params =

prefecture =gt params[prefecture]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurants_params

end

検索条件を設定して index にリダイレクトするだけ

ページ数は100回カウントアップした整数をセットしているだけ

Prefecturefind(all) で先ほど作った都道府県名をすべて表示

29

3食べログの画面に検索条件を追加する

続いてrbc_tabelogappviewsrestaurantsindexhtmlerb の修正

赤字部分を追記していきます

lth1gtRBC食べログlth1gt

lt form_tag( multipart =gt true ) do -gt

ltpgt

都道府県lt= select_tag prefecture

options_from_collection_for_select(prefectures en ja params[prefecture]) gt

ltpgt

ltpgt

ページlt= select_tag pageNum options_for_select(pages params[pageNum]to_i) gt

ltpgt

lt= submit_tag 検索 name =gt search gt

lthr gt

ltulgt

lt restaurants[ldquoitem]each do |item| -gt

ltligt

lt= link_to item[ldquorestaurant_name]

item[ldquotabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

lt end -gt

最後の ldquoendrdquo も忘れずに

30

3食べログの画面に検索条件を追加する

こんな感じで検索条件部分が表示されていればオッケー

検索条件を変更して検索ボタンを押してみましょう

httplocalhost3000restaurants

Chapter 4

レストランに1行メモを追加できるようにする

32

4レストランに1行メモを追加できるようにする

さてさて次は画面に一言メモを残していけるようにしていきましょうこちらもサクサク作っていきます

33

4レストランに1行メモを追加できるようにする

まずはメモを残すためのモデルとテーブル作ります以下のコマンドを実行

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate model Bookmark rcdstring memostring

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

34

4レストランに1行メモを追加できるようにする

では実際に画面に項目を追加してみますrbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[Item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcd] gt

lt= link_to item[restaurant_name]

item [ldquotabelog_url] target =gt _blank gt

lt= item[rdquomemo] gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

35

4レストランに1行メモを追加できるようにする

続いてコントローラを修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加して画面に入力されたデータを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

登録ボタンが押されたかつラジオボタンのチェックがあったらたら if の中身を実行

find_or_initialize_by_XXX

データがあれば取得なければ作成する

36

4レストランに1行メモを追加できるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcd item[rcd]

if bookmark

item[memo] = bookmarkmemo

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

食べログAPIの検索結果分ループを実行

食べログAPIの結果にrdquomemordquoとして登録しているデータを追加

登録したブックマークを食べログのレストランCDで検索

37

4レストランに1行メモを追加できるようにする

では画面を確認してみましょう

メモ欄が追加されていますか登録してみてください結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 5

paperclip を使って画像をアップできるようにする

39

5paperclip を使って画像をアップできるようにする

コンテンツの完成も近づいてきました次は画像のアップを出来るようにしましょう

画像のアップ機能を追加するには paperclip というプラグインを使えば簡単です

paperclip

Rails上でファイルのアップロードを簡単に実装できるプラグイン

【参考リンク】httpwwwthoughtbotcomprojectspaperclip

httpgithubcomthoughtbotpapercliptreemasterREADMErdoc

40

5paperclip を使って画像をアップできるようにする

さっそく paprtclip プラグインをインストールしましょう

paperclip プラグインは git を使って入手できますが最新版はなぜかWindows 環境では動きませんhellip

ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須)

ruby scriptplugin install gitgithubcomthoughtbotpaperclipgit

なので古いバージョン 222 を使います資料の中にプラグイン本体を準備しています「yen1部資料yen_paperclipプラグインyenpaperclip」

ベンダーpluginsにドラッグオンドロップしましょうrbc_tabelogyenvendoryenplugins にコピーしてもいいです

41

5paperclip を使って画像をアップできるようにする

まずは テーブルに項目を追加しますマイグレーションファイルの作成も paperclip でできちゃいます

以下のコマンドを実行しましょう

cyenrbcyenrbc_tabeloggt ruby scriptgenerate paperclip Bookmark photo

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

42

5paperclip を使って画像をアップできるようにする

ちなみに先ほどのコマンドを実行する事でBookmarks テーブルに画像を保存するためのマイグレーションファイルが追加されました

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

5paperclip を使って画像をアップできるようにする

次に画像情報を保存するためにモデル修正しましょう修正するモデルはメモを書きこめるように作った Bookmark というモデルです

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

5paperclip を使って画像をアップできるようにする

引き続き画面に項目を追加していきましょう

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

5paperclip を使って画像をアップできるようにする

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

5paperclip を使って画像をアップできるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

5paperclip を使って画像をアップできるようにする

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

6 AIR との連携の準備をする

最後に 2部で開発する AIR アプリとの連携する部分を作ります

とは言っても実はほとんどが出来ています

Rails と AIR を連携

50

6 AIR との連携の準備をする

具体的にどのようにして連携するのでしょう

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

6 AIR との連携の準備をする

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 20: 20090418 イケテルRails勉強会 第1部Rails編

20

2ActiveResource をつかって食べログAPIを表示する

サーバーの起動

cyenrbcyenrbc_tabeloggtruby scriptserver

=gt Booting Mongrel

=gt Rails 232 application starting on http00003000

=gt Call with -d to detach

=gt Ctrl-C to shutdown server

サーバーが実行できたら

httplocalhost3000restaurants

21

2ActiveResource をつかって食べログAPIを表示する

こんな画面が表示されていれば成功です

Rails だと WebAPI を画面表示させるのはこんなに簡単です

httplocalhost3000restaurants

Chapter 3

食べログの画面に検索条件を追加する

23

3食べログの画面に検索条件を追加する

このままだとチョット寂しいので検索条件を追加していきましょう

今回追加する条件は以下の3つです

都道府県名

ページ番号

都道府県名はプルダウンの

データを scaffold で作っていきます

ページ番号は最後に簡単につくります

24

3食べログの画面に検索条件を追加する

さっそく都道府県名の作成

まずは土台を scaffold で作成しちゃいます

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate scaffold Prefecture enstring jastring

25

3食べログの画面に検索条件を追加する

続いてデータの中身を作成していきます

cyenrbcyenrbc_tabeloggtruby scriptgenerate migration InsertPrefectures

26

3食べログの画面に検索条件を追加する

rbc_tabelogdbmigrate(数字)_insert_prefecturesrb

class InsertPrefectures lt ActiveRecordMigration

def selfup

items = [

en =gt japan ja =gt 全国

en =gt hokkaido ja =gt 北海道

(省略)en =gt kagoshima ja =gt 鹿児島

en =gt okinawa ja =gt 沖縄

]

itemseach do |item|

Prefecturecreate item

end

end

def selfdown

Prefecturedelete_all

end

end

ココは単調かつメンドーな作業なのでコピペしましょう

「yen1部資料yen_insert_prefecturesyeninsert_prefecturesコピー用txt」

27

3食べログの画面に検索条件を追加する

以下のコマンドを実行してデータをSQLite3に反映させます

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

ブラウザで以下のURLを実行してみましょう

httplocalhost3000prefectures

右のような画面が表示されればオッケーです

28

3食べログの画面に検索条件を追加する

それではさっそく都道府県名とページ数をレストラン画面に組み込んでいきましょう

rbc_tabelogappcontrollersrestaurants_controllerrb の修正

Index メソッドの最初に2行を追加さらに create メソッドを追加します

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

end

def create

restaurants_params =

prefecture =gt params[prefecture]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurants_params

end

検索条件を設定して index にリダイレクトするだけ

ページ数は100回カウントアップした整数をセットしているだけ

Prefecturefind(all) で先ほど作った都道府県名をすべて表示

29

3食べログの画面に検索条件を追加する

続いてrbc_tabelogappviewsrestaurantsindexhtmlerb の修正

赤字部分を追記していきます

lth1gtRBC食べログlth1gt

lt form_tag( multipart =gt true ) do -gt

ltpgt

都道府県lt= select_tag prefecture

options_from_collection_for_select(prefectures en ja params[prefecture]) gt

ltpgt

ltpgt

ページlt= select_tag pageNum options_for_select(pages params[pageNum]to_i) gt

ltpgt

lt= submit_tag 検索 name =gt search gt

lthr gt

ltulgt

lt restaurants[ldquoitem]each do |item| -gt

ltligt

lt= link_to item[ldquorestaurant_name]

item[ldquotabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

lt end -gt

最後の ldquoendrdquo も忘れずに

30

3食べログの画面に検索条件を追加する

こんな感じで検索条件部分が表示されていればオッケー

検索条件を変更して検索ボタンを押してみましょう

httplocalhost3000restaurants

Chapter 4

レストランに1行メモを追加できるようにする

32

4レストランに1行メモを追加できるようにする

さてさて次は画面に一言メモを残していけるようにしていきましょうこちらもサクサク作っていきます

33

4レストランに1行メモを追加できるようにする

まずはメモを残すためのモデルとテーブル作ります以下のコマンドを実行

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate model Bookmark rcdstring memostring

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

34

4レストランに1行メモを追加できるようにする

では実際に画面に項目を追加してみますrbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[Item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcd] gt

lt= link_to item[restaurant_name]

item [ldquotabelog_url] target =gt _blank gt

lt= item[rdquomemo] gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

35

4レストランに1行メモを追加できるようにする

続いてコントローラを修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加して画面に入力されたデータを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

登録ボタンが押されたかつラジオボタンのチェックがあったらたら if の中身を実行

find_or_initialize_by_XXX

データがあれば取得なければ作成する

36

4レストランに1行メモを追加できるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcd item[rcd]

if bookmark

item[memo] = bookmarkmemo

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

食べログAPIの検索結果分ループを実行

食べログAPIの結果にrdquomemordquoとして登録しているデータを追加

登録したブックマークを食べログのレストランCDで検索

37

4レストランに1行メモを追加できるようにする

では画面を確認してみましょう

メモ欄が追加されていますか登録してみてください結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 5

paperclip を使って画像をアップできるようにする

39

5paperclip を使って画像をアップできるようにする

コンテンツの完成も近づいてきました次は画像のアップを出来るようにしましょう

画像のアップ機能を追加するには paperclip というプラグインを使えば簡単です

paperclip

Rails上でファイルのアップロードを簡単に実装できるプラグイン

【参考リンク】httpwwwthoughtbotcomprojectspaperclip

httpgithubcomthoughtbotpapercliptreemasterREADMErdoc

40

5paperclip を使って画像をアップできるようにする

さっそく paprtclip プラグインをインストールしましょう

paperclip プラグインは git を使って入手できますが最新版はなぜかWindows 環境では動きませんhellip

ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須)

ruby scriptplugin install gitgithubcomthoughtbotpaperclipgit

なので古いバージョン 222 を使います資料の中にプラグイン本体を準備しています「yen1部資料yen_paperclipプラグインyenpaperclip」

ベンダーpluginsにドラッグオンドロップしましょうrbc_tabelogyenvendoryenplugins にコピーしてもいいです

41

5paperclip を使って画像をアップできるようにする

まずは テーブルに項目を追加しますマイグレーションファイルの作成も paperclip でできちゃいます

以下のコマンドを実行しましょう

cyenrbcyenrbc_tabeloggt ruby scriptgenerate paperclip Bookmark photo

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

42

5paperclip を使って画像をアップできるようにする

ちなみに先ほどのコマンドを実行する事でBookmarks テーブルに画像を保存するためのマイグレーションファイルが追加されました

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

5paperclip を使って画像をアップできるようにする

次に画像情報を保存するためにモデル修正しましょう修正するモデルはメモを書きこめるように作った Bookmark というモデルです

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

5paperclip を使って画像をアップできるようにする

引き続き画面に項目を追加していきましょう

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

5paperclip を使って画像をアップできるようにする

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

5paperclip を使って画像をアップできるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

5paperclip を使って画像をアップできるようにする

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

6 AIR との連携の準備をする

最後に 2部で開発する AIR アプリとの連携する部分を作ります

とは言っても実はほとんどが出来ています

Rails と AIR を連携

50

6 AIR との連携の準備をする

具体的にどのようにして連携するのでしょう

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

6 AIR との連携の準備をする

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 21: 20090418 イケテルRails勉強会 第1部Rails編

21

2ActiveResource をつかって食べログAPIを表示する

こんな画面が表示されていれば成功です

Rails だと WebAPI を画面表示させるのはこんなに簡単です

httplocalhost3000restaurants

Chapter 3

食べログの画面に検索条件を追加する

23

3食べログの画面に検索条件を追加する

このままだとチョット寂しいので検索条件を追加していきましょう

今回追加する条件は以下の3つです

都道府県名

ページ番号

都道府県名はプルダウンの

データを scaffold で作っていきます

ページ番号は最後に簡単につくります

24

3食べログの画面に検索条件を追加する

さっそく都道府県名の作成

まずは土台を scaffold で作成しちゃいます

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate scaffold Prefecture enstring jastring

25

3食べログの画面に検索条件を追加する

続いてデータの中身を作成していきます

cyenrbcyenrbc_tabeloggtruby scriptgenerate migration InsertPrefectures

26

3食べログの画面に検索条件を追加する

rbc_tabelogdbmigrate(数字)_insert_prefecturesrb

class InsertPrefectures lt ActiveRecordMigration

def selfup

items = [

en =gt japan ja =gt 全国

en =gt hokkaido ja =gt 北海道

(省略)en =gt kagoshima ja =gt 鹿児島

en =gt okinawa ja =gt 沖縄

]

itemseach do |item|

Prefecturecreate item

end

end

def selfdown

Prefecturedelete_all

end

end

ココは単調かつメンドーな作業なのでコピペしましょう

「yen1部資料yen_insert_prefecturesyeninsert_prefecturesコピー用txt」

27

3食べログの画面に検索条件を追加する

以下のコマンドを実行してデータをSQLite3に反映させます

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

ブラウザで以下のURLを実行してみましょう

httplocalhost3000prefectures

右のような画面が表示されればオッケーです

28

3食べログの画面に検索条件を追加する

それではさっそく都道府県名とページ数をレストラン画面に組み込んでいきましょう

rbc_tabelogappcontrollersrestaurants_controllerrb の修正

Index メソッドの最初に2行を追加さらに create メソッドを追加します

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

end

def create

restaurants_params =

prefecture =gt params[prefecture]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurants_params

end

検索条件を設定して index にリダイレクトするだけ

ページ数は100回カウントアップした整数をセットしているだけ

Prefecturefind(all) で先ほど作った都道府県名をすべて表示

29

3食べログの画面に検索条件を追加する

続いてrbc_tabelogappviewsrestaurantsindexhtmlerb の修正

赤字部分を追記していきます

lth1gtRBC食べログlth1gt

lt form_tag( multipart =gt true ) do -gt

ltpgt

都道府県lt= select_tag prefecture

options_from_collection_for_select(prefectures en ja params[prefecture]) gt

ltpgt

ltpgt

ページlt= select_tag pageNum options_for_select(pages params[pageNum]to_i) gt

ltpgt

lt= submit_tag 検索 name =gt search gt

lthr gt

ltulgt

lt restaurants[ldquoitem]each do |item| -gt

ltligt

lt= link_to item[ldquorestaurant_name]

item[ldquotabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

lt end -gt

最後の ldquoendrdquo も忘れずに

30

3食べログの画面に検索条件を追加する

こんな感じで検索条件部分が表示されていればオッケー

検索条件を変更して検索ボタンを押してみましょう

httplocalhost3000restaurants

Chapter 4

レストランに1行メモを追加できるようにする

32

4レストランに1行メモを追加できるようにする

さてさて次は画面に一言メモを残していけるようにしていきましょうこちらもサクサク作っていきます

33

4レストランに1行メモを追加できるようにする

まずはメモを残すためのモデルとテーブル作ります以下のコマンドを実行

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate model Bookmark rcdstring memostring

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

34

4レストランに1行メモを追加できるようにする

では実際に画面に項目を追加してみますrbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[Item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcd] gt

lt= link_to item[restaurant_name]

item [ldquotabelog_url] target =gt _blank gt

lt= item[rdquomemo] gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

35

4レストランに1行メモを追加できるようにする

続いてコントローラを修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加して画面に入力されたデータを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

登録ボタンが押されたかつラジオボタンのチェックがあったらたら if の中身を実行

find_or_initialize_by_XXX

データがあれば取得なければ作成する

36

4レストランに1行メモを追加できるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcd item[rcd]

if bookmark

item[memo] = bookmarkmemo

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

食べログAPIの検索結果分ループを実行

食べログAPIの結果にrdquomemordquoとして登録しているデータを追加

登録したブックマークを食べログのレストランCDで検索

37

4レストランに1行メモを追加できるようにする

では画面を確認してみましょう

メモ欄が追加されていますか登録してみてください結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 5

paperclip を使って画像をアップできるようにする

39

5paperclip を使って画像をアップできるようにする

コンテンツの完成も近づいてきました次は画像のアップを出来るようにしましょう

画像のアップ機能を追加するには paperclip というプラグインを使えば簡単です

paperclip

Rails上でファイルのアップロードを簡単に実装できるプラグイン

【参考リンク】httpwwwthoughtbotcomprojectspaperclip

httpgithubcomthoughtbotpapercliptreemasterREADMErdoc

40

5paperclip を使って画像をアップできるようにする

さっそく paprtclip プラグインをインストールしましょう

paperclip プラグインは git を使って入手できますが最新版はなぜかWindows 環境では動きませんhellip

ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須)

ruby scriptplugin install gitgithubcomthoughtbotpaperclipgit

なので古いバージョン 222 を使います資料の中にプラグイン本体を準備しています「yen1部資料yen_paperclipプラグインyenpaperclip」

ベンダーpluginsにドラッグオンドロップしましょうrbc_tabelogyenvendoryenplugins にコピーしてもいいです

41

5paperclip を使って画像をアップできるようにする

まずは テーブルに項目を追加しますマイグレーションファイルの作成も paperclip でできちゃいます

以下のコマンドを実行しましょう

cyenrbcyenrbc_tabeloggt ruby scriptgenerate paperclip Bookmark photo

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

42

5paperclip を使って画像をアップできるようにする

ちなみに先ほどのコマンドを実行する事でBookmarks テーブルに画像を保存するためのマイグレーションファイルが追加されました

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

5paperclip を使って画像をアップできるようにする

次に画像情報を保存するためにモデル修正しましょう修正するモデルはメモを書きこめるように作った Bookmark というモデルです

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

5paperclip を使って画像をアップできるようにする

引き続き画面に項目を追加していきましょう

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

5paperclip を使って画像をアップできるようにする

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

5paperclip を使って画像をアップできるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

5paperclip を使って画像をアップできるようにする

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

6 AIR との連携の準備をする

最後に 2部で開発する AIR アプリとの連携する部分を作ります

とは言っても実はほとんどが出来ています

Rails と AIR を連携

50

6 AIR との連携の準備をする

具体的にどのようにして連携するのでしょう

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

6 AIR との連携の準備をする

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 22: 20090418 イケテルRails勉強会 第1部Rails編

Chapter 3

食べログの画面に検索条件を追加する

23

3食べログの画面に検索条件を追加する

このままだとチョット寂しいので検索条件を追加していきましょう

今回追加する条件は以下の3つです

都道府県名

ページ番号

都道府県名はプルダウンの

データを scaffold で作っていきます

ページ番号は最後に簡単につくります

24

3食べログの画面に検索条件を追加する

さっそく都道府県名の作成

まずは土台を scaffold で作成しちゃいます

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate scaffold Prefecture enstring jastring

25

3食べログの画面に検索条件を追加する

続いてデータの中身を作成していきます

cyenrbcyenrbc_tabeloggtruby scriptgenerate migration InsertPrefectures

26

3食べログの画面に検索条件を追加する

rbc_tabelogdbmigrate(数字)_insert_prefecturesrb

class InsertPrefectures lt ActiveRecordMigration

def selfup

items = [

en =gt japan ja =gt 全国

en =gt hokkaido ja =gt 北海道

(省略)en =gt kagoshima ja =gt 鹿児島

en =gt okinawa ja =gt 沖縄

]

itemseach do |item|

Prefecturecreate item

end

end

def selfdown

Prefecturedelete_all

end

end

ココは単調かつメンドーな作業なのでコピペしましょう

「yen1部資料yen_insert_prefecturesyeninsert_prefecturesコピー用txt」

27

3食べログの画面に検索条件を追加する

以下のコマンドを実行してデータをSQLite3に反映させます

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

ブラウザで以下のURLを実行してみましょう

httplocalhost3000prefectures

右のような画面が表示されればオッケーです

28

3食べログの画面に検索条件を追加する

それではさっそく都道府県名とページ数をレストラン画面に組み込んでいきましょう

rbc_tabelogappcontrollersrestaurants_controllerrb の修正

Index メソッドの最初に2行を追加さらに create メソッドを追加します

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

end

def create

restaurants_params =

prefecture =gt params[prefecture]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurants_params

end

検索条件を設定して index にリダイレクトするだけ

ページ数は100回カウントアップした整数をセットしているだけ

Prefecturefind(all) で先ほど作った都道府県名をすべて表示

29

3食べログの画面に検索条件を追加する

続いてrbc_tabelogappviewsrestaurantsindexhtmlerb の修正

赤字部分を追記していきます

lth1gtRBC食べログlth1gt

lt form_tag( multipart =gt true ) do -gt

ltpgt

都道府県lt= select_tag prefecture

options_from_collection_for_select(prefectures en ja params[prefecture]) gt

ltpgt

ltpgt

ページlt= select_tag pageNum options_for_select(pages params[pageNum]to_i) gt

ltpgt

lt= submit_tag 検索 name =gt search gt

lthr gt

ltulgt

lt restaurants[ldquoitem]each do |item| -gt

ltligt

lt= link_to item[ldquorestaurant_name]

item[ldquotabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

lt end -gt

最後の ldquoendrdquo も忘れずに

30

3食べログの画面に検索条件を追加する

こんな感じで検索条件部分が表示されていればオッケー

検索条件を変更して検索ボタンを押してみましょう

httplocalhost3000restaurants

Chapter 4

レストランに1行メモを追加できるようにする

32

4レストランに1行メモを追加できるようにする

さてさて次は画面に一言メモを残していけるようにしていきましょうこちらもサクサク作っていきます

33

4レストランに1行メモを追加できるようにする

まずはメモを残すためのモデルとテーブル作ります以下のコマンドを実行

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate model Bookmark rcdstring memostring

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

34

4レストランに1行メモを追加できるようにする

では実際に画面に項目を追加してみますrbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[Item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcd] gt

lt= link_to item[restaurant_name]

item [ldquotabelog_url] target =gt _blank gt

lt= item[rdquomemo] gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

35

4レストランに1行メモを追加できるようにする

続いてコントローラを修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加して画面に入力されたデータを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

登録ボタンが押されたかつラジオボタンのチェックがあったらたら if の中身を実行

find_or_initialize_by_XXX

データがあれば取得なければ作成する

36

4レストランに1行メモを追加できるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcd item[rcd]

if bookmark

item[memo] = bookmarkmemo

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

食べログAPIの検索結果分ループを実行

食べログAPIの結果にrdquomemordquoとして登録しているデータを追加

登録したブックマークを食べログのレストランCDで検索

37

4レストランに1行メモを追加できるようにする

では画面を確認してみましょう

メモ欄が追加されていますか登録してみてください結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 5

paperclip を使って画像をアップできるようにする

39

5paperclip を使って画像をアップできるようにする

コンテンツの完成も近づいてきました次は画像のアップを出来るようにしましょう

画像のアップ機能を追加するには paperclip というプラグインを使えば簡単です

paperclip

Rails上でファイルのアップロードを簡単に実装できるプラグイン

【参考リンク】httpwwwthoughtbotcomprojectspaperclip

httpgithubcomthoughtbotpapercliptreemasterREADMErdoc

40

5paperclip を使って画像をアップできるようにする

さっそく paprtclip プラグインをインストールしましょう

paperclip プラグインは git を使って入手できますが最新版はなぜかWindows 環境では動きませんhellip

ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須)

ruby scriptplugin install gitgithubcomthoughtbotpaperclipgit

なので古いバージョン 222 を使います資料の中にプラグイン本体を準備しています「yen1部資料yen_paperclipプラグインyenpaperclip」

ベンダーpluginsにドラッグオンドロップしましょうrbc_tabelogyenvendoryenplugins にコピーしてもいいです

41

5paperclip を使って画像をアップできるようにする

まずは テーブルに項目を追加しますマイグレーションファイルの作成も paperclip でできちゃいます

以下のコマンドを実行しましょう

cyenrbcyenrbc_tabeloggt ruby scriptgenerate paperclip Bookmark photo

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

42

5paperclip を使って画像をアップできるようにする

ちなみに先ほどのコマンドを実行する事でBookmarks テーブルに画像を保存するためのマイグレーションファイルが追加されました

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

5paperclip を使って画像をアップできるようにする

次に画像情報を保存するためにモデル修正しましょう修正するモデルはメモを書きこめるように作った Bookmark というモデルです

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

5paperclip を使って画像をアップできるようにする

引き続き画面に項目を追加していきましょう

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

5paperclip を使って画像をアップできるようにする

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

5paperclip を使って画像をアップできるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

5paperclip を使って画像をアップできるようにする

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

6 AIR との連携の準備をする

最後に 2部で開発する AIR アプリとの連携する部分を作ります

とは言っても実はほとんどが出来ています

Rails と AIR を連携

50

6 AIR との連携の準備をする

具体的にどのようにして連携するのでしょう

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

6 AIR との連携の準備をする

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 23: 20090418 イケテルRails勉強会 第1部Rails編

23

3食べログの画面に検索条件を追加する

このままだとチョット寂しいので検索条件を追加していきましょう

今回追加する条件は以下の3つです

都道府県名

ページ番号

都道府県名はプルダウンの

データを scaffold で作っていきます

ページ番号は最後に簡単につくります

24

3食べログの画面に検索条件を追加する

さっそく都道府県名の作成

まずは土台を scaffold で作成しちゃいます

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate scaffold Prefecture enstring jastring

25

3食べログの画面に検索条件を追加する

続いてデータの中身を作成していきます

cyenrbcyenrbc_tabeloggtruby scriptgenerate migration InsertPrefectures

26

3食べログの画面に検索条件を追加する

rbc_tabelogdbmigrate(数字)_insert_prefecturesrb

class InsertPrefectures lt ActiveRecordMigration

def selfup

items = [

en =gt japan ja =gt 全国

en =gt hokkaido ja =gt 北海道

(省略)en =gt kagoshima ja =gt 鹿児島

en =gt okinawa ja =gt 沖縄

]

itemseach do |item|

Prefecturecreate item

end

end

def selfdown

Prefecturedelete_all

end

end

ココは単調かつメンドーな作業なのでコピペしましょう

「yen1部資料yen_insert_prefecturesyeninsert_prefecturesコピー用txt」

27

3食べログの画面に検索条件を追加する

以下のコマンドを実行してデータをSQLite3に反映させます

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

ブラウザで以下のURLを実行してみましょう

httplocalhost3000prefectures

右のような画面が表示されればオッケーです

28

3食べログの画面に検索条件を追加する

それではさっそく都道府県名とページ数をレストラン画面に組み込んでいきましょう

rbc_tabelogappcontrollersrestaurants_controllerrb の修正

Index メソッドの最初に2行を追加さらに create メソッドを追加します

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

end

def create

restaurants_params =

prefecture =gt params[prefecture]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurants_params

end

検索条件を設定して index にリダイレクトするだけ

ページ数は100回カウントアップした整数をセットしているだけ

Prefecturefind(all) で先ほど作った都道府県名をすべて表示

29

3食べログの画面に検索条件を追加する

続いてrbc_tabelogappviewsrestaurantsindexhtmlerb の修正

赤字部分を追記していきます

lth1gtRBC食べログlth1gt

lt form_tag( multipart =gt true ) do -gt

ltpgt

都道府県lt= select_tag prefecture

options_from_collection_for_select(prefectures en ja params[prefecture]) gt

ltpgt

ltpgt

ページlt= select_tag pageNum options_for_select(pages params[pageNum]to_i) gt

ltpgt

lt= submit_tag 検索 name =gt search gt

lthr gt

ltulgt

lt restaurants[ldquoitem]each do |item| -gt

ltligt

lt= link_to item[ldquorestaurant_name]

item[ldquotabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

lt end -gt

最後の ldquoendrdquo も忘れずに

30

3食べログの画面に検索条件を追加する

こんな感じで検索条件部分が表示されていればオッケー

検索条件を変更して検索ボタンを押してみましょう

httplocalhost3000restaurants

Chapter 4

レストランに1行メモを追加できるようにする

32

4レストランに1行メモを追加できるようにする

さてさて次は画面に一言メモを残していけるようにしていきましょうこちらもサクサク作っていきます

33

4レストランに1行メモを追加できるようにする

まずはメモを残すためのモデルとテーブル作ります以下のコマンドを実行

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate model Bookmark rcdstring memostring

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

34

4レストランに1行メモを追加できるようにする

では実際に画面に項目を追加してみますrbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[Item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcd] gt

lt= link_to item[restaurant_name]

item [ldquotabelog_url] target =gt _blank gt

lt= item[rdquomemo] gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

35

4レストランに1行メモを追加できるようにする

続いてコントローラを修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加して画面に入力されたデータを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

登録ボタンが押されたかつラジオボタンのチェックがあったらたら if の中身を実行

find_or_initialize_by_XXX

データがあれば取得なければ作成する

36

4レストランに1行メモを追加できるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcd item[rcd]

if bookmark

item[memo] = bookmarkmemo

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

食べログAPIの検索結果分ループを実行

食べログAPIの結果にrdquomemordquoとして登録しているデータを追加

登録したブックマークを食べログのレストランCDで検索

37

4レストランに1行メモを追加できるようにする

では画面を確認してみましょう

メモ欄が追加されていますか登録してみてください結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 5

paperclip を使って画像をアップできるようにする

39

5paperclip を使って画像をアップできるようにする

コンテンツの完成も近づいてきました次は画像のアップを出来るようにしましょう

画像のアップ機能を追加するには paperclip というプラグインを使えば簡単です

paperclip

Rails上でファイルのアップロードを簡単に実装できるプラグイン

【参考リンク】httpwwwthoughtbotcomprojectspaperclip

httpgithubcomthoughtbotpapercliptreemasterREADMErdoc

40

5paperclip を使って画像をアップできるようにする

さっそく paprtclip プラグインをインストールしましょう

paperclip プラグインは git を使って入手できますが最新版はなぜかWindows 環境では動きませんhellip

ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須)

ruby scriptplugin install gitgithubcomthoughtbotpaperclipgit

なので古いバージョン 222 を使います資料の中にプラグイン本体を準備しています「yen1部資料yen_paperclipプラグインyenpaperclip」

ベンダーpluginsにドラッグオンドロップしましょうrbc_tabelogyenvendoryenplugins にコピーしてもいいです

41

5paperclip を使って画像をアップできるようにする

まずは テーブルに項目を追加しますマイグレーションファイルの作成も paperclip でできちゃいます

以下のコマンドを実行しましょう

cyenrbcyenrbc_tabeloggt ruby scriptgenerate paperclip Bookmark photo

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

42

5paperclip を使って画像をアップできるようにする

ちなみに先ほどのコマンドを実行する事でBookmarks テーブルに画像を保存するためのマイグレーションファイルが追加されました

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

5paperclip を使って画像をアップできるようにする

次に画像情報を保存するためにモデル修正しましょう修正するモデルはメモを書きこめるように作った Bookmark というモデルです

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

5paperclip を使って画像をアップできるようにする

引き続き画面に項目を追加していきましょう

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

5paperclip を使って画像をアップできるようにする

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

5paperclip を使って画像をアップできるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

5paperclip を使って画像をアップできるようにする

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

6 AIR との連携の準備をする

最後に 2部で開発する AIR アプリとの連携する部分を作ります

とは言っても実はほとんどが出来ています

Rails と AIR を連携

50

6 AIR との連携の準備をする

具体的にどのようにして連携するのでしょう

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

6 AIR との連携の準備をする

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 24: 20090418 イケテルRails勉強会 第1部Rails編

24

3食べログの画面に検索条件を追加する

さっそく都道府県名の作成

まずは土台を scaffold で作成しちゃいます

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate scaffold Prefecture enstring jastring

25

3食べログの画面に検索条件を追加する

続いてデータの中身を作成していきます

cyenrbcyenrbc_tabeloggtruby scriptgenerate migration InsertPrefectures

26

3食べログの画面に検索条件を追加する

rbc_tabelogdbmigrate(数字)_insert_prefecturesrb

class InsertPrefectures lt ActiveRecordMigration

def selfup

items = [

en =gt japan ja =gt 全国

en =gt hokkaido ja =gt 北海道

(省略)en =gt kagoshima ja =gt 鹿児島

en =gt okinawa ja =gt 沖縄

]

itemseach do |item|

Prefecturecreate item

end

end

def selfdown

Prefecturedelete_all

end

end

ココは単調かつメンドーな作業なのでコピペしましょう

「yen1部資料yen_insert_prefecturesyeninsert_prefecturesコピー用txt」

27

3食べログの画面に検索条件を追加する

以下のコマンドを実行してデータをSQLite3に反映させます

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

ブラウザで以下のURLを実行してみましょう

httplocalhost3000prefectures

右のような画面が表示されればオッケーです

28

3食べログの画面に検索条件を追加する

それではさっそく都道府県名とページ数をレストラン画面に組み込んでいきましょう

rbc_tabelogappcontrollersrestaurants_controllerrb の修正

Index メソッドの最初に2行を追加さらに create メソッドを追加します

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

end

def create

restaurants_params =

prefecture =gt params[prefecture]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurants_params

end

検索条件を設定して index にリダイレクトするだけ

ページ数は100回カウントアップした整数をセットしているだけ

Prefecturefind(all) で先ほど作った都道府県名をすべて表示

29

3食べログの画面に検索条件を追加する

続いてrbc_tabelogappviewsrestaurantsindexhtmlerb の修正

赤字部分を追記していきます

lth1gtRBC食べログlth1gt

lt form_tag( multipart =gt true ) do -gt

ltpgt

都道府県lt= select_tag prefecture

options_from_collection_for_select(prefectures en ja params[prefecture]) gt

ltpgt

ltpgt

ページlt= select_tag pageNum options_for_select(pages params[pageNum]to_i) gt

ltpgt

lt= submit_tag 検索 name =gt search gt

lthr gt

ltulgt

lt restaurants[ldquoitem]each do |item| -gt

ltligt

lt= link_to item[ldquorestaurant_name]

item[ldquotabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

lt end -gt

最後の ldquoendrdquo も忘れずに

30

3食べログの画面に検索条件を追加する

こんな感じで検索条件部分が表示されていればオッケー

検索条件を変更して検索ボタンを押してみましょう

httplocalhost3000restaurants

Chapter 4

レストランに1行メモを追加できるようにする

32

4レストランに1行メモを追加できるようにする

さてさて次は画面に一言メモを残していけるようにしていきましょうこちらもサクサク作っていきます

33

4レストランに1行メモを追加できるようにする

まずはメモを残すためのモデルとテーブル作ります以下のコマンドを実行

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate model Bookmark rcdstring memostring

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

34

4レストランに1行メモを追加できるようにする

では実際に画面に項目を追加してみますrbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[Item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcd] gt

lt= link_to item[restaurant_name]

item [ldquotabelog_url] target =gt _blank gt

lt= item[rdquomemo] gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

35

4レストランに1行メモを追加できるようにする

続いてコントローラを修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加して画面に入力されたデータを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

登録ボタンが押されたかつラジオボタンのチェックがあったらたら if の中身を実行

find_or_initialize_by_XXX

データがあれば取得なければ作成する

36

4レストランに1行メモを追加できるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcd item[rcd]

if bookmark

item[memo] = bookmarkmemo

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

食べログAPIの検索結果分ループを実行

食べログAPIの結果にrdquomemordquoとして登録しているデータを追加

登録したブックマークを食べログのレストランCDで検索

37

4レストランに1行メモを追加できるようにする

では画面を確認してみましょう

メモ欄が追加されていますか登録してみてください結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 5

paperclip を使って画像をアップできるようにする

39

5paperclip を使って画像をアップできるようにする

コンテンツの完成も近づいてきました次は画像のアップを出来るようにしましょう

画像のアップ機能を追加するには paperclip というプラグインを使えば簡単です

paperclip

Rails上でファイルのアップロードを簡単に実装できるプラグイン

【参考リンク】httpwwwthoughtbotcomprojectspaperclip

httpgithubcomthoughtbotpapercliptreemasterREADMErdoc

40

5paperclip を使って画像をアップできるようにする

さっそく paprtclip プラグインをインストールしましょう

paperclip プラグインは git を使って入手できますが最新版はなぜかWindows 環境では動きませんhellip

ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須)

ruby scriptplugin install gitgithubcomthoughtbotpaperclipgit

なので古いバージョン 222 を使います資料の中にプラグイン本体を準備しています「yen1部資料yen_paperclipプラグインyenpaperclip」

ベンダーpluginsにドラッグオンドロップしましょうrbc_tabelogyenvendoryenplugins にコピーしてもいいです

41

5paperclip を使って画像をアップできるようにする

まずは テーブルに項目を追加しますマイグレーションファイルの作成も paperclip でできちゃいます

以下のコマンドを実行しましょう

cyenrbcyenrbc_tabeloggt ruby scriptgenerate paperclip Bookmark photo

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

42

5paperclip を使って画像をアップできるようにする

ちなみに先ほどのコマンドを実行する事でBookmarks テーブルに画像を保存するためのマイグレーションファイルが追加されました

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

5paperclip を使って画像をアップできるようにする

次に画像情報を保存するためにモデル修正しましょう修正するモデルはメモを書きこめるように作った Bookmark というモデルです

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

5paperclip を使って画像をアップできるようにする

引き続き画面に項目を追加していきましょう

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

5paperclip を使って画像をアップできるようにする

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

5paperclip を使って画像をアップできるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

5paperclip を使って画像をアップできるようにする

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

6 AIR との連携の準備をする

最後に 2部で開発する AIR アプリとの連携する部分を作ります

とは言っても実はほとんどが出来ています

Rails と AIR を連携

50

6 AIR との連携の準備をする

具体的にどのようにして連携するのでしょう

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

6 AIR との連携の準備をする

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 25: 20090418 イケテルRails勉強会 第1部Rails編

25

3食べログの画面に検索条件を追加する

続いてデータの中身を作成していきます

cyenrbcyenrbc_tabeloggtruby scriptgenerate migration InsertPrefectures

26

3食べログの画面に検索条件を追加する

rbc_tabelogdbmigrate(数字)_insert_prefecturesrb

class InsertPrefectures lt ActiveRecordMigration

def selfup

items = [

en =gt japan ja =gt 全国

en =gt hokkaido ja =gt 北海道

(省略)en =gt kagoshima ja =gt 鹿児島

en =gt okinawa ja =gt 沖縄

]

itemseach do |item|

Prefecturecreate item

end

end

def selfdown

Prefecturedelete_all

end

end

ココは単調かつメンドーな作業なのでコピペしましょう

「yen1部資料yen_insert_prefecturesyeninsert_prefecturesコピー用txt」

27

3食べログの画面に検索条件を追加する

以下のコマンドを実行してデータをSQLite3に反映させます

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

ブラウザで以下のURLを実行してみましょう

httplocalhost3000prefectures

右のような画面が表示されればオッケーです

28

3食べログの画面に検索条件を追加する

それではさっそく都道府県名とページ数をレストラン画面に組み込んでいきましょう

rbc_tabelogappcontrollersrestaurants_controllerrb の修正

Index メソッドの最初に2行を追加さらに create メソッドを追加します

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

end

def create

restaurants_params =

prefecture =gt params[prefecture]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurants_params

end

検索条件を設定して index にリダイレクトするだけ

ページ数は100回カウントアップした整数をセットしているだけ

Prefecturefind(all) で先ほど作った都道府県名をすべて表示

29

3食べログの画面に検索条件を追加する

続いてrbc_tabelogappviewsrestaurantsindexhtmlerb の修正

赤字部分を追記していきます

lth1gtRBC食べログlth1gt

lt form_tag( multipart =gt true ) do -gt

ltpgt

都道府県lt= select_tag prefecture

options_from_collection_for_select(prefectures en ja params[prefecture]) gt

ltpgt

ltpgt

ページlt= select_tag pageNum options_for_select(pages params[pageNum]to_i) gt

ltpgt

lt= submit_tag 検索 name =gt search gt

lthr gt

ltulgt

lt restaurants[ldquoitem]each do |item| -gt

ltligt

lt= link_to item[ldquorestaurant_name]

item[ldquotabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

lt end -gt

最後の ldquoendrdquo も忘れずに

30

3食べログの画面に検索条件を追加する

こんな感じで検索条件部分が表示されていればオッケー

検索条件を変更して検索ボタンを押してみましょう

httplocalhost3000restaurants

Chapter 4

レストランに1行メモを追加できるようにする

32

4レストランに1行メモを追加できるようにする

さてさて次は画面に一言メモを残していけるようにしていきましょうこちらもサクサク作っていきます

33

4レストランに1行メモを追加できるようにする

まずはメモを残すためのモデルとテーブル作ります以下のコマンドを実行

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate model Bookmark rcdstring memostring

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

34

4レストランに1行メモを追加できるようにする

では実際に画面に項目を追加してみますrbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[Item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcd] gt

lt= link_to item[restaurant_name]

item [ldquotabelog_url] target =gt _blank gt

lt= item[rdquomemo] gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

35

4レストランに1行メモを追加できるようにする

続いてコントローラを修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加して画面に入力されたデータを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

登録ボタンが押されたかつラジオボタンのチェックがあったらたら if の中身を実行

find_or_initialize_by_XXX

データがあれば取得なければ作成する

36

4レストランに1行メモを追加できるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcd item[rcd]

if bookmark

item[memo] = bookmarkmemo

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

食べログAPIの検索結果分ループを実行

食べログAPIの結果にrdquomemordquoとして登録しているデータを追加

登録したブックマークを食べログのレストランCDで検索

37

4レストランに1行メモを追加できるようにする

では画面を確認してみましょう

メモ欄が追加されていますか登録してみてください結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 5

paperclip を使って画像をアップできるようにする

39

5paperclip を使って画像をアップできるようにする

コンテンツの完成も近づいてきました次は画像のアップを出来るようにしましょう

画像のアップ機能を追加するには paperclip というプラグインを使えば簡単です

paperclip

Rails上でファイルのアップロードを簡単に実装できるプラグイン

【参考リンク】httpwwwthoughtbotcomprojectspaperclip

httpgithubcomthoughtbotpapercliptreemasterREADMErdoc

40

5paperclip を使って画像をアップできるようにする

さっそく paprtclip プラグインをインストールしましょう

paperclip プラグインは git を使って入手できますが最新版はなぜかWindows 環境では動きませんhellip

ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須)

ruby scriptplugin install gitgithubcomthoughtbotpaperclipgit

なので古いバージョン 222 を使います資料の中にプラグイン本体を準備しています「yen1部資料yen_paperclipプラグインyenpaperclip」

ベンダーpluginsにドラッグオンドロップしましょうrbc_tabelogyenvendoryenplugins にコピーしてもいいです

41

5paperclip を使って画像をアップできるようにする

まずは テーブルに項目を追加しますマイグレーションファイルの作成も paperclip でできちゃいます

以下のコマンドを実行しましょう

cyenrbcyenrbc_tabeloggt ruby scriptgenerate paperclip Bookmark photo

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

42

5paperclip を使って画像をアップできるようにする

ちなみに先ほどのコマンドを実行する事でBookmarks テーブルに画像を保存するためのマイグレーションファイルが追加されました

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

5paperclip を使って画像をアップできるようにする

次に画像情報を保存するためにモデル修正しましょう修正するモデルはメモを書きこめるように作った Bookmark というモデルです

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

5paperclip を使って画像をアップできるようにする

引き続き画面に項目を追加していきましょう

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

5paperclip を使って画像をアップできるようにする

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

5paperclip を使って画像をアップできるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

5paperclip を使って画像をアップできるようにする

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

6 AIR との連携の準備をする

最後に 2部で開発する AIR アプリとの連携する部分を作ります

とは言っても実はほとんどが出来ています

Rails と AIR を連携

50

6 AIR との連携の準備をする

具体的にどのようにして連携するのでしょう

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

6 AIR との連携の準備をする

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 26: 20090418 イケテルRails勉強会 第1部Rails編

26

3食べログの画面に検索条件を追加する

rbc_tabelogdbmigrate(数字)_insert_prefecturesrb

class InsertPrefectures lt ActiveRecordMigration

def selfup

items = [

en =gt japan ja =gt 全国

en =gt hokkaido ja =gt 北海道

(省略)en =gt kagoshima ja =gt 鹿児島

en =gt okinawa ja =gt 沖縄

]

itemseach do |item|

Prefecturecreate item

end

end

def selfdown

Prefecturedelete_all

end

end

ココは単調かつメンドーな作業なのでコピペしましょう

「yen1部資料yen_insert_prefecturesyeninsert_prefecturesコピー用txt」

27

3食べログの画面に検索条件を追加する

以下のコマンドを実行してデータをSQLite3に反映させます

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

ブラウザで以下のURLを実行してみましょう

httplocalhost3000prefectures

右のような画面が表示されればオッケーです

28

3食べログの画面に検索条件を追加する

それではさっそく都道府県名とページ数をレストラン画面に組み込んでいきましょう

rbc_tabelogappcontrollersrestaurants_controllerrb の修正

Index メソッドの最初に2行を追加さらに create メソッドを追加します

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

end

def create

restaurants_params =

prefecture =gt params[prefecture]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurants_params

end

検索条件を設定して index にリダイレクトするだけ

ページ数は100回カウントアップした整数をセットしているだけ

Prefecturefind(all) で先ほど作った都道府県名をすべて表示

29

3食べログの画面に検索条件を追加する

続いてrbc_tabelogappviewsrestaurantsindexhtmlerb の修正

赤字部分を追記していきます

lth1gtRBC食べログlth1gt

lt form_tag( multipart =gt true ) do -gt

ltpgt

都道府県lt= select_tag prefecture

options_from_collection_for_select(prefectures en ja params[prefecture]) gt

ltpgt

ltpgt

ページlt= select_tag pageNum options_for_select(pages params[pageNum]to_i) gt

ltpgt

lt= submit_tag 検索 name =gt search gt

lthr gt

ltulgt

lt restaurants[ldquoitem]each do |item| -gt

ltligt

lt= link_to item[ldquorestaurant_name]

item[ldquotabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

lt end -gt

最後の ldquoendrdquo も忘れずに

30

3食べログの画面に検索条件を追加する

こんな感じで検索条件部分が表示されていればオッケー

検索条件を変更して検索ボタンを押してみましょう

httplocalhost3000restaurants

Chapter 4

レストランに1行メモを追加できるようにする

32

4レストランに1行メモを追加できるようにする

さてさて次は画面に一言メモを残していけるようにしていきましょうこちらもサクサク作っていきます

33

4レストランに1行メモを追加できるようにする

まずはメモを残すためのモデルとテーブル作ります以下のコマンドを実行

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate model Bookmark rcdstring memostring

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

34

4レストランに1行メモを追加できるようにする

では実際に画面に項目を追加してみますrbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[Item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcd] gt

lt= link_to item[restaurant_name]

item [ldquotabelog_url] target =gt _blank gt

lt= item[rdquomemo] gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

35

4レストランに1行メモを追加できるようにする

続いてコントローラを修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加して画面に入力されたデータを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

登録ボタンが押されたかつラジオボタンのチェックがあったらたら if の中身を実行

find_or_initialize_by_XXX

データがあれば取得なければ作成する

36

4レストランに1行メモを追加できるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcd item[rcd]

if bookmark

item[memo] = bookmarkmemo

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

食べログAPIの検索結果分ループを実行

食べログAPIの結果にrdquomemordquoとして登録しているデータを追加

登録したブックマークを食べログのレストランCDで検索

37

4レストランに1行メモを追加できるようにする

では画面を確認してみましょう

メモ欄が追加されていますか登録してみてください結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 5

paperclip を使って画像をアップできるようにする

39

5paperclip を使って画像をアップできるようにする

コンテンツの完成も近づいてきました次は画像のアップを出来るようにしましょう

画像のアップ機能を追加するには paperclip というプラグインを使えば簡単です

paperclip

Rails上でファイルのアップロードを簡単に実装できるプラグイン

【参考リンク】httpwwwthoughtbotcomprojectspaperclip

httpgithubcomthoughtbotpapercliptreemasterREADMErdoc

40

5paperclip を使って画像をアップできるようにする

さっそく paprtclip プラグインをインストールしましょう

paperclip プラグインは git を使って入手できますが最新版はなぜかWindows 環境では動きませんhellip

ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須)

ruby scriptplugin install gitgithubcomthoughtbotpaperclipgit

なので古いバージョン 222 を使います資料の中にプラグイン本体を準備しています「yen1部資料yen_paperclipプラグインyenpaperclip」

ベンダーpluginsにドラッグオンドロップしましょうrbc_tabelogyenvendoryenplugins にコピーしてもいいです

41

5paperclip を使って画像をアップできるようにする

まずは テーブルに項目を追加しますマイグレーションファイルの作成も paperclip でできちゃいます

以下のコマンドを実行しましょう

cyenrbcyenrbc_tabeloggt ruby scriptgenerate paperclip Bookmark photo

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

42

5paperclip を使って画像をアップできるようにする

ちなみに先ほどのコマンドを実行する事でBookmarks テーブルに画像を保存するためのマイグレーションファイルが追加されました

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

5paperclip を使って画像をアップできるようにする

次に画像情報を保存するためにモデル修正しましょう修正するモデルはメモを書きこめるように作った Bookmark というモデルです

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

5paperclip を使って画像をアップできるようにする

引き続き画面に項目を追加していきましょう

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

5paperclip を使って画像をアップできるようにする

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

5paperclip を使って画像をアップできるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

5paperclip を使って画像をアップできるようにする

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

6 AIR との連携の準備をする

最後に 2部で開発する AIR アプリとの連携する部分を作ります

とは言っても実はほとんどが出来ています

Rails と AIR を連携

50

6 AIR との連携の準備をする

具体的にどのようにして連携するのでしょう

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

6 AIR との連携の準備をする

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 27: 20090418 イケテルRails勉強会 第1部Rails編

27

3食べログの画面に検索条件を追加する

以下のコマンドを実行してデータをSQLite3に反映させます

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

ブラウザで以下のURLを実行してみましょう

httplocalhost3000prefectures

右のような画面が表示されればオッケーです

28

3食べログの画面に検索条件を追加する

それではさっそく都道府県名とページ数をレストラン画面に組み込んでいきましょう

rbc_tabelogappcontrollersrestaurants_controllerrb の修正

Index メソッドの最初に2行を追加さらに create メソッドを追加します

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

end

def create

restaurants_params =

prefecture =gt params[prefecture]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurants_params

end

検索条件を設定して index にリダイレクトするだけ

ページ数は100回カウントアップした整数をセットしているだけ

Prefecturefind(all) で先ほど作った都道府県名をすべて表示

29

3食べログの画面に検索条件を追加する

続いてrbc_tabelogappviewsrestaurantsindexhtmlerb の修正

赤字部分を追記していきます

lth1gtRBC食べログlth1gt

lt form_tag( multipart =gt true ) do -gt

ltpgt

都道府県lt= select_tag prefecture

options_from_collection_for_select(prefectures en ja params[prefecture]) gt

ltpgt

ltpgt

ページlt= select_tag pageNum options_for_select(pages params[pageNum]to_i) gt

ltpgt

lt= submit_tag 検索 name =gt search gt

lthr gt

ltulgt

lt restaurants[ldquoitem]each do |item| -gt

ltligt

lt= link_to item[ldquorestaurant_name]

item[ldquotabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

lt end -gt

最後の ldquoendrdquo も忘れずに

30

3食べログの画面に検索条件を追加する

こんな感じで検索条件部分が表示されていればオッケー

検索条件を変更して検索ボタンを押してみましょう

httplocalhost3000restaurants

Chapter 4

レストランに1行メモを追加できるようにする

32

4レストランに1行メモを追加できるようにする

さてさて次は画面に一言メモを残していけるようにしていきましょうこちらもサクサク作っていきます

33

4レストランに1行メモを追加できるようにする

まずはメモを残すためのモデルとテーブル作ります以下のコマンドを実行

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate model Bookmark rcdstring memostring

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

34

4レストランに1行メモを追加できるようにする

では実際に画面に項目を追加してみますrbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[Item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcd] gt

lt= link_to item[restaurant_name]

item [ldquotabelog_url] target =gt _blank gt

lt= item[rdquomemo] gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

35

4レストランに1行メモを追加できるようにする

続いてコントローラを修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加して画面に入力されたデータを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

登録ボタンが押されたかつラジオボタンのチェックがあったらたら if の中身を実行

find_or_initialize_by_XXX

データがあれば取得なければ作成する

36

4レストランに1行メモを追加できるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcd item[rcd]

if bookmark

item[memo] = bookmarkmemo

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

食べログAPIの検索結果分ループを実行

食べログAPIの結果にrdquomemordquoとして登録しているデータを追加

登録したブックマークを食べログのレストランCDで検索

37

4レストランに1行メモを追加できるようにする

では画面を確認してみましょう

メモ欄が追加されていますか登録してみてください結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 5

paperclip を使って画像をアップできるようにする

39

5paperclip を使って画像をアップできるようにする

コンテンツの完成も近づいてきました次は画像のアップを出来るようにしましょう

画像のアップ機能を追加するには paperclip というプラグインを使えば簡単です

paperclip

Rails上でファイルのアップロードを簡単に実装できるプラグイン

【参考リンク】httpwwwthoughtbotcomprojectspaperclip

httpgithubcomthoughtbotpapercliptreemasterREADMErdoc

40

5paperclip を使って画像をアップできるようにする

さっそく paprtclip プラグインをインストールしましょう

paperclip プラグインは git を使って入手できますが最新版はなぜかWindows 環境では動きませんhellip

ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須)

ruby scriptplugin install gitgithubcomthoughtbotpaperclipgit

なので古いバージョン 222 を使います資料の中にプラグイン本体を準備しています「yen1部資料yen_paperclipプラグインyenpaperclip」

ベンダーpluginsにドラッグオンドロップしましょうrbc_tabelogyenvendoryenplugins にコピーしてもいいです

41

5paperclip を使って画像をアップできるようにする

まずは テーブルに項目を追加しますマイグレーションファイルの作成も paperclip でできちゃいます

以下のコマンドを実行しましょう

cyenrbcyenrbc_tabeloggt ruby scriptgenerate paperclip Bookmark photo

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

42

5paperclip を使って画像をアップできるようにする

ちなみに先ほどのコマンドを実行する事でBookmarks テーブルに画像を保存するためのマイグレーションファイルが追加されました

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

5paperclip を使って画像をアップできるようにする

次に画像情報を保存するためにモデル修正しましょう修正するモデルはメモを書きこめるように作った Bookmark というモデルです

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

5paperclip を使って画像をアップできるようにする

引き続き画面に項目を追加していきましょう

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

5paperclip を使って画像をアップできるようにする

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

5paperclip を使って画像をアップできるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

5paperclip を使って画像をアップできるようにする

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

6 AIR との連携の準備をする

最後に 2部で開発する AIR アプリとの連携する部分を作ります

とは言っても実はほとんどが出来ています

Rails と AIR を連携

50

6 AIR との連携の準備をする

具体的にどのようにして連携するのでしょう

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

6 AIR との連携の準備をする

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 28: 20090418 イケテルRails勉強会 第1部Rails編

28

3食べログの画面に検索条件を追加する

それではさっそく都道府県名とページ数をレストラン画面に組み込んでいきましょう

rbc_tabelogappcontrollersrestaurants_controllerrb の修正

Index メソッドの最初に2行を追加さらに create メソッドを追加します

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

end

def create

restaurants_params =

prefecture =gt params[prefecture]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurants_params

end

検索条件を設定して index にリダイレクトするだけ

ページ数は100回カウントアップした整数をセットしているだけ

Prefecturefind(all) で先ほど作った都道府県名をすべて表示

29

3食べログの画面に検索条件を追加する

続いてrbc_tabelogappviewsrestaurantsindexhtmlerb の修正

赤字部分を追記していきます

lth1gtRBC食べログlth1gt

lt form_tag( multipart =gt true ) do -gt

ltpgt

都道府県lt= select_tag prefecture

options_from_collection_for_select(prefectures en ja params[prefecture]) gt

ltpgt

ltpgt

ページlt= select_tag pageNum options_for_select(pages params[pageNum]to_i) gt

ltpgt

lt= submit_tag 検索 name =gt search gt

lthr gt

ltulgt

lt restaurants[ldquoitem]each do |item| -gt

ltligt

lt= link_to item[ldquorestaurant_name]

item[ldquotabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

lt end -gt

最後の ldquoendrdquo も忘れずに

30

3食べログの画面に検索条件を追加する

こんな感じで検索条件部分が表示されていればオッケー

検索条件を変更して検索ボタンを押してみましょう

httplocalhost3000restaurants

Chapter 4

レストランに1行メモを追加できるようにする

32

4レストランに1行メモを追加できるようにする

さてさて次は画面に一言メモを残していけるようにしていきましょうこちらもサクサク作っていきます

33

4レストランに1行メモを追加できるようにする

まずはメモを残すためのモデルとテーブル作ります以下のコマンドを実行

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate model Bookmark rcdstring memostring

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

34

4レストランに1行メモを追加できるようにする

では実際に画面に項目を追加してみますrbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[Item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcd] gt

lt= link_to item[restaurant_name]

item [ldquotabelog_url] target =gt _blank gt

lt= item[rdquomemo] gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

35

4レストランに1行メモを追加できるようにする

続いてコントローラを修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加して画面に入力されたデータを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

登録ボタンが押されたかつラジオボタンのチェックがあったらたら if の中身を実行

find_or_initialize_by_XXX

データがあれば取得なければ作成する

36

4レストランに1行メモを追加できるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcd item[rcd]

if bookmark

item[memo] = bookmarkmemo

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

食べログAPIの検索結果分ループを実行

食べログAPIの結果にrdquomemordquoとして登録しているデータを追加

登録したブックマークを食べログのレストランCDで検索

37

4レストランに1行メモを追加できるようにする

では画面を確認してみましょう

メモ欄が追加されていますか登録してみてください結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 5

paperclip を使って画像をアップできるようにする

39

5paperclip を使って画像をアップできるようにする

コンテンツの完成も近づいてきました次は画像のアップを出来るようにしましょう

画像のアップ機能を追加するには paperclip というプラグインを使えば簡単です

paperclip

Rails上でファイルのアップロードを簡単に実装できるプラグイン

【参考リンク】httpwwwthoughtbotcomprojectspaperclip

httpgithubcomthoughtbotpapercliptreemasterREADMErdoc

40

5paperclip を使って画像をアップできるようにする

さっそく paprtclip プラグインをインストールしましょう

paperclip プラグインは git を使って入手できますが最新版はなぜかWindows 環境では動きませんhellip

ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須)

ruby scriptplugin install gitgithubcomthoughtbotpaperclipgit

なので古いバージョン 222 を使います資料の中にプラグイン本体を準備しています「yen1部資料yen_paperclipプラグインyenpaperclip」

ベンダーpluginsにドラッグオンドロップしましょうrbc_tabelogyenvendoryenplugins にコピーしてもいいです

41

5paperclip を使って画像をアップできるようにする

まずは テーブルに項目を追加しますマイグレーションファイルの作成も paperclip でできちゃいます

以下のコマンドを実行しましょう

cyenrbcyenrbc_tabeloggt ruby scriptgenerate paperclip Bookmark photo

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

42

5paperclip を使って画像をアップできるようにする

ちなみに先ほどのコマンドを実行する事でBookmarks テーブルに画像を保存するためのマイグレーションファイルが追加されました

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

5paperclip を使って画像をアップできるようにする

次に画像情報を保存するためにモデル修正しましょう修正するモデルはメモを書きこめるように作った Bookmark というモデルです

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

5paperclip を使って画像をアップできるようにする

引き続き画面に項目を追加していきましょう

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

5paperclip を使って画像をアップできるようにする

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

5paperclip を使って画像をアップできるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

5paperclip を使って画像をアップできるようにする

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

6 AIR との連携の準備をする

最後に 2部で開発する AIR アプリとの連携する部分を作ります

とは言っても実はほとんどが出来ています

Rails と AIR を連携

50

6 AIR との連携の準備をする

具体的にどのようにして連携するのでしょう

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

6 AIR との連携の準備をする

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 29: 20090418 イケテルRails勉強会 第1部Rails編

29

3食べログの画面に検索条件を追加する

続いてrbc_tabelogappviewsrestaurantsindexhtmlerb の修正

赤字部分を追記していきます

lth1gtRBC食べログlth1gt

lt form_tag( multipart =gt true ) do -gt

ltpgt

都道府県lt= select_tag prefecture

options_from_collection_for_select(prefectures en ja params[prefecture]) gt

ltpgt

ltpgt

ページlt= select_tag pageNum options_for_select(pages params[pageNum]to_i) gt

ltpgt

lt= submit_tag 検索 name =gt search gt

lthr gt

ltulgt

lt restaurants[ldquoitem]each do |item| -gt

ltligt

lt= link_to item[ldquorestaurant_name]

item[ldquotabelog_url] target =gt _blank gt

ltligt

lt end -gt

ltulgt

lt end -gt

最後の ldquoendrdquo も忘れずに

30

3食べログの画面に検索条件を追加する

こんな感じで検索条件部分が表示されていればオッケー

検索条件を変更して検索ボタンを押してみましょう

httplocalhost3000restaurants

Chapter 4

レストランに1行メモを追加できるようにする

32

4レストランに1行メモを追加できるようにする

さてさて次は画面に一言メモを残していけるようにしていきましょうこちらもサクサク作っていきます

33

4レストランに1行メモを追加できるようにする

まずはメモを残すためのモデルとテーブル作ります以下のコマンドを実行

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate model Bookmark rcdstring memostring

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

34

4レストランに1行メモを追加できるようにする

では実際に画面に項目を追加してみますrbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[Item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcd] gt

lt= link_to item[restaurant_name]

item [ldquotabelog_url] target =gt _blank gt

lt= item[rdquomemo] gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

35

4レストランに1行メモを追加できるようにする

続いてコントローラを修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加して画面に入力されたデータを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

登録ボタンが押されたかつラジオボタンのチェックがあったらたら if の中身を実行

find_or_initialize_by_XXX

データがあれば取得なければ作成する

36

4レストランに1行メモを追加できるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcd item[rcd]

if bookmark

item[memo] = bookmarkmemo

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

食べログAPIの検索結果分ループを実行

食べログAPIの結果にrdquomemordquoとして登録しているデータを追加

登録したブックマークを食べログのレストランCDで検索

37

4レストランに1行メモを追加できるようにする

では画面を確認してみましょう

メモ欄が追加されていますか登録してみてください結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 5

paperclip を使って画像をアップできるようにする

39

5paperclip を使って画像をアップできるようにする

コンテンツの完成も近づいてきました次は画像のアップを出来るようにしましょう

画像のアップ機能を追加するには paperclip というプラグインを使えば簡単です

paperclip

Rails上でファイルのアップロードを簡単に実装できるプラグイン

【参考リンク】httpwwwthoughtbotcomprojectspaperclip

httpgithubcomthoughtbotpapercliptreemasterREADMErdoc

40

5paperclip を使って画像をアップできるようにする

さっそく paprtclip プラグインをインストールしましょう

paperclip プラグインは git を使って入手できますが最新版はなぜかWindows 環境では動きませんhellip

ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須)

ruby scriptplugin install gitgithubcomthoughtbotpaperclipgit

なので古いバージョン 222 を使います資料の中にプラグイン本体を準備しています「yen1部資料yen_paperclipプラグインyenpaperclip」

ベンダーpluginsにドラッグオンドロップしましょうrbc_tabelogyenvendoryenplugins にコピーしてもいいです

41

5paperclip を使って画像をアップできるようにする

まずは テーブルに項目を追加しますマイグレーションファイルの作成も paperclip でできちゃいます

以下のコマンドを実行しましょう

cyenrbcyenrbc_tabeloggt ruby scriptgenerate paperclip Bookmark photo

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

42

5paperclip を使って画像をアップできるようにする

ちなみに先ほどのコマンドを実行する事でBookmarks テーブルに画像を保存するためのマイグレーションファイルが追加されました

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

5paperclip を使って画像をアップできるようにする

次に画像情報を保存するためにモデル修正しましょう修正するモデルはメモを書きこめるように作った Bookmark というモデルです

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

5paperclip を使って画像をアップできるようにする

引き続き画面に項目を追加していきましょう

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

5paperclip を使って画像をアップできるようにする

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

5paperclip を使って画像をアップできるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

5paperclip を使って画像をアップできるようにする

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

6 AIR との連携の準備をする

最後に 2部で開発する AIR アプリとの連携する部分を作ります

とは言っても実はほとんどが出来ています

Rails と AIR を連携

50

6 AIR との連携の準備をする

具体的にどのようにして連携するのでしょう

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

6 AIR との連携の準備をする

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 30: 20090418 イケテルRails勉強会 第1部Rails編

30

3食べログの画面に検索条件を追加する

こんな感じで検索条件部分が表示されていればオッケー

検索条件を変更して検索ボタンを押してみましょう

httplocalhost3000restaurants

Chapter 4

レストランに1行メモを追加できるようにする

32

4レストランに1行メモを追加できるようにする

さてさて次は画面に一言メモを残していけるようにしていきましょうこちらもサクサク作っていきます

33

4レストランに1行メモを追加できるようにする

まずはメモを残すためのモデルとテーブル作ります以下のコマンドを実行

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate model Bookmark rcdstring memostring

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

34

4レストランに1行メモを追加できるようにする

では実際に画面に項目を追加してみますrbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[Item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcd] gt

lt= link_to item[restaurant_name]

item [ldquotabelog_url] target =gt _blank gt

lt= item[rdquomemo] gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

35

4レストランに1行メモを追加できるようにする

続いてコントローラを修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加して画面に入力されたデータを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

登録ボタンが押されたかつラジオボタンのチェックがあったらたら if の中身を実行

find_or_initialize_by_XXX

データがあれば取得なければ作成する

36

4レストランに1行メモを追加できるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcd item[rcd]

if bookmark

item[memo] = bookmarkmemo

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

食べログAPIの検索結果分ループを実行

食べログAPIの結果にrdquomemordquoとして登録しているデータを追加

登録したブックマークを食べログのレストランCDで検索

37

4レストランに1行メモを追加できるようにする

では画面を確認してみましょう

メモ欄が追加されていますか登録してみてください結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 5

paperclip を使って画像をアップできるようにする

39

5paperclip を使って画像をアップできるようにする

コンテンツの完成も近づいてきました次は画像のアップを出来るようにしましょう

画像のアップ機能を追加するには paperclip というプラグインを使えば簡単です

paperclip

Rails上でファイルのアップロードを簡単に実装できるプラグイン

【参考リンク】httpwwwthoughtbotcomprojectspaperclip

httpgithubcomthoughtbotpapercliptreemasterREADMErdoc

40

5paperclip を使って画像をアップできるようにする

さっそく paprtclip プラグインをインストールしましょう

paperclip プラグインは git を使って入手できますが最新版はなぜかWindows 環境では動きませんhellip

ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須)

ruby scriptplugin install gitgithubcomthoughtbotpaperclipgit

なので古いバージョン 222 を使います資料の中にプラグイン本体を準備しています「yen1部資料yen_paperclipプラグインyenpaperclip」

ベンダーpluginsにドラッグオンドロップしましょうrbc_tabelogyenvendoryenplugins にコピーしてもいいです

41

5paperclip を使って画像をアップできるようにする

まずは テーブルに項目を追加しますマイグレーションファイルの作成も paperclip でできちゃいます

以下のコマンドを実行しましょう

cyenrbcyenrbc_tabeloggt ruby scriptgenerate paperclip Bookmark photo

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

42

5paperclip を使って画像をアップできるようにする

ちなみに先ほどのコマンドを実行する事でBookmarks テーブルに画像を保存するためのマイグレーションファイルが追加されました

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

5paperclip を使って画像をアップできるようにする

次に画像情報を保存するためにモデル修正しましょう修正するモデルはメモを書きこめるように作った Bookmark というモデルです

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

5paperclip を使って画像をアップできるようにする

引き続き画面に項目を追加していきましょう

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

5paperclip を使って画像をアップできるようにする

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

5paperclip を使って画像をアップできるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

5paperclip を使って画像をアップできるようにする

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

6 AIR との連携の準備をする

最後に 2部で開発する AIR アプリとの連携する部分を作ります

とは言っても実はほとんどが出来ています

Rails と AIR を連携

50

6 AIR との連携の準備をする

具体的にどのようにして連携するのでしょう

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

6 AIR との連携の準備をする

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 31: 20090418 イケテルRails勉強会 第1部Rails編

Chapter 4

レストランに1行メモを追加できるようにする

32

4レストランに1行メモを追加できるようにする

さてさて次は画面に一言メモを残していけるようにしていきましょうこちらもサクサク作っていきます

33

4レストランに1行メモを追加できるようにする

まずはメモを残すためのモデルとテーブル作ります以下のコマンドを実行

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate model Bookmark rcdstring memostring

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

34

4レストランに1行メモを追加できるようにする

では実際に画面に項目を追加してみますrbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[Item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcd] gt

lt= link_to item[restaurant_name]

item [ldquotabelog_url] target =gt _blank gt

lt= item[rdquomemo] gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

35

4レストランに1行メモを追加できるようにする

続いてコントローラを修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加して画面に入力されたデータを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

登録ボタンが押されたかつラジオボタンのチェックがあったらたら if の中身を実行

find_or_initialize_by_XXX

データがあれば取得なければ作成する

36

4レストランに1行メモを追加できるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcd item[rcd]

if bookmark

item[memo] = bookmarkmemo

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

食べログAPIの検索結果分ループを実行

食べログAPIの結果にrdquomemordquoとして登録しているデータを追加

登録したブックマークを食べログのレストランCDで検索

37

4レストランに1行メモを追加できるようにする

では画面を確認してみましょう

メモ欄が追加されていますか登録してみてください結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 5

paperclip を使って画像をアップできるようにする

39

5paperclip を使って画像をアップできるようにする

コンテンツの完成も近づいてきました次は画像のアップを出来るようにしましょう

画像のアップ機能を追加するには paperclip というプラグインを使えば簡単です

paperclip

Rails上でファイルのアップロードを簡単に実装できるプラグイン

【参考リンク】httpwwwthoughtbotcomprojectspaperclip

httpgithubcomthoughtbotpapercliptreemasterREADMErdoc

40

5paperclip を使って画像をアップできるようにする

さっそく paprtclip プラグインをインストールしましょう

paperclip プラグインは git を使って入手できますが最新版はなぜかWindows 環境では動きませんhellip

ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須)

ruby scriptplugin install gitgithubcomthoughtbotpaperclipgit

なので古いバージョン 222 を使います資料の中にプラグイン本体を準備しています「yen1部資料yen_paperclipプラグインyenpaperclip」

ベンダーpluginsにドラッグオンドロップしましょうrbc_tabelogyenvendoryenplugins にコピーしてもいいです

41

5paperclip を使って画像をアップできるようにする

まずは テーブルに項目を追加しますマイグレーションファイルの作成も paperclip でできちゃいます

以下のコマンドを実行しましょう

cyenrbcyenrbc_tabeloggt ruby scriptgenerate paperclip Bookmark photo

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

42

5paperclip を使って画像をアップできるようにする

ちなみに先ほどのコマンドを実行する事でBookmarks テーブルに画像を保存するためのマイグレーションファイルが追加されました

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

5paperclip を使って画像をアップできるようにする

次に画像情報を保存するためにモデル修正しましょう修正するモデルはメモを書きこめるように作った Bookmark というモデルです

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

5paperclip を使って画像をアップできるようにする

引き続き画面に項目を追加していきましょう

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

5paperclip を使って画像をアップできるようにする

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

5paperclip を使って画像をアップできるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

5paperclip を使って画像をアップできるようにする

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

6 AIR との連携の準備をする

最後に 2部で開発する AIR アプリとの連携する部分を作ります

とは言っても実はほとんどが出来ています

Rails と AIR を連携

50

6 AIR との連携の準備をする

具体的にどのようにして連携するのでしょう

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

6 AIR との連携の準備をする

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 32: 20090418 イケテルRails勉強会 第1部Rails編

32

4レストランに1行メモを追加できるようにする

さてさて次は画面に一言メモを残していけるようにしていきましょうこちらもサクサク作っていきます

33

4レストランに1行メモを追加できるようにする

まずはメモを残すためのモデルとテーブル作ります以下のコマンドを実行

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate model Bookmark rcdstring memostring

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

34

4レストランに1行メモを追加できるようにする

では実際に画面に項目を追加してみますrbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[Item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcd] gt

lt= link_to item[restaurant_name]

item [ldquotabelog_url] target =gt _blank gt

lt= item[rdquomemo] gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

35

4レストランに1行メモを追加できるようにする

続いてコントローラを修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加して画面に入力されたデータを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

登録ボタンが押されたかつラジオボタンのチェックがあったらたら if の中身を実行

find_or_initialize_by_XXX

データがあれば取得なければ作成する

36

4レストランに1行メモを追加できるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcd item[rcd]

if bookmark

item[memo] = bookmarkmemo

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

食べログAPIの検索結果分ループを実行

食べログAPIの結果にrdquomemordquoとして登録しているデータを追加

登録したブックマークを食べログのレストランCDで検索

37

4レストランに1行メモを追加できるようにする

では画面を確認してみましょう

メモ欄が追加されていますか登録してみてください結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 5

paperclip を使って画像をアップできるようにする

39

5paperclip を使って画像をアップできるようにする

コンテンツの完成も近づいてきました次は画像のアップを出来るようにしましょう

画像のアップ機能を追加するには paperclip というプラグインを使えば簡単です

paperclip

Rails上でファイルのアップロードを簡単に実装できるプラグイン

【参考リンク】httpwwwthoughtbotcomprojectspaperclip

httpgithubcomthoughtbotpapercliptreemasterREADMErdoc

40

5paperclip を使って画像をアップできるようにする

さっそく paprtclip プラグインをインストールしましょう

paperclip プラグインは git を使って入手できますが最新版はなぜかWindows 環境では動きませんhellip

ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須)

ruby scriptplugin install gitgithubcomthoughtbotpaperclipgit

なので古いバージョン 222 を使います資料の中にプラグイン本体を準備しています「yen1部資料yen_paperclipプラグインyenpaperclip」

ベンダーpluginsにドラッグオンドロップしましょうrbc_tabelogyenvendoryenplugins にコピーしてもいいです

41

5paperclip を使って画像をアップできるようにする

まずは テーブルに項目を追加しますマイグレーションファイルの作成も paperclip でできちゃいます

以下のコマンドを実行しましょう

cyenrbcyenrbc_tabeloggt ruby scriptgenerate paperclip Bookmark photo

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

42

5paperclip を使って画像をアップできるようにする

ちなみに先ほどのコマンドを実行する事でBookmarks テーブルに画像を保存するためのマイグレーションファイルが追加されました

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

5paperclip を使って画像をアップできるようにする

次に画像情報を保存するためにモデル修正しましょう修正するモデルはメモを書きこめるように作った Bookmark というモデルです

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

5paperclip を使って画像をアップできるようにする

引き続き画面に項目を追加していきましょう

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

5paperclip を使って画像をアップできるようにする

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

5paperclip を使って画像をアップできるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

5paperclip を使って画像をアップできるようにする

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

6 AIR との連携の準備をする

最後に 2部で開発する AIR アプリとの連携する部分を作ります

とは言っても実はほとんどが出来ています

Rails と AIR を連携

50

6 AIR との連携の準備をする

具体的にどのようにして連携するのでしょう

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

6 AIR との連携の準備をする

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 33: 20090418 イケテルRails勉強会 第1部Rails編

33

4レストランに1行メモを追加できるようにする

まずはメモを残すためのモデルとテーブル作ります以下のコマンドを実行

cyenrbcyenrbc_tabeloggt

ruby scriptgenerate model Bookmark rcdstring memostring

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

34

4レストランに1行メモを追加できるようにする

では実際に画面に項目を追加してみますrbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[Item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcd] gt

lt= link_to item[restaurant_name]

item [ldquotabelog_url] target =gt _blank gt

lt= item[rdquomemo] gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

35

4レストランに1行メモを追加できるようにする

続いてコントローラを修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加して画面に入力されたデータを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

登録ボタンが押されたかつラジオボタンのチェックがあったらたら if の中身を実行

find_or_initialize_by_XXX

データがあれば取得なければ作成する

36

4レストランに1行メモを追加できるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcd item[rcd]

if bookmark

item[memo] = bookmarkmemo

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

食べログAPIの検索結果分ループを実行

食べログAPIの結果にrdquomemordquoとして登録しているデータを追加

登録したブックマークを食べログのレストランCDで検索

37

4レストランに1行メモを追加できるようにする

では画面を確認してみましょう

メモ欄が追加されていますか登録してみてください結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 5

paperclip を使って画像をアップできるようにする

39

5paperclip を使って画像をアップできるようにする

コンテンツの完成も近づいてきました次は画像のアップを出来るようにしましょう

画像のアップ機能を追加するには paperclip というプラグインを使えば簡単です

paperclip

Rails上でファイルのアップロードを簡単に実装できるプラグイン

【参考リンク】httpwwwthoughtbotcomprojectspaperclip

httpgithubcomthoughtbotpapercliptreemasterREADMErdoc

40

5paperclip を使って画像をアップできるようにする

さっそく paprtclip プラグインをインストールしましょう

paperclip プラグインは git を使って入手できますが最新版はなぜかWindows 環境では動きませんhellip

ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須)

ruby scriptplugin install gitgithubcomthoughtbotpaperclipgit

なので古いバージョン 222 を使います資料の中にプラグイン本体を準備しています「yen1部資料yen_paperclipプラグインyenpaperclip」

ベンダーpluginsにドラッグオンドロップしましょうrbc_tabelogyenvendoryenplugins にコピーしてもいいです

41

5paperclip を使って画像をアップできるようにする

まずは テーブルに項目を追加しますマイグレーションファイルの作成も paperclip でできちゃいます

以下のコマンドを実行しましょう

cyenrbcyenrbc_tabeloggt ruby scriptgenerate paperclip Bookmark photo

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

42

5paperclip を使って画像をアップできるようにする

ちなみに先ほどのコマンドを実行する事でBookmarks テーブルに画像を保存するためのマイグレーションファイルが追加されました

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

5paperclip を使って画像をアップできるようにする

次に画像情報を保存するためにモデル修正しましょう修正するモデルはメモを書きこめるように作った Bookmark というモデルです

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

5paperclip を使って画像をアップできるようにする

引き続き画面に項目を追加していきましょう

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

5paperclip を使って画像をアップできるようにする

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

5paperclip を使って画像をアップできるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

5paperclip を使って画像をアップできるようにする

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

6 AIR との連携の準備をする

最後に 2部で開発する AIR アプリとの連携する部分を作ります

とは言っても実はほとんどが出来ています

Rails と AIR を連携

50

6 AIR との連携の準備をする

具体的にどのようにして連携するのでしょう

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

6 AIR との連携の準備をする

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 34: 20090418 イケテルRails勉強会 第1部Rails編

34

4レストランに1行メモを追加できるようにする

では実際に画面に項目を追加してみますrbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[Item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcd] gt

lt= link_to item[restaurant_name]

item [ldquotabelog_url] target =gt _blank gt

lt= item[rdquomemo] gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

35

4レストランに1行メモを追加できるようにする

続いてコントローラを修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加して画面に入力されたデータを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

登録ボタンが押されたかつラジオボタンのチェックがあったらたら if の中身を実行

find_or_initialize_by_XXX

データがあれば取得なければ作成する

36

4レストランに1行メモを追加できるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcd item[rcd]

if bookmark

item[memo] = bookmarkmemo

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

食べログAPIの検索結果分ループを実行

食べログAPIの結果にrdquomemordquoとして登録しているデータを追加

登録したブックマークを食べログのレストランCDで検索

37

4レストランに1行メモを追加できるようにする

では画面を確認してみましょう

メモ欄が追加されていますか登録してみてください結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 5

paperclip を使って画像をアップできるようにする

39

5paperclip を使って画像をアップできるようにする

コンテンツの完成も近づいてきました次は画像のアップを出来るようにしましょう

画像のアップ機能を追加するには paperclip というプラグインを使えば簡単です

paperclip

Rails上でファイルのアップロードを簡単に実装できるプラグイン

【参考リンク】httpwwwthoughtbotcomprojectspaperclip

httpgithubcomthoughtbotpapercliptreemasterREADMErdoc

40

5paperclip を使って画像をアップできるようにする

さっそく paprtclip プラグインをインストールしましょう

paperclip プラグインは git を使って入手できますが最新版はなぜかWindows 環境では動きませんhellip

ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須)

ruby scriptplugin install gitgithubcomthoughtbotpaperclipgit

なので古いバージョン 222 を使います資料の中にプラグイン本体を準備しています「yen1部資料yen_paperclipプラグインyenpaperclip」

ベンダーpluginsにドラッグオンドロップしましょうrbc_tabelogyenvendoryenplugins にコピーしてもいいです

41

5paperclip を使って画像をアップできるようにする

まずは テーブルに項目を追加しますマイグレーションファイルの作成も paperclip でできちゃいます

以下のコマンドを実行しましょう

cyenrbcyenrbc_tabeloggt ruby scriptgenerate paperclip Bookmark photo

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

42

5paperclip を使って画像をアップできるようにする

ちなみに先ほどのコマンドを実行する事でBookmarks テーブルに画像を保存するためのマイグレーションファイルが追加されました

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

5paperclip を使って画像をアップできるようにする

次に画像情報を保存するためにモデル修正しましょう修正するモデルはメモを書きこめるように作った Bookmark というモデルです

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

5paperclip を使って画像をアップできるようにする

引き続き画面に項目を追加していきましょう

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

5paperclip を使って画像をアップできるようにする

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

5paperclip を使って画像をアップできるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

5paperclip を使って画像をアップできるようにする

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

6 AIR との連携の準備をする

最後に 2部で開発する AIR アプリとの連携する部分を作ります

とは言っても実はほとんどが出来ています

Rails と AIR を連携

50

6 AIR との連携の準備をする

具体的にどのようにして連携するのでしょう

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

6 AIR との連携の準備をする

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 35: 20090418 イケテルRails勉強会 第1部Rails編

35

4レストランに1行メモを追加できるようにする

続いてコントローラを修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加して画面に入力されたデータを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

登録ボタンが押されたかつラジオボタンのチェックがあったらたら if の中身を実行

find_or_initialize_by_XXX

データがあれば取得なければ作成する

36

4レストランに1行メモを追加できるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcd item[rcd]

if bookmark

item[memo] = bookmarkmemo

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

食べログAPIの検索結果分ループを実行

食べログAPIの結果にrdquomemordquoとして登録しているデータを追加

登録したブックマークを食べログのレストランCDで検索

37

4レストランに1行メモを追加できるようにする

では画面を確認してみましょう

メモ欄が追加されていますか登録してみてください結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 5

paperclip を使って画像をアップできるようにする

39

5paperclip を使って画像をアップできるようにする

コンテンツの完成も近づいてきました次は画像のアップを出来るようにしましょう

画像のアップ機能を追加するには paperclip というプラグインを使えば簡単です

paperclip

Rails上でファイルのアップロードを簡単に実装できるプラグイン

【参考リンク】httpwwwthoughtbotcomprojectspaperclip

httpgithubcomthoughtbotpapercliptreemasterREADMErdoc

40

5paperclip を使って画像をアップできるようにする

さっそく paprtclip プラグインをインストールしましょう

paperclip プラグインは git を使って入手できますが最新版はなぜかWindows 環境では動きませんhellip

ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須)

ruby scriptplugin install gitgithubcomthoughtbotpaperclipgit

なので古いバージョン 222 を使います資料の中にプラグイン本体を準備しています「yen1部資料yen_paperclipプラグインyenpaperclip」

ベンダーpluginsにドラッグオンドロップしましょうrbc_tabelogyenvendoryenplugins にコピーしてもいいです

41

5paperclip を使って画像をアップできるようにする

まずは テーブルに項目を追加しますマイグレーションファイルの作成も paperclip でできちゃいます

以下のコマンドを実行しましょう

cyenrbcyenrbc_tabeloggt ruby scriptgenerate paperclip Bookmark photo

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

42

5paperclip を使って画像をアップできるようにする

ちなみに先ほどのコマンドを実行する事でBookmarks テーブルに画像を保存するためのマイグレーションファイルが追加されました

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

5paperclip を使って画像をアップできるようにする

次に画像情報を保存するためにモデル修正しましょう修正するモデルはメモを書きこめるように作った Bookmark というモデルです

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

5paperclip を使って画像をアップできるようにする

引き続き画面に項目を追加していきましょう

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

5paperclip を使って画像をアップできるようにする

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

5paperclip を使って画像をアップできるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

5paperclip を使って画像をアップできるようにする

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

6 AIR との連携の準備をする

最後に 2部で開発する AIR アプリとの連携する部分を作ります

とは言っても実はほとんどが出来ています

Rails と AIR を連携

50

6 AIR との連携の準備をする

具体的にどのようにして連携するのでしょう

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

6 AIR との連携の準備をする

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 36: 20090418 イケテルRails勉強会 第1部Rails編

36

4レストランに1行メモを追加できるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcd item[rcd]

if bookmark

item[memo] = bookmarkmemo

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

食べログAPIの検索結果分ループを実行

食べログAPIの結果にrdquomemordquoとして登録しているデータを追加

登録したブックマークを食べログのレストランCDで検索

37

4レストランに1行メモを追加できるようにする

では画面を確認してみましょう

メモ欄が追加されていますか登録してみてください結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 5

paperclip を使って画像をアップできるようにする

39

5paperclip を使って画像をアップできるようにする

コンテンツの完成も近づいてきました次は画像のアップを出来るようにしましょう

画像のアップ機能を追加するには paperclip というプラグインを使えば簡単です

paperclip

Rails上でファイルのアップロードを簡単に実装できるプラグイン

【参考リンク】httpwwwthoughtbotcomprojectspaperclip

httpgithubcomthoughtbotpapercliptreemasterREADMErdoc

40

5paperclip を使って画像をアップできるようにする

さっそく paprtclip プラグインをインストールしましょう

paperclip プラグインは git を使って入手できますが最新版はなぜかWindows 環境では動きませんhellip

ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須)

ruby scriptplugin install gitgithubcomthoughtbotpaperclipgit

なので古いバージョン 222 を使います資料の中にプラグイン本体を準備しています「yen1部資料yen_paperclipプラグインyenpaperclip」

ベンダーpluginsにドラッグオンドロップしましょうrbc_tabelogyenvendoryenplugins にコピーしてもいいです

41

5paperclip を使って画像をアップできるようにする

まずは テーブルに項目を追加しますマイグレーションファイルの作成も paperclip でできちゃいます

以下のコマンドを実行しましょう

cyenrbcyenrbc_tabeloggt ruby scriptgenerate paperclip Bookmark photo

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

42

5paperclip を使って画像をアップできるようにする

ちなみに先ほどのコマンドを実行する事でBookmarks テーブルに画像を保存するためのマイグレーションファイルが追加されました

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

5paperclip を使って画像をアップできるようにする

次に画像情報を保存するためにモデル修正しましょう修正するモデルはメモを書きこめるように作った Bookmark というモデルです

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

5paperclip を使って画像をアップできるようにする

引き続き画面に項目を追加していきましょう

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

5paperclip を使って画像をアップできるようにする

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

5paperclip を使って画像をアップできるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

5paperclip を使って画像をアップできるようにする

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

6 AIR との連携の準備をする

最後に 2部で開発する AIR アプリとの連携する部分を作ります

とは言っても実はほとんどが出来ています

Rails と AIR を連携

50

6 AIR との連携の準備をする

具体的にどのようにして連携するのでしょう

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

6 AIR との連携の準備をする

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 37: 20090418 イケテルRails勉強会 第1部Rails編

37

4レストランに1行メモを追加できるようにする

では画面を確認してみましょう

メモ欄が追加されていますか登録してみてください結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 5

paperclip を使って画像をアップできるようにする

39

5paperclip を使って画像をアップできるようにする

コンテンツの完成も近づいてきました次は画像のアップを出来るようにしましょう

画像のアップ機能を追加するには paperclip というプラグインを使えば簡単です

paperclip

Rails上でファイルのアップロードを簡単に実装できるプラグイン

【参考リンク】httpwwwthoughtbotcomprojectspaperclip

httpgithubcomthoughtbotpapercliptreemasterREADMErdoc

40

5paperclip を使って画像をアップできるようにする

さっそく paprtclip プラグインをインストールしましょう

paperclip プラグインは git を使って入手できますが最新版はなぜかWindows 環境では動きませんhellip

ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須)

ruby scriptplugin install gitgithubcomthoughtbotpaperclipgit

なので古いバージョン 222 を使います資料の中にプラグイン本体を準備しています「yen1部資料yen_paperclipプラグインyenpaperclip」

ベンダーpluginsにドラッグオンドロップしましょうrbc_tabelogyenvendoryenplugins にコピーしてもいいです

41

5paperclip を使って画像をアップできるようにする

まずは テーブルに項目を追加しますマイグレーションファイルの作成も paperclip でできちゃいます

以下のコマンドを実行しましょう

cyenrbcyenrbc_tabeloggt ruby scriptgenerate paperclip Bookmark photo

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

42

5paperclip を使って画像をアップできるようにする

ちなみに先ほどのコマンドを実行する事でBookmarks テーブルに画像を保存するためのマイグレーションファイルが追加されました

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

5paperclip を使って画像をアップできるようにする

次に画像情報を保存するためにモデル修正しましょう修正するモデルはメモを書きこめるように作った Bookmark というモデルです

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

5paperclip を使って画像をアップできるようにする

引き続き画面に項目を追加していきましょう

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

5paperclip を使って画像をアップできるようにする

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

5paperclip を使って画像をアップできるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

5paperclip を使って画像をアップできるようにする

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

6 AIR との連携の準備をする

最後に 2部で開発する AIR アプリとの連携する部分を作ります

とは言っても実はほとんどが出来ています

Rails と AIR を連携

50

6 AIR との連携の準備をする

具体的にどのようにして連携するのでしょう

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

6 AIR との連携の準備をする

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 38: 20090418 イケテルRails勉強会 第1部Rails編

Chapter 5

paperclip を使って画像をアップできるようにする

39

5paperclip を使って画像をアップできるようにする

コンテンツの完成も近づいてきました次は画像のアップを出来るようにしましょう

画像のアップ機能を追加するには paperclip というプラグインを使えば簡単です

paperclip

Rails上でファイルのアップロードを簡単に実装できるプラグイン

【参考リンク】httpwwwthoughtbotcomprojectspaperclip

httpgithubcomthoughtbotpapercliptreemasterREADMErdoc

40

5paperclip を使って画像をアップできるようにする

さっそく paprtclip プラグインをインストールしましょう

paperclip プラグインは git を使って入手できますが最新版はなぜかWindows 環境では動きませんhellip

ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須)

ruby scriptplugin install gitgithubcomthoughtbotpaperclipgit

なので古いバージョン 222 を使います資料の中にプラグイン本体を準備しています「yen1部資料yen_paperclipプラグインyenpaperclip」

ベンダーpluginsにドラッグオンドロップしましょうrbc_tabelogyenvendoryenplugins にコピーしてもいいです

41

5paperclip を使って画像をアップできるようにする

まずは テーブルに項目を追加しますマイグレーションファイルの作成も paperclip でできちゃいます

以下のコマンドを実行しましょう

cyenrbcyenrbc_tabeloggt ruby scriptgenerate paperclip Bookmark photo

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

42

5paperclip を使って画像をアップできるようにする

ちなみに先ほどのコマンドを実行する事でBookmarks テーブルに画像を保存するためのマイグレーションファイルが追加されました

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

5paperclip を使って画像をアップできるようにする

次に画像情報を保存するためにモデル修正しましょう修正するモデルはメモを書きこめるように作った Bookmark というモデルです

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

5paperclip を使って画像をアップできるようにする

引き続き画面に項目を追加していきましょう

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

5paperclip を使って画像をアップできるようにする

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

5paperclip を使って画像をアップできるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

5paperclip を使って画像をアップできるようにする

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

6 AIR との連携の準備をする

最後に 2部で開発する AIR アプリとの連携する部分を作ります

とは言っても実はほとんどが出来ています

Rails と AIR を連携

50

6 AIR との連携の準備をする

具体的にどのようにして連携するのでしょう

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

6 AIR との連携の準備をする

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 39: 20090418 イケテルRails勉強会 第1部Rails編

39

5paperclip を使って画像をアップできるようにする

コンテンツの完成も近づいてきました次は画像のアップを出来るようにしましょう

画像のアップ機能を追加するには paperclip というプラグインを使えば簡単です

paperclip

Rails上でファイルのアップロードを簡単に実装できるプラグイン

【参考リンク】httpwwwthoughtbotcomprojectspaperclip

httpgithubcomthoughtbotpapercliptreemasterREADMErdoc

40

5paperclip を使って画像をアップできるようにする

さっそく paprtclip プラグインをインストールしましょう

paperclip プラグインは git を使って入手できますが最新版はなぜかWindows 環境では動きませんhellip

ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須)

ruby scriptplugin install gitgithubcomthoughtbotpaperclipgit

なので古いバージョン 222 を使います資料の中にプラグイン本体を準備しています「yen1部資料yen_paperclipプラグインyenpaperclip」

ベンダーpluginsにドラッグオンドロップしましょうrbc_tabelogyenvendoryenplugins にコピーしてもいいです

41

5paperclip を使って画像をアップできるようにする

まずは テーブルに項目を追加しますマイグレーションファイルの作成も paperclip でできちゃいます

以下のコマンドを実行しましょう

cyenrbcyenrbc_tabeloggt ruby scriptgenerate paperclip Bookmark photo

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

42

5paperclip を使って画像をアップできるようにする

ちなみに先ほどのコマンドを実行する事でBookmarks テーブルに画像を保存するためのマイグレーションファイルが追加されました

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

5paperclip を使って画像をアップできるようにする

次に画像情報を保存するためにモデル修正しましょう修正するモデルはメモを書きこめるように作った Bookmark というモデルです

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

5paperclip を使って画像をアップできるようにする

引き続き画面に項目を追加していきましょう

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

5paperclip を使って画像をアップできるようにする

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

5paperclip を使って画像をアップできるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

5paperclip を使って画像をアップできるようにする

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

6 AIR との連携の準備をする

最後に 2部で開発する AIR アプリとの連携する部分を作ります

とは言っても実はほとんどが出来ています

Rails と AIR を連携

50

6 AIR との連携の準備をする

具体的にどのようにして連携するのでしょう

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

6 AIR との連携の準備をする

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 40: 20090418 イケテルRails勉強会 第1部Rails編

40

5paperclip を使って画像をアップできるようにする

さっそく paprtclip プラグインをインストールしましょう

paperclip プラグインは git を使って入手できますが最新版はなぜかWindows 環境では動きませんhellip

ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須)

ruby scriptplugin install gitgithubcomthoughtbotpaperclipgit

なので古いバージョン 222 を使います資料の中にプラグイン本体を準備しています「yen1部資料yen_paperclipプラグインyenpaperclip」

ベンダーpluginsにドラッグオンドロップしましょうrbc_tabelogyenvendoryenplugins にコピーしてもいいです

41

5paperclip を使って画像をアップできるようにする

まずは テーブルに項目を追加しますマイグレーションファイルの作成も paperclip でできちゃいます

以下のコマンドを実行しましょう

cyenrbcyenrbc_tabeloggt ruby scriptgenerate paperclip Bookmark photo

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

42

5paperclip を使って画像をアップできるようにする

ちなみに先ほどのコマンドを実行する事でBookmarks テーブルに画像を保存するためのマイグレーションファイルが追加されました

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

5paperclip を使って画像をアップできるようにする

次に画像情報を保存するためにモデル修正しましょう修正するモデルはメモを書きこめるように作った Bookmark というモデルです

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

5paperclip を使って画像をアップできるようにする

引き続き画面に項目を追加していきましょう

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

5paperclip を使って画像をアップできるようにする

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

5paperclip を使って画像をアップできるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

5paperclip を使って画像をアップできるようにする

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

6 AIR との連携の準備をする

最後に 2部で開発する AIR アプリとの連携する部分を作ります

とは言っても実はほとんどが出来ています

Rails と AIR を連携

50

6 AIR との連携の準備をする

具体的にどのようにして連携するのでしょう

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

6 AIR との連携の準備をする

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 41: 20090418 イケテルRails勉強会 第1部Rails編

41

5paperclip を使って画像をアップできるようにする

まずは テーブルに項目を追加しますマイグレーションファイルの作成も paperclip でできちゃいます

以下のコマンドを実行しましょう

cyenrbcyenrbc_tabeloggt ruby scriptgenerate paperclip Bookmark photo

cyenrbcyenrbc_tabeloggt rake dbmigrate

(in crbcrbc_tabelog)

42

5paperclip を使って画像をアップできるようにする

ちなみに先ほどのコマンドを実行する事でBookmarks テーブルに画像を保存するためのマイグレーションファイルが追加されました

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

5paperclip を使って画像をアップできるようにする

次に画像情報を保存するためにモデル修正しましょう修正するモデルはメモを書きこめるように作った Bookmark というモデルです

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

5paperclip を使って画像をアップできるようにする

引き続き画面に項目を追加していきましょう

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

5paperclip を使って画像をアップできるようにする

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

5paperclip を使って画像をアップできるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

5paperclip を使って画像をアップできるようにする

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

6 AIR との連携の準備をする

最後に 2部で開発する AIR アプリとの連携する部分を作ります

とは言っても実はほとんどが出来ています

Rails と AIR を連携

50

6 AIR との連携の準備をする

具体的にどのようにして連携するのでしょう

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

6 AIR との連携の準備をする

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 42: 20090418 イケテルRails勉強会 第1部Rails編

42

5paperclip を使って画像をアップできるようにする

ちなみに先ほどのコマンドを実行する事でBookmarks テーブルに画像を保存するためのマイグレーションファイルが追加されました

class AddAttachmentsPhotoToBookmark lt ActiveRecordMigration

def selfup

add_column bookmarks photo_file_name string

add_column bookmarks photo_content_type string

add_column bookmarks photo_file_size integer

end

def selfdown

remove_column bookmarks photo_file_name

remove_column bookmarks photo_content_type

remove_column bookmarks photo_file_size

end

end

rbc_tabelogdbmigrate数字_add_attachments_photo_to_bookmarkrb

43

5paperclip を使って画像をアップできるようにする

次に画像情報を保存するためにモデル修正しましょう修正するモデルはメモを書きこめるように作った Bookmark というモデルです

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

5paperclip を使って画像をアップできるようにする

引き続き画面に項目を追加していきましょう

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

5paperclip を使って画像をアップできるようにする

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

5paperclip を使って画像をアップできるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

5paperclip を使って画像をアップできるようにする

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

6 AIR との連携の準備をする

最後に 2部で開発する AIR アプリとの連携する部分を作ります

とは言っても実はほとんどが出来ています

Rails と AIR を連携

50

6 AIR との連携の準備をする

具体的にどのようにして連携するのでしょう

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

6 AIR との連携の準備をする

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 43: 20090418 イケテルRails勉強会 第1部Rails編

43

5paperclip を使って画像をアップできるようにする

次に画像情報を保存するためにモデル修正しましょう修正するモデルはメモを書きこめるように作った Bookmark というモデルです

モデルbookmarkrb

赤字部分を追記して終わりです

class Bookmark lt ActiveRecordBase

has_attached_file photo

end

今回は ldquophotordquo という名前で画像を保存する事にします

44

5paperclip を使って画像をアップできるようにする

引き続き画面に項目を追加していきましょう

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

5paperclip を使って画像をアップできるようにする

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

5paperclip を使って画像をアップできるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

5paperclip を使って画像をアップできるようにする

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

6 AIR との連携の準備をする

最後に 2部で開発する AIR アプリとの連携する部分を作ります

とは言っても実はほとんどが出来ています

Rails と AIR を連携

50

6 AIR との連携の準備をする

具体的にどのようにして連携するのでしょう

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

6 AIR との連携の準備をする

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 44: 20090418 イケテルRails勉強会 第1部Rails編

44

5paperclip を使って画像をアップできるようにする

引き続き画面に項目を追加していきましょう

rbc_tabelogappviewsrestaurantsindexhtmlerb

赤字部分を追加

lth1gtRBC食べログlth1gt

(省略)lthr gt

ltulgt

lt restaurants[item]each do |item| -gt

ltligt

lt= radio_button_tag rcd item[rcdrdquo] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

ltpgt

メモlt= text_field_tag memo gt

ltpgt

ltpgt

イメージlt= file_field_tag photo gt

ltpgt

lt= submit_tag 登録 name =gt create gt

lt end -gt

画像があれば unless の中を実行

画像をアップする ファイルフィールド

45

5paperclip を使って画像をアップできるようにする

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

5paperclip を使って画像をアップできるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

5paperclip を使って画像をアップできるようにする

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

6 AIR との連携の準備をする

最後に 2部で開発する AIR アプリとの連携する部分を作ります

とは言っても実はほとんどが出来ています

Rails と AIR を連携

50

6 AIR との連携の準備をする

具体的にどのようにして連携するのでしょう

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

6 AIR との連携の準備をする

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 45: 20090418 イケテルRails勉強会 第1部Rails編

45

5paperclip を使って画像をアップできるようにする

んでコントローラも修正rbc_tabelogappcontrollersrestaurants_controllerrb

create メソッドの中の赤字部分を追加してファイルを登録できるようにします

def create

if params[create] ampamp params[rcd]

bookmark_params =

rcd =gt params[rcd]

memo =gt params[memo]

photo =gt params[photo]

bookmark = Bookmarkfind_or_initialize_by_rcd bookmark_params

bookmarkattributes = bookmark_params

bookmarksave

end

restaurant_params =

sortOrder =gt params[sortOrder]

pageNum =gt params[pageNum]to_i

redirect_to controller =gt restaurants action =gt index params =gt restaurant_params

end

カンマも忘れずに追加

46

5paperclip を使って画像をアップできるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

5paperclip を使って画像をアップできるようにする

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

6 AIR との連携の準備をする

最後に 2部で開発する AIR アプリとの連携する部分を作ります

とは言っても実はほとんどが出来ています

Rails と AIR を連携

50

6 AIR との連携の準備をする

具体的にどのようにして連携するのでしょう

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

6 AIR との連携の準備をする

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 46: 20090418 イケテルRails勉強会 第1部Rails編

46

5paperclip を使って画像をアップできるようにする

rbc_tabelogappcontrollersrestaurants_controllerrb

index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[restaurant]

restaurants[item]each do |item|

bookmark = Bookmarkfind_by_rcditem[ldquotabelog_rcd]

if bookmark

item[memo] = bookmarkmemo

item[image_url] = bookmarkphoto_file_name bookmarkphotourl nil

end

end

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurants

end

end

ldquourlrdquo でアップしたファイルのURL を取得できる

47

5paperclip を使って画像をアップできるようにする

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

6 AIR との連携の準備をする

最後に 2部で開発する AIR アプリとの連携する部分を作ります

とは言っても実はほとんどが出来ています

Rails と AIR を連携

50

6 AIR との連携の準備をする

具体的にどのようにして連携するのでしょう

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

6 AIR との連携の準備をする

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 47: 20090418 イケテルRails勉強会 第1部Rails編

47

5paperclip を使って画像をアップできるようにする

これで写真のアップ機能が追加できました

イメージ欄が追加されていますか登録してみてください

いくつかサンプル画像を用意しています「yen1部資料yen_レストラン画像サンプル」

結果が各レストラン横に追加されるのを確認できます

httplocalhost3000restaurants

Chapter 6

AIR との連携の準備をする

49

6 AIR との連携の準備をする

最後に 2部で開発する AIR アプリとの連携する部分を作ります

とは言っても実はほとんどが出来ています

Rails と AIR を連携

50

6 AIR との連携の準備をする

具体的にどのようにして連携するのでしょう

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

6 AIR との連携の準備をする

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 48: 20090418 イケテルRails勉強会 第1部Rails編

Chapter 6

AIR との連携の準備をする

49

6 AIR との連携の準備をする

最後に 2部で開発する AIR アプリとの連携する部分を作ります

とは言っても実はほとんどが出来ています

Rails と AIR を連携

50

6 AIR との連携の準備をする

具体的にどのようにして連携するのでしょう

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

6 AIR との連携の準備をする

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 49: 20090418 イケテルRails勉強会 第1部Rails編

49

6 AIR との連携の準備をする

最後に 2部で開発する AIR アプリとの連携する部分を作ります

とは言っても実はほとんどが出来ています

Rails と AIR を連携

50

6 AIR との連携の準備をする

具体的にどのようにして連携するのでしょう

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

6 AIR との連携の準備をする

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 50: 20090418 イケテルRails勉強会 第1部Rails編

50

6 AIR との連携の準備をする

具体的にどのようにして連携するのでしょう

httplocalhost3000restaurantsxml

左図のような xml が出てきましたよね

コレをAIRに読み込んでもらいます

ちなみに検索条件の追加時に作った

「都道府県名」も

以下のURLでXMLを呼び出せちゃいます

(今回のAIR編では使いません)

httplocalhost3000prefecturesxml

51

6 AIR との連携の準備をする

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 51: 20090418 イケテルRails勉強会 第1部Rails編

51

6 AIR との連携の準備をする

ただAIRとの連携で以下の問題があります

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

タグ名にハイフンが含まれているとAIR側の処理が面倒

lthashgt

ltnum-of-resultgt10483ltnum-of-resultgt

ltitem type=arraygt

ltitemgt

ltimage-urlgtphotos1original100x100_233565jpgltimage-urlgt

lttabelog-mobile-urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog-mobile-urlgt

ltcategorygtフレンチltcategorygt

画像のURLがhttpから始まっていない

ldquoItemrdquoタグが下の階層にもあってそれが面倒そもそも array のタグが単数系なのも個人的に気持ち悪い

タグ名にハイフンが含まれている

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 52: 20090418 イケテルRails勉強会 第1部Rails編

52

6 AIR との連携の準備をするさっそく問題を解決しましょう同じタグ名が重なると同じく処理が面倒paperclip で追加した画像のURLが相対URLである要素の名前にハイフンが含まれているとAIR側の処理が面倒赤字部分を変更追記してください

def index

prefectures = Prefecturefind(all)

pages = Arraynew(100)|i| i+1

restaurants = Restaurantfind_restaurants(requestquery_parameters)[ldquorestaurant]

restaurants[ldquoitem]each do |item|

bookmark = Bookmarkfind_by_url item[ldquotabelog_url]

if bookmark

itemattributes[ldquomemo] = bookmarkmemo

itemattributes[ldquoimage_url] = bookmarkphoto_file_name requestprotocol + requesthost_with_port +

bookmarkphotourl nil

end

end

restaurants[items] = restaurants[item]

restaurantsdelete item

respond_to do |format|

formathtml indexhtmlerb

formatxml render xml =gt restaurantsto_xml(root =gt restaurant dasherize =gt false)

end

end

rbc_tabelogappcontrollerrestaurant_controllerrb

root オプションでxml の先頭タグ名を変更できます

ldquoitemrdquorarrrdquoitemsrdquoに変更

画像のURLにhttp~を追加します

dasherizeオプションfalseでアンスコをハイフンに変換しなくなります

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 53: 20090418 イケテルRails勉強会 第1部Rails編

53

6 AIR との連携の準備をする

このままだと画面が動かなくなっちゃうので画面もちょっと修正

lth1gtRBC食べログlth1gt

lt form_tag(action =gt index multipart =gt true) do -gt

(省略)lthr gt

ltulgt

lt restaurants[items]each do |item| -gt

ltligt

lt= radio_button_tag url item[tabelog_url] gt

lt= link_to item[restaurant_name]

item[tabelog_url] target =gt _blank gt

lt= item[memo] gt

lt unless item[image_url]blank -gt

ltbr gtlt= image_tag item[image_url] gt

lt end -gt

ltligt

lt end -gt

ltulgt

(省略)lt end -gt

ビューrestaurantsindexhtmlerb

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 54: 20090418 イケテルRails勉強会 第1部Rails編

54

6 AIR との連携の準備をする

これで以下の問題の対応が完了しました

同じタグ名が重なると同じく処理が面倒

paperclip で追加した画像のURLが相対URLである

ltrestaurantgt

ltitems type=arraygt

ltitemgt

ltimage_urlgt

httplocalhost3000photos1original100x100_233565jpg

ltimage_urlgt

lttabelog_mobile_urlgt

httpmtabelogcomhokkaidoA0101A0101051000049

lttabelog_mobile_urlgt

ltcategorygtフレンチltcategorygtldquohttprdquo から始まるURLになりました

ついでに先頭タグをrdquorestaurantrdquo に変更してみました

このタグ名が ldquoItemrdquo rarr ldquoItemsrdquo に変わりました

タグ名がアンスコ区切りに戻りました

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 55: 20090418 イケテルRails勉強会 第1部Rails編

55

これで完成しました

コレで1部のアプリケーションが完成しました

ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました

ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon

Twitter

その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall

ありがとうございました

それでは2部にバトンタッチです

Page 56: 20090418 イケテルRails勉強会 第1部Rails編

ありがとうございました

それでは2部にバトンタッチです