麻布十番で働くデータ分析者のブログ

グロースハック、プログラミング、データ分析の色々を発信します

ActionController::RoutingError (No route matches [GET] "/images/bx_loader.gif"): の対処法

f:id:nimi0370376:20171114235245p:plain

Ruby on RailsjQueryプラグインを利用している時に下記のようなエラーが出ることがあります。

ActionController::RoutingError (No route matches [GET] "/assets/app/assets/images/bx_loader.gif"):
  
actionpack (5.0.6) lib/action_dispatch/middleware/debug_exceptions.rb:53:in `call'
web-console (3.5.1) lib/web_console/middleware.rb:135:in `call_app'
web-console (3.5.1) lib/web_console/middleware.rb:28:in `block in call'
web-console (3.5.1) lib/web_console/middleware.rb:18:in `catch'
web-console (3.5.1) lib/web_console/middleware.rb:18:in `call'
actionpack (5.0.6) lib/action_dispatch/middleware/show_exceptions.rb:31:in `call'
railties (5.0.6) lib/rails/rack/logger.rb:36:in `call_app'
railties (5.0.6) lib/rails/rack/logger.rb:24:in `block in call'
activesupport (5.0.6) lib/active_support/tagged_logging.rb:69:in `block in tagged'
activesupport (5.0.6) lib/active_support/tagged_logging.rb:26:in `tagged'
activesupport (5.0.6) lib/active_support/tagged_logging.rb:69:in `tagged'
railties (5.0.6) lib/rails/rack/logger.rb:24:in `call'
sprockets-rails (3.2.1) lib/sprockets/rails/quiet_assets.rb:11:in `block in call'
activesupport (5.0.6) lib/active_support/logger_silence.rb:20:in `silence'
activesupport (5.0.6) lib/active_support/logger.rb:63:in `block (3 levels) in broadcast'
activesupport (5.0.6) lib/active_support/logger_silence.rb:20:in `silence'
activesupport (5.0.6) lib/active_support/logger.rb:61:in `block (2 levels) in broadcast'
sprockets-rails (3.2.1) lib/sprockets/rails/quiet_assets.rb:11:in `call'
actionpack (5.0.6) lib/action_dispatch/middleware/request_id.rb:24:in `call'
rack (2.0.3) lib/rack/method_override.rb:22:in `call'
rack (2.0.3) lib/rack/runtime.rb:22:in `call'
activesupport (5.0.6) lib/active_support/cache/strategy/local_cache_middleware.rb:28:in `call'
actionpack (5.0.6) lib/action_dispatch/middleware/executor.rb:12:in `call'
actionpack (5.0.6) lib/action_dispatch/middleware/static.rb:136:in `call'
rack (2.0.3) lib/rack/sendfile.rb:111:in `call'
railties (5.0.6) lib/rails/engine.rb:522:in `call'
puma (3.10.0) lib/puma/configuration.rb:225:in `call'
puma (3.10.0) lib/puma/server.rb:605:in `handle_request'
puma (3.10.0) lib/puma/server.rb:437:in `process_client'
puma (3.10.0) lib/puma/server.rb:301:in `block in run'
puma (3.10.0) lib/puma/thread_pool.rb:120:in `block in spawn_thread'
  
ActionController::RoutingError (No route matches [GET] "/assets/app/assets/images/controls.png"):
  
actionpack (5.0.6) lib/action_dispatch/middleware/debug_exceptions.rb:53:in `call'
web-console (3.5.1) lib/web_console/middleware.rb:135:in `call_app'
web-console (3.5.1) lib/web_console/middleware.rb:28:in `block in call'
web-console (3.5.1) lib/web_console/middleware.rb:18:in `catch'
web-console (3.5.1) lib/web_console/middleware.rb:18:in `call'
actionpack (5.0.6) lib/action_dispatch/middleware/show_exceptions.rb:31:in `call'
railties (5.0.6) lib/rails/rack/logger.rb:36:in `call_app'
railties (5.0.6) lib/rails/rack/logger.rb:24:in `block in call'
activesupport (5.0.6) lib/active_support/tagged_logging.rb:69:in `block in tagged'
activesupport (5.0.6) lib/active_support/tagged_logging.rb:26:in `tagged'
activesupport (5.0.6) lib/active_support/tagged_logging.rb:69:in `tagged'
railties (5.0.6) lib/rails/rack/logger.rb:24:in `call'
sprockets-rails (3.2.1) lib/sprockets/rails/quiet_assets.rb:11:in `block in call'
activesupport (5.0.6) lib/active_support/logger_silence.rb:20:in `silence'
activesupport (5.0.6) lib/active_support/logger.rb:63:in `block (3 levels) in broadcast'
activesupport (5.0.6) lib/active_support/logger_silence.rb:20:in `silence'
activesupport (5.0.6) lib/active_support/logger.rb:61:in `block (2 levels) in broadcast'
sprockets-rails (3.2.1) lib/sprockets/rails/quiet_assets.rb:11:in `call'
actionpack (5.0.6) lib/action_dispatch/middleware/request_id.rb:24:in `call'
rack (2.0.3) lib/rack/method_override.rb:22:in `call'
rack (2.0.3) lib/rack/runtime.rb:22:in `call'
activesupport (5.0.6) lib/active_support/cache/strategy/local_cache_middleware.rb:28:in `call'
actionpack (5.0.6) lib/action_dispatch/middleware/executor.rb:12:in `call'
actionpack (5.0.6) lib/action_dispatch/middleware/static.rb:136:in `call'
rack (2.0.3) lib/rack/sendfile.rb:111:in `call'
railties (5.0.6) lib/rails/engine.rb:522:in `call'
puma (3.10.0) lib/puma/configuration.rb:225:in `call'
puma (3.10.0) lib/puma/server.rb:605:in `handle_request'
puma (3.10.0) lib/puma/server.rb:437:in `process_client'
puma (3.10.0) lib/puma/server.rb:301:in `block in run'
puma (3.10.0) lib/puma/thread_pool.rb:120:in `block in spawn_thread'

上記のエラーが出たときの対処法がなかったので、残しておきます。

jquery.bxslider.scssの設定を変更

実は上記のエラーはRails4以前だと出現しませんでした。 Rails4以降のscssの記法が変更になったため、Rails自体が画像を読み込まないという状態です。

bxslider付属のcontrols.pngとbx_loader.gifをapp/assets/imagesに入れたら下記の部分の記述を変更します。

変更前

/* LOADER */
.bx-wrapper .bx-loading {
  min-height: 50px;
  background: url ('images/bx_loader.gif') center center no-repeat #ffffff;;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
}

変更後

/* LOADER */
.bx-wrapper .bx-loading {
  min-height: 50px;
  background-image: image-url('bx_loader.gif') center center no-repeat #ffffff;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
}

変更前

/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev {
  left: 10px;
  background: url('images/controls.png') no-repeat 0 -32px;
}
.bx-wrapper .bx-prev:hover,
.bx-wrapper .bx-prev:focus {
  background-position: 0 0;
}
.bx-wrapper .bx-next {
  right: 10px;
  background: url('images/controls.png') no-repeat -43px -32px;
}

変更後

/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev {
  left: 10px;
  background-image: image-url('controls.png') no-repeat 0 -32px;
}
.bx-wrapper .bx-prev:hover,
.bx-wrapper .bx-prev:focus {
  background-position: 0 0;
}
.bx-wrapper .bx-next {
  right: 10px;
  background-image: image-url('controls.png') no-repeat -43px -32px;
}

変更前

.bx-wrapper .bx-controls-auto .bx-start {
  display: block;
  text-indent: -9999px;
  width: 10px;
  height: 11px;
  outline: 0;
  background: url('images/controls.png') -86px -11px no-repeat;
  margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-stop {
  display: block;
  text-indent: -9999px;
  width: 9px;
  height: 11px;
  outline: 0;
  background: url('images/controls.png') -86px -44px no-repeat;
  margin: 0 3px;
}

変更後

.bx-wrapper .bx-controls-auto .bx-start {
  display: block;
  text-indent: -9999px;
  width: 10px;
  height: 11px;
  outline: 0;
  background-image: image-url('controls.png') -86px -11px no-repeat;
  margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-stop {
  display: block;
  text-indent: -9999px;
  width: 9px;
  height: 11px;
  outline: 0;
  background-image: image-url('controls.png') -86px -44px no-repeat;
  margin: 0 3px;
}

bxsliderのデフォルトbackground-imageの変更

Rails4以前はbackgroundでよかったのが、Rails4やRails5ではbackground-imageにしなくてはいけない決まりとなっていたようです。 とにかく、bxsliderをそのまま使うと謎のエラーが出るので気をつけてください。