前 基礎Ruby on Rails Chapter11 ストロング・パラメータ／エラーページのカスタマイズ
次 基礎Ruby on Rails Chapter13 ファイルのアップロード
暗号化された資格情報
credentials.yml.encとmaster.key
- Railsの暗号化された資格情報では、configディレクトリの下に置かれる次の2つを用いて資格情報を保存する。
- credentials.yml.enc・・・資格情報が暗号化されて記録されている
- master.key・・・暗号を解くための鍵（ソースコードを渡すとき、このファイルは除外する）
- 資格情報を編集するには、次のコマンドを実行する。
# エディタの設定（やっていなかったら行う）
$ echo 'export EDITOR=vim' >> ~/.bashrc
# railsプロジェクトディレクトリ内で行う
$ bin/rails credentials:edit
- 編集して終了すると資格情報が暗号化されて、credentials.yml.encに書き込まれる。
secret_key_baseの生成
- master.keyが無かったり紛失した場合は、credentials.yml.encがあれば削除して、以下のコマンドを実行し、エディタを閉じると2つのファイルができる。
$ bin/rails credentials:edit
資格情報の設定と参照
-
bin/rails credentials:editで、以下の設定をして保存する。
foo:
bar: example
- 以下のように書けば、
exampleを取り出せる。
Rails.application.credentials.dig(:foo, :bar)
アセット・パイプライン
アセット・パイプラインの働き
- 変換：SassをCSSに変換、CoffeeScriptをJavaScriptに変換など
- 圧縮と結合：CSSやJavaScriptの改行や空白の除去、複数ファイルをまとめる
- キャッシュ：public/assetsディレクトリの下にキャッシュファイルを生成、ブラウザにはキャッシュファイルを送信
本番モードの準備
- アセット・パイプラインの動作は、本番モードで確認できる。
- 本番モードで動かすには、以下の環境変数をセットする。
$ export RAILS_ENV=production
$ export RAILS_SERVE_STATIC_FILES=1
アセット・パイプラインの動作確認
- 本番モードでアプリケーションを起動するときは、次のコマンドを実行してキャッシュファイルを生成する必要がある。これをしないとエラーになる。
$ bin/rails assets:precompile
- 本番用のデータベースを作成する。以下の環境変数に1をセットすることにより、本番用データベースに対する保護を解除する。
- db:resetは最初にデータベースを削除し、db:setupはデータベースを削除しない。
$ DISABLE_DATABASE_ENVIRONMENT_CHECK=1 bin/rails db:setup
- Railsサーバーを起動して、
http://localhost:3000/を開く。
$ bin/rails s
- CSSとJavaScriptファイルが1つにまとめられているのがわかる。
- 動作確認後、サーバーを終了してターミナルを開きなおすと、環境変数の値がリセットされる。
Sass
Sassの書式
- Sass(Syntactically Awesome Stylesheets)は、CSSの文法を改良したスタイルシート言語。CSSに変換して使う。
- 拡張子は、
.scssを使用する。
div#errors {
background-color: #fee;
h2 {
color: red;
}
}
Sassを使う
- ページネーションのpagination.cssをpagination.scssに変更して、以下のように書き換える。
app/assets/stylesheets/pagination.scss
$border-color: #499;
nav.pagination {
font-size: 75%;
padding: 4px 8px;
border: 1px solid $border-color;
word-spacing: 4px;
span.current {
font-weight: bold;
}
}
-
http://localhost:3000/assets/pagination.cssを開くと、以下のようなCSSとなっている。
/* line 3, /mnt/c/Users/tseno/Desktop/rails/asagao/app/assets/stylesheets/pagination.scss */
nav.pagination {
font-size: 75%;
padding: 4px 8px;
border: 1px solid #499;
word-spacing: 4px;
}
/* line 9, /mnt/c/Users/tseno/Desktop/rails/asagao/app/assets/stylesheets/pagination.scss */
nav.pagination span.current {
font-weight: bold;
}
JavaScript
jQueryの導入
- Rails 5.0までは、
rails newコマンドで生成されるGemfileにGemパッケージjquery-railsが記載されていたので、初めからjQueryが使えたが、Rails 5.1以降は除外された。なので、GemfileにjQueryを加える。
Gemfile（一部）
gem 'jquery-rails'
- Gemパッケージをインストールする。
$ bundle install
- 以下のように、
//= require jqueryを追加する。これは、JavaScriptライブラリjQueryを読み込むように、アセット・パイプラインに命令している。
app/assets/javascripts/application.js
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery
//= require_tree .
ニュース記事編集フォームの拡張
- 掲載終了日時を設定しないのチェックボックスがオンの時は掲載終了日時の入力欄を隠し、オフの時は掲載終了日時の入力欄を表示する。
app/assets/javascripts/articles.js
$(document).on("turbolinks:load", function() {
var cb = $("#article_no_expiration");
var field = $("#article_expired_at");
var changeExpiredAt = function() {
if (cb.prop("checked"))
field.hide()
else
field.show()
}
cb.bind("click", changeExpiredAt);
changeExpiredAt();
})
- 掲載終了日のdivタグに、
id="article_expired_at"を追加する。
app/views/articles/_form.html.erb
<div id="article_expired_at">
<%= form.datetime_select :expired_at, start_year: 2000, end_year: Time.current.year + 1, use_month_numbers: true %>
</div>
- 以下のように、チェックオンにすると日時入力欄が隠れることが確認できた。
Turbolinks
- ブラウザによるページ遷移を高速化する機能。
- ページの遷移機能をブラウザから横取りし、JavaScriptを使ってサーバーからHTMLを取得してページを書き換える。
- linkタグやscriptタグはページを遷移してもそのままにしておくので、解釈にかかる時間をなくすことができる。
- 以下のように、
'data-turbolinks-track': 'reload'の属性を加えることで、このタグを書き換えないようにする。
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
まとめ
- ログインパスワードを暗号化する機能がある。
- アセット・パイプラインという、CSSやJSをまとめる機能がある。
- Sassの記法が使える。
- jQueryを簡単に組み込める。