質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.43%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

0回答

1067閲覧

非同期通信時にローディングアイコンを表示したい。

YYkanagawa

総合スコア16

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2021/01/30 08:56

前提・実現したいこと

現在、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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.43%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問