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

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

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

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

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

Ruby on Rails

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

JavaScript

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

jQuery

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

Q&A

解決済

1回答

290閲覧

Rails5.1.3でjqueery のTag-itを導入時のエラーについて

koume

総合スコア458

Ruby

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

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

Ruby on Rails

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

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2017/08/28 12:43

編集2017/08/29 06:48

Rails5.1.3でWebアプリを作っており、(初心者なので参考書を見ながらです。)jqueryのTag-itを導入時のエラーについて質問させて
いただきます。1つ前に質問しましたが回答が得られなかったので簡単な質問にさせていただきました。
jquery-ui-rails-6.0.1 で開発しております。

Tag-itをアプリに組み込もうとapp/assets/javascripts/staff.jsというファイルとapp/assets/stylesheets/staff.cssに以下のように記述しました.するとエラーが発生してしまいます。解決方法をご存じでしたら教えていらだけないでしょうか?

app/assets/javascripts/staff.js //= require jquery //= require rails-ujs //= require jquery_ujs //= require jquery.turbolinks //= require turbolinks //= require jquery.ui.all //= require jquery-ui/widgets/datepicker //= require jquery-ui/i18n/datepicker-ja //= require tag-it //= require_tree ./shared //= require_tree ./staff
app/assets/stylesheets/staff.css /* *= require jquery-ui/datepicker *= require jquery.tagit *= require_tree ./shared *= require_tree ./staff */

JavaScriptプログラム

app/assets/javascripts/staff/tag-it.js.coffee $(document).on 'turbolinks:load', -> $("#tag-it").tagit()

上記でリロードすると発生するエラー

Sprockets::FileNotFound in Staff::Messages#show Showing /home/vagrant/chibi/chibi/app/views/layouts/staff.html.erb where line #6 raised: couldn't find file 'jquery.ui.all' with type 'application/javascript' Checked in these paths: /home/vagrant/chibi/chibi/app/assets/config /home/vagrant/chibi/chibi/app/assets/images /home/vagrant/chibi/chibi/app/assets/javascripts /home/vagrant/chibi/chibi/app/assets/stylesheets /home/vagrant/chibi/chibi/vendor/assets/javascripts /home/vagrant/chibi/chibi/vendor/assets/stylesheets /home/vagrant/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/jquery-turbolinks-2.1.0/vendor/assets/javascripts /home/vagrant/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/jquery-ui-rails-6.0.1/app/assets/images /home/vagrant/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/jquery-ui-rails-6.0.1/app/assets/javascripts /home/vagrant/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/jquery-ui-rails-6.0.1/app/assets/stylesheets /home/vagrant/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/jquery-rails-4.3.1/vendor/assets/javascripts /home/vagrant/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/coffee-rails-4.2.2/lib/assets/javascripts /home/vagrant/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/actioncable-5.1.3/lib/assets/compiled /home/vagrant/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/actionview-5.1.3/lib/assets/compiled /home/vagrant/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/turbolinks-source-5.0.3/lib/assets/javascripts Extracted source (around line #6): 4 //= require jquery.turbolinks 5 //= require turbolinks 6 //= require jquery.ui.all 7 //= require jquery-ui/widgets/datepicker 8 //= require jquery-ui/i18n/datepicker-ja 9 //= require tag-it Rails.root: /home/vagrant/chibi/chibi Application Trace | Framework Trace | Full Trace app/assets/javascripts/staff.js:6 app/views/layouts/staff.html.erb:6:in `_app_views_layouts_staff_html_erb___3988381759139252788_70101439000720'
app/views/layouts/staff.html.erb <!DOCTYPE html> <html> <head> <title><%= document_title %></title> <%= stylesheet_link_tag 'staff', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'staff', 'data-turbolinks-track' => true %> #エラ-発生 <%= csrf_meta_tags %> </head> <body> <div id="wrapper"> <%= render 'staff/shared/header' %> <div id="container"> <%= yield %> </div> <%= render 'shared/footer' %> </div> </body> </html>

というエラーが発生してしまい解決方法がわからず困っております。となたか助けていただけないでしょうか?
宜しくお願いします。

追記:(記述例と説明文)
gem 'jquery-ui-rails', '~> 4.2.1'での実行環境での説明だったので元々の記述例は下記でした。

//= require jquery //= require jquery_ujs //= require turbolinks //= require jquery.ui.datepicker //= require jquery.ui.datepicker-ja //= require_tree ./shared //= require_tree ./staff

自分の実行環境はjquery-ui-rails-6.0.1 なので以下に変更しました。

//= require jquery //= require rails-ujs //= require jquery_ujs //= require jquery.turbolinks //= require turbolinks //= require jquery-ui/widgets/datepicker //= require jquery-ui/i18n/datepicker-ja //= require_tree ./shared //= require_tree ./staff

Tag-itを導入するにあたり以下のようにしてくださいとの説明がありました。
(参考書の実行環境はjquery-ui-rails 4.2.1での説明です。)

説明分及び記述例
Tag-itを組み込みます。

//= require jquery //= require jquery_ujs //= require turbolinks //= require jquery.ui.all //= require jquery.ui.datepicker-ja //= require tag-it //= require_tree ./shared //= require_tree ./staff

Tag-itはDatepicker以外のjQuery UIウィジェットに依存しますので4行目の「datepicker」を「all」に書き換えます。
という説明でした。

なので

//= require jquery //= require rails-ujs //= require jquery_ujs //= require jquery.turbolinks //= require turbolinks //= require jquery.ui.all //= require jquery-ui/widgets/datepicker //= require jquery-ui/i18n/datepicker-ja //= require tag-it //= require_tree ./shared //= require_tree ./staff

のように記述してみたのですが、全く違う記述をしているようなので、どう記述すれば組み込むことができるのかがわかりません。
助けていただけないでしょうか?宜しくお願いします。
イメージ説明
タブ欄に入力ができないページになってます。

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

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

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

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

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

kjml

2017/08/28 15:53

まずエラーメッセージをよく読むようにしてください。” jquery.ui.all ” がないと言っています。 そもそも ” jquery.ui.all ” とは何でしょう? どこかに記述例があったのであれば明記されるのが良いと思います。
koume

2017/08/29 00:12

回答ありがとうございます。参考書の説明文、記述例を追記させていただきました。宜しくお願いします。
guest

回答1

0

ベストアンサー

Tag-it に限らず、新しくモジュールなどを追加する時は、
必要なものが何かをきちんと確認しましょう。(参照
今回Tag-itに必要なのは jQuery UI で、Gemfile に追加すべきはjquery-ui-railsであり、
gem 'jquery-ui-rails'
すべてのjQuery UIモジュールを使用する為にapplication.js(staff.js)に記述するのは
//= require jquery-ui
ではないでしょうか?
application.css(staff.css)に
*= require jquery-ui
も追加。(jquery-ui-rails のUsageに書いてあります)

また、[Stack Overflow](https://stackoverflow.com/questions/15874265/gem-jquery-ui-r> ails-couldnt-find-file-jquery-ui-all) には以下のような記述がありました。

At version 5.0 it has been changed. You can read more about it here.
version 5.0:
application.js:
//= require jquery-ui
(中略)
version 4.x (I'm sure about 4.2.0 and 4.2.1):
application.js:
//= require jquery.ui.all

version 4.xまでは//= require jquery.ui.allでversion5からは//= require jquery-ui
ですね。(同じくjquery-ui-rails のUsageを読むようにと書いてありますね)

投稿2017/08/29 05:41

kjml

総合スコア219

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

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

koume

2017/08/29 06:28

回答ありがとうございます。全て見直してみました。足りないところなどを修正したところconsoleのエラーは無くなりましたがタブの入力欄に記述できない 状態は変わらず、入力できないままです。あと、何が不足しているのでしょうか?
kjml

2017/08/29 06:41

質問にあるエラーは解消jしたと読めますが 状況が変わらないのですか? エラー発生状況が相変わらずなのでしょうか? 良くわかりません。
koume

2017/08/29 06:50

回答ありがとうございます。おかげさまでエラーは解消し、画面の表示ができました。 しかし、タブ欄に入力できないので、困っております。何が、原因なのか不明で困っております。
kjml

2017/08/29 07:15

状況が変わっていっている(1つずつ問題が解消していっている)のは、良くわかりますし、もう一つ解消できずに困っている事も良くわかりますが、それぞれ質問に対しては1つずつ完了させていって、ここはエラー解消で解決として置くべきところではないでしょうかね? タブ欄に入力できない問題に関してはすでに新たに質問を出していらっしゃいますので、ここでそれについてやり始めると、同じ内容を2箇所でやることになります。後追いで混乱します。正直なところ、私は追いつけません。 常にkoumeさんの動向を追いかけているわけではありませんので、ここは新しい質問に誘導とかそのくらいでいいのではないでしょうか。
kjml

2017/08/29 07:16

失礼。文章考えている間に解決済みになってました。
koume

2017/08/29 07:18

回答ありがとうございます。おっしゃるとおりで何か混乱していました。 今後は気をつけます。もう一度整理して見ます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問