5章。
ようやく Ruby on Rails を使い始めるという感じになって来ますね。
画像をダウンロードして来て assets/images/ に置くというのもでてきますが、RubyMine の IDE 上でもそのまま表示して確認できます。
bootstrap-sass をインストールするところは、bootstrap 4 に対応するモジュールに置き換えてみました。
https://github.com/twbs/bootstrap-rubygem を見ながら導入していきます。
# bootstrap gem 'bootstrap', '~> 4.1.1' gem 'jquery-rails'
stylesheets/custom.scss を作ります。
@import "bootstrap";
stylesheets/application.css を stylesheets/application.scss に変更します。
ファイル名を右クリックして、Refactor → Rename を実行します。
拡張子を scss に変更します。
Preview を押すと影響範囲が出て来ます。
Do refactor を押してファイル名の変更が終わります。
application.scss では custom.scss を import するように書いておきます。
@import 'custom';
この2行は消しておきます。
*= require_tree . *= require_self
次に、javascripts/application.js に追加します。最初に定義されていたものと合わせて、こんな感じになりました。
// This is a manifest file that'll be compiled into application.js, which will include all the files // listed below. // // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's // vendor/assets/javascripts directory can be referenced here using a relative path. // // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the // compiled file. JavaScript code in this file should be added after the last require_* statement. // // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details // about supported directives. // //= require rails-ujs //= require activestorage //= require turbolinks //= require jquery3 //= require popper //= require bootstrap //= require_tree .
この状態で rails server を起動してブラウザから見てみると、こんな感じになりました。
チュートリアルの画面とちょっと違うところもありますね。
Bootstrap 4 で変わったところを直してみました。
assets/stylesheets/custom.scss の変更点。
body {
padding-top: 0px;
}
views/layouts/application.html.erb は変更が多くなったのでそのまま載せます。
nav 周りは大きく変わりましたね。
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all',
'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application',
'data-turbolinks-track': 'reload' %>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
</script>
<![endif]-->
</head>
<body>
<header class="navbar navbar-dark bg-dark">
<div class="container">
<%= link_to "sample app", '#', id: "logo" %>
<nav>
<ul class="nav justify-content-end">
<li class="nav-item"><%= link_to "Home", '#', :class => "nav-link" %></li>
<li class="nav-item"><%= link_to "Help", '#', :class => "nav-link" %></li>
<li class="nav-item"><%= link_to "Log in", '#', :class => "nav-link" %></li>
</ul>
</nav>
</div>
</header>
<div class="container">
<%= yield %>
</div>
</body>
</html>
これで近い見た目になりました。先に進みます。
partial に切り出すところについては、RubyMine から切り出す行を選んで Refactor → Extract → Partial で作れます。
切り出した後は <%= render 'shim' %> のようになりますが、<%= render 'layouts/shim' %> と変更しないとうまく読まれないので直す必要があります。
リスト 5.20 の custom.scss では、変数名が変わっていることでそのままでは使えないようになっています。
変数を上の方で定義するのが簡単です。
@import "bootstrap";
/* mixins, variables, etc. */
$gray: #555;
$gray-light: #777;
$gray-medium-light: #eaeaea;
$gray-darker: #222;
/* universal */
body {
padding-top: 0px;
}
section {
overflow: auto;
}
...
その後はチュートリアルのまま進めて行けば特に引っかかるところはなかったです。
テストの実行や git の操作は GUI でやっても Terminal からやっても同じです。
