Rails基礎講座 part.2

  • 563 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
563
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
8
Comments
0
Likes
3

Embeds 0

No embeds

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. ご清聴ありがとうございました