Rails チュートリアルをやってみる(11) 5.1 テンプレートまわり

5章に入る。

5.1

5.1.1でまずはHTMLにdivタグとclass設定で構造を入れる。この時点ではCSSを当ててないので、しょっぱい。演習はcurlコマンドを使ってみろとかなので省略。

5.1.2でBootstrapを適用する。まずはgemをインストール

> vi Gemfile
> git diff Gemfile
diff --git a/Gemfile b/Gemfile
index ad03f0d..384a66b 100644
--- a/Gemfile
+++ b/Gemfile
@@ -1,6 +1,7 @@
 source 'https://rubygems.org'
 
 gem 'rails',        '5.1.6'
+gem 'bootstrap-sass','3.3.7'
 gem 'puma',         '3.9.1'
 gem 'sass-rails',   '5.0.6'
 gem 'uglifier',     '3.2.0'
> bundle install
Fetching gem metadata from https://rubygems.org/.........
Fetching gem metadata from https://rubygems.org/.
Resolving dependencies...
Using rake 12.3.1
Using concurrent-ruby 1.1.3
Using i18n 1.1.1
Using minitest 5.10.3
Using thread_safe 0.3.6
Using tzinfo 1.2.5
Using activesupport 5.1.6
Using builder 3.2.3
Using erubi 1.7.1
Using mini_portile2 2.3.0
Using nokogiri 1.8.5
Using rails-dom-testing 2.0.3
Using crass 1.0.4
Using loofah 2.2.3
Using rails-html-sanitizer 1.0.4
Using actionview 5.1.6
Using rack 2.0.6
Using rack-test 1.1.0
Using actionpack 5.1.6
Using nio4r 2.3.1
Using websocket-extensions 0.1.3
Using websocket-driver 0.6.5
Using actioncable 5.1.6
Using globalid 0.4.1
Using activejob 5.1.6
Using mini_mime 1.0.1
Using mail 2.7.1
Using actionmailer 5.1.6
Using activemodel 5.1.6
Using arel 8.0.0
Using activerecord 5.1.6
Using ansi 1.5.0
Using execjs 2.7.0
Fetching autoprefixer-rails 9.3.1
Installing autoprefixer-rails 9.3.1
Using bindex 0.5.0
Using rb-fsevent 0.10.3
Using ffi 1.9.25
Using rb-inotify 0.9.10
Using sass-listen 4.0.0
Using sass 3.7.2
Fetching bootstrap-sass 3.3.7
Installing bootstrap-sass 3.3.7
Using bundler 1.17.1
Using byebug 9.0.6
Using coderay 1.1.2
Using coffee-script-source 1.12.2
Using coffee-script 2.4.1
Using method_source 0.9.2
Using thor 0.20.3
Using railties 5.1.6
Using coffee-rails 4.2.2
Using formatador 0.2.5
Using ruby_dep 1.5.0
Using listen 3.1.5
Using lumberjack 1.0.13
Using nenv 0.3.0
Using shellany 0.0.1
Using notiffany 0.1.1
Using pry 0.12.2
Using guard 2.13.0
Using guard-compat 1.2.1
Using guard-minitest 2.4.4
Using multi_json 1.13.1
Using jbuilder 2.7.0
Using jquery-rails 4.3.1
Using ruby-progressbar 1.10.0
Using minitest-reporters 1.1.14
Using puma 3.9.1
Using sprockets 3.7.2
Using sprockets-rails 3.2.1
Using rails 5.1.6
Using rails-controller-testing 1.0.2
Using tilt 2.0.8
Using sass-rails 5.0.6
Using spring 2.0.2
Using spring-watcher-listen 2.0.1
Using sqlite3 1.3.13
Using turbolinks-source 5.2.0
Using turbolinks 5.0.1
Using uglifier 3.2.0
Using web-console 3.5.1
Bundle complete! 21 Gemfile dependencies, 80 gems now installed.
Gems in the group production were not installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.

カスタムCSSファイルを作る。

> ls
application.css   static_pages.scss
> touch custom.scss
> ls
application.css   custom.scss       static_pages.scss
> vi custom.scss 
> cat custom.scss 
@import "bootstrap-sprockets";
@import "bootstrap";

これで、bootstrapのCSSが適応されるらしい。ほうほう。

こんなしょっぱい画面がこうなる・・・と

あり？

<ul class="nav navbar-nav navbar-right">
  <li><a href="#">Home</a></li>
  <li><a href="#">Help</a></li>
  <li><a href="#">Log in</a></li>
</ul>

FireFoxの開発ツールでみると、navbar-rightが当たってないように見える。うーむ・・・

CSSを開発ツールで確認してみると、

@media (min-width: 768px) {
  .navbar-right .dropdown-menu {
    right: 0;
    left: auto;
  }
}

あー、ブラウザの幅が狭すぎただけだ。

広げたらちゃんと収まりました。

custom.scssにいろいろいれて遊んでみる演習はパス。

5.1.3はpartial。要するに、HTMLテンプレートのモジュール化で、renderコマンドでインポートするようなイメージだと。ふむふむ