前基礎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を簡単に組み込める。

参考
改訂4版基礎 Ruby on Rails (IMPRESS KISO SERIES)