RubyMine で Rails Tutorial 5章

  •  
  •  
  •  

5章
ようやく Ruby on Rails を使い始めるという感じになって来ますね。

画像をダウンロードして来て assets/images/ に置くというのもでてきますが、RubyMine の IDE 上でもそのまま表示して確認できます。

bootstrap-sass をインストールするところは、bootstrap 4 に対応するモジュールに置き換えてみました。
https://github.com/twbs/bootstrap-rubygem を見ながら導入していきます。

stylesheets/custom.scss を作ります。

stylesheets/application.css を stylesheets/application.scss に変更します。
ファイル名を右クリックして、Refactor → Rename を実行します。

拡張子を scss に変更します。

Preview を押すと影響範囲が出て来ます。

Do refactor を押してファイル名の変更が終わります。

application.scss では custom.scss を import するように書いておきます。

この2行は消しておきます。

次に、javascripts/application.js に追加します。最初に定義されていたものと合わせて、こんな感じになりました。

この状態で rails server を起動してブラウザから見てみると、こんな感じになりました。
チュートリアルの画面とちょっと違うところもありますね。

Bootstrap 4 で変わったところを直してみました。

assets/stylesheets/custom.scss の変更点。

views/layouts/application.html.erb は変更が多くなったのでそのまま載せます。
nav 周りは大きく変わりましたね。

これで近い見た目になりました。先に進みます。

partial に切り出すところについては、RubyMine から切り出す行を選んで Refactor → Extract → Partial で作れます。

切り出した後は <%= render 'shim' %> のようになりますが、<%= render 'layouts/shim' %> と変更しないとうまく読まれないので直す必要があります。

リスト 5.20 の custom.scss では、変数名が変わっていることでそのままでは使えないようになっています。
変数を上の方で定義するのが簡単です。

その後はチュートリアルのまま進めて行けば特に引っかかるところはなかったです。

テストの実行や git の操作は GUI でやっても Terminal からやっても同じです。