- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2021-03-12T06:42:25+00:00","default:src128","src128")
#author("2022-06-15T08:31:20+00:00","default:src128","src128")
&tag(Rails6);
*目次 [#f7676f10]
#contents
*関連ページ [#ma4ce7a7]
-[[./基本的プロジェクトの作成]]
-[[./macOS]]
-[[./Ubuntu2004]]
-[[./Webpacker+Yarn+Sprockets]]
-[[./jQuery]]…jQueryのみを使う。
-[[./font-awesome]]
-[[./CKEditor]]
-[[Rails/Bootstrap4]]…BootstrapとjQueryを使う。
*参考情報 [#w6dea96e]
*基本 [#lc2e2488]
-JavaScriptの管理はyarnに。
-css等その他はいままで通り
-Bootstrapを使った基本プロジェクトの作成方法は[[Rails/Bootstrap4]]を参照のこと。
*Tips [#n7af8b7b]
**yarn関連 [#d842502f]
-インストール
yarn install
-アップグレード
yarn upgrade
**master.keyがなくデプロイ失敗する [#e357697c]
-新規プロジェクトだとmaster.keyが.gitignoreで指定されている。
-Capistrano3でgit_copyを実行するとmaster.keyが含まれずエラーが発生する。
-これを解消するためにdeploy.rbに以下のタスクを追加する。
#pre{{
namespace :deploy do
# サーバーにファイルをアップロードする
task upload_file: [:set_rails_env] do
on roles(:app) do |host|
upload!('config/master.key', "#{shared_path}/config/master.key")
# upload!('config/credentials.yml.enc', "#{shared_path}/config/credentials.yml.enc")
# execute 'echo "credentials.yml.enc upload!!"'
execute 'echo "master.key upload!!"'
end
end
before 'deploy:starting', 'deploy:upload_file'
end
}}
*トラブルシューティング [#w7aa4418]
**yarn installでpython2のエラー [#gb5e5a17]
-以前作成したrails6プロジェクトをcloneし「yarn install」を実施すると以下のようなエラーが表示されるようになった。
gyp verb check python checking for Python executable "python2" in the PATH
-node-sassのエラーだが、これはnode-sassのバージョンが古いのが原因。package.jsonのwebpackerのバージョンを上げるとよいっぽい(webpackerがnode-sassに依存している)。
-2022/06/14(火)現在、Rails 6.1のプロジェクトを作成したときのpackage.jsonの内容
#pre{{
{
"name": "rails61-demo",
"private": true,
"dependencies": {
"@rails/actioncable": "^6.0.0",
"@rails/activestorage": "^6.0.0",
"@rails/ujs": "^6.0.0",
"@rails/webpacker": "5.4.3",
"turbolinks": "^5.2.0",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12"
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^3"
}
}
}}
-しかしwebpackerのバージョンを上げると、Ubuntu 20.04でエラーがでる。[[Ubuntu2004/Node.js]]に従いv16をインストールする。
**rails-factoryが動かない [#pd665248]
-railsプロジェクトを作成するためのfactoryが動かない。
-以下のコマンドで「bootsnap」や「webpacker」などさまざまなエラーがでる。
#pre{{
bundle exec rails new $project_path --skip-bundle --database=mysql
}}
-「port install yarn」でyarnをインストールし、rails-factoryのGemfileを修正することが必要。
#pre{{
source "http://rubygems.org"
gem "rails", "6.0.3.5"
gem 'bootsnap'
gem 'webpacker'
gem 'listen'
}}
**ActionView::Template::Error (invalid base64) [#s498da97]
-Rails 6にアップグレード後に発生。
-ブラウザを何回リロードしても直らないが、ブラウザを一端終了して再起動すれば修正された。
-ブラウザのキャッシュとCookieが原因らしい。
**Uncaught TypeError: $(...).modal is not a functionエラーが発生 [#fa58e2fb]
-Bootstrap4のモーダルを表示しようとすると「Uncaught TypeError: $(...).modal is not a function」が発生。
-jQuery自体のメソッドであるshow/hideは呼び出せるがそれは根本的な原因ではない。[[JavaScript - モーダル画面でエラー Uncaught TypeError: $(...).modal is not a function が出てしまう|teratail:https://teratail.com/questions/250963]]
-modal('show')が呼び出せないとshowだと背景が暗くならな、閉じれないなど不具合が発生する。
-[[Methods like modal() not working if Bootstrap loaded with Webpack (Rails) - Stack Overflow:https://stackoverflow.com/questions/61705296/methods-like-modal-not-working-if-bootstrap-loaded-with-webpack-rails]]にあるようにjQueryを複数回ロードしているのが原因。application.jsとenvironment.jsの両方でjQueryを呼び出していないかチェックする。以下を削除する。
#pre{{
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery', // taking this out doesn't fix it
...
}}
**Bootstrap4のModalが呼び出せない(remoteがtrueの場合) [#jc59f1c9]
-Bootstrap4のモーダルで、remote modalが呼び出せない(ajaxのリンク経由で)。
-jquery_ujsからrails-ujsに変更になったせいで、ajax処理は呼び出せるが、Bootstrapの処理が呼び出せてないっぽい。
-ajaxから呼び出すjs.erbでmodal('show')を呼び出すようにしたら表示はできることを確認。
#pre{{
$("#my-modal").modal('show');
}}
***表示されない場合 [#l64bd236]
-以下のようなシンプルな呼び出しボタンを作成。data-remoteありで表示できず、data-remoteなしで表示できた場合、rails-ujsが原因だと思われる。
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#my-modal" data-remote="true">
Launch demo modal
</button>
-js.erbに「$("#my-modal").modal('show');」があることを確認。
-書いているのにもかかわらず表示されない場合、jQueryがエラーになっている可能性あり。
-window.alert("abc")などが表示でき、modalがきかない場合、application.jsに以下の記述があるか確認。
#pre{{
import jQuery from 'jquery'
window.jQuery = window.$ = jQuery
}}
**LoadError: cannot load such file — uglifier [#f8a8bb95]
-[[Rails5へのバージョンアップでのハマりポイント共有 (Google App Engine, Rails4.2.6 => 5.1.4) | by Masaki Kamachi | indies.band | Medium:https://medium.com/indies-band/rails5%E3%81%B8%E3%81%AE%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E3%82%A2%E3%83%83%E3%83%97%E3%81%A7%E3%81%AE%E3%83%8F%E3%83%9E%E3%82%8A%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E5%85%B1%E6%9C%89-google-app-engine-rails4-2-6-5-1-4-694f339988]]によるとuglifierをGemfileに追加するか、production.rbなどでuglifierを使わないようにしてもよいっぽい。
**cloneした環境でyarnエラー [#n047d8dc]
-プロジェクトのrootで「yarn install」を実行。[[Rails6 開発時につまづきそうな webpacker, yarn 関係のエラーと解決方法 - Qiita:https://qiita.com/NaokiIshimura/items/8203f74f8dfd5f6b87a0]]
yarn install