Techpit:テックピット
  前のパートに戻る 完了して次のパートへ  

  2-6 サインアップ画面の見た目を整える

サインアップ画面の見た目を整える


このパートではサインアップ画面の見た目を整えていきたいと思います。

学習キーワード


- Bootstrap
- deviseが用意しているリンクを日本語にする
- I18n を使って日本語化

registrations/new.html.erbを編集する


ここではデフォルトでDeviseから吐き出されたコードにBootstrapでデザインを当て込んでいるのでRailsのコードは特に記載していません。

Bootstrapを活用したフォームのデザインは以下サイトなどにまとまっているので、以下を参考にしながら作るのが素早く作ることが出来ます。

https://bootsnipp.com/search?q=form

app/views/devise/registrations/new.html.erbを以下のように編集してください。

app/views/devise/registrations
└── new.html.erb

application.scssを編集する

次に、application.scssにsign_up.scssと_button.scssファイルが読み込まれるように以下のコードを追加します。app/assets/stylesheets/application.scssに以下のコードを追加してください。

app
└── assets
    └── stylesheets
        └── application.scss

components/_buttonファイルを追加する


次にapp/assets/stylesheetsのフォルダの中に、componentsフォルダを作成して、componentsフォルダの中に_button.scssファイルを作成します。作成したら、app/assets/stylesheets/components/_button.scssに以下のコードを追加します。

app
└── assets
    └── stylesheets
        └── components
            └── _button.scss

users/sign_up.scssファイルを追加する


次にapp/assets/stylesheetsのフォルダの中に、usersフォルダを作成して、usersフォルダの中にsign_up.scssファイルを作成します。作成したら、app/assets/stylesheets/users/sign_up.scssに以下のコードを追加します。

app
└── assets
    └── stylesheets
            └── users
                └── sign_up.scss

英語表記を日本語表記にする

http://localhost:3000/users/sign_up にアクセスしてみると、ログインのリンクやフォームのラベルが英語になっているので、日本語に修正していきます。

まずログインのリンクを日本語に直していきます。app/views/devise/shared/_links.html.erbを以下のように編集してください。

app
└── views
    └── devise
        └── shared
            └── _links.html.erb

次にlocaleの言語設定を日本語に変更します。 config/application.rbに以下のコードを追加してください。

config
└── application.rb

次にconfig/localesフォルダの中にja.ymlファイルを作成します。作成したら、config/locales/ja.ymlに以下のコードを追加します。

config
└── locales
    └── ja.yml

最後に http://localhost:3000/users/sign_up にアクセスしてみて、ログインリンクやフォームのラベルが日本語に変わっていればうまく動作しています。

Railsで言語を日本語化するときはこちらのドキュメントが参考になります。

参考)Rails国際化 (I18n) API

以上で今回のパートは終了です。

議論
9 質問