RubyMine で Rails Tutorial 13章

13章やります。あと少しです。

ActiveRecord の関連付けをすると、図も生成できるようになります。
右クリックして Diagrams → Show Diagram → Rails Model Dependency Diagram で作ることができます。

また、この章でもテストと実装とを行き来することが多いですが、ショートカットキーを使うと便利です。

実装からテストへの移動も、テストから実装(テスト対象)への移動もともに shift + command + T でした。
こういう統合開発環境はメニューからさわって一つずつ覚えていくのが使いこなすためのコツですね。

リスト 13.28 では、div.pagination の要素を確認するテストをしていますが、いまは Bootstrap 4 に対応した will_paginate-bootstrap4 を使っているため、ul.pagination が出力されます。テストもそのように直して実行しました。

13.3.2 の演習では if 〜 else 〜 end のそれぞれにパーシャルを作るというものでした。
RubyMine から簡単に切り出せるはずなのですが、後半はうまくできませんでした。

手で切り出します。

直したら test を流してエラーがないことを確認します。

リスト 13.57 の課題は、投稿数のテストです。fixtures で michael は34個(4個+30個)の投稿をするように設定しているので、その数を確認しています。

最後は画像のアップロード周りです。Rails 5.2.0 では carrierwave ではなく ActionStorage を使うのがいいようなのですが、ここではチュートリアルに従います。

リスト 13.63 のテストはそのままではうまく通りませんでした。post microposts_path には param の引数が必要なので、そのように括っておきます。

development ではローカルにアップロードしますが、production では fog を使って AWS S3 にアップロードするコードになっています。せっかくなので使ってみます。

13.4.4 にしたがって AWS で設定することで、無事 production でも画像のアップロードが動作しました。

AWSのコンソールからも確認できます。

RubyMine で Rails Tutorial DB接続について

Heroku (production) 環境でのDB接続について、PostgreSQL を使えていなかったようです。

addon として提供されていまして、無料の hobby-dev プランで作成しました。

heroku config すると、DATABASE_URL の変数が生成されていることがわかります。
これを config/database.yml に渡します。

あとは heroku に push すれば、使えるようになります。

チュートリアルのサイトには記載がないようです。Heroku のマニュアルで調べましょう。

RubyMine で Rails Tutorial 12章

12章をやります。

リスト 12.4 では、これまでやってきたように Bootstrap 4 に対応する形で class を書き直します。

リスト 12.18 はちょっと難しいですね。
get 〜 や post 〜 などでアクセスして assert_xxx で確認、というのを繰り返しているので、区切りながら読むといいと思います。

リスト 12.20 の演習はこんな感じにしました。

RubyMine だと : を => にするかとアドバイスが出てきますが、好みでいいと思います。

変えた場合はこのような書き方になりますね。わたしは : の書き方のほうに戻しておきました。

リスト 12.21 のマッチさせる文言はヒントにあるそのままですね。
password_resets_controller.rb の check_expiration メソッドで flash[:danger] として出しています。

演習の4つ目は、パスワードがリセットされたら reset_digest が nil になっていることを確認するというテストを追加します。

なかなか難しかったですね。
一からここまで考えてあれこれ作るのは大変だと思います。とても参考になります。

RubyMine で Rails Tutorial 11章

11章 やります。

メールでアクティベーションするというものですね。

Action Mailer は仕事でも使ったことがあります。監視ツールを作ったことがありまして、メール通知するのに使いました。
ERBで書けるので、これまで進めてきた Web の view と同じような感覚で作れます。

メールのプレビューは知らなかったです。これは便利ですね。

users_login_test.rb のテストが一つ通らなくなりました。

リスト 11.32 は 9.3 の課題 でやった assigns() への対応が反映されていないので、そのままだとこのようにエラーになります。

同様にメンバ変数として参照するように修正しておきます。

リスト 11.39 はこう書きます。

11.40 はこんな感じにしました。
activated が true のものだけを扱うということですね。

最後の SendGrid addon は、Heroku にクレジットカードを登録する必要がありました。

Heroku の Manage Account の画面から登録すれば使えるようになります。

config/environments/production.rb を設定します。
Heroku でのアプリケーションのURLを host に設定する必要がありますが、heroku open するとブラウザが開くのでわかりやすいでしょう。

このURLを production.rb に書いておきます。

実際に Heroku に deploy して、ユーザ登録を試してみます。

メールもちゃんと来ました。

リンクを踏んでユーザ登録完了です。ちゃんと動いてますね。

RubyMine で Rails Tutorial 10章

10章

まず、partial に切り出すところはこんな感じになるでしょうか。

new.html.erb にて、form_for 周りを選択します。

右クリックから Refactor → Extract → Partial で切り出します。

名前をつけます。チュートリアルに従って _form.html.erb とします。

これで切り出せました。

あとは少々調整します。new.html.erb と edit.html.erb の差分を見て、共通化できる部品を活かして、違うところは provide で渡します。
このスクリーンキャプチャでは form_for の一つ上も切り出してしまったのですが、gravatar_for があることに気が付いて調整しています。

new.html.erb

edit.html.erb

_form.html.erb

10.1.3 の演習では、テストを追加します。
わたしはブラウザに Chrome を使っているのですが、実際にエラー画面を表示させて右クリックから「検証」をするとこのようになります。

div.alert を指定すればいいということがわかるので、assert_test に追加します。

10.2.3 の演習でもテストを追加するのがありました。

/users/1/edit にアクセスする → ログインが求められる → ログインしたら /users/1/edit に戻って編集できるようになる、という確認で、ログイン前後での session[:forwarding_url] の値をチェックしておきましょうというテストです。
こんな感じにしてみました。

リスト 10.39 の CSS では $gray-lighter を使っていますが、Bootstrap 4 にはありません。上の方で定義しておきます。

10.3.1 のテストは、右上のメニューのところがログインしていないときとログインしたときで変わるというのを追加してみました。

ログインしていないとき

ログインしたとき

site_layout_test.rb

10.3.3 では will_paginate を使います。bootstrap-will_paginate では Bootstrap 4 に対応していないようなので、will_paginate-bootstrap4 を使ってみました。

10章で Gemfile に追加した部分

リスト 10.48 では div.pagination の要素があることを確認していますが、will_paginate-bootstrap4 では div ではなく ul になっていました。

リスト 10.56 のテストはこう書きました。admin 属性を変更しようとしてもできません、というものです。

10章は長い道のりでした。テストを書きながら実際に動かして進めていくと楽しいですね。

RubyMine で Rails Tutorial 9章

9章

特に RubyMine の使い方としてどうこうということもなくなってきました。
淡々と進めていきます。内容は結構難しいと思います。

リスト 9.27

リスト 9.28

全般的に難しいセクションだったと思います。

if (user_id = session[:user_id]) … というコードはわたしはあまり好きではないです。バグを産みやすいです。

RubyMine で Rails Tutorial 8章

8章 はログインについて。

もうだんだん RubyMine ではというものはなくなってきました。
淡々とチュートリアルをこなしていきます。

リスト 8.19 の _header.html.erb では、Bootstrap 4 だとドロップダウンのリンクがうまく出ません。
このように直してみました。

リスト 8.20 の app/assets/javascripts/application.js については、特に記述不要です。

こんな感じで表示されるようになりました。

RubyMine で Rails Tutorial 7章

7章

RubyMine で開きたいファイルを探すときは、shift を2回押すのが便利です。
ファイルに限らず、だいたいのものは探せます。

debug は RubyMine にもあるのですが、まだ使い方がよくわかっていません。
チュートリアルにあるように、byebug を使って debugger を埋め込むやり方のほうが手軽のようです。

new.html.erb を動かしたときに、フォームが真ん中に来ませんでした。

Bootstrap 4 のマニュアル を見ますと、offset-md-3 となっています。そのように修正します。

今度は真ん中に来ましたね。

Bootstrap のグリッドシステムでは、ブラウザの幅に応じてレイアウトを変えてくれるようになっています。
ここでは md だけ指定していますが、同時に複数の種類の class を指定することもできます。

col-md-6 offset-md-3 というのは、全体の 12 分割をどう使うかという指定です。
幅が6つ分の要素を作って、左に3つ開けるということで真ん中にくるようにしています。

エラー画面を作るところでは、.has-error がないと怒られました。

これも Bootstrap のマニュアルを見ると、:invalid に置き換わったようですね。そのように修正します。
. でなくて : で始まるクラス名になっているのは要注意です。

リスト 7.25 のテストを直すところは、こんな感じにしておきました。
_error_messages.html.erb に対応して、エラーとなったときに出てくるということです。

リスト 7.34 のテストは、ヒントに従って空文字列かどうかをチェックするようにしてみました。
成功していれば何か入ってますよということです。

最後に、production 環境で SSL 化して終わりです。
Webサーバは Rails 5.2.0 では Puma になっています。

RubyMine で Rails Tutorial 6章

6章やりますか。

Model を作ります。

db:migrate も右クリックからのメニューで実行できます。

チュートリアルでは DB Browser for SQLite が紹介されていますが、RubyMine でも右のほうにある Database メニューから DB を見ることができます。

+ボタンから Data Source → Sqlite を選択します。

ダイアログで右のほうにあるファイル選択ダイアログを開いて、DB のファイルを選択し、
RubymineProjects/sample_app/db/development.sqlite3 を選びます。

Test Connection を押して接続も確認しましょう。

先ほど作った User モデルに対応する users テーブルが見えるようになっています。
ダブルクリックすると select 文が実行されて中身が表示されますが、まだデータを入れていないので空になっています。

User モデルのテストを書きながらモデルも直していくという形で進めていきますが、RubyMine 上で簡単に行き来することができます。

テスト側からは、コマンドキーを押しながら User をクリックすると user.rb に移動できます。
user.rb からは、Goto → Test です。shift + command + T みたいですね。

ここまでは GUI でできるだけ操作するようにしてきましたが、Terminal でやっても同じです。
キーボードを打つほうが早いことも多いですし、そのときに慣れた方法を選んで使えばいいと思います。

最後はユーザを一つ作って終わりです。rails console も RubyMine の中から実行できます。

DB を確認すると正しく一つ入っていることが確認できます。

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 からやっても同じです。