【Rails】ブラウザの再読み込みを自動化
キーワード： ブラウザ、自動更新、自動読み込み、オートリロード、ライブロード
railsで開発しているとき、ファイルに変更があるたびに手動でブラウザの更新ボタンを押さなきゃいけないのはダルいので、自動で再読み込みしてくれるようにした。
Browsersyncというnpmパッケージを利用します。
環境
インストール
Browsersyncのインストール；
npm install -g browser-sync
-g オプションはグローバルにインストールするということらしいです。
設定ファイルなしで実行
まずはサーバーを立てます；
rails server
次に、browser-sync を起動します；
browser-sync start --proxy localhost:3000 --files "app/assets/stylesheets/*.css.*","app/views/**/*.html.*","app/assets/javascripts/**/*.js.*"
引数で監視するファイルを指定しています。
以上で準備は完了です。 適当にviewファイルなどをエディタで編集して保存すると、ブラウザでページが自動的に再読み込みされます。
設定ファイルを作る
上記のコマンドを毎回打つのは大変なので、browser-sync の設定ファイルを作成します。
rails new で生成されたディレクトリ内で、次のコマンドを実行します；
browser-sync init
すると bs-config.js が生成されます。
それを開いて、下記の箇所を修正します；
module.exports = { // 略 // "files": false, "files": [ "app/assets/stylesheets/*.css.*", "app/views/**/*.html.*", "app/assets/javascripts/**/*.js.*" ], // 略 // "proxy": false, "proxy": "localhost:3000", //略 };
これで、さっきのコマンドの代わりに、以下のコマンドでも同じように働きます；
browser-sync start --config bs-config.js
もう少し楽をする
もう少し楽をしましょう。
rails new したときに生成された package.json に、以下のコマンドを追加します；
"scripts": { "start": "browser-sync start --config bs-config.js" }
そうすれば、rails s した後に次のコマンドを実行するだけ良くなります；
npm run start
以上！
参考
npm install で permission denied
npm install <package> をすると、権限が無いとエラーが出る。
sudo を付ければ実行できるんだろうが、たかが npm install で sudo が必要になる意味がわからん。
結局、node.jsの公式サイトからインストーラーをDLしてnodeをインストールしたのがよくなかった。
ということで、そのインストーラーは使わず、nodebrew を使って node をインストールし直す。
まずはアンインストール
下記記事を参考に、pkgでインストールした node と npm を削除；
次にインストール
下記記事を参考に、nodebrew を使って node をインストールする；
おわりに
これで、sudo なしで npm install ができる。
以上。
参考
【Rails】データベースを変更
環境
- rails 6
内容
何も考えずに rails new をするとデータベースは sqlite3 になるが、herokuではそれが使えないので後からデータベースを progresql に変更したいときがある。
Gemfile と db/database.yml を修正すればいいが手でやるのは馬鹿らしい。
例えば、データベースを progresql に変更するには、以下のコマンドを打てばいい；
rails db:system:change --to=postgresql bundle install rails db:create rails db:migrate
とのことです。
参考
【Heroku with Rails】git push herokuでエラー
Heroku スターターガイド (Rails 6.x)に従ってRailsアプリをHerokuにデプロイしようとしたらエラーが出た。
理解はしていないが解決はできました。
環境
症状
エラーまでの手順再現；
# railsアプリ作成 rails new myapp --database=postgresql cd myapp # データベース作成 rails db:create # gitコミット git add . git commit -m "init" # herokuアプリ作成 heroku create
この後に git push コマンドでherokuにデプロイしようとすると、エラーが出てrejectされた；
% git push heroku main 略 remote: ! remote: ! Could not detect rake tasks remote: ! ensure you can run `$ bundle exec rake -P` against your app remote: ! and using the production group of your Gemfile. remote: ! /tmp/build_176a3f7d/config/boot.rb:4:in `require': cannot load such file -- bootsnap/setup (LoadError) remote: ! from /tmp/build_176a3f7d/config/boot.rb:4:in `<top (required)>' remote: ! from /tmp/build_176a3f7d/bin/rake:3:in `require_relative' remote: ! from /tmp/build_176a3f7d/bin/rake:3:in `<main>' remote: ! remote: /tmp/codon/tmp/buildpacks/50d5eddf222a9b7326028041d4e6509f915ccf2c/lib/language_pack/helpers/rake_runner.rb:106:in `load_rake_tasks!': Could not detect rake tasks (LanguagePack::Helpers::RakeRunner::CannotLoadRakefileError) remote: ensure you can run `$ bundle exec rake -P` against your app remote: and using the production group of your Gemfile. remote: /tmp/build_176a3f7d/config/boot.rb:4:in `require': cannot load such file -- bootsnap/setup (LoadError) 略 remote: Verifying deploy... remote: remote: ! Push rejected to shrouded-shelf-31491. remote: To https://git.heroku.com/shrouded-shelf-31491.git ! [remote rejected] main -> main (pre-receive hook declined) error: failed to push some refs to 'https://git.heroku.com/shrouded-shelf-31491.git'
解決
Heroku スターターガイド (Rails 6.x)の日本語記事の内容が古かった。
日本語版にはなかったコマンドが英語版には書いてある。
どうやら以下の手順を踏まないといけないらしい；
rails new myapp --database=postgresql cd myapp rails db:create # 次のコマンドを実行する必要がある； bundle lock --add-platform x86_64-linux --add-platform ruby git add . git commit -m "init" heroku create git push heroku main
そうすると、最後の git push でエラーが出ずにデプロイが成功する；
remote: Verifying deploy... done. To https://git.heroku.com/shrouded-shelf-31491.git * [new branch] main -> main
heroku open コマンドを実行すると、アプリがブラウザで開く。
結論
日本人は情弱
DeepLで翻訳するときに改行を消す
Railsのエラーと解決手順メモ
railsのエラーと解決手順のメモです。
環境
- macOS bigsur
- ruby 2.6.6p146
- Rails 6.1.3
brew info postgresql-> postgresql: stable 13.1
作業ログ
rails new myapp --database=postgresql をして、 rails s をするとエラーが出た；
ActiveRecord::ConnectionNotEstablished (could not connect to server: No such file or directory
Is the server running locally and accepting
connections on Unix domain socket "/tmp/.s.PGSQL.5432"?
):
略
この記事通り以下のコマンドを実行したら、治ったのかはわからないが、少なくともエラーメッセージは変わった；
brew services start postgresql brew services stop postgresql brew services restart postgresql
もう一度 rails s をしたら、別のエラーメッセージが出た；
ActiveRecord::NoDatabaseError (FATAL: database "deepl_helper_development" does not exist ): 略
この記事通り以下のコマンドを実行したら、エラーはもう出なくなった；
rails db:create
http://127.0.0.1:3000 にアクセスするとちゃんとrailsの初期ページが表示された。
参考
【LaTeX】句読点を自動置換
目的
句読点は 、。 で入力するけど、出力のPDFでは全角カンマ・ピリオド ，． にしたい。
制約
- とにかく楽したい
- OSのシステム設定で句読点をカンマ・ピリオドにするのはヤダ
- エディタの一括置換は毎回やるのだるい
- 外部プログラムで自動置換は、
latexmkコマンド以外打ちたくない - なんならファイル上では
、。のままでいてほしい
実装
、。 の文字を、，． の文字を返すようなコマンドにする。
例えば、~ 一文字で改行禁止のスペースの意味になるような感じ。
和文文字はそのままではアクティブ（コマンド化）にはできないので、そのカテゴリーコードを変更する。
\kcatcode"3001=15 とすると、、（U+3001）が属するUnicodeブロックに含まれる文字のカテゴリーコードが全て15に変更される。
カテゴリーコードが 15 の文字であれば \ から始めなくても文字単体でコマンド名とすることができる。
例えば \def、{，} のような感じでコマンドが定義できる。
すると、文中で単に 、 と書いている読点は、全角のカンマ ， に置き換わることになる。
問題点
、 と同じUnicodeブロックに含まれる文字のカテゴリーコードが全て 15 に変更されたが、カテゴリーコード 15 の文字が文書中に現れるとタイプセットエラーになる。
、 が属するUnicodeブロックには、普段からよく使うカギ括弧 「」 やにょろ 〜 なども含まれるが、これらの文字が文書中で使えないことになってしまう。
なので置換する句読点 、。 以外の文字は、元の文字をそのまま返すコマンドとして再定義してやらないといけない。
\def「{「} と書いてしまうと無限ループになってしまうので、Unicodeの番号で \def「{\char"300C} のようにして再定義する。
まだ他にも副作用があるのかもしれないが、一応はこれで大丈夫なはず。
あとは一応、和文の句読点 、。 が使いたいときには使えるように適当にコマンドを用意しておいてやればいいかなと。
\newcommand\読点{\char"3001} \newcommand\句点{\char"3002}
サンプルコード
uplatex 用のサンプルコードを置いておきます。
%% Typeset: uplatex \documentclass[uplatex,a6paper,papersize]{jsarticle} %% 句読点（、。）を含むUnicode Blockのカテゴリーコードを15に変更 \kcatcode"3000=15 %% Unicode文字を再定義 \usepackage{newunicodechar} %% CJK Symbols and Punctuation %% Range: 3000—303F %% Quantity of characters: 64 \newunicodechar{ }{\char"3000} \newunicodechar{、}{\char"FF0C}% <- 3001 \newunicodechar{。}{\char"FF0E}% <- 3002 \newunicodechar{〃}{\char"3003} \newunicodechar{〄}{\char"3004} \newunicodechar{々}{\char"3005} \newunicodechar{〆}{\char"3006} \newunicodechar{〇}{\char"3007} \newunicodechar{〈}{\char"3008} \newunicodechar{〉}{\char"3009} \newunicodechar{《}{\char"300A} \newunicodechar{》}{\char"300B} \newunicodechar{「}{\char"300C} \newunicodechar{」}{\char"300D} \newunicodechar{『}{\char"300E} \newunicodechar{』}{\char"300F} \newunicodechar{【}{\char"3010} \newunicodechar{】}{\char"3011} \newunicodechar{〒}{\char"3012} \newunicodechar{〓}{\char"3013} \newunicodechar{〔}{\char"3014} \newunicodechar{〕}{\char"3015} \newunicodechar{〖}{\char"3016} \newunicodechar{〗}{\char"3017} \newunicodechar{〘}{\char"3018} \newunicodechar{〙}{\char"3019} \newunicodechar{〚}{\char"301A} \newunicodechar{〛}{\char"301B} \newunicodechar{〜}{\char"301C} \newunicodechar{〝}{\char"301D} \newunicodechar{〞}{\char"301E} \newunicodechar{〟}{\char"301F} \newunicodechar{〠}{\char"3020} \newunicodechar{〡}{\char"3021} \newunicodechar{〢}{\char"3022} \newunicodechar{〣}{\char"3023} \newunicodechar{〤}{\char"3024} \newunicodechar{〥}{\char"3025} \newunicodechar{〦}{\char"3026} \newunicodechar{〧}{\char"3027} \newunicodechar{〨}{\char"3028} \newunicodechar{〩}{\char"3029} \newunicodechar{〪}{\char"302A} \newunicodechar{〫}{\char"302B} \newunicodechar{〬}{\char"302C} \newunicodechar{〭}{\char"302D} \newunicodechar{〮}{\char"302E} \newunicodechar{〯}{\char"302F} \newunicodechar{〰}{\char"3030} \newunicodechar{〱}{\char"3031} \newunicodechar{〲}{\char"3032} \newunicodechar{〳}{\char"3033} \newunicodechar{〴}{\char"3034} \newunicodechar{〵}{\char"3035} \newunicodechar{〶}{\char"3046} \newunicodechar{〷}{\char"3047} \newunicodechar{〸}{\char"3038} \newunicodechar{〹}{\char"3039} \newunicodechar{〺}{\char"303A} \newunicodechar{〻}{\char"303B} \newunicodechar{〼}{\char"303C} \newunicodechar{〽}{\char"303D} \newunicodechar{〾}{\char"303E} \newunicodechar{〿}{\char"303F} %% 元の句読点を退避 \newcommand\読点{\char"3001} \newcommand\句点{\char"3002} \begin{document}\huge やあ，こんにちは． やあ、こんにちは。 やあ\読点 こんにちわ\句点 \end{document}
github にも置いておきます。
