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

      ナカオヒロシ
1部での目的
•   ActiveResource という機能をつかって 食べログをはじめとした
    WebAPI を使えるようになろう!!
•   paperclip プラグインを使ってファイルの添付を出来るようになろう!!
•   AI...
1部でやること
     Ruby on Rails のプロジェクトを作成
1.
     ActiveResource をつかって食べログAPIを表示する
2.
     食べログの画面に検索条件を追加する
3.
     レストランに1行メ...
Chapter 1
Ruby on Rails のプロジェクトを作成
1.Ruby on Rails のプロジェクトを作成
その前に環境の確認

•   まずは Rubyのバージョンを確認しましょう。
    >ruby -v
    ruby 1.8.6 (2008-08-11 patchlevel 287) ...
1.Ruby on Rails のプロジェクトを作成

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

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




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

C:¥Users¥***>cd c:¥rbc
                       ...
1.Ruby on Rails のプロジェクトを作成
以下の様に、
rbc_tabelog プロジェクトができていれば成功




                              8
1.Ruby on Rails のプロジェクトを作成
ついでにデータベースも作成
以下のコマンドを入力しましょう

c:¥rbc>cd rbc_tabelog

c:¥rbc¥rbc_tabelog>rake db:create
(in c:/...
1.Ruby on Rails のプロジェクトを作成
サーバの起動
c:¥rbc¥rbc_tabelog>ruby script/server
=> Booting Mongrel
=> Rails 2.3.2 application star...
1.Ruby on Rails のプロジェクトを作成
この画面が表示されたら準備オッケーです!!




                             11
1.Ruby on Rails のプロジェクトを作成
2部に進む前にちょっとだけRailsについて説明
Rails は MVC というパターンによって設計、実装していきます。


Model(モデル)・・・データを格納する部分、DBから取り出し...
Chapter 2
ActiveResource をつかって
 食べログAPIを表示する
2.ActiveResource をつかって食べログAPIを表示する
ActiveResource って?
・簡単に説明すると、Webサービスを簡単に処理することが出来るRails の機能です。
 Rails2.0以降で追加されました。
 → ...
2.ActiveResource をつかって食べログAPIを表示する

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

以下のコマンドを実行
c:¥rbc¥rbc_tabelog>ruby script/generate scaffol...
2.ActiveResource をつかって食べログAPIを表示する

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

 class Restaurant < ActiveRecord...
2.ActiveResource をつかって食べログAPIを表示する

rbc_tabelog/app/models/restaurant.rb をさらに変更
class Restaurant < ActiveResource::Base
  ...
2.ActiveResource をつかって食べログAPIを表示する
次は rbc_tabelog/app/controllers/restaurant_controller.rb
先ほどモデルで作ったメソッドを呼び出します
赤字部分を変更して...
2.ActiveResource をつかって食べログAPIを表示する

続いて rbc_tabelog/app/views/restaurants/index.html.erb の修正
ココはこんな感じでごっそり置き換えましょう
       ...
2.ActiveResource をつかって食べログAPIを表示する

サーバーの起動
c:¥rbc¥rbc_tabelog>ruby script/server
=> Booting Mongrel
=> Rails 2.3.2 applic...
2.ActiveResource をつかって食べログAPIを表示する

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

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

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

都道府県名はプルダウンの
データを scaffold で作っていきます
ペ...
3.食べログの画面に検索条件を追加する
さっそく都道府県名の作成
まずは土台を scaffold で作成しちゃいます

c:¥rbc¥rbc_tabelog>
ruby script/generate scaffold Prefecture e...
3.食べログの画面に検索条件を追加する
続いてデータの中身を作成していきます
c:¥rbc¥rbc_tabelog>ruby script/generate migration InsertPrefectures




           ...
3.食べログの画面に検索条件を追加する
rbc_tabelog/db/migrate/(数字)_insert_prefectures.rb

class InsertPrefectures < ActiveRecord::Migration
 ...
3.食べログの画面に検索条件を追加する
以下のコマンドを実行して、データをSQLite3に反映させます。

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

...
3.食べログの画面に検索条件を追加する
それでは、さっそく都道府県名とページ数をレストラン画面に組み込んでいきましょう
rbc_tabelog/app/controllers/restaurants_controller.rb の修正
Inde...
3.食べログの画面に検索条件を追加する
続いてrbc_tabelog/app/views/restaurants/index.html.erb の修正
赤字部分を追記していきます
<h1>RBC食べログ</h1>
<% form_tag({},...
3.食べログの画面に検索条件を追加する
こんな感じで検索条件部分が表示されていればオッケー。
検索条件を変更して検索ボタンを押してみましょう

http://localhost:3000/restaurants




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




                                   32
4.レストランに1行メモを追加できるようにする
まずはメモを残すためのモデルとテーブル作ります
以下のコマンドを実行

c:¥rbc¥rbc_tabelog>
ruby script/generate model Bookmark rcd:st...
4.レストランに1行メモを追加できるようにする
では実際に画面に項目を追加してみます
rbc_tabelog/app/views/restaurants/index.html.erb
赤字部分を追加
<h1>RBC食べログ</h1>
・・・(省...
4.レストランに1行メモを追加できるようにする
続いて、コントローラを修正
rbc_tabelog/app/controllers/restaurants_controller.rb
create メソッドの中の赤字部分を追加して画面に入力され...
4.レストランに1行メモを追加できるようにする
rbc_tabelog/app/controllers/restaurants_controller.rb
index メソッドの中の赤字部分を追加して登録したデータを取得できるようにします


...
4.レストランに1行メモを追加できるようにする
                            http://localhost:3000/restaurants
では画面を確認してみましょう

メモ欄が追加されていますか?
登録してみ...
Chapter 5
  paperclip を使って
画像をアップできるようにする
5.paperclip を使って画像をアップできるようにする
コンテンツの完成も近づいてきました
次は画像のアップを出来るようにしましょう

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


pape...
5.paperclip を使って画像をアップできるようにする
さっそく paprtclip プラグインをインストールしましょう

paperclip プラグインは git を使って入手できますが、
最新版はなぜか Windows 環境では動きま...
5.paperclip を使って画像をアップできるようにする
まずは テーブルに項目を追加します
マイグレーションファイルの作成も paperclip でできちゃいます。

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


c:¥rbc¥rbc_tabelo...
5.paperclip を使って画像をアップできるようにする
ちなみに先ほどのコマンドを実行する事で、
Bookmarks テーブルに 画像を保存するためのマイグレーションファイルが追加されました。

rbc_tabelog/db/migrat...
5.paperclip を使って画像をアップできるようにする
次に画像情報を保存するためにモデル修正しましょう。
修正するモデルはメモを書きこめるように作った Bookmark というモデルです。

モデル/bookmark.rb
赤字部分を追...
5.paperclip を使って画像をアップできるようにする
引き続き画面に項目を追加していきましょう

rbc_tabelog/app/views/restaurants/index.html.erb
赤字部分を追加
<h1>RBC食べログ<...
5.paperclip を使って画像をアップできるようにする
んで、コントローラも修正
rbc_tabelog/app/controllers/restaurants_controller.rb
create メソッドの中の赤字部分を追加してフ...
5.paperclip を使って画像をアップできるようにする
rbc_tabelog/app/controllers/restaurants_controller.rb
index メソッドの中の赤字部分を追加して登録したデータを取得できるよう...
5.paperclip を使って画像をアップできるようにする
これで写真のアップ機能が追加できました
                            http://localhost:3000/restaurants
イメージ欄が追加さ...
Chapter 6
AIR との連携の準備をする
6. AIR との連携の準備をする
最後に 2部で開発する AIR アプリとの連携する部分を作ります。

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




                        Rails と AIR を連携!!

...
6. AIR との連携の準備をする
具体的にどのようにして連携するのでしょう?

http://localhost:3000/restaurants.xml

左図のような xml が出てきましたよね?
コレをAIRに読み込んでもらいます!!
...
6. AIR との連携の準備をする
ただ、AIRとの連携で以下の問題があります。

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


ビュー/restaurants/index.html.erb

<h1>RBC食べログ</h1>
<% form_tag({:action ...
6. AIR との連携の準備をする
これで以下の問題の対応が完了しました
・同じタグ名が重なると同じく処理が面倒
・paperclip で追加した画像のURLが相対URLである
                    ついでに先頭タグを”res...
これで、完成しました!!
コレで1部のアプリケーションが完成しました!!

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

ぜひ食べログAPIだけでなく、他のWebAPIでも試してみてくださ...
ありがとうございました!!

 それでは2部にバトンタッチです
Upcoming SlideShare
Loading in...5
×

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

4,560

Published on

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

1 Comment
3 Likes
Statistics
Notes
  • 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
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
4,560
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
40
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

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

  1. 1. イケテル Rails 勉強会@東京 (1部:Rails編) 2009.04.18 ナカオヒロシ
  2. 2. 1部での目的 • ActiveResource という機能をつかって 食べログをはじめとした WebAPI を使えるようになろう!! • paperclip プラグインを使ってファイルの添付を出来るようになろう!! • AIR と連携をしてみよう!! • 習うよりとにかく慣れてみよう!! Don’t think, feel. (考えるな、感じるんだ。) 2
  3. 3. 1部でやること Ruby on Rails のプロジェクトを作成 1. ActiveResource をつかって食べログAPIを表示する 2. 食べログの画面に検索条件を追加する 3. レストランに1行メモを追加できるようにする 4. paperclip を使って画像を添付できるようにする 5. AIR との連携の準備をする 6. 3
  4. 4. Chapter 1 Ruby on Rails のプロジェクトを作成
  5. 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. 6. 1.Ruby on Rails のプロジェクトを作成 今回の勉強会では C:¥rbcフォルダで作業している事を前提に説明します。 Cドライブ直下にrbcフォルダを作成してください。 6
  7. 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. 8. 1.Ruby on Rails のプロジェクトを作成 以下の様に、 rbc_tabelog プロジェクトができていれば成功 8
  9. 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. 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. 11. 1.Ruby on Rails のプロジェクトを作成 この画面が表示されたら準備オッケーです!! 11
  12. 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. 13. Chapter 2 ActiveResource をつかって 食べログAPIを表示する
  14. 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. 15. 2.ActiveResource をつかって食べログAPIを表示する まずはAPI を表示するために 画面を作っていきます 以下のコマンドを実行 c:¥rbc¥rbc_tabelog>ruby script/generate scaffold Restaurant 15
  16. 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. 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. 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. 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. 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. 21. 2.ActiveResource をつかって食べログAPIを表示する こんな画面が表示されていれば成功です。 Rails だと WebAPI を画面表示させるのはこんなに簡単です。 http://localhost:3000/restaurants 21
  22. 22. Chapter 3 食べログの画面に検索条件を追加する
  23. 23. 3.食べログの画面に検索条件を追加する このままだとチョット寂しいので検索条件を追加していきましょう 今回追加する条件は以下の3つです。 ・都道府県名 ・ページ番号 都道府県名はプルダウンの データを scaffold で作っていきます ページ番号は最後に簡単につくります 23
  24. 24. 3.食べログの画面に検索条件を追加する さっそく都道府県名の作成 まずは土台を scaffold で作成しちゃいます c:¥rbc¥rbc_tabelog> ruby script/generate scaffold Prefecture en:string ja:string 24
  25. 25. 3.食べログの画面に検索条件を追加する 続いてデータの中身を作成していきます c:¥rbc¥rbc_tabelog>ruby script/generate migration InsertPrefectures 25
  26. 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. 27. 3.食べログの画面に検索条件を追加する 以下のコマンドを実行して、データをSQLite3に反映させます。 c:¥rbc¥rbc_tabelog> rake db:migrate (in c:/rbc/rbc_tabelog) ・・・ ブラウザで以下のURLを実行してみましょう。 http://localhost:3000/prefectures 右のような画面が表示されればオッケーです。 27
  28. 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. 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. 30. 3.食べログの画面に検索条件を追加する こんな感じで検索条件部分が表示されていればオッケー。 検索条件を変更して検索ボタンを押してみましょう http://localhost:3000/restaurants 30
  31. 31. Chapter 4 レストランに1行メモを 追加できるようにする
  32. 32. 4.レストランに1行メモを追加できるようにする さてさて次は画面に一言メモを残していけるようにしていきましょう。 こちらもサクサク作っていきます 32
  33. 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. 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. 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. 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. 37. 4.レストランに1行メモを追加できるようにする http://localhost:3000/restaurants では画面を確認してみましょう メモ欄が追加されていますか? 登録してみてください。 結果が各レストラン横に追加されるのを確認できます。 37
  38. 38. Chapter 5 paperclip を使って 画像をアップできるようにする
  39. 39. 5.paperclip を使って画像をアップできるようにする コンテンツの完成も近づいてきました 次は画像のアップを出来るようにしましょう 画像のアップ機能を追加するには paperclip というプラグインを使えば簡単です!! paperclip Rails上でファイルのアップロードを簡単に実装できるプラグイン 【参考リンク】 http://www.thoughtbot.com/projects/paperclip http://github.com/thoughtbot/paperclip/tree/master/README.rdoc 39
  40. 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. 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. 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. 43. 5.paperclip を使って画像をアップできるようにする 次に画像情報を保存するためにモデル修正しましょう。 修正するモデルはメモを書きこめるように作った Bookmark というモデルです。 モデル/bookmark.rb 赤字部分を追記して終わりです。 class Bookmark < ActiveRecord::Base has_attached_file :photo end 今回は “photo” という名前で画像を保存する事にします 43
  44. 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. 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. 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. 47. 5.paperclip を使って画像をアップできるようにする これで写真のアップ機能が追加できました http://localhost:3000/restaurants イメージ欄が追加されていますか? 登録してみてください。 いくつかサンプル画像を用意しています。 「¥1部資料¥_レストラン画像サンプル」 結果が各レストラン横に追加されるのを確認できます。 47
  48. 48. Chapter 6 AIR との連携の準備をする
  49. 49. 6. AIR との連携の準備をする 最後に 2部で開発する AIR アプリとの連携する部分を作ります。 とは言っても、実はほとんどが出来ています。 Rails と AIR を連携!! 49
  50. 50. 6. AIR との連携の準備をする 具体的にどのようにして連携するのでしょう? http://localhost:3000/restaurants.xml 左図のような xml が出てきましたよね? コレをAIRに読み込んでもらいます!! ちなみに検索条件の追加時に作った 「都道府県名」も 以下のURLでXMLを呼び出せちゃいます。 (今回のAIR編では使いません) http://localhost:3000/prefectures.xml 50
  51. 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. 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. 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. 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. 55. これで、完成しました!! コレで1部のアプリケーションが完成しました!! ・ActiveResource を使うことで、 簡単に WebAPI を取り込む事が出来ました!! ぜひ食べログAPIだけでなく、他のWebAPIでも試してみてください。 ・amazon ・Twitter ・その他:MA4(Mashup Award 4th)のAPI一覧 http://mashupaward.jp/api/all/ 55
  56. 56. ありがとうございました!! それでは2部にバトンタッチです
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×