前提・実現したいこと
現在、YouTube Data APIを利用し、指定した動画の、コメント一覧およびコメントに対する返信の一覧を表示するページを実装しました。
返信は各コメントに表示される、「返信を表示する」ボタンを押すとAjaxによって返信一覧が表示されるようにしています。
その非同期通信時にローディングアイコンを表示したいと思い、様々なサイトを参考にして実装を試みたのですが、どれも画面全体にローディングアイコンが表示される方法で、各コメントごとにローディングアイコンを表示させる方法は載っていませんでした。
やりたいのは以下のような、YouTubeのコメント欄のような感じです。
該当のソースコード
- search_controller.rb
class SearchController < ApplicationController def find_comments @video_id = "" @sort = "評価順" if params[:video_id] != "" && params[:video_id] != nil require 'google/apis/youtube_v3' youtube = Google::Apis::YoutubeV3::YouTubeService.new youtube.key = ENV['API_KEY'] next_page_token = nil @video_id = params[:video_id] @sort = params[:sort] if @sort == "評価順" opt = { max_results: 100, order: "relevance", page_token: next_page_token, text_format: 'plainText', video_id: @video_id } else opt = { max_results: 100, page_token: next_page_token, text_format: 'plainText', video_id: @video_id } end @comments = youtube.list_comment_threads(:snippet, opt).items end end def find_reply require 'google/apis/youtube_v3' youtube = Google::Apis::YoutubeV3::YouTubeService.new youtube.key = ENV['API_KEY'] next_page_token = nil @comment_id = params[:comment_id] opt = { max_results: 100, page_token: next_page_token, text_format: 'plainText', parent_id: @comment_id } @replies = youtube.list_comments(:snippet, opt).items end end
- find_comments.html.erb
<%= form_with url: root_path, method: :get, local: true do |f| %> <%= f.text_field :video_id, placeholder: "VIDEO ID", value: @video_id %> <% if @sort == "評価順" %> <%= f.radio_button :sort, :評価順, checked: true %> <% else %> <%= f.radio_button :sort, :評価順 %> <% end %> <%= f.label :sort_評価順, "評価順" %> <% if @sort == "新着順" %> <%= f.radio_button :sort, :新着順, checked: true %> <% else %> <%= f.radio_button :sort, :新着順 %> <% end %> <%= f.label :sort_新着順, "新着順" %> <%= f.submit "検索" %> <% end %> <% if @comments %> <div class="comment_list"> <% @comments.each do |comment| %> <% if comment.snippet.top_level_comment.snippet.text_display =~ /(?:\p{Hiragana}|\p{Katakana}|[一-龠々])/ %> <section class="comment"> <div class="comment_author_profile_image"> <%= image_tag "profile_image_1.jpg", class: "comment_profile_image" %> </div> <div class="comment_main"> <div class="comment_header"> <span><%= comment.snippet.top_level_comment.snippet.author_display_name %></span> <span><%= time_ago_in_words(comment.snippet.top_level_comment.snippet.updated_at) %>前</span> </div> <div class="comment_body"> <spna><%= comment.snippet.top_level_comment.snippet.text_display %></spna> </div> <div class="comment_like_count"> <span>いいね 69</span> </div> <div class="comment_replies" id="comment_replies_<%= comment.id %>"> <% if comment.snippet.total_reply_count > 0 %> <div class="replies_renderer"> <span><%= comment.snippet.total_reply_count %>件の返信を表示</span> <%= link_to "gfdgdf", search_find_reply_path(comment_id: comment.id), remote: :true, class: "hide_link" %> </div> <div class="yyy"> <div class="cv-spinner"> <span class="spinner"></span> </div> </div> <% end %> </div> </div> </section> <% end %> <% end %> </div> <% end %>
- find_reply.js.erb
$("#comment_replies_<%= @comment_id %>").html("<%= j(render 'replies', {replies: @replies, comment_id: @comment_id}) %>");
- _replies.js.erb
<div class="replies_renderer"> <div class="replies_renderer_active"> <span>返信を非表示</span> </div> </div> <% replies.reverse_each do |reply| %> <section class="reply"> <div class="reply_author_profile_image"> <%= image_tag "profile_image_1.jpg", class: "comment_profile_image" %> </div> <div class="comment_main"> <div class="comment_header"> <span><%= reply.snippet.author_display_name %></span> <span><%= time_ago_in_words(reply.snippet.published_at) %>前</span> </div> <div class="comment_body"> <spna><%= reply.snippet.text_display %></spna> </div> <div class="comment_like_count"> <span>いいね <%= reply.snippet.like_count %></span> </div> </div> </section> <% end %>
補足情報(FW/ツールのバージョンなど)
- バーション
ruby:2.5.7
rails:5.2.4
あなたの回答
tips
プレビュー