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

Rails基礎講座 part.2

on

  • 799 views

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

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

Statistics

Views

Total Views
799
Views on SlideShare
784
Embed Views
15

Actions

Likes
3
Downloads
8
Comments
0

1 Embed 15

http://coderwall.com 15

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Rails基礎講座 part.2 Rails基礎講座 part.2 Presentation Transcript

  • Rails基礎講座 2012/03/21
  • 前回のあらすじ• Ruby on Rails• Rubyをインストールしてみる• Rubyの基礎
  • おさらい• Railsとは?• MVCアーキテクチャ• 変数・条件分岐・ループ• レシーバとメソッドとメソッド定義 View slide
  • MVC? View slide
  • MVC?Model
  • MVC? ModelView
  • MVC? ModelView Controller
  • MVC? ModelView Controller User
  • MVC? ModelView Controller User
  • MVC? ModelView Controller User
  • MVC? ModelView Controller User
  • MVC? ModelView Controller User
  • MVC? ModelView Controller User
  • MVC? ModelView Controller User
  • Railsの特長• ルールに沿って書いていけばWebアプ リケーションができる• =レールに乗る(on Rails)
  • Railsの特長
  • インストール
  • インストール
  • インストール
  • インストール> gem install rails
  • インストール> 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
  • インストール
  • インストール> rails -v
  • インストール> rails -vRails 3.2.2
  • 何を作る?
  • 何を作る?
  • 何を作る? twit
  • 何を作る? twitマイクロブログ的なアレ
  • 何を作る? twit
  • 何を作る? twit[名]1 ((略式))ばか, まぬけ.2 あざけり, 愚弄(ぐろう).
  • 必要なもの
  • 必要なもの• 統合開発環境• エディタ• ターミナル• ブラウザ
  • ※画面は開発中のものです
  • ※画面は開発中のものです ターミナル
  • ※画面は開発中のものです ターミナル
  • ※画面は開発中のものですエディタ ターミナル
  • ※画面は開発中のものですエディタ ターミナル
  • ※画面は開発中のものですエディタ ターミナル ブラウザ
  • 完成品
  • 完成品https://github.com/nysalor/twit/commits/master
  • 完成品https://github.com/nysalor/twit/commits/master
  • 完成品https://github.com/nysalor/twit/commits/master 下から順番
  • 完成品https://github.com/nysalor/twit/commits/master 下から順番
  • 開発開始!
  • 開発開始!> rails new twit -T
  • 開発開始!> rails new twit -Tcreatecreate README.rdoc...run bundle install...Your bundle is complete! Use `bundleshow [gemname]` to see where abundled gem is installed.
  • ディレクトリ
  • ディレクトリ Model
  • ディレクトリ ModelView
  • ディレクトリ ModelView Controller
  • ディレクトリ Model ControllerView
  • ディレクトリ ModelController View
  • ディレクトリ ModelController View
  • ディレクトリ ModelController View
  • ディレクトリ > cd twit ModelController View
  • ディレクトリ ModelController View
  • ディレクトリ twit/ ModelController View
  • ディレクトリ twit/ Model app/modelsController View
  • ディレクトリ twit/ Model app/modelsController app/controllers View
  • ディレクトリ twit/ Model app/modelsController app/controllers View app/views
  • ディレクトリ twit/ app/modelsController app/controllers View app/views
  • ディレクトリ twit/ app/models app/controllersView app/views
  • ディレクトリ twit/ app/models app/controllers app/views
  • ディレクトリ twit/ app/models app/controllers app/views
  • ディレクトリ twit/config app/models app/controllers app/views
  • ディレクトリ twit/config app/models db app/controllers app/views
  • ディレクトリ twit/config app/models db app/controllerspublic app/views
  • ディレクトリ twit/
  • ディレクトリ twit/以後はずっとこのディレクトリ
  • サーバ起動
  • サーバ起動> cd twit> rails server
  • サーバ起動> cd twit> rails serverhttp://localhost:3000
  • サーバ起動http://localhost:3000
  • サーバ起動
  • サーバ起動
  • 設計
  • 設計Model
  • 設計
  • 設計User
  • 設計UserTweet
  • 設計User nameTweet
  • 設計User nameTweet body user_id
  • 設計User name body user_id
  • 設計User name
  • scaffold
  • scaffold> rails generate scaffold User name:string
  • 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
  • scaffold ModelController View
  • scaffold Model app/models/user.rbController View
  • scaffold Model app/models/user.rb app/controllers/Controller users_controller.rb View
  • scaffold Model app/models/user.rb app/controllers/Controller users_controller.rb app/views/users/ View index.html.erb ...
  • scaffold
  • scaffold db/migrate/20120320181856_create_users.rb
  • scaffold db/migrate/ 20120320181856_create_users.rbclass CreateUsers < ActiveRecord::Migration  def change    create_table :users do |t|      t.string :name      t.timestamps    end  endend
  • 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
  • 設計User nameTweet body user_id
  • 設計 nameTweet body user_id
  • 設計Tweet body user_id
  • scaffold
  • scaffold
  • scaffold> rails generate model Tweet body:stringuser_id:integer
  • scaffold> rails generate model Tweet body:stringuser_id:integerinvoke active_recordcreate db/migrate/ 20120320213424_create_tweets.rbcreate app/models/tweet.rb
  • model generatorModel
  • model generatorModel app/models/tweet.rb
  • model generator
  • model generator db/migrate/20120320213424_create_tweets.rb
  • 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
  • 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
  • migrate
  • migrate> rake db:migrate
  • 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) ========
  • 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) ========
  • 動かしてみる
  • 動かしてみるhttp://localhost:3000/users/
  • 動かしてみるhttp://localhost:3000/users/
  • 動かしてみるhttp://localhost:3000/users/
  • 動かしてみるhttp://localhost:3000/users/
  • 設計User nameTweet body user_id
  • 設計User name body user_id
  • 設計User name
  • 設計User
  • 設計User
  • 設計 UserTweet
  • 設計 UserTweet
  • 設計 UserTweet Tweet
  • 設計 UserTweet Tweet
  • 設計 UserTweet Tweet Tweet
  • 設計 UserTweet Tweet Tweet
  • 関連付け
  • 関連付けapp/models/user.rb
  • 関連付け app/models/user.rbclass User < ActiveRecord::Baseend
  • 関連付けapp/models/user.rb
  • 関連付け app/models/user.rbclass User < ActiveRecord::Base  has_many :tweetsend
  • 関連付け app/models/user.rbclass User < ActiveRecord::Base  has_many :tweetsend 追加
  • 関連付け
  • 関連付けapp/models/tweet.rb
  • 関連付け app/models/tweet.rbclass Tweet < ActiveRecord::Baseend
  • 関連付けapp/models/tweet.rb
  • 関連付け app/models/tweet.rbclass Tweet < ActiveRecord::Base  belongs_to :userend
  • 関連付け app/models/tweet.rbclass Tweet < ActiveRecord::Base  belongs_to :userend 追加
  • つぶやきを表示
  • つぶやきを表示http://localhost:3000/users/1
  • つぶやきを表示http://localhost:3000/users/1
  • つぶやきを表示http://localhost:3000/users/1 この辺につぶやき追加
  • つぶやきを表示
  • つぶやきを表示 Controller
  • つぶやきを表示
  • つぶやきを表示app/controllers/users_controller.rb
  • つぶやきを表示 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
  • つぶやきを表示 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
  • つぶやきを表示 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
  • つぶやきを表示app/controllers/users_controller.rb
  • つぶやきを表示 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
  • つぶやきを表示 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
  • つぶやきを表示 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
  • つぶやきを表示
  • つぶやきを表示 View
  • つぶやきを表示
  • つぶやきを表示app/views/users/show.html.erb
  • つぶやきを表示 app/views/users/show.html.erb<p id="notice"><%= notice %></p><p>  <b>Name:</b>  <%= @user.name %></p>
  • つぶやきを表示app/views/users/show.html.erb
  • つぶやきを表示 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>
  • つぶやきを表示 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>
  • つぶやきを表示
  • つぶやきを表示http://localhost:3000/users/1
  • つぶやきを表示http://localhost:3000/users/1
  • つぶやく
  • つぶやくController
  • つぶやく
  • つぶやくapp/controllers/users_controller.rb
  • つぶやく app/controllers/users_controller.rb    respond_to do |format|      format.html { redirect_to users_url }      format.json { head :no_content }    end  endend
  • つぶやく app/controllers/users_controller.rb    respond_to do |format|      format.html { redirect_to users_url }      format.json { head :no_content }    end  endend 末尾のendの前に新しいメソッドを追加
  • つぶやく app/controllers/users_controller.rb    respond_to do |format|      format.html { redirect_to users_url }      format.json { head :no_content }    end  endend
  • つぶやくapp/controllers/users_controller.rb
  • つぶやく 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
  • つぶやく 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 追加
  • つぶやく 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 追加
  • つぶやく
  • つぶやく View
  • つぶやく
  • つぶやくapp/views/users/show.html.erb
  • つぶやく app/views/users/show.html.erb<%= link_to Edit, edit_user_path(@user) %> |<%= link_to Back, users_path %>
  • つぶやくapp/views/users/show.html.erb
  • つぶやく 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 %>
  • つぶやく 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 %>
  • つぶやく
  • つぶやくconfig/routes.rb
  • つぶやく config/routes.rbTwit::Application.routes.draw do  resources :users
  • つぶやくconfig/routes.rb
  • つぶやく config/routes.rbTwit::Application.routes.draw do  match /user/:id/tweet => users#tweet, :as => :user_tweet  resources :users
  • つぶやく config/routes.rbTwit::Application.routes.draw do  match /user/:id/tweet => users#tweet, :as => :user_tweet  resources :users 追加
  • つぶやく config/routes.rb/user/1/tweetでusers#tweetが呼ばれるようになる Twit::Application.routes.draw do   match /user/:id/tweet => users#tweet, :as => :user_tweet   resources :users 追加
  • つぶやいてみる
  • つぶやいてみるhttp://localhost:3000/users/1
  • つぶやいてみるhttp://localhost:3000/users/1
  • つぶやいてみるhttp://localhost:3000/users/1
  • トップページ
  • トップページhttp://localhost:3000/
  • トップページhttp://localhost:3000/
  • トップページhttp://localhost:3000/
  • トップページhttp://localhost:3000/
  • トップページ
  • トップページ config/routes.rb
  • トップページ config/routes.rbTwit::Application.routes.draw do  match /user/:id/tweet => users#tweet, :as => :user_tweet  resources :users
  • トップページ config/routes.rb
  • トップページ config/routes.rbTwit::Application.routes.draw do  match /user/:id/tweet => users#tweet, :as => :user_tweet  resources :users  root :to => "users#index"
  • トップページ config/routes.rbTwit::Application.routes.draw do  match /user/:id/tweet => users#tweet, :as => :user_tweet  resources :users  root :to => "users#index" 追加
  • トップページ
  • トップページhttp://localhost:3000/
  • トップページhttp://localhost:3000/
  • トップページhttp://localhost:3000/???
  • トップページ
  • トップページ public/index.html
  • トップページ 削除 public/index.html
  • トップページ
  • トップページhttp://localhost:3000/
  • トップページhttp://localhost:3000/
  • 次回予告• トップページにタイムライン表示• つぶやきを新しい順に並べる• デザインをかっこよく• Ajaxで動きのあるページに• 多分時間が足りません
  • ご清聴ありがとうございました