ここでは、ツイートの表示をよりよくするために以下の修正を行う。
- ツイートを最新順にならべかえる
- ページネーションを追加する
ツイートを最新順に並び替える
現在のPicTweetは、新しく投稿したツイートが１番下に表示されている。
この表示の順番を最新のツイートが一番上に来るように表示させる。
orderメソッド
orderメソッドは、テーブルから取得してきたインスタンスたちを並び替えるメソッドである。
例えば「contents」という名のテーブルがあり、以下のようにContentクラスからallメソッドを利用して全てのレコードを取得してきたとする。
この時、orderメソッドを利用して取得してきたレコードを並び変えることができる。
例
app/controllers/contents_controller.rb
def index @contents = Content.all.order("id DESC") end
allメソッドを利用した場合、通常であればレコードはid順に取得されるが、上記のようにorderメソッドの引数として("id DESC")とすれば、レコードは逆順に並び替えられる。
orderメソッドは引数として("テーブルのカラム名 並び替える順序")という形を取る。
並び替える順序には、ASC(昇順)とDESC(降順)の2種類がある。
問題1：最新のツイートが一番上に来るように表示させましょう
作業ファイル：app/controllers/tweets_controller.rb
ヒント：ツイートが作成された日時は、「created_at」カラムに記録されます。
【 問題1の解答を確認する 】
実際にツイートを投稿して確認してみる
このサンプル画像のURLを使って投稿してみる。
最新順になっていれば以下の画像のようにトップページの一番上に投稿したツイートが表示される。
ページネーションを実装する
ツイートの一覧画面にページネーションを実装して、1ページに表示されるツイートの数を5件にする。
5件以降は次ページを作成して、そこに表示されるようにする。
ページネーション
ページネーションとは長い文章を複数のページに分割して、各ページへのリンクを並べアクセスしやすくすることである。
検索サイトのGoogleなども検索結果の表示にはページネーションを使用している。
例
作業内容
１．Gemをインストールしてサーバーを立ち上げ直す
２．コントローラファイルを編集する
３．ビューファイルを編集する
1.Gemをインストールしてサーバーを立ち上げ直す
ページネーションを実装する際には「kaminari」というGemをインストールして使用する。
またGemをインストールした後はrails sをし直し、サーバーを立ち上げ直す必要がある。
インストールしたGemが反映されるタイミングがサーバーを立てるときだからである。
kaminari
kaminariはRubyのGemの一種である。
このGemをインストールすることによって、簡単にページネーションを実装することができる。
以下の指示に従い、kaminariをインストール
Gem
①Gemfileの最後の行に下記の記述を追記
gem 'kaminari'
②bundle installを実行
ターミナル
$ pwd # ec2-user:~/environment/pictweetと表示されることを確認 $ bundle install #bundle install の実行
③ローカルサーバーを再起動
ターミナル
$ rails s
|
2.コントローラファイルを編集する
1ページに表示されるツイートの情報を5件にするということは、コントローラからビューに送るツイート情報も5件のみになる。
その数を制御するために、kaminariをインストールすると使える2つのメソッドを利用する。
kaminari:pageメソッド
kaminariを導入すると、モデルクラスにpageメソッドが定義される。
このメソッドは、ページネーションにおけるページ数を指定する。
ビューのリクエストの際paramsの中にpageというキーが追加されて、その値がビューで指定したページ番号となる。
なので、pageの引数はparams[:page]となる。
kaminari:perメソッド
perメソッドもpageメソッドと同様、kaminariというgemをインストールすることで利用できるメソッドである。
1ページあたりに表示する件数を指定する。
perメソッドに引数として渡した数字が、ページネーションが実装されたビューで1ページあたりに表示する件数になる。
上記2つのメソッドは、良く以下のように使われる。
例
app/controllers/tweets_controller.rb
変数名 = クラスを利用して取得したレコードのインスタンス.page(params[:page]).per(ここに1ページで表示したい件数を入力)
今回ページネーションを実装したいのはindexアクションのビューであり、コントローラで定義しビューに渡すのはtweetsテーブルのレコードである。
こちらを踏まえた上で、下記の問題に取り組む。
問題2：「page」と「per」メソッドを利用して@tweetsを定義しましょう
作業ファイル：app/controllers/tweets_controller.rb
ヒント：当該ファイルに既にある、@tweetsへ代入している箇所(右辺)を書き換えましょう。orderメソッドの後ろに書き加える形です。1ページあたりに表示する件数は5件にしましょう。
【 問題2の解答を確認する 】
3.ビューファイルを編集する
ページネーションを実装する際にはコントローラだけでなくビューにも編集を加える必要がある。
kaminari:paginateメソッド
ページネーションのリンクを表示したいときに使用するメソッドである。
kaminariをインストールすると利用できる。
paginateメソッドの引数は、コントローラで定義した変数を指定する。
以下の指示に従って、index.html.erbを編集する
app/views/tweets/index.html.erb
<div class="contents row" > <% @tweets.each do |tweet| %> <div class="content_post" style="background-image: url(<%= tweet.image %>);"> <%= simple_format(tweet.text) %> <span class="name"><%= tweet.name %></span> </div> <% end %> <%= paginate(@tweets) %> </div>
これで、ページネーションを実装することができた。
以下の指示に従って、show.html.erbを編集する
一覧画面と同様に、マイページでもページネーションが表示されるようにする。
app/views/users/show.html.erb
<div class="contents row"> <p><%= @nickname %>さんの投稿一覧</p> <% @tweets.each do |tweet| %> <div class="content_post" style="background-image: url(<%= tweet.image %>);"> <%= simple_format(tweet.text) %> <span class="name"><%= tweet.name %></span> </div> <% end %> <%= paginate(@tweets) %> </div>
tweetsテーブルにレコードを６個以上作成する
1ページに表示する最大値を5に設定したので、ページネーションを表示させるにはレコードが6個以上なければならない。
これからページネーションが実装されているか確認をするため、tweetsテーブルのレコード数が6個以下の時はレコードを6個以上作成する。
トップページを開く
下の方に、以下のようにページネーションが表示されていれば成功。
ページネーションが表示されない場合は再度tweetsテーブルにレコードが6つ以上あるか確認する。
要点チェック
