20090418 イケテルrails勉強会 第1部rails編
Post on 19-Jan-2015
4.451 Views
Preview:
DESCRIPTION
TRANSCRIPT
イケテル 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 １Ruby on Rails のプロジェクトを作成
5
１Ruby 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
１Ruby on Rails のプロジェクトを作成
今回の勉強会では
Cyenrbcフォルダで作業している事を前提に説明します
Cドライブ直下にrbcフォルダを作成してください
7
１Ruby 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
１Ruby on Rails のプロジェクトを作成
以下の様に
rbc_tabelog プロジェクトができていれば成功
9
１Ruby on Rails のプロジェクトを作成
ついでにデータベースも作成
以下のコマンドを入力しましょう
cyenrbcgtcd rbc_tabelog
cyenrbcyenrbc_tabeloggtrake dbcreate
(in crbcrbc_tabelog)
ldquorake dbcreaterdquo コマンドでデータベースを作成します
Cyenrbcyenrbc_tabelogyendb フォルダに
developmentsqlite3 というファイルができていればオッケー
コマンドに失敗した場合rbc_tabelogyenconfigyendatabaseyml を編集してください
参考 yen1部資料yenChap_1yenrbc_tabelogyenconfigyendatabaseyml
10
１Ruby 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
１Ruby on Rails のプロジェクトを作成
この画面が表示されたら準備オッケーです
12
１Ruby 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 ２ActiveResource をつかって食べログAPIを表示する
14
２ActiveResource をつかって食べログAPIを表示する
ActiveResource って
簡単に説明するとWebサービスを簡単に処理することが出来るRails の機能です
Rails20以降で追加されました
rarr httpapirubyonrailsorgclassesActiveRecordBasehtmlM001298(英語)
今回は｢食べログcom｣のWebAPI を使ってレストランの一覧の表示を行います
食べログcomとは
日本最大級の口コミグルメサイト
rarr httptabelogcom
食べログAPI
レストランの口コミ情報を取得できます
rarr httprtabelogcomhelpapi
rarr httptabelogcomhelpapi_manualrst-api
マニュアルは｢yenyen1部資料yen_食べログAPIマニュアル｣にも置いています
15
２ActiveResource をつかって食べログAPIを表示する
まずはAPI を表示するために
画面を作っていきます
以下のコマンドを実行
cyenrbcyenrbc_tabeloggtruby scriptgenerate scaffold Restaurant
16
２ActiveResource をつかって食べログAPIを表示する
生成された rbc_tabelogappmodelsrestaurantrbを以下のように変更
class Restaurant lt ActiveRecordBase
end
class Restaurant lt ActiveResourceBase
end
ActiveResource とは
簡単にRESTfulなAPIを使えるようにする機能です
ActiveRecord を使うのと同じような感覚でWebAPIが使用できます
17
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
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 １Ruby on Rails のプロジェクトを作成
5
１Ruby 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
１Ruby on Rails のプロジェクトを作成
今回の勉強会では
Cyenrbcフォルダで作業している事を前提に説明します
Cドライブ直下にrbcフォルダを作成してください
7
１Ruby 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
１Ruby on Rails のプロジェクトを作成
以下の様に
rbc_tabelog プロジェクトができていれば成功
9
１Ruby on Rails のプロジェクトを作成
ついでにデータベースも作成
以下のコマンドを入力しましょう
cyenrbcgtcd rbc_tabelog
cyenrbcyenrbc_tabeloggtrake dbcreate
(in crbcrbc_tabelog)
ldquorake dbcreaterdquo コマンドでデータベースを作成します
Cyenrbcyenrbc_tabelogyendb フォルダに
developmentsqlite3 というファイルができていればオッケー
コマンドに失敗した場合rbc_tabelogyenconfigyendatabaseyml を編集してください
参考 yen1部資料yenChap_1yenrbc_tabelogyenconfigyendatabaseyml
10
１Ruby 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
１Ruby on Rails のプロジェクトを作成
この画面が表示されたら準備オッケーです
12
１Ruby 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 ２ActiveResource をつかって食べログAPIを表示する
14
２ActiveResource をつかって食べログAPIを表示する
ActiveResource って
簡単に説明するとWebサービスを簡単に処理することが出来るRails の機能です
Rails20以降で追加されました
rarr httpapirubyonrailsorgclassesActiveRecordBasehtmlM001298(英語)
今回は｢食べログcom｣のWebAPI を使ってレストランの一覧の表示を行います
食べログcomとは
日本最大級の口コミグルメサイト
rarr httptabelogcom
食べログAPI
レストランの口コミ情報を取得できます
rarr httprtabelogcomhelpapi
rarr httptabelogcomhelpapi_manualrst-api
マニュアルは｢yenyen1部資料yen_食べログAPIマニュアル｣にも置いています
15
２ActiveResource をつかって食べログAPIを表示する
まずはAPI を表示するために
画面を作っていきます
以下のコマンドを実行
cyenrbcyenrbc_tabeloggtruby scriptgenerate scaffold Restaurant
16
２ActiveResource をつかって食べログAPIを表示する
生成された rbc_tabelogappmodelsrestaurantrbを以下のように変更
class Restaurant lt ActiveRecordBase
end
class Restaurant lt ActiveResourceBase
end
ActiveResource とは
簡単にRESTfulなAPIを使えるようにする機能です
ActiveRecord を使うのと同じような感覚でWebAPIが使用できます
17
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
3
1部でやること
1 Ruby on Rails のプロジェクトを作成
2 ActiveResource をつかって食べログAPIを表示する
3 食べログの画面に検索条件を追加する
4 レストランに1行メモを追加できるようにする
5 paperclip を使って画像を添付できるようにする
6 AIR との連携の準備をする
Chapter １Ruby on Rails のプロジェクトを作成
5
１Ruby 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
１Ruby on Rails のプロジェクトを作成
今回の勉強会では
Cyenrbcフォルダで作業している事を前提に説明します
Cドライブ直下にrbcフォルダを作成してください
7
１Ruby 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
１Ruby on Rails のプロジェクトを作成
以下の様に
rbc_tabelog プロジェクトができていれば成功
9
１Ruby on Rails のプロジェクトを作成
ついでにデータベースも作成
以下のコマンドを入力しましょう
cyenrbcgtcd rbc_tabelog
cyenrbcyenrbc_tabeloggtrake dbcreate
(in crbcrbc_tabelog)
ldquorake dbcreaterdquo コマンドでデータベースを作成します
Cyenrbcyenrbc_tabelogyendb フォルダに
developmentsqlite3 というファイルができていればオッケー
コマンドに失敗した場合rbc_tabelogyenconfigyendatabaseyml を編集してください
参考 yen1部資料yenChap_1yenrbc_tabelogyenconfigyendatabaseyml
10
１Ruby 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
１Ruby on Rails のプロジェクトを作成
この画面が表示されたら準備オッケーです
12
１Ruby 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 ２ActiveResource をつかって食べログAPIを表示する
14
２ActiveResource をつかって食べログAPIを表示する
ActiveResource って
簡単に説明するとWebサービスを簡単に処理することが出来るRails の機能です
Rails20以降で追加されました
rarr httpapirubyonrailsorgclassesActiveRecordBasehtmlM001298(英語)
今回は｢食べログcom｣のWebAPI を使ってレストランの一覧の表示を行います
食べログcomとは
日本最大級の口コミグルメサイト
rarr httptabelogcom
食べログAPI
レストランの口コミ情報を取得できます
rarr httprtabelogcomhelpapi
rarr httptabelogcomhelpapi_manualrst-api
マニュアルは｢yenyen1部資料yen_食べログAPIマニュアル｣にも置いています
15
２ActiveResource をつかって食べログAPIを表示する
まずはAPI を表示するために
画面を作っていきます
以下のコマンドを実行
cyenrbcyenrbc_tabeloggtruby scriptgenerate scaffold Restaurant
16
２ActiveResource をつかって食べログAPIを表示する
生成された rbc_tabelogappmodelsrestaurantrbを以下のように変更
class Restaurant lt ActiveRecordBase
end
class Restaurant lt ActiveResourceBase
end
ActiveResource とは
簡単にRESTfulなAPIを使えるようにする機能です
ActiveRecord を使うのと同じような感覚でWebAPIが使用できます
17
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
Chapter １Ruby on Rails のプロジェクトを作成
5
１Ruby 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
１Ruby on Rails のプロジェクトを作成
今回の勉強会では
Cyenrbcフォルダで作業している事を前提に説明します
Cドライブ直下にrbcフォルダを作成してください
7
１Ruby 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
１Ruby on Rails のプロジェクトを作成
以下の様に
rbc_tabelog プロジェクトができていれば成功
9
１Ruby on Rails のプロジェクトを作成
ついでにデータベースも作成
以下のコマンドを入力しましょう
cyenrbcgtcd rbc_tabelog
cyenrbcyenrbc_tabeloggtrake dbcreate
(in crbcrbc_tabelog)
ldquorake dbcreaterdquo コマンドでデータベースを作成します
Cyenrbcyenrbc_tabelogyendb フォルダに
developmentsqlite3 というファイルができていればオッケー
コマンドに失敗した場合rbc_tabelogyenconfigyendatabaseyml を編集してください
参考 yen1部資料yenChap_1yenrbc_tabelogyenconfigyendatabaseyml
10
１Ruby 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
１Ruby on Rails のプロジェクトを作成
この画面が表示されたら準備オッケーです
12
１Ruby 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 ２ActiveResource をつかって食べログAPIを表示する
14
２ActiveResource をつかって食べログAPIを表示する
ActiveResource って
簡単に説明するとWebサービスを簡単に処理することが出来るRails の機能です
Rails20以降で追加されました
rarr httpapirubyonrailsorgclassesActiveRecordBasehtmlM001298(英語)
今回は｢食べログcom｣のWebAPI を使ってレストランの一覧の表示を行います
食べログcomとは
日本最大級の口コミグルメサイト
rarr httptabelogcom
食べログAPI
レストランの口コミ情報を取得できます
rarr httprtabelogcomhelpapi
rarr httptabelogcomhelpapi_manualrst-api
マニュアルは｢yenyen1部資料yen_食べログAPIマニュアル｣にも置いています
15
２ActiveResource をつかって食べログAPIを表示する
まずはAPI を表示するために
画面を作っていきます
以下のコマンドを実行
cyenrbcyenrbc_tabeloggtruby scriptgenerate scaffold Restaurant
16
２ActiveResource をつかって食べログAPIを表示する
生成された rbc_tabelogappmodelsrestaurantrbを以下のように変更
class Restaurant lt ActiveRecordBase
end
class Restaurant lt ActiveResourceBase
end
ActiveResource とは
簡単にRESTfulなAPIを使えるようにする機能です
ActiveRecord を使うのと同じような感覚でWebAPIが使用できます
17
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
5
１Ruby 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
１Ruby on Rails のプロジェクトを作成
今回の勉強会では
Cyenrbcフォルダで作業している事を前提に説明します
Cドライブ直下にrbcフォルダを作成してください
7
１Ruby 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
１Ruby on Rails のプロジェクトを作成
以下の様に
rbc_tabelog プロジェクトができていれば成功
9
１Ruby on Rails のプロジェクトを作成
ついでにデータベースも作成
以下のコマンドを入力しましょう
cyenrbcgtcd rbc_tabelog
cyenrbcyenrbc_tabeloggtrake dbcreate
(in crbcrbc_tabelog)
ldquorake dbcreaterdquo コマンドでデータベースを作成します
Cyenrbcyenrbc_tabelogyendb フォルダに
developmentsqlite3 というファイルができていればオッケー
コマンドに失敗した場合rbc_tabelogyenconfigyendatabaseyml を編集してください
参考 yen1部資料yenChap_1yenrbc_tabelogyenconfigyendatabaseyml
10
１Ruby 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
１Ruby on Rails のプロジェクトを作成
この画面が表示されたら準備オッケーです
12
１Ruby 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 ２ActiveResource をつかって食べログAPIを表示する
14
２ActiveResource をつかって食べログAPIを表示する
ActiveResource って
簡単に説明するとWebサービスを簡単に処理することが出来るRails の機能です
Rails20以降で追加されました
rarr httpapirubyonrailsorgclassesActiveRecordBasehtmlM001298(英語)
今回は｢食べログcom｣のWebAPI を使ってレストランの一覧の表示を行います
食べログcomとは
日本最大級の口コミグルメサイト
rarr httptabelogcom
食べログAPI
レストランの口コミ情報を取得できます
rarr httprtabelogcomhelpapi
rarr httptabelogcomhelpapi_manualrst-api
マニュアルは｢yenyen1部資料yen_食べログAPIマニュアル｣にも置いています
15
２ActiveResource をつかって食べログAPIを表示する
まずはAPI を表示するために
画面を作っていきます
以下のコマンドを実行
cyenrbcyenrbc_tabeloggtruby scriptgenerate scaffold Restaurant
16
２ActiveResource をつかって食べログAPIを表示する
生成された rbc_tabelogappmodelsrestaurantrbを以下のように変更
class Restaurant lt ActiveRecordBase
end
class Restaurant lt ActiveResourceBase
end
ActiveResource とは
簡単にRESTfulなAPIを使えるようにする機能です
ActiveRecord を使うのと同じような感覚でWebAPIが使用できます
17
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
6
１Ruby on Rails のプロジェクトを作成
今回の勉強会では
Cyenrbcフォルダで作業している事を前提に説明します
Cドライブ直下にrbcフォルダを作成してください
7
１Ruby 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
１Ruby on Rails のプロジェクトを作成
以下の様に
rbc_tabelog プロジェクトができていれば成功
9
１Ruby on Rails のプロジェクトを作成
ついでにデータベースも作成
以下のコマンドを入力しましょう
cyenrbcgtcd rbc_tabelog
cyenrbcyenrbc_tabeloggtrake dbcreate
(in crbcrbc_tabelog)
ldquorake dbcreaterdquo コマンドでデータベースを作成します
Cyenrbcyenrbc_tabelogyendb フォルダに
developmentsqlite3 というファイルができていればオッケー
コマンドに失敗した場合rbc_tabelogyenconfigyendatabaseyml を編集してください
参考 yen1部資料yenChap_1yenrbc_tabelogyenconfigyendatabaseyml
10
１Ruby 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
１Ruby on Rails のプロジェクトを作成
この画面が表示されたら準備オッケーです
12
１Ruby 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 ２ActiveResource をつかって食べログAPIを表示する
14
２ActiveResource をつかって食べログAPIを表示する
ActiveResource って
簡単に説明するとWebサービスを簡単に処理することが出来るRails の機能です
Rails20以降で追加されました
rarr httpapirubyonrailsorgclassesActiveRecordBasehtmlM001298(英語)
今回は｢食べログcom｣のWebAPI を使ってレストランの一覧の表示を行います
食べログcomとは
日本最大級の口コミグルメサイト
rarr httptabelogcom
食べログAPI
レストランの口コミ情報を取得できます
rarr httprtabelogcomhelpapi
rarr httptabelogcomhelpapi_manualrst-api
マニュアルは｢yenyen1部資料yen_食べログAPIマニュアル｣にも置いています
15
２ActiveResource をつかって食べログAPIを表示する
まずはAPI を表示するために
画面を作っていきます
以下のコマンドを実行
cyenrbcyenrbc_tabeloggtruby scriptgenerate scaffold Restaurant
16
２ActiveResource をつかって食べログAPIを表示する
生成された rbc_tabelogappmodelsrestaurantrbを以下のように変更
class Restaurant lt ActiveRecordBase
end
class Restaurant lt ActiveResourceBase
end
ActiveResource とは
簡単にRESTfulなAPIを使えるようにする機能です
ActiveRecord を使うのと同じような感覚でWebAPIが使用できます
17
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
7
１Ruby 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
１Ruby on Rails のプロジェクトを作成
以下の様に
rbc_tabelog プロジェクトができていれば成功
9
１Ruby on Rails のプロジェクトを作成
ついでにデータベースも作成
以下のコマンドを入力しましょう
cyenrbcgtcd rbc_tabelog
cyenrbcyenrbc_tabeloggtrake dbcreate
(in crbcrbc_tabelog)
ldquorake dbcreaterdquo コマンドでデータベースを作成します
Cyenrbcyenrbc_tabelogyendb フォルダに
developmentsqlite3 というファイルができていればオッケー
コマンドに失敗した場合rbc_tabelogyenconfigyendatabaseyml を編集してください
参考 yen1部資料yenChap_1yenrbc_tabelogyenconfigyendatabaseyml
10
１Ruby 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
１Ruby on Rails のプロジェクトを作成
この画面が表示されたら準備オッケーです
12
１Ruby 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 ２ActiveResource をつかって食べログAPIを表示する
14
２ActiveResource をつかって食べログAPIを表示する
ActiveResource って
簡単に説明するとWebサービスを簡単に処理することが出来るRails の機能です
Rails20以降で追加されました
rarr httpapirubyonrailsorgclassesActiveRecordBasehtmlM001298(英語)
今回は｢食べログcom｣のWebAPI を使ってレストランの一覧の表示を行います
食べログcomとは
日本最大級の口コミグルメサイト
rarr httptabelogcom
食べログAPI
レストランの口コミ情報を取得できます
rarr httprtabelogcomhelpapi
rarr httptabelogcomhelpapi_manualrst-api
マニュアルは｢yenyen1部資料yen_食べログAPIマニュアル｣にも置いています
15
２ActiveResource をつかって食べログAPIを表示する
まずはAPI を表示するために
画面を作っていきます
以下のコマンドを実行
cyenrbcyenrbc_tabeloggtruby scriptgenerate scaffold Restaurant
16
２ActiveResource をつかって食べログAPIを表示する
生成された rbc_tabelogappmodelsrestaurantrbを以下のように変更
class Restaurant lt ActiveRecordBase
end
class Restaurant lt ActiveResourceBase
end
ActiveResource とは
簡単にRESTfulなAPIを使えるようにする機能です
ActiveRecord を使うのと同じような感覚でWebAPIが使用できます
17
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
8
１Ruby on Rails のプロジェクトを作成
以下の様に
rbc_tabelog プロジェクトができていれば成功
9
１Ruby on Rails のプロジェクトを作成
ついでにデータベースも作成
以下のコマンドを入力しましょう
cyenrbcgtcd rbc_tabelog
cyenrbcyenrbc_tabeloggtrake dbcreate
(in crbcrbc_tabelog)
ldquorake dbcreaterdquo コマンドでデータベースを作成します
Cyenrbcyenrbc_tabelogyendb フォルダに
developmentsqlite3 というファイルができていればオッケー
コマンドに失敗した場合rbc_tabelogyenconfigyendatabaseyml を編集してください
参考 yen1部資料yenChap_1yenrbc_tabelogyenconfigyendatabaseyml
10
１Ruby 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
１Ruby on Rails のプロジェクトを作成
この画面が表示されたら準備オッケーです
12
１Ruby 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 ２ActiveResource をつかって食べログAPIを表示する
14
２ActiveResource をつかって食べログAPIを表示する
ActiveResource って
簡単に説明するとWebサービスを簡単に処理することが出来るRails の機能です
Rails20以降で追加されました
rarr httpapirubyonrailsorgclassesActiveRecordBasehtmlM001298(英語)
今回は｢食べログcom｣のWebAPI を使ってレストランの一覧の表示を行います
食べログcomとは
日本最大級の口コミグルメサイト
rarr httptabelogcom
食べログAPI
レストランの口コミ情報を取得できます
rarr httprtabelogcomhelpapi
rarr httptabelogcomhelpapi_manualrst-api
マニュアルは｢yenyen1部資料yen_食べログAPIマニュアル｣にも置いています
15
２ActiveResource をつかって食べログAPIを表示する
まずはAPI を表示するために
画面を作っていきます
以下のコマンドを実行
cyenrbcyenrbc_tabeloggtruby scriptgenerate scaffold Restaurant
16
２ActiveResource をつかって食べログAPIを表示する
生成された rbc_tabelogappmodelsrestaurantrbを以下のように変更
class Restaurant lt ActiveRecordBase
end
class Restaurant lt ActiveResourceBase
end
ActiveResource とは
簡単にRESTfulなAPIを使えるようにする機能です
ActiveRecord を使うのと同じような感覚でWebAPIが使用できます
17
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
9
１Ruby on Rails のプロジェクトを作成
ついでにデータベースも作成
以下のコマンドを入力しましょう
cyenrbcgtcd rbc_tabelog
cyenrbcyenrbc_tabeloggtrake dbcreate
(in crbcrbc_tabelog)
ldquorake dbcreaterdquo コマンドでデータベースを作成します
Cyenrbcyenrbc_tabelogyendb フォルダに
developmentsqlite3 というファイルができていればオッケー
コマンドに失敗した場合rbc_tabelogyenconfigyendatabaseyml を編集してください
参考 yen1部資料yenChap_1yenrbc_tabelogyenconfigyendatabaseyml
10
１Ruby 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
１Ruby on Rails のプロジェクトを作成
この画面が表示されたら準備オッケーです
12
１Ruby 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 ２ActiveResource をつかって食べログAPIを表示する
14
２ActiveResource をつかって食べログAPIを表示する
ActiveResource って
簡単に説明するとWebサービスを簡単に処理することが出来るRails の機能です
Rails20以降で追加されました
rarr httpapirubyonrailsorgclassesActiveRecordBasehtmlM001298(英語)
今回は｢食べログcom｣のWebAPI を使ってレストランの一覧の表示を行います
食べログcomとは
日本最大級の口コミグルメサイト
rarr httptabelogcom
食べログAPI
レストランの口コミ情報を取得できます
rarr httprtabelogcomhelpapi
rarr httptabelogcomhelpapi_manualrst-api
マニュアルは｢yenyen1部資料yen_食べログAPIマニュアル｣にも置いています
15
２ActiveResource をつかって食べログAPIを表示する
まずはAPI を表示するために
画面を作っていきます
以下のコマンドを実行
cyenrbcyenrbc_tabeloggtruby scriptgenerate scaffold Restaurant
16
２ActiveResource をつかって食べログAPIを表示する
生成された rbc_tabelogappmodelsrestaurantrbを以下のように変更
class Restaurant lt ActiveRecordBase
end
class Restaurant lt ActiveResourceBase
end
ActiveResource とは
簡単にRESTfulなAPIを使えるようにする機能です
ActiveRecord を使うのと同じような感覚でWebAPIが使用できます
17
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
10
１Ruby 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
１Ruby on Rails のプロジェクトを作成
この画面が表示されたら準備オッケーです
12
１Ruby 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 ２ActiveResource をつかって食べログAPIを表示する
14
２ActiveResource をつかって食べログAPIを表示する
ActiveResource って
簡単に説明するとWebサービスを簡単に処理することが出来るRails の機能です
Rails20以降で追加されました
rarr httpapirubyonrailsorgclassesActiveRecordBasehtmlM001298(英語)
今回は｢食べログcom｣のWebAPI を使ってレストランの一覧の表示を行います
食べログcomとは
日本最大級の口コミグルメサイト
rarr httptabelogcom
食べログAPI
レストランの口コミ情報を取得できます
rarr httprtabelogcomhelpapi
rarr httptabelogcomhelpapi_manualrst-api
マニュアルは｢yenyen1部資料yen_食べログAPIマニュアル｣にも置いています
15
２ActiveResource をつかって食べログAPIを表示する
まずはAPI を表示するために
画面を作っていきます
以下のコマンドを実行
cyenrbcyenrbc_tabeloggtruby scriptgenerate scaffold Restaurant
16
２ActiveResource をつかって食べログAPIを表示する
生成された rbc_tabelogappmodelsrestaurantrbを以下のように変更
class Restaurant lt ActiveRecordBase
end
class Restaurant lt ActiveResourceBase
end
ActiveResource とは
簡単にRESTfulなAPIを使えるようにする機能です
ActiveRecord を使うのと同じような感覚でWebAPIが使用できます
17
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
11
１Ruby on Rails のプロジェクトを作成
この画面が表示されたら準備オッケーです
12
１Ruby 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 ２ActiveResource をつかって食べログAPIを表示する
14
２ActiveResource をつかって食べログAPIを表示する
ActiveResource って
簡単に説明するとWebサービスを簡単に処理することが出来るRails の機能です
Rails20以降で追加されました
rarr httpapirubyonrailsorgclassesActiveRecordBasehtmlM001298(英語)
今回は｢食べログcom｣のWebAPI を使ってレストランの一覧の表示を行います
食べログcomとは
日本最大級の口コミグルメサイト
rarr httptabelogcom
食べログAPI
レストランの口コミ情報を取得できます
rarr httprtabelogcomhelpapi
rarr httptabelogcomhelpapi_manualrst-api
マニュアルは｢yenyen1部資料yen_食べログAPIマニュアル｣にも置いています
15
２ActiveResource をつかって食べログAPIを表示する
まずはAPI を表示するために
画面を作っていきます
以下のコマンドを実行
cyenrbcyenrbc_tabeloggtruby scriptgenerate scaffold Restaurant
16
２ActiveResource をつかって食べログAPIを表示する
生成された rbc_tabelogappmodelsrestaurantrbを以下のように変更
class Restaurant lt ActiveRecordBase
end
class Restaurant lt ActiveResourceBase
end
ActiveResource とは
簡単にRESTfulなAPIを使えるようにする機能です
ActiveRecord を使うのと同じような感覚でWebAPIが使用できます
17
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
12
１Ruby 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 ２ActiveResource をつかって食べログAPIを表示する
14
２ActiveResource をつかって食べログAPIを表示する
ActiveResource って
簡単に説明するとWebサービスを簡単に処理することが出来るRails の機能です
Rails20以降で追加されました
rarr httpapirubyonrailsorgclassesActiveRecordBasehtmlM001298(英語)
今回は｢食べログcom｣のWebAPI を使ってレストランの一覧の表示を行います
食べログcomとは
日本最大級の口コミグルメサイト
rarr httptabelogcom
食べログAPI
レストランの口コミ情報を取得できます
rarr httprtabelogcomhelpapi
rarr httptabelogcomhelpapi_manualrst-api
マニュアルは｢yenyen1部資料yen_食べログAPIマニュアル｣にも置いています
15
２ActiveResource をつかって食べログAPIを表示する
まずはAPI を表示するために
画面を作っていきます
以下のコマンドを実行
cyenrbcyenrbc_tabeloggtruby scriptgenerate scaffold Restaurant
16
２ActiveResource をつかって食べログAPIを表示する
生成された rbc_tabelogappmodelsrestaurantrbを以下のように変更
class Restaurant lt ActiveRecordBase
end
class Restaurant lt ActiveResourceBase
end
ActiveResource とは
簡単にRESTfulなAPIを使えるようにする機能です
ActiveRecord を使うのと同じような感覚でWebAPIが使用できます
17
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
Chapter ２ActiveResource をつかって食べログAPIを表示する
14
２ActiveResource をつかって食べログAPIを表示する
ActiveResource って
簡単に説明するとWebサービスを簡単に処理することが出来るRails の機能です
Rails20以降で追加されました
rarr httpapirubyonrailsorgclassesActiveRecordBasehtmlM001298(英語)
今回は｢食べログcom｣のWebAPI を使ってレストランの一覧の表示を行います
食べログcomとは
日本最大級の口コミグルメサイト
rarr httptabelogcom
食べログAPI
レストランの口コミ情報を取得できます
rarr httprtabelogcomhelpapi
rarr httptabelogcomhelpapi_manualrst-api
マニュアルは｢yenyen1部資料yen_食べログAPIマニュアル｣にも置いています
15
２ActiveResource をつかって食べログAPIを表示する
まずはAPI を表示するために
画面を作っていきます
以下のコマンドを実行
cyenrbcyenrbc_tabeloggtruby scriptgenerate scaffold Restaurant
16
２ActiveResource をつかって食べログAPIを表示する
生成された rbc_tabelogappmodelsrestaurantrbを以下のように変更
class Restaurant lt ActiveRecordBase
end
class Restaurant lt ActiveResourceBase
end
ActiveResource とは
簡単にRESTfulなAPIを使えるようにする機能です
ActiveRecord を使うのと同じような感覚でWebAPIが使用できます
17
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
14
２ActiveResource をつかって食べログAPIを表示する
ActiveResource って
簡単に説明するとWebサービスを簡単に処理することが出来るRails の機能です
Rails20以降で追加されました
rarr httpapirubyonrailsorgclassesActiveRecordBasehtmlM001298(英語)
今回は｢食べログcom｣のWebAPI を使ってレストランの一覧の表示を行います
食べログcomとは
日本最大級の口コミグルメサイト
rarr httptabelogcom
食べログAPI
レストランの口コミ情報を取得できます
rarr httprtabelogcomhelpapi
rarr httptabelogcomhelpapi_manualrst-api
マニュアルは｢yenyen1部資料yen_食べログAPIマニュアル｣にも置いています
15
２ActiveResource をつかって食べログAPIを表示する
まずはAPI を表示するために
画面を作っていきます
以下のコマンドを実行
cyenrbcyenrbc_tabeloggtruby scriptgenerate scaffold Restaurant
16
２ActiveResource をつかって食べログAPIを表示する
生成された rbc_tabelogappmodelsrestaurantrbを以下のように変更
class Restaurant lt ActiveRecordBase
end
class Restaurant lt ActiveResourceBase
end
ActiveResource とは
簡単にRESTfulなAPIを使えるようにする機能です
ActiveRecord を使うのと同じような感覚でWebAPIが使用できます
17
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
15
２ActiveResource をつかって食べログAPIを表示する
まずはAPI を表示するために
画面を作っていきます
以下のコマンドを実行
cyenrbcyenrbc_tabeloggtruby scriptgenerate scaffold Restaurant
16
２ActiveResource をつかって食べログAPIを表示する
生成された rbc_tabelogappmodelsrestaurantrbを以下のように変更
class Restaurant lt ActiveRecordBase
end
class Restaurant lt ActiveResourceBase
end
ActiveResource とは
簡単にRESTfulなAPIを使えるようにする機能です
ActiveRecord を使うのと同じような感覚でWebAPIが使用できます
17
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
16
２ActiveResource をつかって食べログAPIを表示する
生成された rbc_tabelogappmodelsrestaurantrbを以下のように変更
class Restaurant lt ActiveRecordBase
end
class Restaurant lt ActiveResourceBase
end
ActiveResource とは
簡単にRESTfulなAPIを使えるようにする機能です
ActiveRecord を使うのと同じような感覚でWebAPIが使用できます
17
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
17
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
18
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
19
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
20
２ActiveResource をつかって食べログ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
２ActiveResource をつかって食べログ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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
21
２ActiveResource をつかって食べログ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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
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
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
55
これで完成しました
コレで1部のアプリケーションが完成しました
ActiveResource を使うことで簡単にWebAPI を取り込む事が出来ました
ぜひ食べログAPIだけでなく他のWebAPIでも試してみてくださいamazon
その他MA4(Mashup Award 4th)のAPI一覧httpmashupawardjpapiall
ありがとうございました
それでは2部にバトンタッチです
ありがとうございました
それでは2部にバトンタッチです
top related