UnicastWS vol.2

1,235 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,235
On SlideShare
0
From Embeds
0
Number of Embeds
46
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

UnicastWS vol.2

  1. 1. UNICAST・ワークショップ vol.2 Railsを使ったWebサービスの作り方~Railsの環境でWebサービスを作ってみよう! ~1
  2. 2. 前回のおさらい• WebSocket – サーバからブラウザへ好きなタイミングでデータを 送信できる – Webブラウザによって対応状況がまちまち• Ruby on Rails – MVCアーキテクチャ – アプリに必要な枠組みはRailsが生成 • 開発が楽!2
  3. 3. MVCアーキテクチャ3
  4. 4. Ruby on Rails (Rails) とは?• Ruby によるWebアプリケーション向 けのMVCフレームワーク• 37signalsのプログラマ、David Heinemeier Hansson が開発• Railsを利用しているサービス – クックパッド – 食べログ – Twitter(~2008)4
  5. 5. 準備運動:Rails で Hello world!(1) Railsプロジェクトを新規作成する work> rails new hello work> cd hello hello> rails generate scaffold greeting hello> rake db:migrate(2) app/views/hello/index.html.erb を編集し下行で置き換える <p>hello, world!</p>(3) サーバを起動する hello> rails server(4) ブラウザでサーバにアクセス http://localhost:3000/greetings5
  6. 6. 準備運動:Rails で Hello world!6
  7. 7. ここまでのまとめ• アプリに必要なものはRailsが用意してくれる• railsコマンドはアプリに必要なものを生成する – モデル、ビュー、コントローラの生成 – サーバの起動• rake db:migrateコマンドでデータベースのセット アップが行われる7
  8. 8. 今日の目標• 実際にWebサービスを作ってWebアプリ開発を 体験します• 合宿に向けて、Railsの実践的な使い方を学びま す8
  9. 9. お題• iOSアプリレビューサイト あぷレビュ!(仮称) – App Storeからアプリのデータを取得し、レビューを 投稿・共有するサービス – App Storeにもレビュー投稿機能がありますが、今回 はオリジナルのレビューシステムをRailsで作ります9
  10. 10. お題• トップページ10
  11. 11. お題• 検索結果のページ11
  12. 12. お題• レビュー表示・投稿のページ12
  13. 13. おことわり• 今回の内容はRubyやHTMLの知識が必要になる部 分が所々に出てきます• ですが尺の都合上、RubyやHTMLについての説明 は省きます• よくわからないコードが出てきても、今回はと りあえずそういうものなのだと思って、後で自 習してください(丸投げ)13
  14. 14. 1.アプリの設計• 作りたいアプリの仕様をざっくりと決めます• 紙と鉛筆を使って、絵や図を描きながら考えま しょう• 開発に関わるメンバー全員で議論しながら考え ましょう14
  15. 15. 1.アプリの設計• ページフロー – ページの見た目やページ間のつながりを考えます – 主にMVCの「ビュー」の部分15
  16. 16. 1.アプリの設計• テーブルの設計 – アプリが使うデータについて考えます – MVCの「モデル」の部分 – どんなデータを扱うのかを、分類ごとに箇条書きで書きま す – モデル同士に関連があれば、それも描きこみます16
  17. 17. 1.アプリの設計• モデルの関連 – モデルには1対1、1対多、多対多などの関連がありま す – あぷレビュ!の場合、一つのアプリに複数のレ ビューがつくと考えられるので、アプリとレビュー は1対多の関係となります アプリ 1 0…* アプリ レビューレビュー レビュー ・・・17
  18. 18. 1.アプリの設計• その他、開発に必要なことを色々考えておきま す – どのぐらいの期間で完成できる? • 今回は3時間。終わらなかったら次回にやるかも。 – 必ず実装しなくてはいけない部分は? • iTunes Storeからデータを取得 • アプリのデータとレビューの情報の紐づけ – 逆に、必ずしも実装しなくてもよい部分は? • 新着レビューの表示(なくても見栄えは悪いが一応動く) – 一番実装が難しい部分は? • iTunes Storeからレコードを取得する部分? – どんな技術や知識が必要? • Rails、Ruby、HTTP、データベース18
  19. 19. 2.プロジェクトの新規作成• いよいよ実際にプログラムを書いていきます• まずはプロジェクトの作成 work> rails new appreview create create README.rdoc create Rakefile … 中略 … Using sqlite3 (1.3.6) Using uglifier (1.2.7) Your bundle is complete! Use `bundle show [gemname]` to see where a bundled gem is installed. work> cd appreview19
  20. 20. 2.Gemの追加• Rubyのモジュールの単位をGemと呼びます• たくさんのアプリやライブラリがGemとして公 開されています• 今回はApp Storeからアプリのデータを取得する ためにHTTPClientというGemを使います20
  21. 21. 2.Gemの追加• Railsプロジェクトが使うGemはGemfileという ファイルに書かれています• Gemfileの末尾にHTTPClientを追記します• ファイルの文字コードはUTF-8を指定してくださ い … gem ‘httpclient’• 終わったらGemをインストールします appreview> bundle install21
  22. 22. 3.サーバの起動• 動作確認のためのサーバを起動します• 新しいコマンドプロンプトを開いて、以下のコ マンドを実行しますappreview> rails server• http://localhost:3000 にアクセスできますか?22
  23. 23. 4.トップページ(兼、検索ページ)を作成• 今度はトップページ(兼、検索ページ)を作り ます• railsコマンドを使って、ページのひな形を生成 しますappreview> rails generate controller Home index search23
  24. 24. 4.トップページ(兼、検索ページ)を作成• 先ほどのコマンドで以下のファイルが生成され ました – appcontrollershome_controller.rb • トップページのコントローラ – appviewshomeindex.html.erb • トップページのビュー – appviewshomesearch.html.erb • 検索ページのビュー• 生成されたファイルを確認してみてください24
  25. 25. 5.ブラウザで確認• 次のURLにアクセスして、生成したコントローラ とビューが無事動くことを確認してみてくださ い – http://localhost:3000/home/index – http://localhost:3000/home/search25
  26. 26. 6.トップページを変える• まだ http://localhost:3000 はデフォルトのままです• configroutes.rb を編集して、先ほど作成したトップペー ジに移動するようにしますAppreview::Application.routes.draw do get "home/index" get "home/search" root :to => home#index‘…• デフォルトのトップページである publicindex.html は削 除しますappreview> del publicindex.html• トップページは変わりましたか?26
  27. 27. 7.トップページのビューを書く• トップページのビューを書いていきます• RailsではERB (embedded Ruby)という形式で ビューを書きます – ERBでは <% … %>で囲った文字列がRubyの式として解 釈されます – 例えば <%= 1+1 %> と書いた場合、ブラウザでは2と表 示されます – つまり、HTMLの中にRubyのプログラムを埋め込める わけです27
  28. 28. 7.トップページのビューを書く• appviewshomeindex.html.erb を編集して、タイト ルと検索窓を持つトップページを実装します<div id=“top”> <h1>あぷレビュ!</h1> <p class=“search_field”> <%= form_tag "/search", :method => "get" do %> <%= search_field_tag "q", "アプリを検索" %> <%= submit_tag "検索", :name => nil %> <% end %> </p></div>• ブラウザをリロードして、出来栄えを確認しましょ う• 検索窓で何か検索してみてください(おそらく Routing Errorになりますが)28
  29. 29. 8.検索ページに移動するようにする• Routing Errorのままでは使い物にならないので、 configroutes.rb を編集して検索ページに飛ぶよ うにしますAppreview::Application.routes.draw do get "home/index" get "home/search" root :to => home#index‘ match ‘/search’ => ‘home#search’…• 検索ページに飛ぶようになりましたか?29
  30. 30. 9.検索処理をコントローラに実装する• 検索ページでは、App Storeからアプリデータを 検索し、表示します• App StoreにはWebアプリからアクセスするため の専用のAPIが公開されています• 今回はHTTPClientでAPIにアクセスし、アプリの データを取得します• 検索処理やDBへのアクセスといった仕事はコン トローラの役目です• コントローラに検索処理を実装していきます30
  31. 31. 9.検索処理をコントローラに実装する• appcontrollershomehome_controller.rbを編集し ます def search # 検索する文字列を取得 @query = params[:q] content = HTTPClient.new.get_content( "http://itunes.apple.com/search", "term" => @query, # 検索キーワード "country" => "jp", "entity" => "software") # JSON形式のレスポンスを解析する json = JSON.parse(content) # 変数@resultsにアプリのリストを格納する @results = json["results"] # app/views/home/search.html.erb を表示 render :action => "search" end31
  32. 32. 10.検索ページのビューを書く• 検索処理を実装しましたが、まだビューを書い ていないので表示できません• 変数@resultsに格納した検索結果を表形式で出力 するようにします• appviewshomesearch.html.erb を編集します32
  33. 33. 10.検索ページのビューを書く<h2>検索結果</h2><%= form_tag "/search", :method => "get" do %> <%= search_field_tag "q", @query %> <%= submit_tag "検索", :name => nil %><% end %><hr /><table class="results"> <tr> <th></th><th>タイトル</th><th>ジャンル</th><th>開発者</th><th>価格</th> </tr> <% @results.each do |record| %> <tr> <td><%= image_tag record["artworkUrl60"] %></th> <td><%= record["trackName"] %></td> <td><%= record["genres"].join(, ) %></td> <td><%= record["artistName"] %></td> <td><%= record["formattedPrice"] %></td> </tr> <% end %></table><hr /><%= link_to "トップ", "/" %>33
  34. 34. 10.検索ページのビューを書く• ここまですべてがうまくいっていれば、検索窓 から自由にアプリを検索できるようになってい るはずです34
  35. 35. 11.レビューのモデルを生成する• トップページと検索ページが完成しました• 次はレビュー機能を実装します• 投稿されたレビューや、レビューされたアプリ の情報を保存するためのモデルを生成しましょ うappreview> rails generate scaffold App store_id:integertitle:string developer:string price:decimalappreview> rails generate scaffold Review name:stringcomment:string rate:integer app:referencesappreview> rake db:migrate35
  36. 36. 11.レビューのモデルを生成する• 以下のファイルは生成されたでしょうか – appmodelsapp.rb – appmodelsreview.rb – appcontrollersapps_controller.rb – appcontrollersreviews_controller.rb – appviewsappsshow.html.erb36
  37. 37. 12.1対多の関連を設定する• さて、最初に設計したモデルでは、アプリとレ ビューは1対多の関連を持っているのでした• 先ほどのレビューのモデルを生成するコマンド で、app:references と指定しているのは「Review はAppと関連している」ということをRailsに伝え るためだったのです• 次に「Appは複数のReviewと関連している」とい うことをRailsに伝えるため、アプリのモデルを 編集します37
  38. 38. 12.1対多の関連を設定する• appmodelsapp.rb を開いて、以下のように編集 しますclass App < ActiveRecord::Base has_many :reviews attr_accessible :developer, :price, :store_id, :titleend• :reviewではなく:reviewsです• これで1対多の関連が構築されました38
  39. 39. 13.レビューページのビューを作成する• レビューを投稿・表示するページのビューを作 成します• appviewsappsshow.html.erb を編集します• 長いので、入力が面倒な人はコピペで構いませ ん39
  40. 40. 13.レビューページのビューを作成する<h2><%= @app.title %> - レビュー</h2><p id="notice"> <%= notice %></p><hr /><table class="info"> <tr><th>開発者</th><td><%= @app.developer %></td><th>価格</th><td><%= @app.price %>円</td></tr></table><table class="reviews"> <tr><th>お名前</th><th>レート</th><th>レビュー</th></tr> <% @app.reviews.each do |r| %> <tr><td><%= r.name %></td><td><%= "★" * r.rate %></td><td><%= r.comment %></td></tr> <% end %></table><hr /><h3>レビューを書く!</h3><%= form_for([@app.reviews.build]) do |f| %> <%= f.hidden_field :app_id, value: @app.id %> <div class="field"> <%= f.label "お名前" %><br /> <%= f.text_field :name %> </div> <div class="field"> <%= f.label "レート" %><br /> <%= f.select :rate, (0..5).to_a.collect {|i| ["★"*i, i]} %> </div> <div class="field"> <%= f.label "レビュー" %><br /> <%= f.text_area :comment %> </div> <div class="actions"> <%= f.submit "投稿" %> </div><% end %><hr /><%= link_to "トップ", "/" %>40
  41. 41. 14.レビューページを新規作成する処理を書く• レビューはアプリに関連付けられて投稿されま す• レビューを投稿するためには、あらかじめアプ リの情報がデータベースに登録されている必要 があります• 検索結果のページからアプリをクリックしたと き、そのアプリがDBに登録されていなければDB にアプリ情報を登録する処理を書きます41
  42. 42. 14.レビューページを新規作成する処理を書く• appcontrollersapps_controller.rb を編集し、index メソッドを以下で置き換えますclass AppsController < ApplicationController # GET /apps # GET /apps.json def index if params[:store_id] app = App.where("store_id = :store_id", params).first # もしアプリの情報がDBになければ新規作成する unless app app = App.new app.store_id = params[:store_id].to_i app.title = params[:title] app.developer = params[:developer] app.price = params[:price].to_f app.save end # レビューのページに飛ぶ redirect_to action: "show", id: app.id end end42
  43. 43. 15.レビューページに飛ぶリンクを追加する• これでレビューページを表示するために必要な ものが揃いました• 次に、レビューページに飛ぶためのリンクを検 索結果のページに追加しましょう43
  44. 44. 15.レビューページに飛ぶリンクを追加する• appviewshomesearch.html.erb を編集します• アプリタイトルの所にレビューページへのリン クが張られるように、以下のように修正します<% @results.each do |record| %> <tr> <td><%= image_tag record["artworkUrl60"] %> <td> <%= link_to record["trackName"], apps_path( store_id: record["trackId"], title: record["trackName"], developer: record["artistName"], price: record["price"]) %> </td> <td><%= record["genres"].join(, ) %></td> <td><%= record["artistName"] %></td> <td><%= record["formattedPrice"] %></td> </tr> <% end %>44
  45. 45. 15.レビューページに飛ぶリンクを追加する• これで検索結果のページからレビューのページ に行けるようになりました• ブラウザで動作を確認してみてください45
  46. 46. 16.投稿したアプリのページに戻るようにする• さて、いよいよ最後です• レビューの投稿ボタンを押すと、Listing reviews と表示されるページに飛ぶと思います• これをレビューの投稿時に、投稿したアプリの ページに戻るようにします• これはReviewのコントローラが処理しています46
  47. 47. 16.レビューを投稿できるようにする• appcontrollersreviews_controller.rb のcreateメ ソッドを以下のように編集しますdef create @review = Review.new(params[:review]) respond_to do |format| if @review.save format.html { redirect_to App.find(@review.app_id), notice: Review was successfully created. } format.json { render json: @review, status: :created, location: @review } else format.html { render action: "new" } format.json { render json: @review.errors, status: :unprocessable_entity } end end end47
  48. 48. 16.レビューを投稿できるようにする• @review.app_idはReviewオブジェクトの属性app_id にアクセスするという意味です• デフォルトでは属性app_idにアクセスするための 設定がReviewオブジェクトにされていないので、 これを修正します• appmodelsreview.rb を編集しますclass Review < ActiveRecord::Base belongs_to :app attr_accessible :comment, :name, :rate, :app_idend48
  49. 49. 16.レビューを投稿できるようにする• これでレビューが投稿できるようになりまし た!• すべてがうまくいっているか、ブラウザで確認 してみてください49
  50. 50. 17.さらに拡張• これで一通りの機能が揃いました• しかし、まだ課題はあります – 見た目がまだ不細工です • HTMLやスタイルシートを工夫して見栄えをよくしてみま しょう – レビューが削除ができない • コントローラに削除の処理を追加してみましょう – 機能が少なくて、Webサービスとしてはまだまだしょ ぼい• 改善点を見つけて、取り組んでみましょう50
  51. 51. スキルアップのために• Webアプリ開発は非常に広範な知識を要求され る分野です• 今回の課題だけでも、Rails、Ruby、HTTP、デー タベース、HTMLといった知識が必要になりまし た• Webアプリ開発を習得するためには、たくさん 書籍を読んで、実際に手を動かしてみるほかあ りません51
  52. 52. 参考書籍• 幸い、RubyやRailsは非常に参考になる書籍が出 ています – たのしいRuby 第3版 • 高橋征義、後藤裕蔵(著)、まつもとゆきひろ(監修) • 出版:ソフトバンククリエイティブ – RailsによるアジャイルWebアプリケーション開発第4 版 • Sam Ruby, et al.(著), 前田 修吾 (翻訳) • 出版:オーム社• 合宿までの間、図書館で借りるなどして読んで おくこと良いと思います52
  53. 53. まとめ• Railsについておさらいしました – MVCアーキテクチャ – 自動生成で簡単に作れる• RailsでWebサービスを作りました – アプリをざっくり設計し、図に起こしました – 設計をもとにRailsでモデル、ビュー、コントローラを 生成し、中身を実装しました – App Storeの検索APIを使って、アプリのレビューサイ トを構築しました53
  54. 54. おわり54

×