⑧投稿した日記の一覧を表示

この章でのゴール

・投稿した日記の一覧を、トップページで閲覧できるようにする

投稿した日記の一覧を表示

この章では、投稿した日記の一覧を表示する機能を実装していきます。

完成イメージは下記です。

トップページの修正

まずは、投稿した日記を表示するように、トップページを修正します。

app/views/pages/index.html.erbを開き、以下の通り保存します。

<div class="container">
  <div class="row">
    <% if current_user %>
      <div class="col-md-10 col-md-offset-1 text-center">
        <h3>一覧</h3>
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>No</th>
              <th></th>
              <th>タイトル</th>
              <th>内容</th>
            </tr>
          </thead>
          <tbody>
            <% @posts.each do |post| %>
              <tr>
                <td><%= post.id %></td>
                <td><%= image_tag post.image.url, class: 'thum_image' %></td>
                <td><%= post.title %></td>
                <td><%= post.description %></td>
              </tr>
            <% end %>
          </tbody>
        </table>

        <%= paginate @posts %>

      </div>
    <% else %>
      <div class="login col-md-4 col-md-offset-4 text-center">
        <h3>TOPページ</h3>
        <p>以下から選択してください。</p>
        <%= link_to 'ログイン', login_path, class: 'btn btn-primary btn-block btn-large' %>
        <%= link_to 'ユーザ登録', new_user_path, class: 'btn btn-default btn-block btn-large' %>
      </div>
    <% end %>
  </div>
</div>

 

if current_userの中に、新たなコードを埋め込むことで、ログインしている場合のみ、記事の一覧を表示するという制御が可能です。

ページネーションを追加

次に、app/controllers/pages_controller.rbを開き、以下の通り保存します。

class PagesController < ApplicationController
  PER = 5

  def index
    @posts = Post.where(user: current_user).page(params[:page]).per(PER)
  end
end

 

.page(params[:page]).per(PER)は、ページネーションという機能です。

ページネーションとは、1ページに決まった件数のデータを表示し、それ以上のデータを表示する場合は、次のページに表示するという機能です。

今回は、1ページに5件を表示し、6件目からは次のページに表示しています。

ページネーションを利用するには、kaminariというgemを利用する必要があります。

./Gemfileを開いて、以下のコードを追加します。

# ページネーションを追加
gem 'kaminari', '~> 0.17.0'

 

追加したら、bundle installします。

$ bundle install
The dependency tzinfo-data (>= 0) will be unused by any of the platforms Bundler is installing for. Bundler is installing for ruby but the dependency is only for x86-mingw32, x86-mswin32, x64-mingw32, java. To add those platforms to the bundle, run `bundle lock --add-platform x86-mingw32 x86-mswin32 x64-mingw32 java`.
Using rake 12.3.3
Using concurrent-ruby 1.1.5
・
・
・
Using uglifier 4.1.20
Using web-console 3.7.0
Bundle complete! 25 Gemfile dependencies, 94 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.

 

また、トップページのレイアウトを修正します。

app/assets/stylesheets/custom.scssを開き、以下の通り保存します。

html {
  width: 100%;
}

body {
  width: 100%;
  background-color: #EEEEEE;
}

.login {
  top: 200px;
  height: 200px;
  background-color: white;
}

#logo {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
}

#logo:hover {
  color: #fff;
  text-decoration: none;
}

.thum_image {
  max-height: 100px;
}

 

次に、サーバを再起動しましょう。

(サーバの再起動)

$ rails s
/Users/alto/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/railties-5.2.3/lib/rails/app_loader.rb:53: warning: Insecure world writable dir /usr/local/bin in PATH, mode 040777
=> Booting Puma
=> Rails 5.2.3 application starting in development
=> Run `rails server -h` for more startup options
Puma starting in single mode...
* Version 3.12.1 (ruby 2.5.0-p0), codename: Llamas in Pajamas
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://localhost:3000
Use Ctrl-C to stop

 

では、日記の新規投稿を6件以上してみましょう。

画像の通り、ページネーションが表示されていればOKです。

ページネーションの日本語化

ページネーションは、デフォルトでは英語なので、日本語化していきましょう。

以下のコマンドで、日本語の設定ファイルを作成します。

$ touch config/locales/kaminari_ja.yml

 

作成したら、config/locales/kaminari_ja.ymlを開き、以下の通り保存します。

ja:
  views:
    pagination:
      first: "&laquo; 最初のページへ"
      last: "最後のページへ &raquo;"
      previous: "&lsaquo; 前のページ"
      next: "次のページ &rsaquo;"
      truncate: "..."
  helpers:
    page_entries_info:
      one_page:
        display_entries:
          zero: ""
          one: "<strong>1-1</strong>/1件中"
          other: "<strong>1-%{count}</strong>/%{count}件中"
      more_pages:
        display_entries: "<strong>%{first}-%{last}</strong>/%{total}件中"

 

また、config/application.rbを開き、以下コードを追加します。

config.i18n.default_locale = :ja

 

これで、先ほど設定した日本語の設定ファイルをデフォルトで読むようになります。

ここまで実装できたら、サーバを再起動します。

(サーバの再起動)

$ rails s
/Users/alto/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/railties-5.2.3/lib/rails/app_loader.rb:53: warning: Insecure world writable dir /usr/local/bin in PATH, mode 040777
=> Booting Puma
=> Rails 5.2.3 application starting in development
=> Run `rails server -h` for more startup options
Puma starting in single mode...
* Version 3.12.1 (ruby 2.5.0-p0), codename: Llamas in Pajamas
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://localhost:3000
Use Ctrl-C to stop

 

すると、画像のように、日本語化されていることが確認できます。

ここまで完成したら、githubへプッシュしておきましょう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA