１． 画像のダウンロード
以下のようにcurlコマンドを使うことで、任意の場所に画像をダウンロードすることでできる。
curl -o app/assets/images/rails.svg -L https://cdn.learnenough.com/rails.svg
２． BootstrapとカスタムCSS
Bootstrapは、HTML5アプリケーションに優れたWebデザインとユーザーインターフェイス要素を簡単に追加できるCSSフレームワークである。（Railsチュートリアル参照）
BootstrapのCSSを追加することで、navやnavbarを付与したタグにスタイルが自動的に適応される。
※注意：Codespaces（クラウドIDE）で開発される方へ
テキストではBootstrapをGemfileに追加したあと、bundle _2.3.14_ installでbundleをインストールするように記載してあるが、その通りに実行するとうまく反映されなかった。bundle -vでbundleのバージョンを調べ、それに合わせたbundleをインストールすることで、解決することができた。
（例）バージョンが2.4.12ならbundle _2.4.12_ installのように入力。
３．パーシャル（partial)
application.html.erbには、headerやfooterが同ファイル上に存在していてやや散らかっている。それらをヘッダー部分、コンテンツ部分、フッター部分とファイル単位で分ける機能がパーシャルである。３つを分けることで効率化を図ることができる
app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
</head>
<body>
+ <%= render 'layouts/header' %>
<mark> <div class="container"> <mark>
<%= yield %>
</div>
</body>
</html>
app/views/layouts/_header.html.erb
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<%= link_to "sample app", '#', id: "logo" %>
<nav>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Home", '#' %></li>
<li><%= link_to "Help", '#' %></li>
<li><%= link_to "Log in", '#' %></li>
</ul>
</nav>
</div>
</header>
_header.html/erbのように先頭に_を付けることで識別できるようにしている。
４．Sass
ネスト
.center {
text-align: center;
}
.center h1 {
margin-bottom: 10px;
}
を次のように書くことができる。
.center {
text-align: center;
+ h1 {
+ margin-bottom: 10px;
+ }
}
また、
#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: #fff;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
}
#logo:hover {
color: #fff;
text-decoration: none;
}
を次のように書くこともできる。
#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: #fff;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
+ &:hover {
+ color: #fff;
+ text-decoration: none;
+ }
}
変数
h2 {
+ color: #777;
}
footer {
+ color: #777;
}
上のように同じ値があった場合次のように変数を定義することで、効率化を図ることができる。
+$light-gray: #777;
h2 {
+ color: $light-gray;
}
footer {
+ color: $light-gray;
}
リンク
config/routes.rb
Rails.application.routes.draw do
+ root "static_pages#home"
+ get "/help", to: "static_pages#help"
end
とすることで、次のように名前付きのルーティングが使用できる。
+ <%= link_to "sample app", root_path %>
+ <%= link_to "Help", help_path %>