20090418 イケテルRails勉強会 第1部Rails編
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 6,534 views

http://www.ustream.tv/channel/rubybizcommons...

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

Statistics

Views

Total Views
6,534
Views on SlideShare
6,518
Embed Views
16

Actions

Likes
2
Downloads
39
Comments
1

2 Embeds 16

http://www.slideshare.net 15
http://webcache.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • class InsertPrefectures < ActiveRecord::Migration
    def self.up
    items = [
    {:en => 'japan', :ja => '全国'},
    {:en => 'hokkaido', :ja => '北海道'},
    {:en => 'aomori', :ja => '青森'},
    {:en => 'iwate', :ja => '岩手'},
    {:en => 'miyagi', :ja => '宮城'},
    {:en => 'akita', :ja => '秋田'},
    {:en => 'yamagata', :ja => '山形'},
    {:en => 'fukushima', :ja => '福島'},
    {:en => 'ibaraki', :ja => '茨城'},
    {:en => 'tochigi', :ja => '栃木'},
    {:en => 'gunma', :ja => '群馬'},
    {:en => 'saitama', :ja => '埼玉'},
    {:en => 'chiba', :ja => '千葉'},
    {:en => 'tokyo', :ja => '東京'},
    {:en => 'kanagawa', :ja => '神奈川'},
    {:en => 'niigata', :ja => '新潟'},
    {:en => 'toyama', :ja => '富山'},
    {:en => 'ishikawa', :ja => '石川'},
    {:en => 'fukui', :ja => '福井'},
    {:en => 'yamanashi', :ja => '山梨'},
    {:en => 'nagano', :ja => '長野'},
    {:en => 'gifu', :ja => '岐阜'},
    {:en => 'shizuoka', :ja => '静岡'},
    {:en => 'aichi', :ja => '愛知'},
    {:en => 'mie', :ja => '三重'},
    {:en => 'shiga', :ja => '滋賀'},
    {:en => 'kyoto', :ja => '京都'},
    {:en => 'osaka', :ja => '大阪'},
    {:en => 'hyogo', :ja => '兵庫'},
    {:en => 'nara', :ja => '奈良'},
    {:en => 'wakayama', :ja => '和歌山'},
    {:en => 'tottori', :ja => '鳥取'},
    {:en => 'shimane', :ja => '島根'},
    {:en => 'okayama', :ja => '岡山'},
    {:en => 'hiroshima', :ja => '広島'},
    {:en => 'yamaguchi', :ja => '山口'},
    {:en => 'tokushima', :ja => '徳島'},
    {:en => 'kagawa', :ja => '香川'},
    {:en => 'ehime', :ja => '愛媛'},
    {:en => 'kochi', :ja => '高知'},
    {:en => 'fukuoka', :ja => '福岡'},
    {:en => 'saga', :ja => '佐賀'},
    {:en => 'nagasaki', :ja => '長崎'},
    {:en => 'kumamoto', :ja => '熊本'},
    {:en => 'oita', :ja => '大分'},
    {:en => 'miyazaki', :ja => '宮崎'},
    {:en => 'kagoshima', :ja => '鹿児島'},
    {:en => 'okinawa', :ja => '沖縄'}
    ]
    items.each do |item|
    Prefecture.create item
    end

    end

    def self.down
    Prefecture.delete_all
    end
    end
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 1. イケテル Rails 勉強会@東京 (1部:Rails編) 2009.04.18 ナカオヒロシ
  • 2. 1部での目的 • ActiveResource という機能をつかって 食べログをはじめとした WebAPI を使えるようになろう!! • paperclip プラグインを使ってファイルの添付を出来るようになろう!! • AIR と連携をしてみよう!! • 習うよりとにかく慣れてみよう!! Don’t think, feel. (考えるな、感じるんだ。) 2
  • 3. 1部でやること Ruby on Rails のプロジェクトを作成 1. ActiveResource をつかって食べログAPIを表示する 2. 食べログの画面に検索条件を追加する 3. レストランに1行メモを追加できるようにする 4. paperclip を使って画像を添付できるようにする 5. AIR との連携の準備をする 6. 3
  • 4. Chapter 1 Ruby on Rails のプロジェクトを作成
  • 5. 1.Ruby on Rails のプロジェクトを作成 その前に環境の確認 • まずは Rubyのバージョンを確認しましょう。 >ruby -v ruby 1.8.6 (2008-08-11 patchlevel 287) [i386-mswin32] • Rails のバージョンは 2.3.2 >rails -v Rails 2.3.2 • DBはSQLite3 を使用します >sqlite3 --version 3.6.11 • RailsとSQLite3を接続する sqlite3-rubyは必須 >gem install sqlite3-ruby --version 1.2.3 >gem list sqlite3-ruby ←(Windowsの場合) >gem list --local | grep sqlite3-ruby ←(Macの場合) sqlite3-ruby (1.2.3) 5
  • 6. 1.Ruby on Rails のプロジェクトを作成 今回の勉強会では C:¥rbcフォルダで作業している事を前提に説明します。 Cドライブ直下にrbcフォルダを作成してください。 6
  • 7. 1.Ruby on Rails のプロジェクトを作成 それでは、さっそくRailsプロジェクトを作成しましょう。 以下のコマンドを入力してください。 C:¥Users¥***>cd c:¥rbc “rails” コマンドでRailsのプロジェクトを作成 “-d” で使用するDBを指定する c:¥rbc>rails rbc_tabelog -d sqlite3 create create app/controllers create app/helpers (省略) create log/production.log create log/development.log create log/test.log これでRailsのプロジェクトの作成は完了です。 7
  • 8. 1.Ruby on Rails のプロジェクトを作成 以下の様に、 rbc_tabelog プロジェクトができていれば成功 8
  • 9. 1.Ruby on Rails のプロジェクトを作成 ついでにデータベースも作成 以下のコマンドを入力しましょう c:¥rbc>cd rbc_tabelog c:¥rbc¥rbc_tabelog>rake db:create (in c:/rbc/rbc_tabelog) “rake db:create” コマンドでデータベースを作成します。 C:¥rbc¥rbc_tabelog¥db フォルダに development.sqlite3 というファイルができていればオッケー! コマンドに失敗した場合、rbc_tabelog¥config¥database.yml を編集してください 参考: ¥1部資料¥Chap_1¥rbc_tabelog¥config¥database.yml 9
  • 10. 1.Ruby on Rails のプロジェクトを作成 サーバの起動 c:¥rbc¥rbc_tabelog>ruby script/server => Booting Mongrel => Rails 2.3.2 application starting on http://0.0.0.0:3000 => Call with -d to detach => Ctrl-C to shutdown server “ruby script/server” コマンドでサーバを起動します サーバが実行できたらブラウザで以下のURLを実行してみましょう。 http://localhost:3000 10
  • 11. 1.Ruby on Rails のプロジェクトを作成 この画面が表示されたら準備オッケーです!! 11
  • 12. 1.Ruby on Rails のプロジェクトを作成 2部に進む前にちょっとだけRailsについて説明 Rails は MVC というパターンによって設計、実装していきます。 Model(モデル)・・・データを格納する部分、DBから取り出したデータを保持する ・Railsでは、「app¥models¥基本名(単数形).rb」 ・NetBeansでは「モデル¥基本名.rb」で表示されます View(ビュー)・・・ユーザに向けた見た目(画面表示)部分。ユーザーインターフェース ・Railsでは、「app¥views¥基本名(複数形)¥画面名.html.erb」 ・NetBeansでは「ビュー¥基本名(複数形)¥画面名.html.erb 」 Controller(コントローラ)・・・ユーザからの入力を処理する部分。 ・Railsでは、「app¥views¥基本名(複数形)_controller.rb」 ・NetBeansでは「コントローラ¥基本名(複数形) _controller.rb 」 12
  • 13. Chapter 2 ActiveResource をつかって 食べログAPIを表示する
  • 14. 2.ActiveResource をつかって食べログAPIを表示する ActiveResource って? ・簡単に説明すると、Webサービスを簡単に処理することが出来るRails の機能です。 Rails2.0以降で追加されました。 → http://api.rubyonrails.org/classes/ActiveRecord/Base.html#M001298(英語) 今回は「食べログ.com」の WebAPI を使って、レストランの一覧の表示を行います ・食べログ.comとは? 日本最大級の口コミグルメサイト → http://tabelog.com/ ・食べログAPI レストランの口コミ情報を取得できます → http://r.tabelog.com/help/api → http://tabelog.com/help/api_manual#rst-api ※マニュアルは「¥¥1部資料¥_食べログAPIマニュアル」にも置いています 14
  • 15. 2.ActiveResource をつかって食べログAPIを表示する まずはAPI を表示するために 画面を作っていきます 以下のコマンドを実行 c:¥rbc¥rbc_tabelog>ruby script/generate scaffold Restaurant 15
  • 16. 2.ActiveResource をつかって食べログAPIを表示する 生成された rbc_tabelog/app/models/restaurant.rb を以下のように変更 class Restaurant < ActiveRecord::Base end class Restaurant < ActiveResource::Base end ActiveResource とは、 簡単にRESTfulなAPIを使えるようにする機能です ActiveRecord を使うのと同じような感覚でWebAPIが使用できます 16
  • 17. 2.ActiveResource をつかって食べログAPIを表示する rbc_tabelog/app/models/restaurant.rb をさらに変更 class Restaurant < ActiveResource::Base API の URL を設定 self.site = quot;http://api.tabelog.com/quot; def self.find_restaurants(restautant_params = {}) restautant_params[:Key] = quot;96448b290b6556976f047110914fcf91e88c38b9quot; Hash.from_xml( self.find( 食べログAPIのキーを設定します。 :one, ご自分のキーを持っている方は、こちらに入力 :from => quot;/Ver2.1/RestaurantSearch/quot;, :params => restautant_params 検索メソッドを作成 ).to_xml 今回は引数をハッシュで渡します ) end Hash.from_xmlでxmlをハッシュに(無理矢理)変換しています。 end これで model は完成! 17
  • 18. 2.ActiveResource をつかって食べログAPIを表示する 次は rbc_tabelog/app/controllers/restaurant_controller.rb 先ほどモデルで作ったメソッドを呼び出します 赤字部分を変更していきます class RestaurantsController < ApplicationController # GET /restaurants # GET /restaurants.xml def index @restaurants = Restaurant.find_restaurants(request.query_parameters)[quot;restaurantquot;] respond_to do |format| request.query_parameters format.html # index.html.erb リクエストパラメータを引数にします format.xml { render :xml => @restaurants } end end ・・・・・・ end 今回は index 以外は使わないので削除しましょう(コメントアウトでもいいよ) 最終行の end も削除してしまわないように注意 18
  • 19. 2.ActiveResource をつかって食べログAPIを表示する 続いて rbc_tabelog/app/views/restaurants/index.html.erb の修正 ココはこんな感じでごっそり置き換えましょう ActiveResouece から値を取得します。 <h1>RBC食べログ</h1> <ul> <% @restaurants[quot;itemquot;].each do |item| -%> <li> <%= link_to item[quot;restaurant_namequot;], item[quot;tabelog_urlquot;], {:target => '_blank'} %> </li> <% end -%> </ul> 食べログAPI結果 <RestaurantInfo> <Item> <RestaurantName>千松しま</RestaurantName> <TabelogUrl>http://r.tabelog.com/miyagi/A0404/A040404/4001636/</TabelogUrl> <TotalScore>4.67</TotalScore> <TasteScore>4.64</TasteScore> <ServiceScore>4.69</ServiceScore> <MoodScore>4.32</MoodScore> <Situation>友人・同僚と、デート、接待</Situation> <DinnerPrice>¥10,000 ~¥14,999</DinnerPrice> <LunchPrice>¥10,000 ~¥14,999</LunchPrice> <Category>割烹・小料理</Category> <Station>東塩釜、本塩釜、西塩釜</Station> </Item> 19 ・・・
  • 20. 2.ActiveResource をつかって食べログAPIを表示する サーバーの起動 c:¥rbc¥rbc_tabelog>ruby script/server => Booting Mongrel => Rails 2.3.2 application starting on http://0.0.0.0:3000 => Call with -d to detach => Ctrl-C to shutdown server サーバーが実行できたら http://localhost:3000/restaurants 20
  • 21. 2.ActiveResource をつかって食べログAPIを表示する こんな画面が表示されていれば成功です。 Rails だと WebAPI を画面表示させるのはこんなに簡単です。 http://localhost:3000/restaurants 21
  • 22. Chapter 3 食べログの画面に検索条件を追加する
  • 23. 3.食べログの画面に検索条件を追加する このままだとチョット寂しいので検索条件を追加していきましょう 今回追加する条件は以下の3つです。 ・都道府県名 ・ページ番号 都道府県名はプルダウンの データを scaffold で作っていきます ページ番号は最後に簡単につくります 23
  • 24. 3.食べログの画面に検索条件を追加する さっそく都道府県名の作成 まずは土台を scaffold で作成しちゃいます c:¥rbc¥rbc_tabelog> ruby script/generate scaffold Prefecture en:string ja:string 24
  • 25. 3.食べログの画面に検索条件を追加する 続いてデータの中身を作成していきます c:¥rbc¥rbc_tabelog>ruby script/generate migration InsertPrefectures 25
  • 26. 3.食べログの画面に検索条件を追加する rbc_tabelog/db/migrate/(数字)_insert_prefectures.rb class InsertPrefectures < ActiveRecord::Migration def self.up items = [ {:en => 'japan', :ja => '全国'}, {:en => 'hokkaido', :ja => '北海道'}, ・・・(省略)・・・ {:en => 'kagoshima', :ja => '鹿児島'}, {:en => 'okinawa', :ja => '沖縄'} ] items.each do |item| Prefecture.create item end end def self.down Prefecture.delete_all end end ココは単調かつメンドーな作業なのでコピペしましょう!! 「¥1部資料¥_insert_prefectures¥insert_prefecturesコピー用.txt」 26
  • 27. 3.食べログの画面に検索条件を追加する 以下のコマンドを実行して、データをSQLite3に反映させます。 c:¥rbc¥rbc_tabelog> rake db:migrate (in c:/rbc/rbc_tabelog) ・・・ ブラウザで以下のURLを実行してみましょう。 http://localhost:3000/prefectures 右のような画面が表示されればオッケーです。 27
  • 28. 3.食べログの画面に検索条件を追加する それでは、さっそく都道府県名とページ数をレストラン画面に組み込んでいきましょう rbc_tabelog/app/controllers/restaurants_controller.rb の修正 Index メソッドの最初に2行を追加、さらに create メソッドを追加します。 def index @prefectures = Prefecture.find(:all) Prefecture.find(:all) で先ほど作った @pages = Array.new(100){|i| i+1} 都道府県名をすべて表示 ・・・ end ページ数は100回カウントアップした 整数をセットしているだけ def create restaurants_params = { :prefecture => params[:prefecture], :pageNum => params[:pageNum].to_i } redirect_to :controller => :restaurants, :action => :index, :params => restaurants_params end 検索条件を設定して index にリダイレクトするだけ 28
  • 29. 3.食べログの画面に検索条件を追加する 続いてrbc_tabelog/app/views/restaurants/index.html.erb の修正 赤字部分を追記していきます <h1>RBC食べログ</h1> <% form_tag({}, {:multipart => true} ) do -%> <p> 都道府県:<%= select_tag :prefecture, options_from_collection_for_select(@prefectures, :en, :ja, params[:prefecture]) %> </p> <p> ページ:<%= select_tag :pageNum, options_for_select(@pages, params[:pageNum].to_i) %> </p> <%= submit_tag quot;検索quot;, {:name => quot;searchquot;} %> <hr /> <ul> <% @restaurants[“itemquot;].each do |item| -%> <li> <%= link_to item[“restaurant_namequot;], item[“tabelog_urlquot;], {:target => '_blank'} %> </li> <% end -%> </ul> <% end -%> 最後の “end” も忘れずに!! 29
  • 30. 3.食べログの画面に検索条件を追加する こんな感じで検索条件部分が表示されていればオッケー。 検索条件を変更して検索ボタンを押してみましょう http://localhost:3000/restaurants 30
  • 31. Chapter 4 レストランに1行メモを 追加できるようにする
  • 32. 4.レストランに1行メモを追加できるようにする さてさて次は画面に一言メモを残していけるようにしていきましょう。 こちらもサクサク作っていきます 32
  • 33. 4.レストランに1行メモを追加できるようにする まずはメモを残すためのモデルとテーブル作ります 以下のコマンドを実行 c:¥rbc¥rbc_tabelog> ruby script/generate model Bookmark rcd:string memo:string ・・・ c:¥rbc¥rbc_tabelog> rake db:migrate (in c:/rbc/rbc_tabelog) ・・・ 33
  • 34. 4.レストランに1行メモを追加できるようにする では実際に画面に項目を追加してみます rbc_tabelog/app/views/restaurants/index.html.erb 赤字部分を追加 <h1>RBC食べログ</h1> ・・・(省略)・・・ <hr /> <ul> <% @restaurants[quot;Itemquot;].each do |item| -%> <li> <%= radio_button_tag :rcd, item[quot;rcdquot;] %> <%= link_to item[quot;restaurant_namequot;], item [“tabelog_urlquot;], {:target => '_blank'} %> <%= item[”memoquot;] %> </li> <% end -%> </ul> <p> メモ:<%= text_field_tag :memo %> </p> <%= submit_tag quot;登録quot;, {:name => quot;createquot;} %> <% end -%> 34
  • 35. 4.レストランに1行メモを追加できるようにする 続いて、コントローラを修正 rbc_tabelog/app/controllers/restaurants_controller.rb create メソッドの中の赤字部分を追加して画面に入力されたデータを登録できるようにします def create if params[:create] && params[:rcd] bookmark_params = { 登録ボタンが押された :rcd => params[:rcd], かつ ラジオボタンのチェックがあったらたら if の中身を実行 :memo => params[:memo] } bookmark = Bookmark.find_or_initialize_by_rcd bookmark_params bookmark.attributes = bookmark_params bookmark.save find_or_initialize_by_XXX end データがあれば取得、なければ作成する restaurant_params = { :sortOrder => params[:sortOrder], :pageNum => params[:pageNum].to_i } redirect_to :controller => :restaurants, :action => :index, :params => restaurant_params end 35
  • 36. 4.レストランに1行メモを追加できるようにする rbc_tabelog/app/controllers/restaurants_controller.rb index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします def index @prefectures = Prefecture.find(:all) @pages = Array.new(100){|i| i+1} 食べログAPIの検索結果分ループを実行 @restaurants = Restaurant.find_restaurants(request.query_parameters)[quot;restaurantquot;] @restaurants[quot;itemquot;].each do |item| bookmark = Bookmark.find_by_rcd item[quot;rcdquot;] if bookmark 登録したブックマークを item[quot;memoquot;] = bookmark.memo 食べログのレストランCDで検索 end end respond_to do |format| 食べログAPIの結果に format.html # index.html.erb ”memo”として登録しているデータを追加 format.xml { render :xml => @restaurants } end end 36
  • 37. 4.レストランに1行メモを追加できるようにする http://localhost:3000/restaurants では画面を確認してみましょう メモ欄が追加されていますか? 登録してみてください。 結果が各レストラン横に追加されるのを確認できます。 37
  • 38. Chapter 5 paperclip を使って 画像をアップできるようにする
  • 39. 5.paperclip を使って画像をアップできるようにする コンテンツの完成も近づいてきました 次は画像のアップを出来るようにしましょう 画像のアップ機能を追加するには paperclip というプラグインを使えば簡単です!! paperclip Rails上でファイルのアップロードを簡単に実装できるプラグイン 【参考リンク】 http://www.thoughtbot.com/projects/paperclip http://github.com/thoughtbot/paperclip/tree/master/README.rdoc 39
  • 40. 5.paperclip を使って画像をアップできるようにする さっそく paprtclip プラグインをインストールしましょう paperclip プラグインは git を使って入手できますが、 最新版はなぜか Windows 環境では動きません…。 ちなみに git コマンドで入手する場合は以下のようにすればOKです(git 必須) ruby script/plugin install git://github.com/thoughtbot/paperclip.git なので古いバージョン 2.2.2 を使います。 資料の中に プラグイン本体を準備しています。 「¥1部資料¥_paperclipプラグイン¥paperclip」 ベンダー/plugins にドラッグオンドロップしましょう rbc_tabelog¥vendor¥plugins にコピーしてもいいです。 40
  • 41. 5.paperclip を使って画像をアップできるようにする まずは テーブルに項目を追加します マイグレーションファイルの作成も paperclip でできちゃいます。 以下のコマンドを実行しましょう c:¥rbc¥rbc_tabelog> ruby script/generate paperclip Bookmark photo ・・・ c:¥rbc¥rbc_tabelog> rake db:migrate (in c:/rbc/rbc_tabelog) ・・・ 41
  • 42. 5.paperclip を使って画像をアップできるようにする ちなみに先ほどのコマンドを実行する事で、 Bookmarks テーブルに 画像を保存するためのマイグレーションファイルが追加されました。 rbc_tabelog/db/migrate/数字_add_attachments_photo_to_bookmark.rb class AddAttachmentsPhotoToBookmark < ActiveRecord::Migration def self.up add_column :bookmarks, :photo_file_name, :string add_column :bookmarks, :photo_content_type, :string add_column :bookmarks, :photo_file_size, :integer end def self.down remove_column :bookmarks, :photo_file_name remove_column :bookmarks, :photo_content_type remove_column :bookmarks, :photo_file_size end end 42
  • 43. 5.paperclip を使って画像をアップできるようにする 次に画像情報を保存するためにモデル修正しましょう。 修正するモデルはメモを書きこめるように作った Bookmark というモデルです。 モデル/bookmark.rb 赤字部分を追記して終わりです。 class Bookmark < ActiveRecord::Base has_attached_file :photo end 今回は “photo” という名前で画像を保存する事にします 43
  • 44. 5.paperclip を使って画像をアップできるようにする 引き続き画面に項目を追加していきましょう rbc_tabelog/app/views/restaurants/index.html.erb 赤字部分を追加 <h1>RBC食べログ</h1> ・・・(省略)・・・ <hr /> <ul> <% @restaurants[quot;itemquot;].each do |item| -%> <li> <%= radio_button_tag :rcd, item[quot;rcd”] %> <%= link_to item[quot;restaurant_namequot;], item[quot;tabelog_urlquot;], {:target => '_blank'} %> <%= item[quot;memoquot;] %> <% unless item[quot;image_urlquot;].blank? -%> <br /><%= image_tag item[quot;image_urlquot;] %> <% end -%> 画像があれば unless の中を実行 </li> <% end -%> </ul> <p> メモ:<%= text_field_tag :memo %> 画像をアップする ファイルフィールド </p> <p> イメージ:<%= file_field_tag :photo %> </p> <%= submit_tag quot;登録quot;, {:name => quot;createquot;} %> 44 <% end -%>
  • 45. 5.paperclip を使って画像をアップできるようにする んで、コントローラも修正 rbc_tabelog/app/controllers/restaurants_controller.rb create メソッドの中の赤字部分を追加してファイルを登録できるようにします def create if params[:create] && params[:rcd] bookmark_params = { カンマも忘れずに追加 :rcd => params[:rcd], :memo => params[:memo], :photo => params[:photo] } bookmark = Bookmark.find_or_initialize_by_rcd bookmark_params bookmark.attributes = bookmark_params bookmark.save end restaurant_params = { :sortOrder => params[:sortOrder], :pageNum => params[:pageNum].to_i } redirect_to :controller => :restaurants, :action => :index, :params => restaurant_params end 45
  • 46. 5.paperclip を使って画像をアップできるようにする rbc_tabelog/app/controllers/restaurants_controller.rb index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします def index @prefectures = Prefecture.find(:all) @pages = Array.new(100){|i| i+1} @restaurants = Restaurant.find_restaurants(request.query_parameters)[quot;restaurantquot;] @restaurants[quot;itemquot;].each do |item| bookmark = Bookmark.find_by_rcditem[“tabelog_rcdquot;] if bookmark item[quot;memoquot;] = bookmark.memo item[quot;image_urlquot;] = bookmark.photo_file_name ? bookmark.photo.url : nil end end “.url” でアップしたファイルのURL を取得できる respond_to do |format| format.html # index.html.erb format.xml { render :xml => @restaurants } end end 46
  • 47. 5.paperclip を使って画像をアップできるようにする これで写真のアップ機能が追加できました http://localhost:3000/restaurants イメージ欄が追加されていますか? 登録してみてください。 いくつかサンプル画像を用意しています。 「¥1部資料¥_レストラン画像サンプル」 結果が各レストラン横に追加されるのを確認できます。 47
  • 48. Chapter 6 AIR との連携の準備をする
  • 49. 6. AIR との連携の準備をする 最後に 2部で開発する AIR アプリとの連携する部分を作ります。 とは言っても、実はほとんどが出来ています。 Rails と AIR を連携!! 49
  • 50. 6. AIR との連携の準備をする 具体的にどのようにして連携するのでしょう? http://localhost:3000/restaurants.xml 左図のような xml が出てきましたよね? コレをAIRに読み込んでもらいます!! ちなみに検索条件の追加時に作った 「都道府県名」も 以下のURLでXMLを呼び出せちゃいます。 (今回のAIR編では使いません) http://localhost:3000/prefectures.xml 50
  • 51. 6. AIR との連携の準備をする ただ、AIRとの連携で以下の問題があります。 ・同じタグ名が重なると同じく処理が面倒 ・paperclip で追加した画像のURLが相対URLである ・タグ名にハイフンが含まれているとAIR側の処理が面倒 “Item”タグが下の階層にもあってそれが面倒 <hash> そもそも array のタグが 単数系なのも個人的に気持ち悪い <num-of-result>10483</num-of-result> <item type=quot;arrayquot;> <item> <image-url>/photos/1/original/100x100_233565.jpg</image-url> <tabelog-mobile-url> 画像のURLがhttpから始まっていない http://m.tabelog.com/hokkaido/A0101/A010105/1000049/ </tabelog-mobile-url> <category>フレンチ</category> タグ名にハイフンが含まれている 51
  • 52. 6. AIR との連携の準備をする さっそく問題を解決しましょう ・同じタグ名が重なると同じく処理が面倒、 ・paperclip で追加した画像のURLが相対URLである ・要素の名前にハイフンが含まれているとAIR側の処理が面倒 赤字部分を変更、追記してください。 rbc_tabelog/app/controller/restaurant_controller.rb def index @prefectures = Prefecture.find(:all) @pages = Array.new(100){|i| i+1} @restaurants = Restaurant.find_restaurants(request.query_parameters)[“restaurantquot;] @restaurants[“itemquot;].each do |item| bookmark = Bookmark.find_by_url item[“tabelog_urlquot;] 画像のURLにhttp://~を追加します if bookmark item.attributes[“memoquot;] = bookmark.memo item.attributes[“image_urlquot;] = bookmark.photo_file_name ? request.protocol + request.host_with_port + bookmark.photo.url : nil end “item”→”items”に変更 end @restaurants[quot;itemsquot;] = @restaurants[quot;itemquot;] @restaurants.delete quot;itemquot; root オプションでxml の先頭タグ名を変更できます respond_to do |format| format.html # index.html.erb format.xml { render :xml => @restaurants.to_xml(:root => quot;restaurantquot;, :dasherize => false) } end 52 dasherizeオプションfalseでアンスコをハイフンに変換しなくなります end
  • 53. 6. AIR との連携の準備をする このままだと、画面が動かなくなっちゃうので画面もちょっと修正。 ビュー/restaurants/index.html.erb <h1>RBC食べログ</h1> <% form_tag({:action => quot;indexquot;}, {:multipart => true}) do -%> ・・・(省略)・・・ <hr /> <ul> <% @restaurants[quot;itemsquot;].each do |item| -%> <li> <%= radio_button_tag :url, item[quot;tabelog_urlquot;] %> <%= link_to item[quot;restaurant_namequot;], item[quot;tabelog_urlquot;], {:target => '_blank'} %> <%= item[quot;memoquot;] %> <% unless item[quot;image_urlquot;].blank? -%> <br /><%= image_tag item[quot;image_urlquot;] %> <% end -%> </li> <% end -%> </ul> ・・・(省略)・・・ <% end -%> 53
  • 54. 6. AIR との連携の準備をする これで以下の問題の対応が完了しました ・同じタグ名が重なると同じく処理が面倒 ・paperclip で追加した画像のURLが相対URLである ついでに先頭タグを”restaurant” に変更してみました <restaurant> <items type=quot;arrayquot;> このタグ名が “Item” → “Items” に変わりました <item> <image_url> http://localhost:3000/photos/1/original/100x100_233565.jpg </image_url> <tabelog_mobile_url> http://m.tabelog.com/hokkaido/A0101/A010105/1000049/ “http://” から始まるURLになりました </tabelog_mobile_url> <category>フレンチ</category> タグ名がアンスコ区切りに戻りました 54
  • 55. これで、完成しました!! コレで1部のアプリケーションが完成しました!! ・ActiveResource を使うことで、 簡単に WebAPI を取り込む事が出来ました!! ぜひ食べログAPIだけでなく、他のWebAPIでも試してみてください。 ・amazon ・Twitter ・その他:MA4(Mashup Award 4th)のAPI一覧 http://mashupaward.jp/api/all/ 55
  • 56. ありがとうございました!! それでは2部にバトンタッチです