Rails基礎講座 part.2
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Rails基礎講座 part.2

  • 832 views
Uploaded on

Rails基礎講座第二回 Twitterっぽいものを作ってみよう

Rails基礎講座第二回 Twitterっぽいものを作ってみよう

More in: Education , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
832
On Slideshare
817
From Embeds
15
Number of Embeds
1

Actions

Shares
Downloads
8
Comments
0
Likes
3

Embeds 15

http://coderwall.com 15

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

  • 1. Rails基礎講座 2012/03/21
  • 2. 前回のあらすじ• Ruby on Rails• Rubyをインストールしてみる• Rubyの基礎
  • 3. おさらい• Railsとは?• MVCアーキテクチャ• 変数・条件分岐・ループ• レシーバとメソッドとメソッド定義
  • 4. MVC?
  • 5. MVC?Model
  • 6. MVC? ModelView
  • 7. MVC? ModelView Controller
  • 8. MVC? ModelView Controller User
  • 9. MVC? ModelView Controller User
  • 10. MVC? ModelView Controller User
  • 11. MVC? ModelView Controller User
  • 12. MVC? ModelView Controller User
  • 13. MVC? ModelView Controller User
  • 14. MVC? ModelView Controller User
  • 15. Railsの特長• ルールに沿って書いていけばWebアプ リケーションができる• =レールに乗る(on Rails)
  • 16. Railsの特長
  • 17. インストール
  • 18. インストール
  • 19. インストール
  • 20. インストール> gem install rails
  • 21. インストール> gem install railsFetching: i18n-0.6.0.gem (100%)Fetching: multi_json-1.1.0.gem (100%)Fetching: activesupport-3.2.2.gem (100%)...Successfully installed bundler-1.1.1Successfully installed rails-3.2.230 gems installed
  • 22. インストール
  • 23. インストール> rails -v
  • 24. インストール> rails -vRails 3.2.2
  • 25. 何を作る?
  • 26. 何を作る?
  • 27. 何を作る? twit
  • 28. 何を作る? twitマイクロブログ的なアレ
  • 29. 何を作る? twit
  • 30. 何を作る? twit[名]1 ((略式))ばか, まぬけ.2 あざけり, 愚弄(ぐろう).
  • 31. 必要なもの
  • 32. 必要なもの• 統合開発環境• エディタ• ターミナル• ブラウザ
  • 33. ※画面は開発中のものです
  • 34. ※画面は開発中のものです ターミナル
  • 35. ※画面は開発中のものです ターミナル
  • 36. ※画面は開発中のものですエディタ ターミナル
  • 37. ※画面は開発中のものですエディタ ターミナル
  • 38. ※画面は開発中のものですエディタ ターミナル ブラウザ
  • 39. 完成品
  • 40. 完成品https://github.com/nysalor/twit/commits/master
  • 41. 完成品https://github.com/nysalor/twit/commits/master
  • 42. 完成品https://github.com/nysalor/twit/commits/master 下から順番
  • 43. 完成品https://github.com/nysalor/twit/commits/master 下から順番
  • 44. 開発開始!
  • 45. 開発開始!> rails new twit -T
  • 46. 開発開始!> rails new twit -Tcreatecreate README.rdoc...run bundle install...Your bundle is complete! Use `bundleshow [gemname]` to see where abundled gem is installed.
  • 47. ディレクトリ
  • 48. ディレクトリ Model
  • 49. ディレクトリ ModelView
  • 50. ディレクトリ ModelView Controller
  • 51. ディレクトリ Model ControllerView
  • 52. ディレクトリ ModelController View
  • 53. ディレクトリ ModelController View
  • 54. ディレクトリ ModelController View
  • 55. ディレクトリ > cd twit ModelController View
  • 56. ディレクトリ ModelController View
  • 57. ディレクトリ twit/ ModelController View
  • 58. ディレクトリ twit/ Model app/modelsController View
  • 59. ディレクトリ twit/ Model app/modelsController app/controllers View
  • 60. ディレクトリ twit/ Model app/modelsController app/controllers View app/views
  • 61. ディレクトリ twit/ app/modelsController app/controllers View app/views
  • 62. ディレクトリ twit/ app/models app/controllersView app/views
  • 63. ディレクトリ twit/ app/models app/controllers app/views
  • 64. ディレクトリ twit/ app/models app/controllers app/views
  • 65. ディレクトリ twit/config app/models app/controllers app/views
  • 66. ディレクトリ twit/config app/models db app/controllers app/views
  • 67. ディレクトリ twit/config app/models db app/controllerspublic app/views
  • 68. ディレクトリ twit/
  • 69. ディレクトリ twit/以後はずっとこのディレクトリ
  • 70. サーバ起動
  • 71. サーバ起動> cd twit> rails server
  • 72. サーバ起動> cd twit> rails serverhttp://localhost:3000
  • 73. サーバ起動http://localhost:3000
  • 74. サーバ起動
  • 75. サーバ起動
  • 76. 設計
  • 77. 設計Model
  • 78. 設計
  • 79. 設計User
  • 80. 設計UserTweet
  • 81. 設計User nameTweet
  • 82. 設計User nameTweet body user_id
  • 83. 設計User name body user_id
  • 84. 設計User name
  • 85. scaffold
  • 86. scaffold> rails generate scaffold User name:string
  • 87. scaffold> rails generate scaffold User name:stringinvoke active_recordcreate db/migrate/ 20120320181856_create_users.rbcreate app/models/user.rb...create app/assets/stylesheets/scaffolds.css.scss
  • 88. scaffold ModelController View
  • 89. scaffold Model app/models/user.rbController View
  • 90. scaffold Model app/models/user.rb app/controllers/Controller users_controller.rb View
  • 91. scaffold Model app/models/user.rb app/controllers/Controller users_controller.rb app/views/users/ View index.html.erb ...
  • 92. scaffold
  • 93. scaffold db/migrate/20120320181856_create_users.rb
  • 94. scaffold db/migrate/ 20120320181856_create_users.rbclass CreateUsers < ActiveRecord::Migration  def change    create_table :users do |t|      t.string :name      t.timestamps    end  endend
  • 95. scaffold db/migrate/ 20120320181856_create_users.rbclass CreateUsers < ActiveRecord::Migration  def change    create_table :users do |t|      t.string :name      t.timestamps DBの「手順書」    end  endend
  • 96. 設計User nameTweet body user_id
  • 97. 設計 nameTweet body user_id
  • 98. 設計Tweet body user_id
  • 99. scaffold
  • 100. scaffold
  • 101. scaffold> rails generate model Tweet body:stringuser_id:integer
  • 102. scaffold> rails generate model Tweet body:stringuser_id:integerinvoke active_recordcreate db/migrate/ 20120320213424_create_tweets.rbcreate app/models/tweet.rb
  • 103. model generatorModel
  • 104. model generatorModel app/models/tweet.rb
  • 105. model generator
  • 106. model generator db/migrate/20120320213424_create_tweets.rb
  • 107. model generator db/migrate/ 20120320213424_create_tweets.rbclass CreateTweets < ActiveRecord::Migration  def change    create_table :tweets do |t|      t.string :body      t.integer :user_id      t.timestamps    end  endend
  • 108. model generator db/migrate/ 20120320213424_create_tweets.rbclass CreateTweets < ActiveRecord::Migration  def change    create_table :tweets do |t|      t.string :body      t.integer :user_id      t.timestamps DBの「手順書」    end  endend
  • 109. migrate
  • 110. migrate> rake db:migrate
  • 111. migrate> rake db:migrate== CreateUsers: migrating ================-- create_table(:users) -> 0.0016s== CreateUsers: migrated (0.0017s) =========== CreateTweets: migrating ===============-- create_table(:tweets) -> 0.0023s== CreateTweets: migrated (0.0025s) ========
  • 112. migrate> rake db:migrate 「手順書」からDBを作成== CreateUsers: migrating ================-- create_table(:users) -> 0.0016s== CreateUsers: migrated (0.0017s) =========== CreateTweets: migrating ===============-- create_table(:tweets) -> 0.0023s== CreateTweets: migrated (0.0025s) ========
  • 113. 動かしてみる
  • 114. 動かしてみるhttp://localhost:3000/users/
  • 115. 動かしてみるhttp://localhost:3000/users/
  • 116. 動かしてみるhttp://localhost:3000/users/
  • 117. 動かしてみるhttp://localhost:3000/users/
  • 118. 設計User nameTweet body user_id
  • 119. 設計User name body user_id
  • 120. 設計User name
  • 121. 設計User
  • 122. 設計User
  • 123. 設計 UserTweet
  • 124. 設計 UserTweet
  • 125. 設計 UserTweet Tweet
  • 126. 設計 UserTweet Tweet
  • 127. 設計 UserTweet Tweet Tweet
  • 128. 設計 UserTweet Tweet Tweet
  • 129. 関連付け
  • 130. 関連付けapp/models/user.rb
  • 131. 関連付け app/models/user.rbclass User < ActiveRecord::Baseend
  • 132. 関連付けapp/models/user.rb
  • 133. 関連付け app/models/user.rbclass User < ActiveRecord::Base  has_many :tweetsend
  • 134. 関連付け app/models/user.rbclass User < ActiveRecord::Base  has_many :tweetsend 追加
  • 135. 関連付け
  • 136. 関連付けapp/models/tweet.rb
  • 137. 関連付け app/models/tweet.rbclass Tweet < ActiveRecord::Baseend
  • 138. 関連付けapp/models/tweet.rb
  • 139. 関連付け app/models/tweet.rbclass Tweet < ActiveRecord::Base  belongs_to :userend
  • 140. 関連付け app/models/tweet.rbclass Tweet < ActiveRecord::Base  belongs_to :userend 追加
  • 141. つぶやきを表示
  • 142. つぶやきを表示http://localhost:3000/users/1
  • 143. つぶやきを表示http://localhost:3000/users/1
  • 144. つぶやきを表示http://localhost:3000/users/1 この辺につぶやき追加
  • 145. つぶやきを表示
  • 146. つぶやきを表示 Controller
  • 147. つぶやきを表示
  • 148. つぶやきを表示app/controllers/users_controller.rb
  • 149. つぶやきを表示 app/controllers/users_controller.rb  # GET /users/1  # GET /users/1.json  def show    @user = User.find(params[:id])    respond_to do |format|      format.html # show.html.erb      format.json { render json: @user }    end  end
  • 150. つぶやきを表示 app/controllers/users_controller.rb   # GET /users/1   # GET /users/1.json   def show     @user = User.find(params[:id])showアクション=users/1     respond_to do |format|       format.html # show.html.erb       format.json { render json: @user }     end   end
  • 151. つぶやきを表示 app/controllers/users_controller.rb  # GET /users/1  # GET /users/1.json  def show    @user = User.find(params[:id])    respond_to do |format|      format.html # show.html.erb      format.json { render json: @user }    end  end
  • 152. つぶやきを表示app/controllers/users_controller.rb
  • 153. つぶやきを表示 app/controllers/users_controller.rb  # GET /users/1  # GET /users/1.json  def show    @user = User.find(params[:id])    @tweets = @user.tweets    respond_to do |format|      format.html # show.html.erb      format.json { render json: @user }    end  end
  • 154. つぶやきを表示 app/controllers/users_controller.rb  # GET /users/1  # GET /users/1.json  def show    @user = User.find(params[:id])    @tweets = @user.tweets 追加    respond_to do |format|      format.html # show.html.erb      format.json { render json: @user }    end  end
  • 155. つぶやきを表示 app/controllers/users_controller.rb  # GET /users/1  # GET /users/1.json @user.tweetsで@userのtweetを取得  def show    @user = User.find(params[:id])    @tweets = @user.tweets 追加    respond_to do |format|      format.html # show.html.erb      format.json { render json: @user }    end  end
  • 156. つぶやきを表示
  • 157. つぶやきを表示 View
  • 158. つぶやきを表示
  • 159. つぶやきを表示app/views/users/show.html.erb
  • 160. つぶやきを表示 app/views/users/show.html.erb<p id="notice"><%= notice %></p><p>  <b>Name:</b>  <%= @user.name %></p>
  • 161. つぶやきを表示app/views/users/show.html.erb
  • 162. つぶやきを表示 app/views/users/show.html.erb<p>  <b>Name:</b>  <%= @user.name %></p><p>  <b><%= @user.name %>さんのつぶやき</b>  <ul>    <% @tweets.each do |tweet| -%>      <li><%= tweet.body %></li>    <% end -%>  </ul></p>
  • 163. つぶやきを表示 app/views/users/show.html.erb<p>  <b>Name:</b>  <%= @user.name %></p><p>  <b><%= @user.name %>さんのつぶやき</b>  <ul>    <% @tweets.each do |tweet| -%>      <li><%= tweet.body %></li>    <% end -%> 追加  </ul></p>
  • 164. つぶやきを表示
  • 165. つぶやきを表示http://localhost:3000/users/1
  • 166. つぶやきを表示http://localhost:3000/users/1
  • 167. つぶやく
  • 168. つぶやくController
  • 169. つぶやく
  • 170. つぶやくapp/controllers/users_controller.rb
  • 171. つぶやく app/controllers/users_controller.rb    respond_to do |format|      format.html { redirect_to users_url }      format.json { head :no_content }    end  endend
  • 172. つぶやく app/controllers/users_controller.rb    respond_to do |format|      format.html { redirect_to users_url }      format.json { head :no_content }    end  endend 末尾のendの前に新しいメソッドを追加
  • 173. つぶやく app/controllers/users_controller.rb    respond_to do |format|      format.html { redirect_to users_url }      format.json { head :no_content }    end  endend
  • 174. つぶやくapp/controllers/users_controller.rb
  • 175. つぶやく app/controllers/users_controller.rb    respond_to do |format|      format.html { redirect_to users_url }      format.json { head :no_content }    end  end  # POST /users/1/tweet  def tweet    @user = User.find(params[:id])    @tweet = @user.tweets.create(:body => params[:body])    redirect_to @user, notice: Tweet was successfully updated.  endend
  • 176. つぶやく app/controllers/users_controller.rb    respond_to do |format|      format.html { redirect_to users_url }      format.json { head :no_content }    end  end  # POST /users/1/tweet  def tweet    @user = User.find(params[:id])    @tweet = @user.tweets.create(:body => params[:body])    redirect_to @user, notice: Tweet was successfully updated.  endend 追加
  • 177. つぶやく app/controllers/users_controller.rb    respond_to do |format|      format.html { redirect_to users_url }      format.json { head :no_content }    end  end  # POST /users/1/tweet @user.tweets.createでtweetを追加  def tweet    @user = User.find(params[:id])    @tweet = @user.tweets.create(:body => params[:body])    redirect_to @user, notice: Tweet was successfully updated.  endend 追加
  • 178. つぶやく
  • 179. つぶやく View
  • 180. つぶやく
  • 181. つぶやくapp/views/users/show.html.erb
  • 182. つぶやく app/views/users/show.html.erb<%= link_to Edit, edit_user_path(@user) %> |<%= link_to Back, users_path %>
  • 183. つぶやくapp/views/users/show.html.erb
  • 184. つぶやく app/views/users/show.html.erb<p>  <%= form_tag user_tweet_path do %>    今何してる?:<%= text_field_tag :body %>    <%= submit_tag %>  <% end -%></p><%= link_to Edit, edit_user_path(@user) %> |<%= link_to Back, users_path %>
  • 185. つぶやく app/views/users/show.html.erb<p>  <%= form_tag user_tweet_path do %>    今何してる?:<%= text_field_tag :body %>    <%= submit_tag %> 追加  <% end -%></p><%= link_to Edit, edit_user_path(@user) %> |<%= link_to Back, users_path %>
  • 186. つぶやく
  • 187. つぶやくconfig/routes.rb
  • 188. つぶやく config/routes.rbTwit::Application.routes.draw do  resources :users
  • 189. つぶやくconfig/routes.rb
  • 190. つぶやく config/routes.rbTwit::Application.routes.draw do  match /user/:id/tweet => users#tweet, :as => :user_tweet  resources :users
  • 191. つぶやく config/routes.rbTwit::Application.routes.draw do  match /user/:id/tweet => users#tweet, :as => :user_tweet  resources :users 追加
  • 192. つぶやく config/routes.rb/user/1/tweetでusers#tweetが呼ばれるようになる Twit::Application.routes.draw do   match /user/:id/tweet => users#tweet, :as => :user_tweet   resources :users 追加
  • 193. つぶやいてみる
  • 194. つぶやいてみるhttp://localhost:3000/users/1
  • 195. つぶやいてみるhttp://localhost:3000/users/1
  • 196. つぶやいてみるhttp://localhost:3000/users/1
  • 197. トップページ
  • 198. トップページhttp://localhost:3000/
  • 199. トップページhttp://localhost:3000/
  • 200. トップページhttp://localhost:3000/
  • 201. トップページhttp://localhost:3000/
  • 202. トップページ
  • 203. トップページ config/routes.rb
  • 204. トップページ config/routes.rbTwit::Application.routes.draw do  match /user/:id/tweet => users#tweet, :as => :user_tweet  resources :users
  • 205. トップページ config/routes.rb
  • 206. トップページ config/routes.rbTwit::Application.routes.draw do  match /user/:id/tweet => users#tweet, :as => :user_tweet  resources :users  root :to => "users#index"
  • 207. トップページ config/routes.rbTwit::Application.routes.draw do  match /user/:id/tweet => users#tweet, :as => :user_tweet  resources :users  root :to => "users#index" 追加
  • 208. トップページ
  • 209. トップページhttp://localhost:3000/
  • 210. トップページhttp://localhost:3000/
  • 211. トップページhttp://localhost:3000/???
  • 212. トップページ
  • 213. トップページ public/index.html
  • 214. トップページ 削除 public/index.html
  • 215. トップページ
  • 216. トップページhttp://localhost:3000/
  • 217. トップページhttp://localhost:3000/
  • 218. 次回予告• トップページにタイムライン表示• つぶやきを新しい順に並べる• デザインをかっこよく• Ajaxで動きのあるページに• 多分時間が足りません
  • 219. ご清聴ありがとうございました