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

1. Rails基礎講座
2012/03/21

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. インストール

23. インストール
> rails -v

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

73. サーバ起動
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

104. model generator
Model

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

111. migrate
> rake db: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. 動かしてみる

115. 動かしてみる
http://localhost:3000/users/

116. 動かしてみる
http://localhost:3000/users/

117. 動かしてみる
http://localhost:3000/users/

118. 動かしてみる
http://localhost:3000/users/

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. 関連付け

131. 関連付け
app/models/user.rb

132. 関連付け
app/models/user.rb
class User < ActiveRecord::Base
end

133. 関連付け
app/models/user.rb

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. 関連付け

137. 関連付け
app/models/tweet.rb

138. 関連付け
app/models/tweet.rb
class Tweet < ActiveRecord::Base
end

139. 関連付け
app/models/tweet.rb

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. つぶやきを表示

143. つぶやきを表示
http://localhost:3000/users/1

144. つぶやきを表示
http://localhost:3000/users/1

145. つぶやきを表示
http://localhost:3000/users/1
この辺につぶやき追加

146. つぶやきを表示

147. つぶやきを表示
Controller

148. つぶやきを表示

149. つぶやきを表示
app/controllers/users_controller.rb

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

153. つぶやきを表示
app/controllers/users_controller.rb

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. つぶやきを表示

160. つぶやきを表示
app/views/users/show.html.erb

161. つぶやきを表示
app/views/users/show.html.erb
<p id="notice"><%= notice %></p>
<p>
<b>Name:</b>
<%= @user.name %>
</p>

162. つぶやきを表示
app/views/users/show.html.erb

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. つぶやきを表示

166. つぶやきを表示
http://localhost:3000/users/1

167. つぶやきを表示
http://localhost:3000/users/1

168. つぶやく

169. つぶやく
Controller

170. つぶやく

171. つぶやく
app/controllers/users_controller.rb

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

175. つぶやく
app/controllers/users_controller.rb

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. つぶやく

182. つぶやく
app/views/users/show.html.erb

183. つぶやく
app/views/users/show.html.erb
<%= link_to 'Edit', edit_user_path(@user) %> |
<%= link_to 'Back', users_path %>

184. つぶやく
app/views/users/show.html.erb

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. つぶやいてみる

195. つぶやいてみる
http://localhost:3000/users/1

196. つぶやいてみる
http://localhost:3000/users/1

197. つぶやいてみる
http://localhost:3000/users/1

198. トップページ

199. トップページ
http://localhost:3000/

200. トップページ
http://localhost:3000/

201. トップページ
http://localhost:3000/

202. トップページ
http://localhost:3000/

203. トップページ

204. トップページ
config/routes.rb

205. トップページ
config/routes.rb
Twit::Application.routes.draw do
match '/user/:id/tweet' => 'users#tweet', :as => :user_tweet
resources :users

206. トップページ
config/routes.rb

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. トップページ

210. トップページ
http://localhost:3000/

211. トップページ
http://localhost:3000/

212. トップページ
http://localhost:3000/
？？？

213. トップページ

214. トップページ
public/index.html

215. トップページ
削除
public/index.html

216. トップページ

217. トップページ
http://localhost:3000/

218. トップページ
http://localhost:3000/

219. 次回予告
• トップページにタイムライン表示
• つぶやきを新しい順に並べる
• デザインをかっこよく
• Ajaxで動きのあるページに
• 多分時間が足りません

220. ご清聴ありがとうございました