【Rails】タイムラインの「つづきを見る」ボタン(Ajax通信)

公開日:2018-11-03
最終更新:2018-11-03

個人開発のWebアプリ「まちかどルートでは、みんなのつぶやきが流れるタイムラインに「つづきを見る」ボタンを設置しています。

この「つづきを見る」ボタンを押すと、文字どおりページ遷移なしに続きが表示されます。これを実現するのに下記のような手順を踏みました。

Gemfile

gem 'kaminari'

kaminariは定番のページネーション系gemのようで多くの参考文献をインターネットで見つけることができます。いつものように bundle install で開発環境にインストールしてから初期設定を済ませます。

post.rb

default_scope -> { order(created_at: :desc) }
paginates_per 20

modelの post.rb には最近の投稿から順番に表示するための order(created_at: :desc) と、一度に表示する投稿の数 paginates_per を設定しています。

posts_controller.rb

def index
    @posts = Post.page(params[:page]).per(20)
end

controllerの posts_controller.rb ではタイムライン表示のアクション index にて、全件ではなく20件ずつ投稿を読み込ませるためのコードを書いてあります。

index.html.erb

<div id="items">
<%= render partial: 'posts', locals: { post: @posts } %>
</div>

<%= link_to_next_page @posts, 'つづきを見る', remote: true, id: 'more_link' %>

タイムライン表示のview index.html.erb では続きを表示させるところを render を使って部分テンプレート化しています。そして「つづきを見る」ボタンの部分にはkaminariのメソッド link_to_next_page を使います。さらに remote: true によってAjax通信を可能とし、ページ遷移なしで続きが表示されるようになります。

index.js.erb

$("#items").append("<%= escape_javascript(render partial: 'posts', locals: { post: @posts }) %>");
$("#more_link").replaceWith("<%= escape_javascript(link_to_next_page(@posts, 'つづきを見る', remote: true, id: 'more_link')) %>");

Ajax通信で読み込ませる index.js.erb には上記2行を書きました。1行目のコードによって続きの投稿を読み込ませます。すでに表示されている投稿に追記する形になるので append を指定します。そして2行目のコードによって「つづきを見る」ボタンをタイムラインの最後に付け足します。

補足

以上のようなかたちでタイムラインに「つづきを見る」ボタンを実装しました。それまではこのスクリーンショットのようにkaminariの標準機能のみの状態でした。

でもちょっとした工夫でタイムラインらしくできるんですね。ほかにも、わざわざ「つづきを見る」ボタンを押さなくてもスクロールに反応して自動的に続きを読み込ませることも可能みたいです。これからも必要に応じて少しずつ学んでいこうと思います。

記事が少しでもいいなと思ったらクラップを送ってみよう!
18
+1
@west2538onRailsの技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする