【jQuery/AWS】AWS上でRailsアプリケーションをデプロイするとSkipper.jsで導入したスライドショーが表示されない

Question

概要

タイトルでも述べているのですが，AWSのEC2で自作のRailsアプリケーションをデプロイした際に，
Skipper.jsで導入したスライドショーがページ遷移後に表示されないというバグが起こっています．
なぜか，リロードをすると表示されるのですが，原因がわからないので教えていただけると幸いです，
よろしくお願いします．

実装イメージ

ページ遷移後の画面

リロード後の画面

コード

app/views/home/about.html.erb

<div id="container">
  <div id="theTarget">
    <div class="image1"></div>
    <div class="image2"></div>
    <div class="image3"></div>
    <div class="image4"></div>
    <div class="image5"></div>
  </div>
</div>

app/assets/stylesheets/home.scss

.image1 {
  background-image: image-url("test1.jpg");
}
.image2 {
  background-image: image-url("test2.jpg");
}
.image3 {
  background-image: image-url("test3.jpg");
}
.image4 {
  background-image: image-url("test4.jpg");
}
.image5 {
  background-image: image-url("test5.jpg");
}

app/assets/javascripts/application.js

//= require rails-ujs
//= require turbolinks
//= require jquery
//= require bootstrap-sprockets
//= require_tree .

$(function () {
    $('.home-about h1').on('click', function () {
        $(this).toggleClass("h1-clicked");
        // @todo:toggle
        // 指定クラスがあれば，そのクラスを取り除く
        // 指定クラスがなければ，そのクラスを追加する
    });

    $("#theTarget").skippr({
        // スライドショーの変化 ("fade" or "slide")
        transition: 'slide',
        // 変化に係る時間(ミリ秒)
        speed: 1000,
        // easingの種類
        easing: 'easeOutQuart',
        // ナビゲーションの形("block" or "bubble")
        navType: 'block',
        // 子要素の種類("div" or "img")
        childrenElementType: 'div',
        // ナビゲーション矢印の表示(trueで表示)
        arrows: true,
        // スライドショーの自動再生(falseで自動再生なし)
        autoPlay: true,
        // 自動再生時のスライド切替間隔(ミリ秒)
        autoPlayDuration: 3000,
        // キーボードの矢印キーによるスライド送りの設定(trueで有効)
        keyboardOnAlways: true,
        // 一枚目のスライド表示時に戻る矢印を表示するかどうか(falseで非表示)
        hidePrevious: false
    });
});

app/config/environments/production.rb

Rails.application.configure do
  # Settings specified here will take precedence over those in config/application.rb.

  # Code is not reloaded between requests.
  config.cache_classes = true

  # Eager load code on boot. This eager loads most of Rails and
  # your application in memory, allowing both threaded web servers
  # and those relying on copy on write to perform better.
  # Rake tasks automatically ignore this option for performance.
  config.eager_load = true

  # Full error reports are disabled and caching is turned on.
  config.consider_all_requests_local       = false
  config.action_controller.perform_caching = true

  # Ensures that a master key has been made available in either ENV["RAILS_MASTER_KEY"]
  # or in config/master.key. This key is used to decrypt credentials (and other encrypted files).
  # config.require_master_key = true

  # Disable serving static files from the `/public` folder by default since
  # Apache or NGINX already handles this.
  config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?

  # Compress JavaScripts and CSS.
  config.assets.js_compressor = :uglifier
  # config.assets.css_compressor = :sass

  # Do not fallback to assets pipeline if a precompiled asset is missed.
  config.assets.compile = false

  # `config.assets.precompile` and `config.assets.version` have moved to config/initializers/assets.rb

  # Enable serving of images, stylesheets, and JavaScripts from an asset server.
  # config.action_controller.asset_host = 'http://assets.example.com'

  # Specifies the header that your server uses for sending files.
  # config.action_dispatch.x_sendfile_header = 'X-Sendfile' # for Apache
  # config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect' # for NGINX

  # Store uploaded files on the local file system (see config/storage.yml for options)
  config.active_storage.service = :local

  # Mount Action Cable outside main process or domain
  # config.action_cable.mount_path = nil
  # config.action_cable.url = 'wss://example.com/cable'
  # config.action_cable.allowed_request_origins = [ 'http://example.com', /http://example.*/ ]

  # Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies.
  # config.force_ssl = true

  # Use the lowest log level to ensure availability of diagnostic information
  # when problems arise.
  config.log_level = :debug

  # Prepend all log lines with the following tags.
  config.log_tags = [ :request_id ]

  # Use a different cache store in production.
  # config.cache_store = :mem_cache_store

  # Use a real queuing backend for Active Job (and separate queues per environment)
  # config.active_job.queue_adapter     = :resque
  # config.active_job.queue_name_prefix = "FRS_#{Rails.env}"

  config.action_mailer.perform_caching = false

  # Ignore bad email addresses and do not raise email delivery errors.
  # Set this to true and configure the email server for immediate delivery to raise delivery errors.
  # config.action_mailer.raise_delivery_errors = false

  # Enable locale fallbacks for I18n (makes lookups for any locale fall back to
  # the I18n.default_locale when a translation cannot be found).
  config.i18n.fallbacks = true

  # Send deprecation notices to registered listeners.
  config.active_support.deprecation = :notify

  # Use default logging formatter so that PID and timestamp are not suppressed.
  config.log_formatter = ::Logger::Formatter.new

  # Use a different logger for distributed setups.
  # require 'syslog/logger'
  # config.logger = ActiveSupport::TaggedLogging.new(Syslog::Logger.new 'app-name')

  if ENV["RAILS_LOG_TO_STDOUT"].present?
    logger           = ActiveSupport::Logger.new(STDOUT)
    logger.formatter = config.log_formatter
    config.logger    = ActiveSupport::TaggedLogging.new(logger)
  end

  # Do not dump schema after migrations.
  config.active_record.dump_schema_after_migration = false
end

Answer 1

turbolinks が有効になっていたら無効にしてみてはいかがでしょう。

参考 https://qiita.com/ryico/items/157b0f4288ce605de2a2

Comments

[Elmogawa]

ありがとうございます！！
参考にさせて戴きます！