RailsでBootstrapのmodalが開いてすぐ閉じてしまう問題
開発していて地味にハマったのでメモ。
概要
削除・更新系の処理実行前に確認画面を表示するために、bootstrapのmodalを利用。 ボタンを押すとmodalが一瞬表示されるが、何もUI操作をしていないのにmodalダイアログが閉じてしまう。
原因
異なる2つのgemの中でbootstrapを読み込んでいたことが原因。私の場合は”sass-rails”に加えて、"jquery-datatables-rails"のbootstrapオプションを利用していたからでした。
似たような事象が以下で報告されているので共有。どうやらmodal起動時に2回toggle()が呼ばれて、1回目の呼び出しでmodal起動、即座に2回目が呼び出されて閉じているっぽいですね。
Modal Disappears Immediately · Issue #1611 · twbs/bootstrap · GitHub
Bootstrap Modal immediately disappearing - Stack Overflow
解決方法
bootstrapを呼び出しているGemのうち、片方の代替となるGemを探してそれを利用するとかでしょうか。もしくは、片方のGemでbootstrapを呼び出さないように、何かしら工夫をするとか(Gemによって対処方法は違うと思うので具体的な解決策を示すことができなくて申し訳ないのですが)
私の場合は"dataconfirm-modal"という別のgemを利用することで正常に動作するようになったので、そのまま放置してあります。結局、sass-railsとjquery-datatables-railsの両方を利用しているので、また再発するかもしれないです。が、現状は問題ないので、しばらくこのままでいこうと思います・・・。
macOS Sierra + Vagrant + CentOS7でRuby On Railsの開発環境を構築する
railsの開発環境をvagrant上のcentos7に構築するスクリプトを作成し、GItHubに公開しました。利用手順をREADME.mdに記載してあります。postgresqlの設定など、手順の一部は手動で実施する必要があります。
以下の環境で動作確認。
- OS: macOS Sierra 10.12.3
- Vagrant 1.8.1
- Virtualbox 5.0.18
- ruby 2.3.1
- rails 4.2.2
- postgresql 9.2.18
- nodejs 4.7.3
本記事は上記スクリプトの作成課程やスクリプトの実行内容をメモしたものです。
事前準備
- vagrantのインストール
- virtualboxのインストール
- virtualboxのpluginのインストール
$ vagrant plugin install vagrant-vbguest
VMの生成
- VagrantFileを生成
$ vagrant init centos/7
- VagrantFileを以下のように書き換える
# -*- mode: ruby -*- # vi: set ft=ruby : Vagrant.configure(2) do |config| # https://atlas.hashicorp.com/centos/boxes/7 config.vm.box = "centos/7" config.vm.box_version = "1611.01" config.vm.netowrk "forwarded_port", guest: 3000, host: 3000 config.vm.provider "virtualbox" do |vb| vb.memory = "2048" vb.name = "centos/7" end # vagrant up時にbin/setup.shを自動実行する config.vm.provision "shell", privileged: false, path: "bin/setup.sh" end
- Vagrantfileの設定内容に沿ってVMを作成する
$ vagrant up --provider virtualbox
localeなどの初期設定、ruby、nodejs、postgresqlのインストール
- bin/setup.sh中で実行する
- rbenvでrubyのバージョン管理する
- nodejsはuglifierなどのgemで必要
#!/bin/sh RUBY_VERSION='2.3.1' HOME_DIR='/home/vagrant' # set locale, keymap, timezone sudo localectl set-locale LANG=ja_JP.utf8 sudo localectl set-keymap jp106 sudo timedatectl set-timezone Asia/Tokyo # install ruby sudo yum -y update sudo yum -y install git-all openssl-devel readline-devel sqlite gcc gcc-c++ git clone git://github.com/sstephenson/rbenv.git ${HOME_DIR}/.rbenv git clone git://github.com/sstephenson/ruby-build.git ${HOME_DIR}/.rbenv/plugins/ruby-build echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ${HOME_DIR}/.bashrc echo 'export PATH="$HOME/.rbenv/plugins/ruby-build/bin:$PATH"' >> ${HOME_DIR}/.bashrc echo 'eval "$(rbenv init -)"' >> ${HOME_DIR}/.bashrc echo 'gem: --no-ri --no-rdoc' > ${HOME_DIR}/.gemrc source ${HOME_DIR}/.bashrc rbenv install $RUBY_VERSION rbenv global $RUBY_VERSION gem install bundler # install nodejs sudo rpm -Uvh https://rpm.nodesource.com/pub_4.x/el/7/x86_64/nodesource-release-el7-1.noarch.rpm sudo yum -y install nodejs # install postgresql # https://www.postgresql.org/download/linux/redhat/#yum sudo yum -y install http://yum.postgresql.org/9.5/redhat/rhel-7-x86_64/pgdg-redhat95-9.5-2.noarch.rpm sudo yum -y install postgresql-devel postgresql95-server postgresql95-contrib sudo /usr/pgsql-9.5/bin/postgresql95-setup initdb sudo systemctl start postgresql-9.5.service sudo systemctl enable postgresql-9.5.service
postgresqlの設定
これ以降は自動化できていないため、手動実行の必要がある。
- postgresユーザーのパスワード変更
$ sudo passwd postgres Changing password for user postgres. New password: #パスワードを適当に設定する Retype new password:
- postgresqlにvagrantユーザーを追加
$ su - postgres $ createuser vagrant -s $ psql postgres=# \password vagrant # vagrantユーザにパスワードを設定 Enter new password: #パスワードを適当に設定する Enter it again: postgres=# \q # psqlプロンプト終了 $ exit
- pg_hba.confの81行目付近を以下のように書き換える (peer → md5)
$ sudo vi /var/lib/pgsql/9.5/data/pg_hba.conf # "local" is for Unix domain socket connections only # local all all peer local all all md5 $ sudo systemctl restart postgresql-9.5.service
Railsプロジェクトの作成
- 作業ディレクトリの作成
$ mkdir /vagrant/hello_app $ cd /vagrant/hello_app
$ bundle init $ vi Gemfile # Gemfileを以下のように編集 source "https://rubygems.org" gem "rails", "4.2.2" gem 'pg', '0.17.1' # ホストOSとの共有フォルダ内にinstallするとrails関係のコマンドの実行速度が遅くなる(原因不明) $ bundle install --path ~/bundler/hello_app/vendor/bundle
- railsプロジェクトの作成とDB設定
$ bundle exec rails new . --database=postgresql $ vi config/database.yml # database.ymlを編集し、defaultにusernameとpasswordを設定 default: ... username: vagrant password: # 先ほど設定したパスワード $ bin/rake db:create
- サーバーの起動
bin/rails server -b 0.0.0.0 -p 3000
http://localhost:3000/
にアクセスし、以下の画面が表示されることを確認する
課題など
- postgresqlの設定を自動化したい
- ansibleとか使ってみたい