Rails基礎講座 part.2
Download as KEY, PDF3 likes681 views
Rails基礎講座第二回 Twitterっぽいものを作ってみよう
![何を作る？
twit
[名]
1 ((略式))ばか, まぬけ.
2 あざけり, 愚弄(ぐろう).](https://image.slidesharecdn.com/rails2-120320181947-phpapp02/85/Rails-part-2-30-320.jpg)
![開発開始！
> rails new twit -T
create
create README.rdoc
...
run bundle install
...
Your bundle is complete! Use `bundle
show [gemname]` to see where a
bundled gem is installed.](https://image.slidesharecdn.com/rails2-120320181947-phpapp02/85/Rails-part-2-46-320.jpg)
![つぶやきを表示
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](https://image.slidesharecdn.com/rails2-120320181947-phpapp02/85/Rails-part-2-150-320.jpg)
![つぶやきを表示
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](https://image.slidesharecdn.com/rails2-120320181947-phpapp02/85/Rails-part-2-151-320.jpg)
![つぶやきを表示
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](https://image.slidesharecdn.com/rails2-120320181947-phpapp02/85/Rails-part-2-152-320.jpg)
![つぶやきを表示
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](https://image.slidesharecdn.com/rails2-120320181947-phpapp02/85/Rails-part-2-154-320.jpg)
![つぶやきを表示
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](https://image.slidesharecdn.com/rails2-120320181947-phpapp02/85/Rails-part-2-155-320.jpg)
![つぶやきを表示
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](https://image.slidesharecdn.com/rails2-120320181947-phpapp02/85/Rails-part-2-156-320.jpg)
![つぶやく
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.'
end
end](https://image.slidesharecdn.com/rails2-120320181947-phpapp02/85/Rails-part-2-176-320.jpg)
![つぶやく
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.'
end
end
追加](https://image.slidesharecdn.com/rails2-120320181947-phpapp02/85/Rails-part-2-177-320.jpg)
![つぶやく
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.'
end
end
追加](https://image.slidesharecdn.com/rails2-120320181947-phpapp02/85/Rails-part-2-178-320.jpg)
Rails基礎講座 part.2
- 2. 前回のあらすじ • Ruby on Rails • Rubyをインストールしてみる • Rubyの基礎
- 3. おさらい • Railsとは？ • MVCアーキテクチャ • 変数・条件分岐・ループ • レシーバとメソッドとメソッド定義
- 4. MVC？
- 5. MVC？ Model
- 6. MVC？ Model View
- 7. MVC？ Model View Controller
- 8. MVC？ Model View Controller User
- 9. MVC？ Model View Controller User
- 10. MVC？ Model View Controller User
- 11. MVC？ Model View Controller User
- 12. MVC？ Model View Controller User
- 13. MVC？ Model View Controller User
- 14. MVC？ Model View Controller User
- 15. Railsの特長 • ルールに沿って書いていけばWebアプ リケーションができる • =レールに乗る(on Rails)
- 16. Railsの特長
- 17. インストール
- 18. インストール
- 19. インストール
- 20. インストール > gem install rails
- 21. インストール > gem install rails Fetching: 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.1 Successfully installed rails-3.2.2 30 gems installed
- 22. インストール
- 24. インストール > rails -v Rails 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 -T create create README.rdoc ... run bundle install ... Your bundle is complete! Use `bundle show [gemname]` to see where a bundled gem is installed.
- 47. ディレクトリ
- 48. ディレクトリ Model
- 49. ディレクトリ Model View
- 50. ディレクトリ Model View Controller
- 51. ディレクトリ Model Controller View
- 52. ディレクトリ Model Controller View
- 53. ディレクトリ Model Controller View
- 54. ディレクトリ Model Controller View
- 55. ディレクトリ > cd twit Model Controller View
- 56. ディレクトリ Model Controller View
- 57. ディレクトリ twit/ Model Controller View
- 58. ディレクトリ twit/ Model app/models Controller View
- 59. ディレクトリ twit/ Model app/models Controller app/controllers View
- 60. ディレクトリ twit/ Model app/models Controller app/controllers View app/views
- 61. ディレクトリ twit/ app/models Controller app/controllers View app/views
- 62. ディレクトリ twit/ app/models app/controllers View 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/controllers public app/views
- 68. ディレクトリ twit/
- 69. ディレクトリ twit/ 以後はずっとこのディレクトリ
- 70. サーバ起動
- 71. サーバ起動 > cd twit > rails server
- 72. サーバ起動 > cd twit > rails server http://localhost:3000
- 74. サーバ起動
- 75. サーバ起動
- 76. 設計
- 77. 設計 Model
- 78. 設計
- 79. 設計 User
- 80. 設計 User Tweet
- 81. 設計 User name Tweet
- 82. 設計 User name Tweet 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:string invoke active_record create db/migrate/ 20120320181856_create_users.rb create app/models/user.rb ... create app/assets/stylesheets/ scaffolds.css.scss
- 88. scaffold Model Controller View
- 89. scaffold Model app/models/user.rb Controller 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.rb class CreateUsers < ActiveRecord::Migration def change create_table :users do |t| t.string :name t.timestamps end end end
- 95. scaffold db/migrate/ 20120320181856_create_users.rb class CreateUsers < ActiveRecord::Migration def change create_table :users do |t| t.string :name t.timestamps DBの「手順書」 end end end
- 96. 設計 User name Tweet body user_id
- 97. 設計 name Tweet body user_id
- 98. 設計 Tweet body user_id
- 99. scaffold
- 101. scaffold
- 102. scaffold > rails generate model Tweet body:string user_id:integer
- 103. scaffold > rails generate model Tweet body:string user_id:integer invoke active_record create db/migrate/ 20120320213424_create_tweets.rb create app/models/tweet.rb
- 105. model generator Model app/models/tweet.rb
- 106. model generator
- 107. model generator db/migrate/ 20120320213424_create_tweets.rb
- 108. model generator db/migrate/ 20120320213424_create_tweets.rb class CreateTweets < ActiveRecord::Migration def change create_table :tweets do |t| t.string :body t.integer :user_id t.timestamps end end end
- 109. model generator db/migrate/ 20120320213424_create_tweets.rb class CreateTweets < ActiveRecord::Migration def change create_table :tweets do |t| t.string :body t.integer :user_id t.timestamps DBの「手順書」 end end end
- 110. migrate
- 112. 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) ========
- 113. 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) ========
- 114. 動かしてみる
- 119. 設計 User name Tweet body user_id
- 120. 設計 User name body user_id
- 121. 設計 User name
- 122. 設計 User
- 123. 設計 User
- 124. 設計 User Tweet
- 125. 設計 User Tweet
- 126. 設計 User Tweet Tweet
- 127. 設計 User Tweet Tweet
- 128. 設計 User Tweet Tweet Tweet
- 129. 設計 User Tweet Tweet Tweet
- 130. 関連付け
- 132. 関連付け app/models/user.rb class User < ActiveRecord::Base end
- 134. 関連付け app/models/user.rb class User < ActiveRecord::Base has_many :tweets end
- 135. 関連付け app/models/user.rb class User < ActiveRecord::Base has_many :tweets end 追加
- 136. 関連付け
- 138. 関連付け app/models/tweet.rb class Tweet < ActiveRecord::Base end
- 140. 関連付け app/models/tweet.rb class Tweet < ActiveRecord::Base belongs_to :user end
- 141. 関連付け app/models/tweet.rb class Tweet < ActiveRecord::Base belongs_to :user end 追加
- 142. つぶやきを表示
- 145. つぶやきを表示 http://localhost:3000/users/1 この辺につぶやき追加
- 146. つぶやきを表示
- 147. つぶやきを表示 Controller
- 148. つぶやきを表示
- 150. つぶやきを表示 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
- 151. つぶやきを表示 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
- 152. つぶやきを表示 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
- 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 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. つぶやきを表示 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
- 157. つぶやきを表示
- 158. つぶやきを表示 View
- 159. つぶやきを表示
- 161. つぶやきを表示 app/views/users/show.html.erb <p id="notice"><%= notice %></p> <p> <b>Name:</b> <%= @user.name %> </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. つぶやきを表示 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>
- 165. つぶやきを表示
- 168. つぶやく
- 169. つぶやく Controller
- 170. つぶやく
- 172. つぶやく app/controllers/users_controller.rb respond_to do |format| format.html { redirect_to users_url } format.json { head :no_content } end end end
- 173. つぶやく app/controllers/users_controller.rb respond_to do |format| format.html { redirect_to users_url } format.json { head :no_content } end end end 末尾のendの前に新しいメソッドを追加
- 174. つぶやく app/controllers/users_controller.rb respond_to do |format| format.html { redirect_to users_url } format.json { head :no_content } end end end
- 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.' end end
- 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 def tweet @user = User.find(params[:id]) @tweet = @user.tweets.create(:body => params[:body]) redirect_to @user, notice: 'Tweet was successfully updated.' end end 追加
- 178. つぶやく 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.' end end 追加
- 179. つぶやく
- 180. つぶやく View
- 181. つぶやく
- 183. つぶやく app/views/users/show.html.erb <%= 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. つぶやく 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 %>
- 187. つぶやく
- 188. つぶやく config/routes.rb
- 189. つぶやく config/routes.rb Twit::Application.routes.draw do resources :users
- 190. つぶやく config/routes.rb
- 191. つぶやく config/routes.rb Twit::Application.routes.draw do match '/user/:id/tweet' => 'users#tweet', :as => :user_tweet resources :users
- 192. つぶやく config/routes.rb Twit::Application.routes.draw do match '/user/:id/tweet' => 'users#tweet', :as => :user_tweet resources :users 追加
- 193. つぶやく config/routes.rb /user/1/tweetでusers#tweetが呼ばれるようになる Twit::Application.routes.draw do match '/user/:id/tweet' => 'users#tweet', :as => :user_tweet resources :users 追加
- 194. つぶやいてみる
- 198. トップページ
- 203. トップページ
- 205. トップページ config/routes.rb Twit::Application.routes.draw do match '/user/:id/tweet' => 'users#tweet', :as => :user_tweet resources :users
- 207. トップページ config/routes.rb Twit::Application.routes.draw do match '/user/:id/tweet' => 'users#tweet', :as => :user_tweet resources :users root :to => "users#index"
- 208. トップページ config/routes.rb Twit::Application.routes.draw do match '/user/:id/tweet' => 'users#tweet', :as => :user_tweet resources :users root :to => "users#index" 追加
- 209. トップページ
- 213. トップページ
- 215. トップページ 削除 public/index.html
- 216. トップページ
- 219. 次回予告 • トップページにタイムライン表示 • つぶやきを新しい順に並べる • デザインをかっこよく • Ajaxで動きのあるページに • 多分時間が足りません
- 220. ご清聴ありがとうございました
Editor's Notes
- #2: \n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: \n
- #9: \n
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: \n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: \n
- #21: \n
- #22: \n
- #23: \n
- #24: \n
- #25: \n
- #26: \n
- #27: \n
- #28: \n
- #29: \n
- #30: \n
- #31: \n
- #32: \n
- #33: \n
- #34: \n
- #35: \n
- #36: \n
- #37: \n
- #38: \n
- #39: \n
- #40: \n
- #41: \n
- #42: \n
- #43: \n
- #44: \n
- #45: \n
- #46: \n
- #47: \n
- #48: \n
- #49: \n
- #50: \n
- #51: \n
- #52: \n
- #53: \n
- #54: \n
- #55: \n
- #56: \n
- #57: \n
- #58: \n
- #59: \n
- #60: \n
- #61: \n
- #62: \n
- #63: \n
- #64: \n
- #65: \n
- #66: \n
- #67: \n
- #68: \n
- #69: \n
- #70: \n
- #71: \n
- #72: \n
- #73: \n
- #74: \n
- #75: \n
- #76: \n
- #77: \n
- #78: \n
- #79: \n
- #80: \n
- #81: \n
- #82: \n
- #83: \n
- #84: \n
- #85: \n
- #86: \n
- #87: \n
- #88: \n
- #89: \n
- #90: \n
- #91: \n
- #92: \n
- #93: \n
- #94: \n
- #95: \n
- #96: \n
- #97: \n
- #98: \n
- #99: \n
- #100: \n
- #101: \n
- #102: \n
- #103: \n
- #104: \n
- #105: \n
- #106: \n
- #107: \n
- #108: \n
- #109: \n
- #110: \n
- #111: \n
- #112: \n
- #113: \n
- #114: \n
- #115: \n
- #116: \n
- #117: \n
- #118: \n
- #119: \n
- #120: \n
- #121: \n
- #122: \n
- #123: \n
- #124: \n
- #125: \n
- #126: \n
- #127: \n
- #128: \n
- #129: \n
- #130: \n
- #131: \n
- #132: \n
- #133: \n
- #134: \n
- #135: \n
- #136: \n
- #137: \n
- #138: \n
- #139: \n
- #140: \n
- #141: \n
- #142: \n
- #143: \n
- #144: \n
- #145: \n
- #146: \n
- #147: \n
- #148: \n
- #149: \n
- #150: \n
- #151: \n
- #152: \n
- #153: \n
- #154: \n
- #155: \n
- #156: \n
- #157: \n
- #158: \n
- #159: \n
- #160: \n
- #161: \n
- #162: \n
- #163: \n
- #164: \n
- #165: \n
- #166: \n
- #167: \n
- #168: \n
- #169: \n
- #170: \n
- #171: \n
- #172: \n
- #173: \n
- #174: \n
- #175: \n
- #176: \n
- #177: \n
- #178: \n
- #179: \n