77
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

Organization

RailsにjQuery-uiを導入するときの注意

注意: ここに記載されている作業は、アセットパイプラインを使用しない場合でもなければ通常は不要です。追記を参照ください。

わかってしまえば簡単だけど、ネットにほとんど見当たらなかったのでメモ。Rails 4.0 + Ruby 2.0環境。

  • Gemfileに以下を追加して bundle updatebundle install を実行。
gem 'jquery-ui-rails'

ちなみに以下も含まれている。

gem 'sass-rails'
gem 'bootstrap-sass'
gem 'coffee-rails'
gem 'jquery-rails', '~> 3.0.0'
gem 'turbolinks'
gem 'jquery-turbolinks'
  • 以下を実行して jquery-uiのファイルをgenerateする。これがわからなくてはまった。これに限らず、jquery関連でgemを追加したときはおそらくこういう作業が必要になるのだろう。
rails generate jquery:install --ui

以下は実行結果。

      remove  public/javascripts/prototype.js
      remove  public/javascripts/effects.js
      remove  public/javascripts/dragdrop.js
      remove  public/javascripts/controls.js
     copying  jQuery (1.10.2)
   identical  public/javascripts/jquery.js
   identical  public/javascripts/jquery.min.js
     copying  jQuery UJS adapter (e9e8b8)
      remove  public/javascripts/rails.js
   identical  public/javascripts/jquery_ujs.js

ちなみに、rails generate とだけ実行すれば多くのヘルプが表示され、 rails generate jquery:install --help と打てばjquery関連のヘルプが表示される。 -p オプション (シミュレーションのみ行う) がとても便利。

  • これでめでたく以下を追加できる。generateに気付かなかったばかりにここでエラーを出しまくった。
app/assets/javascripts/application.js
//= require jquery.ui.all
app/assets/stylesheets/application.css
/*
 *= require jquery.ui.all

なお、jqueryそのものは html.erbにも書けるけど、assets/javascripts以下の *.js.coffeeファイルに書く方が行儀がよいと思われる(CoffeeScriptを導入している場合)。coffeeScriptなので出だしをうんとシンプルに書ける。

$ ->
    $('div').css('color', 'red')

追記

その後調べた結果、アセットパイプラインの設定に不備があったのが原因であることがわかりました。アセットパイプラインが正常に動作していればこの記述を適用する必要はありません。以上訂正いたします。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
77
Help us understand the problem. What are the problem?