BETA

【Rails】タグの再読み込みボタン(Ajax通信)

投稿日:2018-10-29
最終更新:2018-10-29

個人開発のWebアプリ「まちかどルート。その機能のひとつにおすすめのタグがあります。

右下にある「タグの再読み込み」ボタンを押すとページ遷移なしにタグの一覧だけを読み込みなおします。ユーザーにとって気に入ったタグが出てくるまでボタンを何度も押してもらえたらいいなと思って設置しました。

Ajax通信を利用

Ruby on RailsによるWebアプリ開発に入門してから1ヶ月後くらいに「まちかどルート」のv1.0をリリースしました。そのころAjax通信を使うことによってページ遷移なしにWebページ上の一部の情報を更新できるということを知らなくて、あとで実装したのが上記の「タグの再読み込み」ボタンでした。

index.html.erb

<%= render 'tags' %>

再読み込みをする箇所を部分テンプレート化しています。

_tags.html.erb

<div id="tags_ajax">
    (中略)
    <%= button_to '/posts/tagsreflesh', method: :patch, remote: true, class: "btn btn-sm btn-blue700_rsd mt-2", style: "float: right;", data: { disable_with: "タグ再読み込み中..." } do %>
    <span class="oi oi-loop-circular text-white"></span> タグの再読み込み
    <% end %>
</div>

部分テンプレートのコード(ボタン周辺だけ一部抜粋)です。ボタンのリンク先にremote: trueを指定することでAjax通信となります。

tagsreflesh.js.erb

$("#tags_ajax").replaceWith("<%= escape_javascript(render partial: 'tags', id: 'tags_ajax') %>");

Ajax通信時に読み込ませるコードです。部分テンプレート_tags.html.erbを再読み込みしてその結果をreplaceWithによってページ遷移なしに置き換えます。

routes.rb

patch "posts/tagsreflesh" => "posts#tagsreflesh"

Railsのconfigファイルroutes.rbにこの1行を追記しないとうまく表示されません。

補足

以上がざっくりとした開発の流れです。ひとつずつの工程をもっと丁寧に書きたかったのですが難しいですね。技術用ブログを上手に書けるようスキルアップしたいです。

gem「acts-as-taggable-on」

今回はタグの再読み込みボタンについての記事なので肝心のタグ管理には詳しく触れていません。ちなみにRuby gem「acts-as-taggable-on」を使っています。インターネット上にわかりやすい記事がいくつかあって、とても使いやすいです。じぶんの場合はBootstrap 4と併用しながらタグの色とかをカスタマイズしています。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@west2538onRailsの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!