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

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

ただいまの
回答率

89.10%

Ruby on Rails、 Infinite Scrollとkaminariを使用して無限スクロールの実装について

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 3
  • VIEW 2,474

riamk

score 45

前提・実現したいこと

http://ruby-rails.hatenadiary.com/entry/20141115/1416021886

こちらのサイトを参考にrailsアプリケーションにInfinite Scrollkaminariを使用して無限スクロールの実装をしました。

手順通り1から全て実装してみました。

ですが、最後挙動を確認してみると

このようにページを遷移するリンクが表示されるだけで無限スクロールにはなりませんでした。

このような場合、原因はどこにあるのでしょうか?

どこか間違っている箇所などあれば教えてください。

該当のソースコード

shops_controller.rb

class ShopsController < ApplicationController
  before_action :set_shop, only: [:show, :edit, :update, :destroy]

  # GET /shops
  # GET /shops.json
  def index
    @shops = Shop.page(params[:page]).per(2)
  end

  # GET /shops/1
  # GET /shops/1.json
  def show
  end

  # GET /shops/new
  def new
    @shop = Shop.new
  end

  # GET /shops/1/edit
  def edit
  end

  # POST /shops
  # POST /shops.json
  def create
    @shop = Shop.new(shop_params)

    respond_to do |format|
      if @shop.save
        format.html { redirect_to @shop, notice: 'Shop was successfully created.' }
        format.json { render :show, status: :created, location: @shop }
      else
        format.html { render :new }
        format.json { render json: @shop.errors, status: :unprocessable_entity }
      end
    end
  end

  # PATCH/PUT /shops/1
  # PATCH/PUT /shops/1.json
  def update
    respond_to do |format|
      if @shop.update(shop_params)
        format.html { redirect_to @shop, notice: 'Shop was successfully updated.' }
        format.json { render :show, status: :ok, location: @shop }
      else
        format.html { render :edit }
        format.json { render json: @shop.errors, status: :unprocessable_entity }
      end
    end
  end

  # DELETE /shops/1
  # DELETE /shops/1.json
  def destroy
    @shop.destroy
    respond_to do |format|
      format.html { redirect_to shops_url, notice: 'Shop was successfully destroyed.' }
      format.json { head :no_content }
    end
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_shop
      @shop = Shop.find(params[:id])
    end

    # Never trust parameters from the scary internet, only allow the white list through.
    def shop_params
      params.require(:shop).permit(:name, :zipcode, :address, :tel)
    end
end

index.hetml.erb

<p id="notice"><%= notice %></p>

<h1>Listing Shops</h1>

<table id="shops">
  <thead>
    <tr>
      <th>Name</th>
      <th>Zipcode</th>
      <th>Address</th>
      <th>Tel</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody class="page">
    <%= render @shops %>
  </tbody>
</table>

<br>

<%= link_to 'New Shop', new_shop_path %>

<%= paginate @shops %>

_shop.hetml.erb

<tr class="shop">
  <td><%= shop.name %></td>
  <td><%= shop.zipcode %></td>
  <td><%= shop.address %></td>
  <td><%= shop.tel %></td>
  <td><%= link_to 'Show', shop %></td>
  <td><%= link_to 'Edit', edit_shop_path(shop) %></td>
  <td><%= link_to 'Destroy', shop, method: :delete, data: { confirm: 'Are you sure?' } %></td>
</tr>

index.js.erb

$("#shops").append("<tbody class='page'><%= escape_javascript(render(@posts)) %></tbody>");

shops.coffee

$ ->
  $("#shops .page").infinitescroll
    loading: {
      img:     "http://www.mytreedb.com/uploads/mytreedb/loader/ajax_loader_blue_48.gif"
      msgText: "ロード中..."
    }
    navSelector: "nav.pagination" # selector for the paged navigation (it will be hidden)
    nextSelector: "nav.pagination a[rel=next]" # selector for the NEXT link (to page 2)
    itemSelector: "#shops tr.shop" # selector for all items you'll retrieve

よろしくお願いします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+5

初めまして。

僕も同じようにやってみましたが同じように動きませんでした。
一つ一つ確認したところ、質問者様が参考にされたサイトでJavaScriptのinfinite scrollをダウンロードする場所のリンクが切れているようです。

間違い(リンク切れ)

curl -k -o vendor/assets/javascripts/jquery.infinitescroll.js https://raw.githubusercontent.com/paulirish/infinite-scroll/master/jquery.infinitescroll.js

修正後

curl -k -o vendor/assets/javascripts/jquery.infinitescroll.js https://cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.1.0/jquery.infinitescroll.min.js

ちなみにcurlコマンドの意味は以下のとおりです。

curl -k -o [ここにファイルを保存するよ] [ここからダウンロードしたものを]

今回は[ここからダウンロードしたものを]の部分がリンク切れになっていたので、infinite scrollの呼び出しに失敗していたというわけです!

ちみに、もう一回そのコマンド叩いちゃってると思いますが、もう一回やっても問題ないのでやってみてください。

確認手順としては
①あれ?これ動いてないな。jquery本当に読み込まれてるかな?
macの場合 command + I でchromeのconsoleを開く
イメージ説明

consoleタブが真っ赤でエラーが出てる!
真っ赤な部分のエラー内容は

Uncaught SyntaxError: Unexpected token :      jquery.infinitescroll.self-395408a.js?body:1 

ふむふむ、jquery.infinitescrollでエラーが出てるな、ファイル名クリックしてみてみよう。

イメージ説明

ん?404 NOT FOUNDだ。
なにこれファイルの中身ないじゃん。

curlでダウンロードした先のファイルあるのかな?ダウンロード先をブラウザ見てみよう。
イメージ説明

あれ、ないじゃん。
あーこれ古い記事だからその頃はあったけど、今はもう消されてるんだなぁ。
じゃあ違うところからファイル持ってきてcurlコマンド使っちゃおう!

で、ファイルが有るかどうかを調べて見ました。
完成後のファイルをcloud9に上げているのでよかったらご覧になってください!
完成後ファイル
(もしかしたら会員登録が必要かもしれないです_(:3 」∠ )_)

また、infinite scrollの初期仕様上、スクロールして最下部まで行かないと次のロードが始まりません。
つまり、Windowの縦幅が広く、最初の状態よりも長い幅になっているとinfinite scrollが発生しないかもしれないです。
Windowサイズを縦に小さくして確認してみてください。

お役に立てば幸いです!

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/06/15 15:23

    ご回答ありがとうございます。
    原因の発見の仕方から、解決策、サンプルファイルの提供までして頂きありがとうございます。

    早速試してみたいと思います!
    ありがとうございました!

    キャンセル

0

$("#shops").append()

# ↑こちらでidを指定しているので、まずは以下のように修正してください
# 現在はクラスで発火するようになっているので、これも動かない原因のうちに入るっぽいですね

<tr id="shop">
  <td><%= shop.name %></td>
  <td><%= shop.zipcode %></td>
  <td><%= shop.address %></td>
  <td><%= shop.tel %></td>
  <td><%= link_to 'Show', shop %></td>
  <td><%= link_to 'Edit', edit_shop_path(shop) %></td>
  <td><%= link_to 'Destroy', shop, method: :delete, data: { confirm: 'Are you sure?' } %></td>
</tr>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/06/07 15:36

    ご回答ありがとうございます!

    早速ご指摘頂いたように
    _shop.html.erbファイルの <tr class="shop"> の部分を <tr id="shop"> と修正してみました。

    ですが、表示関は変わりはありませんでした。
    他に修正してみたほうがいい箇所や問題がありそうな部分があればご指摘頂けると嬉しいです。

    キャンセル

  • 2017/06/08 01:31

    記事を見てみたら面白そうだったんで僕もちょこっとやってみたんですけど、先ほどの修正は全く関係ありませんでした、すみません;;
    コピペして試してみた結果なんですけど、index.js.erbが読み込まれていないので、$("#shops")に対してスクロールしたら<tbody>をその都度追加する、つまり無限スクロールの元となる要素が""追加されない""状況になっています
    普段railsはAPIモードでしか使用していないので、どうやってjs.erbを読み込ませればいいのかちょっと分かりかねるので、明日時間があれば調べてわかったらまた回答させていただきますね!

    キャンセル

  • 2017/06/08 13:20

    なるほど。そうだったんですね。
    原因追求していただきありがとうございます。
    私もjs.erbを読み込ませるように試みてみます。
    もしできたら、こちらで情報共有いたします!

    キャンセル

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

  • ただいまの回答率 89.10%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる