Step by Step Ruby on Rails

Ruby on Railsで実際にWebサイトを構築する手順をまとめています。

Ruby on Rails Tutorial ホームページにマイクロポストの一覧を表示

「Ruby on Rails Tutorial」のサンプルアプリをAngularJSとBootstrap3を使う形にして作成します。今回は、ホームページにマイクロポストの一覧を表示します。

1)Userモデルにfeedメソッドを追加

user_idが現在のユーザーidと等しいマイクロポスト取得するメソッドを定義します。

$ vi app/models/user.rb

  def feed
    Micropost.where("user_id = ?", id)
  end

2)セッションコントローラにfeedを追加

新規ログインアクション(create)とログイン済みユーザー情報を返すアクション(current_user)にfeedを追加します。

$ vi app/controllers/sessions_controller.rb

  def create
    user = User.find_by(email: session_params[:email].downcase)
    if user && user.authenticate(session_params[:password])
    :
      @user_info = {
        user: user,
        gravatar_url: "https://secure.gravatar.com/avatar/#{gravatar_id}",
        microposts: microposts,
        feed: user.feed
      }
      render json: @user_info, status: :accepted, location: user
    else
  :
  def current_user
  :
    @user_info = {
      user: current_user,
      gravatar_url: "https://secure.gravatar.com/avatar/#{gravatar_id}",
      microposts: microposts,
      feed: current_user.feed
    }
    render json: @user_info, status: :accepted

3)ホームページにfeedの表示を追加

$ vi app/assets/templates/static_pages/home.html.erb

<div ng-controller="HomeCtrl">
  <div ng-show="chkSignin().user.id > 0" class="row">
    <div class="col-sm-4">
   :
    </div>
    <div class="col-sm-8">
      <h3>Micropost Feed</h3>
      <ol class="microposts">
        <li ng-repeat="mp in chkSignin().feed">
          <a href="/users/{\{chkSignin().user.id}}">
            <img alt="{\{chkSignin().user.name}}"
                 src="{\{chkSignin().gravatar_url}}?s=60"
                 class="gravatar"
            />
          </a>
          <a href="/users/{\{chkSignin().user.id}}">{\{chkSignin().user.name}}</a>
          <div>{\{mp.content}}</div>
          <small class="text-muted">Posted {\{mp.created_at | date:'medium'}}</small>
        </li>
      </ol>
    </div>
  </div>