Rails チュートリアルをやってみる(2) 1.3 最初のアプリケーション

1.3節から、チュートリアルに合流する

> bundle exec rails _5.1.6_ new hello_app
      create  
      create  README.md
      create  Rakefile
      create  .ruby-version
      create  config.ru
      create  .gitignore
      create  Gemfile
         run  git init from "."
Initialized empty Git repository in /Users/tambara/study/rails_study/hello_app/.git/
      create  package.json
      create  app
      create  app/assets/config/manifest.js
      create  app/assets/javascripts/application.js
      create  app/assets/javascripts/cable.js
      create  app/assets/stylesheets/application.css
      create  app/channels/application_cable/channel.rb
      create  app/channels/application_cable/connection.rb
      create  app/controllers/application_controller.rb
      create  app/helpers/application_helper.rb
      create  app/jobs/application_job.rb
      create  app/mailers/application_mailer.rb
      create  app/models/application_record.rb
      create  app/views/layouts/application.html.erb
      create  app/views/layouts/mailer.html.erb
      create  app/views/layouts/mailer.text.erb
      create  app/assets/images/.keep
      create  app/assets/javascripts/channels
      create  app/assets/javascripts/channels/.keep
      create  app/controllers/concerns/.keep
      create  app/models/concerns/.keep
      create  bin
      create  bin/bundle
      create  bin/rails
      create  bin/rake
      create  bin/setup
      create  bin/update
      create  bin/yarn
      create  config
      create  config/routes.rb
      create  config/application.rb
      create  config/environment.rb
      create  config/cable.yml
      create  config/puma.rb
      create  config/spring.rb
      create  config/storage.yml
      create  config/environments
      create  config/environments/development.rb
      create  config/environments/production.rb
      create  config/environments/test.rb
      create  config/initializers
      create  config/initializers/application_controller_renderer.rb
      create  config/initializers/assets.rb
      create  config/initializers/backtrace_silencers.rb
      create  config/initializers/content_security_policy.rb
      create  config/initializers/cookies_serializer.rb
      create  config/initializers/cors.rb
      create  config/initializers/filter_parameter_logging.rb
      create  config/initializers/inflections.rb
      create  config/initializers/mime_types.rb
      create  config/initializers/new_framework_defaults_5_2.rb
      create  config/initializers/wrap_parameters.rb
      create  config/locales
      create  config/locales/en.yml
      create  config/master.key
      append  .gitignore
      create  config/boot.rb
      create  config/database.yml
      create  db
      create  db/seeds.rb
      create  lib
      create  lib/tasks
      create  lib/tasks/.keep
      create  lib/assets
      create  lib/assets/.keep
      create  log
      create  log/.keep
      create  public
      create  public/404.html
      create  public/422.html
      create  public/500.html
      create  public/apple-touch-icon-precomposed.png
      create  public/apple-touch-icon.png
      create  public/favicon.ico
      create  public/robots.txt
      create  tmp
      create  tmp/.keep
      create  tmp/cache
      create  tmp/cache/assets
      create  vendor
      create  vendor/.keep
      create  test/fixtures
      create  test/fixtures/.keep
      create  test/fixtures/files
      create  test/fixtures/files/.keep
      create  test/controllers
      create  test/controllers/.keep
      create  test/mailers
      create  test/mailers/.keep
      create  test/models
      create  test/models/.keep
      create  test/helpers
      create  test/helpers/.keep
      create  test/integration
      create  test/integration/.keep
      create  test/test_helper.rb
      create  test/system
      create  test/system/.keep
      create  test/application_system_test_case.rb
      create  storage
      create  storage/.keep
      create  tmp/storage
      create  tmp/storage/.keep
      remove  config/initializers/cors.rb
      remove  config/initializers/new_framework_defaults_5_2.rb
         run  bundle install
The dependency tzinfo-data (>= 0) will be unused by any of the platforms Bundler is installing for. Bundler is installing for ruby but the dependency is only for x86-mingw32, x86-mswin32, x64-mingw32, java. To add those platforms to the bundle, run `bundle lock --add-platform x86-mingw32 x86-mswin32 x64-mingw32 java`.
Fetching gem metadata from https://rubygems.org/.........
Fetching gem metadata from https://rubygems.org/.
Resolving dependencies...
Fetching rake 12.3.1
Installing rake 12.3.1
Fetching concurrent-ruby 1.1.3
Installing concurrent-ruby 1.1.3
Fetching i18n 1.1.1
Installing i18n 1.1.1
Fetching minitest 5.11.3
Installing minitest 5.11.3
Fetching thread_safe 0.3.6
Installing thread_safe 0.3.6
Fetching tzinfo 1.2.5
Installing tzinfo 1.2.5
Fetching activesupport 5.2.1
Installing activesupport 5.2.1
Fetching builder 3.2.3
Installing builder 3.2.3
Fetching erubi 1.7.1
Installing erubi 1.7.1
Fetching mini_portile2 2.3.0
Installing mini_portile2 2.3.0
Fetching nokogiri 1.8.5
Installing nokogiri 1.8.5 with native extensions
Fetching rails-dom-testing 2.0.3
Installing rails-dom-testing 2.0.3
Fetching crass 1.0.4
Installing crass 1.0.4
Fetching loofah 2.2.3
Installing loofah 2.2.3
Fetching rails-html-sanitizer 1.0.4
Installing rails-html-sanitizer 1.0.4
Fetching actionview 5.2.1
Installing actionview 5.2.1
Fetching rack 2.0.6
Installing rack 2.0.6
Fetching rack-test 1.1.0
Installing rack-test 1.1.0
Fetching actionpack 5.2.1
Installing actionpack 5.2.1
Fetching nio4r 2.3.1
Installing nio4r 2.3.1 with native extensions
Fetching websocket-extensions 0.1.3
Installing websocket-extensions 0.1.3
Fetching websocket-driver 0.7.0
Installing websocket-driver 0.7.0 with native extensions
Fetching actioncable 5.2.1
Installing actioncable 5.2.1
Fetching globalid 0.4.1
Installing globalid 0.4.1
Fetching activejob 5.2.1
Installing activejob 5.2.1
Fetching mini_mime 1.0.1
Installing mini_mime 1.0.1
Fetching mail 2.7.1
Installing mail 2.7.1
Fetching actionmailer 5.2.1
Installing actionmailer 5.2.1
Fetching activemodel 5.2.1
Installing activemodel 5.2.1
Fetching arel 9.0.0
Installing arel 9.0.0
Fetching activerecord 5.2.1
Installing activerecord 5.2.1
Fetching mimemagic 0.3.2
Installing mimemagic 0.3.2
Fetching marcel 0.3.3
Installing marcel 0.3.3
Fetching activestorage 5.2.1
Installing activestorage 5.2.1
Fetching public_suffix 3.0.3
Installing public_suffix 3.0.3
Fetching addressable 2.5.2
Installing addressable 2.5.2
Fetching io-like 0.3.0
Installing io-like 0.3.0
Fetching archive-zip 0.11.0
Installing archive-zip 0.11.0
Fetching bindex 0.5.0
Installing bindex 0.5.0 with native extensions
Fetching msgpack 1.2.4
Installing msgpack 1.2.4 with native extensions
Fetching bootsnap 1.3.2
Installing bootsnap 1.3.2 with native extensions
Using bundler 1.17.1
Fetching byebug 10.0.2
Installing byebug 10.0.2 with native extensions
Fetching regexp_parser 1.3.0
Installing regexp_parser 1.3.0
Fetching xpath 3.2.0
Installing xpath 3.2.0
Fetching capybara 3.11.0
Installing capybara 3.11.0
Fetching ffi 1.9.25
Installing ffi 1.9.25 with native extensions
Fetching childprocess 0.9.0
Installing childprocess 0.9.0
Fetching chromedriver-helper 2.1.0
Installing chromedriver-helper 2.1.0
Fetching coffee-script-source 1.12.2
Installing coffee-script-source 1.12.2
Fetching execjs 2.7.0
Installing execjs 2.7.0
Fetching coffee-script 2.4.1
Installing coffee-script 2.4.1
Fetching method_source 0.9.2
Installing method_source 0.9.2
Fetching thor 0.20.3
Installing thor 0.20.3
Fetching railties 5.2.1
Installing railties 5.2.1
Fetching coffee-rails 4.2.2
Installing coffee-rails 4.2.2
Fetching multi_json 1.13.1
Installing multi_json 1.13.1
Fetching jbuilder 2.8.0
Installing jbuilder 2.8.0
Fetching rb-fsevent 0.10.3
Installing rb-fsevent 0.10.3
Fetching rb-inotify 0.9.10
Installing rb-inotify 0.9.10
Fetching ruby_dep 1.5.0
Installing ruby_dep 1.5.0
Fetching listen 3.1.5
Installing listen 3.1.5
Fetching puma 3.12.0
Installing puma 3.12.0 with native extensions
Fetching sprockets 3.7.2
Installing sprockets 3.7.2
Fetching sprockets-rails 3.2.1
Installing sprockets-rails 3.2.1
Fetching rails 5.2.1
Installing rails 5.2.1
Fetching rubyzip 1.2.2
Installing rubyzip 1.2.2
Fetching sass-listen 4.0.0
Installing sass-listen 4.0.0
Fetching sass 3.7.2
Installing sass 3.7.2
Fetching tilt 2.0.8
Installing tilt 2.0.8
Fetching sass-rails 5.0.7
Installing sass-rails 5.0.7
Fetching selenium-webdriver 3.141.0
Installing selenium-webdriver 3.141.0
Fetching spring 2.0.2
Installing spring 2.0.2
Fetching spring-watcher-listen 2.0.1
Installing spring-watcher-listen 2.0.1
Fetching sqlite3 1.3.13
Installing sqlite3 1.3.13 with native extensions
Fetching turbolinks-source 5.2.0
Installing turbolinks-source 5.2.0
Fetching turbolinks 5.2.0
Installing turbolinks 5.2.0
Fetching uglifier 4.1.19
Installing uglifier 4.1.19
Fetching web-console 3.7.0
Installing web-console 3.7.0
Bundle complete! 18 Gemfile dependencies, 79 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
Post-install message from sass:

Ruby Sass is deprecated and will be unmaintained as of 26 March 2019.

* If you use Sass as a command-line tool, we recommend using Dart Sass, the new
  primary implementation: https://sass-lang.com/install

* If you use Sass as a plug-in for a Ruby web framework, we recommend using the
  sassc gem: https://github.com/sass/sassc-ruby#readme

* For more details, please refer to the Sass blog:
  http://sass.logdown.com/posts/7081811

         run  bundle exec spring binstub --all
* bin/rake: spring inserted
* bin/rails: spring inserted

nokogiriのビルドに時間かかるね

さて、チュートリアルでは、Gemfileの中身を置き換えろと言っているので、置き換えてbundle installする。んー？この場合も--pathの設定は要るのだろうか？

というか、rails new で実行されたbundlerはどこにgemを入れたんだろう。

えっと、可能性としては、

• システムのRuby配下
• rbenvのRuby配下
• rails newしたディレクトリ(最初にbundle install --pathしたところ)
• hello_app配下

くらいがあり得るのかな。難しいなあ。

で、探してみたら、どうやらrails newした時に実行されたbundle installは ~/.rbenv以下に入ったっぽい。ありゃー。

まあ、この辺りはもう悩んでも仕方ないので、もう一度hello_app以下でbundle installをパス指定で実行することにする。難しいなあ。

> bundle install --path=vender/bundle
Fetching gem metadata from https://rubygems.org/..........
Fetching gem metadata from https://rubygems.org/.
Resolving dependencies...
Bundler could not find compatible versions for gem "actionpack":
  In snapshot (Gemfile.lock):
    actionpack (= 5.2.1)

  In Gemfile:
    rails (= 5.1.6) was resolved to 5.1.6, which depends on
      actionpack (= 5.1.6)

    coffee-rails (= 4.2.2) was resolved to 4.2.2, which depends on
      railties (>= 4.0.0) was resolved to 5.2.1, which depends on
        actionpack (= 5.2.1)

Running `bundle update` will rebuild your snapshot from scratch, using only
the gems in your Gemfile, which may resolve the conflict.

Gemfile.lockと合わないと怒られる。うーん、lock消すか。

> rm Gemfile.lock 
> bundle install --path=vender/bundle
Fetching gem metadata from https://rubygems.org/..........
Fetching gem metadata from https://rubygems.org/.
Resolving dependencies...
Fetching rake 12.3.1
Installing rake 12.3.1
Fetching concurrent-ruby 1.1.3
Installing concurrent-ruby 1.1.3
Fetching i18n 1.1.1
Installing i18n 1.1.1
Fetching minitest 5.11.3
Installing minitest 5.11.3
Fetching thread_safe 0.3.6
Installing thread_safe 0.3.6
Fetching tzinfo 1.2.5
Installing tzinfo 1.2.5
Fetching activesupport 5.1.6
Installing activesupport 5.1.6
Fetching builder 3.2.3
Installing builder 3.2.3
Fetching erubi 1.7.1
Installing erubi 1.7.1
Fetching mini_portile2 2.3.0
Installing mini_portile2 2.3.0
Fetching nokogiri 1.8.5
Installing nokogiri 1.8.5 with native extensions
Fetching rails-dom-testing 2.0.3
Installing rails-dom-testing 2.0.3
Fetching crass 1.0.4
Installing crass 1.0.4
Fetching loofah 2.2.3
Installing loofah 2.2.3
Fetching rails-html-sanitizer 1.0.4
Installing rails-html-sanitizer 1.0.4
Fetching actionview 5.1.6
Installing actionview 5.1.6
Fetching rack 2.0.6
Installing rack 2.0.6
Fetching rack-test 1.1.0
Installing rack-test 1.1.0
Fetching actionpack 5.1.6
Installing actionpack 5.1.6
Fetching nio4r 2.3.1
Installing nio4r 2.3.1 with native extensions
Fetching websocket-extensions 0.1.3
Installing websocket-extensions 0.1.3
Fetching websocket-driver 0.6.5
Installing websocket-driver 0.6.5 with native extensions
Fetching actioncable 5.1.6
Installing actioncable 5.1.6
Fetching globalid 0.4.1
Installing globalid 0.4.1
Fetching activejob 5.1.6
Installing activejob 5.1.6
Fetching mini_mime 1.0.1
Installing mini_mime 1.0.1
Fetching mail 2.7.1
Installing mail 2.7.1
Fetching actionmailer 5.1.6
Installing actionmailer 5.1.6
Fetching activemodel 5.1.6
Installing activemodel 5.1.6
Fetching arel 8.0.0
Installing arel 8.0.0
Fetching activerecord 5.1.6
Installing activerecord 5.1.6
Fetching bindex 0.5.0
Installing bindex 0.5.0 with native extensions
Using bundler 1.17.1
Fetching byebug 9.0.6
Installing byebug 9.0.6 with native extensions
Fetching coffee-script-source 1.12.2
Installing coffee-script-source 1.12.2
Fetching execjs 2.7.0
Installing execjs 2.7.0
Fetching coffee-script 2.4.1
Installing coffee-script 2.4.1
Fetching method_source 0.9.2
Installing method_source 0.9.2
Fetching thor 0.20.3
Installing thor 0.20.3
Fetching railties 5.1.6
Installing railties 5.1.6
Fetching coffee-rails 4.2.2
Installing coffee-rails 4.2.2
Fetching ffi 1.9.25
Installing ffi 1.9.25 with native extensions
Fetching multi_json 1.13.1
Installing multi_json 1.13.1
Fetching jbuilder 2.6.4
Installing jbuilder 2.6.4
Fetching jquery-rails 4.3.1
Installing jquery-rails 4.3.1
Fetching rb-fsevent 0.10.3
Installing rb-fsevent 0.10.3
Fetching rb-inotify 0.9.10
Installing rb-inotify 0.9.10
Fetching ruby_dep 1.5.0
Installing ruby_dep 1.5.0
Fetching listen 3.1.5
Installing listen 3.1.5
Fetching puma 3.9.1
Installing puma 3.9.1 with native extensions
Fetching sprockets 3.7.2
Installing sprockets 3.7.2
Fetching sprockets-rails 3.2.1
Installing sprockets-rails 3.2.1
Fetching rails 5.1.6
Installing rails 5.1.6
Fetching sass-listen 4.0.0
Installing sass-listen 4.0.0
Fetching sass 3.7.2
Installing sass 3.7.2
Fetching tilt 2.0.8
Installing tilt 2.0.8
Fetching sass-rails 5.0.6
Installing sass-rails 5.0.6
Fetching spring 2.0.2
Installing spring 2.0.2
Fetching spring-watcher-listen 2.0.1
Installing spring-watcher-listen 2.0.1
Fetching sqlite3 1.3.13
Installing sqlite3 1.3.13 with native extensions
Fetching turbolinks-source 5.2.0
Installing turbolinks-source 5.2.0
Fetching turbolinks 5.0.1
Installing turbolinks 5.0.1
Fetching uglifier 3.2.0
Installing uglifier 3.2.0
Fetching web-console 3.5.1
Installing web-console 3.5.1
Bundle complete! 14 Gemfile dependencies, 64 gems now installed.
Bundled gems are installed into `./vender/bundle`
Post-install message from sass:

Ruby Sass is deprecated and will be unmaintained as of 26 March 2019.

* If you use Sass as a command-line tool, we recommend using Dart Sass, the new
  primary implementation: https://sass-lang.com/install

* If you use Sass as a plug-in for a Ruby web framework, we recommend using the
  sassc gem: https://github.com/sass/sassc-ruby#readme

* For more details, please refer to the Sass blog:
  http://sass.logdown.com/posts/7081811

できた。あれ？vendorをvenderにスペルミスしてる。くぅ・・・まあ、今回はもういいか。.bundle以下に--pathの設定は維持されるようだ。

> cat .bundle/config 
---
BUNDLE_PATH: "vender/bundle"

動かしてみる。

> bundle exec rails server
Traceback (most recent call last):
    14: from bin/rails:3:in `<main>'
    13: from bin/rails:3:in `load'
    12: from /Users/tambara/study/rails_study/hello_app/bin/spring:15:in `<top (required)>'
    11: from /Users/tambara/study/rails_study/hello_app/bin/spring:15:in `require'
    10: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/spring-2.0.2/lib/spring/binstub.rb:31:in `<top (required)>'
     9: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/spring-2.0.2/lib/spring/binstub.rb:31:in `load'
     8: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/spring-2.0.2/bin/spring:49:in `<top (required)>'
     7: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/spring-2.0.2/lib/spring/client.rb:30:in `run'
     6: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/spring-2.0.2/lib/spring/client/command.rb:7:in `call'
     5: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/spring-2.0.2/lib/spring/client/rails.rb:28:in `call'
     4: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/spring-2.0.2/lib/spring/client/rails.rb:28:in `load'
     3: from /Users/tambara/study/rails_study/hello_app/bin/rails:8:in `<top (required)>'
     2: from /Users/tambara/study/rails_study/hello_app/bin/rails:8:in `require_relative'
     1: from /Users/tambara/study/rails_study/hello_app/config/boot.rb:4:in `<top (required)>'
/Users/tambara/study/rails_study/hello_app/config/boot.rb:4:in `require': cannot load such file -- bootsnap/setup (LoadError)

bootsnapが足りんと怒られるんじゃが・・・。

解決方法は、boot.rbのrequireを外すか、Gemfileにbootsnapを足すか、どちらかだと思う。ググってみた感じでは、boot.rbを修正するほうが簡単そう。いやー、こういうところが初心者殺しなんだろうねぇ。Cloud9は偉大だ。甘えてると知識が身につかないので、なんとか頑張ろう。

boot.rbを修正してみたら、やっぱりエラー

> bundle exec rails server
Traceback (most recent call last):
    26: from bin/rails:3:in `<main>'
    25: from bin/rails:3:in `load'
    24: from /Users/tambara/study/rails_study/hello_app/bin/spring:15:in `<top (required)>'
    23: from /Users/tambara/study/rails_study/hello_app/bin/spring:15:in `require'
    22: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/spring-2.0.2/lib/spring/binstub.rb:31:in `<top (required)>'
    21: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/spring-2.0.2/lib/spring/binstub.rb:31:in `load'
    20: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/spring-2.0.2/bin/spring:49:in `<top (required)>'
    19: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/spring-2.0.2/lib/spring/client.rb:30:in `run'
    18: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/spring-2.0.2/lib/spring/client/command.rb:7:in `call'
    17: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/spring-2.0.2/lib/spring/client/rails.rb:28:in `call'
    16: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/spring-2.0.2/lib/spring/client/rails.rb:28:in `load'
    15: from /Users/tambara/study/rails_study/hello_app/bin/rails:9:in `<top (required)>'
    14: from /Users/tambara/study/rails_study/hello_app/bin/rails:9:in `require'
    13: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/railties-5.1.6/lib/rails/commands.rb:16:in `<top (required)>'
    12: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/railties-5.1.6/lib/rails/command.rb:44:in `invoke'
    11: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/railties-5.1.6/lib/rails/command/base.rb:63:in `perform'
    10: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/thor-0.20.3/lib/thor.rb:387:in `dispatch'
     9: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/thor-0.20.3/lib/thor/invocation.rb:126:in `invoke_command'
     8: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/thor-0.20.3/lib/thor/command.rb:27:in `run'
     7: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/railties-5.1.6/lib/rails/commands/server/server_command.rb:130:in `perform'
     6: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/railties-5.1.6/lib/rails/commands/server/server_command.rb:130:in `tap'
     5: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/railties-5.1.6/lib/rails/commands/server/server_command.rb:133:in `block in perform'
     4: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/railties-5.1.6/lib/rails/commands/server/server_command.rb:133:in `require'
     3: from /Users/tambara/study/rails_study/hello_app/config/application.rb:9:in `<top (required)>'
     2: from /Users/tambara/study/rails_study/hello_app/config/application.rb:10:in `<module:HelloApp>'
     1: from /Users/tambara/study/rails_study/hello_app/config/application.rb:12:in `<class:Application>'
/Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/railties-5.1.6/lib/rails/application/configuration.rb:81:in `load_defaults': Unknown version "5.2" (RuntimeError)

これ、後からバージョン下げるの辛くない？

application.rbを見ると

> cat application.rb 
require_relative 'boot'

require 'rails/all'

# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(*Rails.groups)

module HelloApp
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 5.2

    # Settings in config/environments/* take precedence over those specified here.
    # Application configuration can go into files in config/initializers
    # -- all .rb files in that directory are automatically loaded after loading
    # the framework and any gems in your application.
  end
end

よーわからんけど、5.2って書いてあっちゃいかん気がするので、5.1に書き換える

> bundle exec rails server
=> Booting Puma
=> Rails 5.1.6 application starting in development 
=> Run `rails server -h` for more startup options
Exiting
Traceback (most recent call last):
    69: from bin/rails:3:in `<main>'
    68: from bin/rails:3:in `load'
    67: from /Users/tambara/study/rails_study/hello_app/bin/spring:15:in `<top (required)>'
    66: from /Users/tambara/study/rails_study/hello_app/bin/spring:15:in `require'
    65: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/spring-2.0.2/lib/spring/binstub.rb:31:in `<top (required)>'
    64: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/spring-2.0.2/lib/spring/binstub.rb:31:in `load'
    63: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/spring-2.0.2/bin/spring:49:in `<top (required)>'
    62: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/spring-2.0.2/lib/spring/client.rb:30:in `run'
    61: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/spring-2.0.2/lib/spring/client/command.rb:7:in `call'
    60: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/spring-2.0.2/lib/spring/client/rails.rb:28:in `call'
    59: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/spring-2.0.2/lib/spring/client/rails.rb:28:in `load'
    58: from /Users/tambara/study/rails_study/hello_app/bin/rails:9:in `<top (required)>'
    57: from /Users/tambara/study/rails_study/hello_app/bin/rails:9:in `require'
    56: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/railties-5.1.6/lib/rails/commands.rb:16:in `<top (required)>'
    55: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/railties-5.1.6/lib/rails/command.rb:44:in `invoke'
    54: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/railties-5.1.6/lib/rails/command/base.rb:63:in `perform'
    53: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/thor-0.20.3/lib/thor.rb:387:in `dispatch'
    52: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/thor-0.20.3/lib/thor/invocation.rb:126:in `invoke_command'
    51: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/thor-0.20.3/lib/thor/command.rb:27:in `run'
    50: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/railties-5.1.6/lib/rails/commands/server/server_command.rb:130:in `perform'
    49: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/railties-5.1.6/lib/rails/commands/server/server_command.rb:130:in `tap'
    48: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/railties-5.1.6/lib/rails/commands/server/server_command.rb:135:in `block in perform'
    47: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/railties-5.1.6/lib/rails/commands/server/server_command.rb:42:in `start'
    46: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/railties-5.1.6/lib/rails/commands/server/server_command.rb:80:in `log_to_stdout'
    45: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/rack-2.0.6/lib/rack/server.rb:354:in `wrapped_app'
    44: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/railties-5.1.6/lib/rails/commands/server/server_command.rb:24:in `app'
    43: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/rack-2.0.6/lib/rack/server.rb:219:in `app'
    42: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/rack-2.0.6/lib/rack/server.rb:319:in `build_app_and_options_from_config'
    41: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/rack-2.0.6/lib/rack/builder.rb:40:in `parse_file'
    40: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/rack-2.0.6/lib/rack/builder.rb:49:in `new_from_string'
    39: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/rack-2.0.6/lib/rack/builder.rb:49:in `eval'
    38: from config.ru:in `<main>'
    37: from config.ru:in `new'
    36: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/rack-2.0.6/lib/rack/builder.rb:55:in `initialize'
    35: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/rack-2.0.6/lib/rack/builder.rb:55:in `instance_eval'
    34: from config.ru:3:in `block in <main>'
    33: from config.ru:3:in `require_relative'
    32: from /Users/tambara/study/rails_study/hello_app/config/environment.rb:5:in `<top (required)>'
    31: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/railties-5.1.6/lib/rails/application.rb:353:in `initialize!'
    30: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/railties-5.1.6/lib/rails/initializable.rb:58:in `run_initializers'
    29: from /Users/tambara/.rbenv/versions/2.5.1/lib/ruby/2.5.0/tsort.rb:205:in `tsort_each'
    28: from /Users/tambara/.rbenv/versions/2.5.1/lib/ruby/2.5.0/tsort.rb:226:in `tsort_each'
    27: from /Users/tambara/.rbenv/versions/2.5.1/lib/ruby/2.5.0/tsort.rb:347:in `each_strongly_connected_component'
    26: from /Users/tambara/.rbenv/versions/2.5.1/lib/ruby/2.5.0/tsort.rb:347:in `call'
    25: from /Users/tambara/.rbenv/versions/2.5.1/lib/ruby/2.5.0/tsort.rb:347:in `each'
    24: from /Users/tambara/.rbenv/versions/2.5.1/lib/ruby/2.5.0/tsort.rb:349:in `block in each_strongly_connected_component'
    23: from /Users/tambara/.rbenv/versions/2.5.1/lib/ruby/2.5.0/tsort.rb:415:in `each_strongly_connected_component_from'
    22: from /Users/tambara/.rbenv/versions/2.5.1/lib/ruby/2.5.0/tsort.rb:415:in `call'
    21: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/railties-5.1.6/lib/rails/initializable.rb:48:in `tsort_each_child'
    20: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/railties-5.1.6/lib/rails/initializable.rb:48:in `each'
    19: from /Users/tambara/.rbenv/versions/2.5.1/lib/ruby/2.5.0/tsort.rb:421:in `block in each_strongly_connected_component_from'
    18: from /Users/tambara/.rbenv/versions/2.5.1/lib/ruby/2.5.0/tsort.rb:431:in `each_strongly_connected_component_from'
    17: from /Users/tambara/.rbenv/versions/2.5.1/lib/ruby/2.5.0/tsort.rb:422:in `block (2 levels) in each_strongly_connected_component_from'
    16: from /Users/tambara/.rbenv/versions/2.5.1/lib/ruby/2.5.0/tsort.rb:350:in `block (2 levels) in each_strongly_connected_component'
    15: from /Users/tambara/.rbenv/versions/2.5.1/lib/ruby/2.5.0/tsort.rb:228:in `block in tsort_each'
    14: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/railties-5.1.6/lib/rails/initializable.rb:59:in `block in run_initializers'
    13: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/railties-5.1.6/lib/rails/initializable.rb:30:in `run'
    12: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/railties-5.1.6/lib/rails/initializable.rb:30:in `instance_exec'
    11: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/railties-5.1.6/lib/rails/engine.rb:599:in `block in <class:Engine>'
    10: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/railties-5.1.6/lib/rails/engine.rb:599:in `each'
     9: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/railties-5.1.6/lib/rails/engine.rb:600:in `block (2 levels) in <class:Engine>'
     8: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/activesupport-5.1.6/lib/active_support/dependencies.rb:292:in `require'
     7: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/activesupport-5.1.6/lib/active_support/dependencies.rb:258:in `load_dependency'
     6: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/activesupport-5.1.6/lib/active_support/dependencies.rb:292:in `block in require'
     5: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/activesupport-5.1.6/lib/active_support/dependencies.rb:292:in `require'
     4: from /Users/tambara/study/rails_study/hello_app/config/environments/development.rb:1:in `<top (required)>'
     3: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/railties-5.1.6/lib/rails/railtie.rb:211:in `configure'
     2: from /Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/railties-5.1.6/lib/rails/railtie.rb:211:in `instance_eval'
     1: from /Users/tambara/study/rails_study/hello_app/config/environments/development.rb:31:in `block in <top (required)>'
/Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/railties-5.1.6/lib/rails/railtie/configuration.rb:95:in `method_missing': undefined method `active_storage' for #<Rails::Application::Configuration:0x00007f982c959b80> (NoMethodError)

もう諦めて~/.rbenvのgemsで行きたい気になってきた。

これはたぶん、ActiveStorageを取ってきてないからだね。config/environments/development.rbのconfig.active_storage.service = :localをコメントアウトする。

> bundle exec rails server
=> Booting Puma
=> Rails 5.1.6 application starting in development 
=> Run `rails server -h` for more startup options
Puma starting in single mode...
* Version 3.9.1 (ruby 2.5.1-p57), codename: Private Caller
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://0.0.0.0:3000
Use Ctrl-C to stop

うごいたっぽ？

ブラウザでチェックしたら、エラーが出てる。

Puma caught this error: Missing `secret_key_base` for 'development' environment, set this value in `config/secrets.yml` (RuntimeError)
/Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/railties-5.1.6/lib/rails/application.rb:510:in `validate_secret_key_config!'
/Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/railties-5.1.6/lib/rails/application.rb:247:in `env_config'
/Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/railties-5.1.6/lib/rails/engine.rb:692:in `build_request'
/Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/railties-5.1.6/lib/rails/application.rb:518:in `build_request'
/Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/railties-5.1.6/lib/rails/engine.rb:521:in `call'
/Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/puma-3.9.1/lib/puma/configuration.rb:224:in `call'
/Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/puma-3.9.1/lib/puma/server.rb:602:in `handle_request'
/Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/puma-3.9.1/lib/puma/server.rb:435:in `process_client'
/Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/puma-3.9.1/lib/puma/server.rb:299:in `block in run'
/Users/tambara/study/rails_study/hello_app/vender/bundle/ruby/2.5.0/gems/puma-3.9.1/lib/puma/thread_pool.rb:120:in `block in spawn_thread'

なんだよー。

ぐぐると、5.2でconfig/secrets.ymlはなくなって、config/credentials.yml.encになったらしい。たしかにcredentials.yml.encはある。なんか、キーっぽいものが入ってる。

適当なものを作る。

> cat config/secrets.yml 
development:
  secret_key_base: hoge

またエラー

undefined method `verbose_query_logs=' for ActiveRecord::Base:Class

これも5.2の新機能っぽ。この苦労要るのか？

development.rbのconfig.active_record.verbose_query_logs = trueをコメントアウトしてみる。

これでやっと、Welcomeページが出た。

route.rbを修正して、画面にhello, worldと出すのはすんなり。起動中でもちゃんと変わるのな。偉いな。

しかし、てこずった・・・

Rails チュートリアルをやってみる(1) 〜1.2 前置きと環境のセットアップ

いまや、新人プログラマの最初の難関として知られるようになったRailsチュートリアルをやってみることにする。

Railsが無かった頃からのRubyユーザーで、なんだかんだと日常の道具としてRubyを使って20年だが、 Railsは仕事が暇な時期にちょびっと本を読んでちょっとだけ触ってみたことしかない。それも、もう10年以上前の話だ。

Railsチュートリアルに書いてあることもやったことないのにRubyistを名乗るのもおこがましいし、 プロトタイピングの機会はいろいろとあるので、ちゃんとやってみようと思う。

しかし、Rubyでちゃんとアプリを作ったことがないから、Rubygemsはまだしも、 bundlerをちゃんと理解してない。後の世に大きな影響を与えたプロダクトなんだからとても良くないなあ。

さて、心新たに第1章から読んで行ってみることにする。

1.2で環境セットアップをしているが、いきなりクラウドIDE(Cloud9)を使えと言ってくる。 時代を感じるなあ・・・。とりあえず、ローカルにセットアップしてみよう。

Ruby初学者のRuby On Rails 環境構築【Mac】 - Qiita

に従って導入する。rbenvまでは入れてあるので、bundlerの導入から。

> gem install bundler
Fetching: bundler-1.17.1.gem (100%)
Successfully installed bundler-1.17.1
Parsing documentation for bundler-1.17.1
Installing ri documentation for bundler-1.17.1
Done installing documentation for bundler after 4 seconds
1 gem installed

MySQL

> brew install mysql
==> Installing dependencies for mysql: openssl
==> Installing mysql dependency: openssl
==> Downloading https://homebrew.bintray.com/bottles/openssl-1.0.2p.high_sierra.bottle.tar.gz
######################################################################## 100.0%
==> Pouring openssl-1.0.2p.high_sierra.bottle.tar.gz
==> Caveats
A CA file has been bootstrapped using certificates from the SystemRoots
keychain. To add additional certificates (e.g. the certificates added in
the System keychain), place .pem files in
  /usr/local/etc/openssl/certs

and run
  /usr/local/opt/openssl/bin/c_rehash

openssl is keg-only, which means it was not symlinked into /usr/local,
because Apple has deprecated use of OpenSSL in favor of its own TLS and crypto libraries.

If you need to have openssl first in your PATH run:
  echo 'set -g fish_user_paths "/usr/local/opt/openssl/bin" $fish_user_paths' >> ~/.config/fish/config.fish

For compilers to find openssl you may need to set:
  set -gx LDFLAGS "-L/usr/local/opt/openssl/lib"
  set -gx CPPFLAGS "-I/usr/local/opt/openssl/include"

For pkg-config to find openssl you may need to set:
  set -gx PKG_CONFIG_PATH "/usr/local/opt/openssl/lib/pkgconfig"

==> Summary
🍺  /usr/local/Cellar/openssl/1.0.2p: 1,793 files, 12.3MB
==> Installing mysql
==> Downloading https://homebrew.bintray.com/bottles/mysql-8.0.12.high_sierra.bottle.tar.gz
######################################################################## 100.0%
==> Pouring mysql-8.0.12.high_sierra.bottle.tar.gz
==> /usr/local/Cellar/mysql/8.0.12/bin/mysqld --initialize-insecure --user=tambara --basedir=/usr/lo
==> Caveats
We've installed your MySQL database without a root password. To secure it run:
    mysql_secure_installation

MySQL is configured to only allow connections from localhost by default

To connect run:
    mysql -uroot

To have launchd start mysql now and restart at login:
  brew services start mysql
Or, if you don't want/need a background service you can just run:
  mysql.server start
==> Summary
🍺  /usr/local/Cellar/mysql/8.0.12: 255 files, 233.0MB
==> Caveats
==> openssl
A CA file has been bootstrapped using certificates from the SystemRoots
keychain. To add additional certificates (e.g. the certificates added in
the System keychain), place .pem files in
  /usr/local/etc/openssl/certs

and run
  /usr/local/opt/openssl/bin/c_rehash

openssl is keg-only, which means it was not symlinked into /usr/local,
because Apple has deprecated use of OpenSSL in favor of its own TLS and crypto libraries.

If you need to have openssl first in your PATH run:
  echo 'set -g fish_user_paths "/usr/local/opt/openssl/bin" $fish_user_paths' >> ~/.config/fish/config.fish

For compilers to find openssl you may need to set:
  set -gx LDFLAGS "-L/usr/local/opt/openssl/lib"
  set -gx CPPFLAGS "-I/usr/local/opt/openssl/include"

For pkg-config to find openssl you may need to set:
  set -gx PKG_CONFIG_PATH "/usr/local/opt/openssl/lib/pkgconfig"

==> mysql
We've installed your MySQL database without a root password. To secure it run:
    mysql_secure_installation

MySQL is configured to only allow connections from localhost by default

To connect run:
    mysql -uroot

To have launchd start mysql now and restart at login:
  brew services start mysql
Or, if you don't want/need a background service you can just run:
  mysql.server start
> mysql.server start
Starting MySQL
. SUCCESS! 

Rubyのバージョンを固定しておく。

> cd study/
> mkdir rails_study
> cd rails_study/
> rbenv local 2.5.1
> ls -a
.             ..            .ruby-version

Railsのインストール

> bundle init
Writing new Gemfile to /Users/tambara/study/rails_study/Gemfile
> vi Gemfile ### <== gem "rails"の行のコメントアウトを外す 
> cat Gemfile 
# frozen_string_literal: true

source "https://rubygems.org"

git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }

gem "rails"
> bundle install --path=vender/bundle
Fetching gem metadata from https://rubygems.org/..........
Fetching gem metadata from https://rubygems.org/.
Resolving dependencies...
Fetching rake 12.3.1
Installing rake 12.3.1
Fetching concurrent-ruby 1.1.3
Installing concurrent-ruby 1.1.3
Fetching i18n 1.1.1
Installing i18n 1.1.1
Fetching minitest 5.11.3
Installing minitest 5.11.3
Fetching thread_safe 0.3.6
Installing thread_safe 0.3.6
Fetching tzinfo 1.2.5
Installing tzinfo 1.2.5
Fetching activesupport 5.2.1
Installing activesupport 5.2.1
Fetching builder 3.2.3
Installing builder 3.2.3
Fetching erubi 1.7.1
Installing erubi 1.7.1
Fetching mini_portile2 2.3.0
Installing mini_portile2 2.3.0
Fetching nokogiri 1.8.5
Installing nokogiri 1.8.5 with native extensions
Fetching rails-dom-testing 2.0.3
Installing rails-dom-testing 2.0.3
Fetching crass 1.0.4
Installing crass 1.0.4
Fetching loofah 2.2.3
Installing loofah 2.2.3
Fetching rails-html-sanitizer 1.0.4
Installing rails-html-sanitizer 1.0.4
Fetching actionview 5.2.1
Installing actionview 5.2.1
Fetching rack 2.0.6
Installing rack 2.0.6
Fetching rack-test 1.1.0
Installing rack-test 1.1.0
Fetching actionpack 5.2.1
Installing actionpack 5.2.1
Fetching nio4r 2.3.1
Installing nio4r 2.3.1 with native extensions
Fetching websocket-extensions 0.1.3
Installing websocket-extensions 0.1.3
Fetching websocket-driver 0.7.0
Installing websocket-driver 0.7.0 with native extensions
Fetching actioncable 5.2.1
Installing actioncable 5.2.1
Fetching globalid 0.4.1
Installing globalid 0.4.1
Fetching activejob 5.2.1
Installing activejob 5.2.1
Fetching mini_mime 1.0.1
Installing mini_mime 1.0.1
Fetching mail 2.7.1
Installing mail 2.7.1
Fetching actionmailer 5.2.1
Installing actionmailer 5.2.1
Fetching activemodel 5.2.1
Installing activemodel 5.2.1
Fetching arel 9.0.0
Installing arel 9.0.0
Fetching activerecord 5.2.1
Installing activerecord 5.2.1
Fetching mimemagic 0.3.2
Installing mimemagic 0.3.2
Fetching marcel 0.3.3
Installing marcel 0.3.3
Fetching activestorage 5.2.1
Installing activestorage 5.2.1
Using bundler 1.17.1
Fetching method_source 0.9.2
Installing method_source 0.9.2
Fetching thor 0.20.3
Installing thor 0.20.3
Fetching railties 5.2.1
Installing railties 5.2.1
Fetching sprockets 3.7.2
Installing sprockets 3.7.2
Fetching sprockets-rails 3.2.1
Installing sprockets-rails 3.2.1
Fetching rails 5.2.1
Installing rails 5.2.1
Bundle complete! 1 Gemfile dependency, 41 gems now installed.
Bundled gems are installed into `./vender/bundle`
> bundle exec rails -v
Rails 5.2.1

CSS GRIDを勉強してみる(12) - アスキーアートっぽい指定

ガイドは新しいページに入った。

developer.mozilla.org

グリッド線に沿って配置するのが王道なんだけども、そうではないやり方もある。 アスキーアートっぽいやり方が。 いや、ガイドにそう書いてあんだもんよ("we sometimes call this the ascii-art method of grid layout")。

さて、今回はこんな2ペインアプリっぽい構成を作る。 まずは、前回までの通り、グリッド線を使って構成してみよう

HTML

<div class="wrapper">
  <div class="header">Header</div>
  <div class="footer">Footer</div>
  <div class="content">Content</div>
  <div class="sidebar">
    <div style="height: 100px">Sidebar</div>
  </div>
</div>

CSS。わかりやすいと思う。

.wrapper {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-gap: 2px;
}

.header {
  grid-row: 1;
  grid-column: 1 / -1;
}

.footer {
  grid-row: 3;
  grid-column: 1 / -1;
}

.content {
  grid-row: 2;
  grid-column: 4 / -1;
}

.sidebar {
  grid-row: 2;
  grid-column: 1 / 4;
}

レンダリング結果はこうなる。

アプリっぽく見えるように、 真ん中の高さを稼ぐためにSidebarのところに高さ100pxダミーコンテンツをいれてみた。

さて、これをgrid-template-areasを使って表現してみよう。

各アイテムにgrid-areaで名前を付ける。

.header {
  grid-area: h;
}

.footer {
  grid-area: f;
}

.content {
  grid-area: c;
}

.sidebar {
  grid-area: s;
}

そして、それらの配置をアスキーアートっぽく書く。こんな感じ。 "でクォートしなきゃいけないのがイケてないな。

.wrapper {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-gap: 2px;
  grid-template-areas: 
    "h h h h h h h h h"
    "s s s c c c c c c"
    "f f f f f f f f f";
}

空白のセルを指定する場合には.で埋める。こんな感じ

wrapper {
  grid-template-areas: 
     "h h h h h h h h ."
     "s s . c c c c c c"
     ". . f f f f f f f"
}

メディアクエリとの組み合わせ

Bootstrapが流行ったのは、お手軽にレスポンシブルなデザインを 組み込むことができることが一因だったと思うけど、 正統派なやり方は、メディアクエリを使う方法かと思う。

というわけで、このgrid-template-areaをメディアクエリと組み合わせた例はこんな感じ。

wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 2px;
  grid-template-areas: 
    "h" 
    "c"
    "s"
    "f";
}

@media (min-width: 500px) {
  .wrapper {
    grid-template-columns: repeat(9, 1fr);
    grid-template-areas: 
      "h h h h h h h h h"
      "s s s c c c c c c"
      "f f f f f f f f f";
  }
}

ウィンドウを狭めていくと、表示が変わる。

CSS GRIDを勉強してみる(11) - さまざまなshorthand

ここからは

developer.mozilla.org

を読む。エゲレス語の文書を読んでいて、かつ、私の英語能力がプアなので、英語そのままの用語が出てきたり、 英文をそのまま引用したり、内容を勘違いしていたりするかもしれない。知ったこっちゃないけど。

あと、少しペースアップしないと読み終わらない気がする・・・。

今回のスタートは、この状態だ。

まずはHTML

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
  <div class="box5">Five</div>
</div>

次にCSS。ちょっと長い。 3×3のグリッドを指定していて、box1〜4はその中に配置。 box5は横幅3列分を指定しているが、 縦の位置は指定していないので最後にくっついている。 つまり、box5がある位置は、暗黙の列だ。

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 50px);
  grid-gap: 2px;
}

.box1 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 4;
}

.box2 {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

.box3 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

.box4 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 4;
}

.box5 {
  grid-column-start: 1;
  grid-column-end: 4;
}

レンダリング結果は、こうなる。

今回はここからレンダリング結果は変わらない。 位置の指定の仕方の省略記法の紹介だけだ。

*-endの省略

まず、グリットひとつ分の範囲を指定する場合、*-endは指定しなくても良い。

そのため、少し短く出来る。

.box1 {
  grid-column-start: 1;
  grid-row-start: 1;
  grid-row-end: 4;
}

.box2 {
  grid-column-start: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}

.box3 {
  grid-column-start: 2;
  grid-row-start: 1;
}

.box4 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 3;
}

.box5 {
  grid-column-start: 1;
  grid-column-end: 4;
}

負のグリッド線番号

グリッド線の番号は正の数と負の数両方がついている。 最初の番号は1であり、最後は行あるいは列の最大値+1である。 今は3×3のグリッドなので最小が1、最大が4だ。 負の番号は最大を-1として同じようについている。最小が-4, 最大が−1だ。 要するに何行何列のグリッドを作ろうが、左端あるいは上端のグリッド線の番号は1であるように、 右端あるいは下端のグリッド線の番号は-1である。

なので、右端に接しているエリアを指定したいのであれば、

.box1 {
  grid-column-start: 1;
  grid-row-start: 1;
  grid-row-end: -1;
}

のように-1を使う方がわかりやすいことが多いだろう。 この例では、box1は上端から下端まで前列をつないだエリアだと言うことがわかりやすい。

ただし、この下端は明示的なグリッドの下端である。 下のグリッド線番号を見て欲しい。右端の負の番号が切れて見えなくならないように列幅を狭めてある。

グリッドの右端の縦のグリッド線の番号は4で-1だ。 同じように横のグリッド線も4が-1だ。 明示的に指定した3×3のグリッドからbox5がはみ出したために、 横のグリッド線番号5が存在するが、これには負の番号がつかないことに注意。

grid-column 省略記法

startとendを1行で書く省略記法がある。単に/で区切って並べればよい。こんな感じ。

.box1 {
  grid-column: 1;
  grid-row: 1 / -1;
}

.box2 {
  grid-column: 3;
  grid-row: 1 / 3;
}

.box3 {
  grid-column: 2;
  grid-row: 1;
}

.box4 {
  grid-column: 2 / -1;
  grid-row: 3;
}

.box5 {
  grid-column: 1 / -1;
}

ぐっと短くできた。*-endが省略できていたものは、 同じように/以降は省略できる。

grid-area

エリアを取り囲む4つのグリッド線を1行で指定する記法もある。 grid-areaを使う。指定する順番は、上 / 左 / 下 / 右の順。 少し上で出したグリッド線の番号表示を見ながら確認して欲しいのだが、box1であれば 1 / 1 / 4 / 2になる。もちろん1 / 1 / -1 / 2でも同じだ。

というわけで、以下のようにCSSは短く出来るが、わかりやすいかは微妙。

.box1 {
  grid-area: 1 / 1 / -1 / 2;
}

.box2 {
  grid-area: 1 / 3 / 3 / 4;
}

.box3 {
  grid-area: 1 / 2 / 2 / 3;
}

.box4 {
  grid-area: 3 / 2 / 4 / -1;
}

span

もちろん、「グリッド線の何番目まで」ではなく、「セルいくつ分」で幅を指定したいこともある。 その場合にはspanを使う。

例を見れば、すぐわかると思う。これまでのものは、こう書き換え可能だ。

.box1 {
  grid-column: 1;
  grid-row: 1 / span 3;
}

.box2 {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.box3 {
  grid-column: 2;
  grid-row: 1;
}

.box4 {
  grid-column: 2 / span 2;
  grid-row: 3;
}

CSS GRIDを勉強してみる(10) - display: contentsとの関係

今度はdisplay: contentsとの関係の話。また知らない子の登場である。

ちょっと調べてみたところ、display: contentsを指定すると起きることは あたかもその内容がタグで囲われていないように扱われるということのようだ。ほっほーう。 DOMツリー上、レベルがひとつ上がるようなことになるわけ。 グリッドの場合に何が起きるかだけど、グリッドのアイテムに対してdisplay: contentsを指定すると、 その中のブロック要素がグリッドアイテムとして扱われるようになる。

というわけで、box1の中に複数のアイテムを持っているような例からスタートしよう。 HTML とCSSはこんなかんじ。

<div class="wrapper">
  <div class="box1">
    <div class="nest">a</div>
    <div class="nest">b</div>
    <div class="nest">c</div>
  </div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
  <div class="box5">Five</div>
</div>

.wrapper {
  color: white;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(60px, auto);
}

.wrapper div{
  padding: 10px;
}

.box1 {
  background-color: #660000;

  grid-column-start: 1;
  grid-column-end: 5;
}

.nest {
  background-color: ivory;
  color: black;
  border-color: tomato;
  border-style: solid;
}

.box2 {
  background-color: #006600;
}

.box3 {
  background-color: #000066;
}

.box4 {
  background-color: #666600;
}

.box5 {
  background-color: #660066;
}

レンダリング結果はこう

ここで、box1にdisplay: contentsをセットすると、

のように、box1の内側の要素がボックスコンテナの直近の子孫のようにグリッドに並ぶことになる。

CSS GRIDを勉強してみる(9) - 絶対位置指定との関係

グリッドコンテナやアイテムが絶対位置指定のブロックとどういう関係になるか、見てみる。

出発点は、こんなHTMLとCSS。box3に長い文章が含まれている。

div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">
    このブロックに絶対位置を指定する。
    グリッドコンテナがブロックを含んでいて、
    絶対位置指定のオフセット値がここに位置するエリアの外側の端から計算される
    ようにしたい。
  </div>
  <div class="box4">Four</div>
  <div class="box5">Five</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  grid-gap: 20px;
}

.box3 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

さて、ではこのbox3にposition: absolute;を設定してみよう。

.box3 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;

  position: absolute;
  top: 60px;
  left: 30px;
}

box3はグリッド配置のルールから抜け出し、ウィンドウに対してオフセットされた位置に配置される。 これをグリッドの配下にしたいのであれば、グリッドコンテナをポジショニングコンテキストにする必要がある。 どうするかといえば、position: relative;をセットする。ふーん、よくわかんない。positioning context?

まあ、実例を見るとなんとなくわかる。コンテナのCSSをこう変える。

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  grid-gap: 20px;

  position: relative;
}

すると、こうなる。

box3は、指定したグリッド位置に対してオフセットされて配置される。 ただし、グリッドのアイテムにはならないので、その位置も他のアイテムで埋められて重なる。 Zオーダーのルールはよくわからないけど、絶対位置指定したものが上にくる？

グリッドのアイテムに対して絶対位置指定したブロックを出したければ、当然、こうなる。

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three
    <div class="absarea">
      このブロックに絶対位置を指定する。
      グリッドコンテナがブロックを含んでいて、
      絶対位置指定のオフセット値がここに位置するエリアの外側の端から計算される
      ようにしたい。
  </div>
  </div>
  <div class="box4">Four</div>
  <div class="box5">Five</div>
</div>

.box3 {
  background-color: #000066;

  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;

  position: relative;
}

.absarea {
  color: black;
  background-color: palegreen;

  position: absolute;
  top: 100px;
  left: 80px;
}

CSS GRIDを勉強してみる(8) - グリッドをフレックスボックスに近づける

残念だが、ここから翻訳がなくなっているのでエゲレス語を読むしかない。とほほ。

さて、フレックスボックスとfrとminmax()を使ったグリッドは、一列の幅いっぱいにアイテムが 広がるという意味では似ている。しかし、全体の幅を広げたり狭めたりしたときに フレックスボックスでは1列に収まるアイテム数(列数)が変わるのに対して、 grid-template-columns: repeat(3, 1fr);と宣言してあったら、どんなに全体の幅を広げても 列数は3から変わらない。

しかし、grid-template-columns: repeat(auto-fill, 200px);のようにすると、幅の変更に追従するようになる。

列幅200px

250pxにすると、3つ収まらなくなるので縦に伸びる。

しかし、幅いっぱいになっていない点がフレックスボックスの例と異なる。 そこで、grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));とすると、 幅いっぱいまで列幅が広がってくれる。