1. Devise で認証機能を追加
facebook などのアプリにもあるようなログイン機能を追加してみましょう。
devise の gem をアプリにインストールして設定していきましょう。
Coachより： gemとはどのようなものか簡単に説明してください。
1.1. devise gem を追加
アプリの Gemfile を開いて、次の行を追加します。
gem 'devise'
そして、ターミナルもしくはコマンドプロンプト(Windows用)を開いてアプリのディレクトリへ移動し、次のコマンドを実行しましょう。
bundle install
bcryptで落ちる落ちる場合は下記参照
https://github.com/codahale/bcrypt-ruby/issues/149
gem のインストールができました。Rails のサーバーを再起動するのを忘れずに!
1.2. アプリに devise をセットアップ
次は、先ほどのディレクトリでこのコマンドを実行しましょう。
rails generate devise:install
1.3. Devise の環境設定
environments ファイルにデフォルトの url オプションを定義します。
config/environments/development.rb を開いて、最後の行のend と書かれているところの上の行に、次の行を追加しましょう。
config.action_mailer.default_url_options = { host: 'localhost:3000' }
さらに app/views/layouts/application.html.erb を開いて、
<% if notice %>
<p class="alert alert-success"><%= notice %></p>
<% end %>
<% if alert %>
<p class="alert alert-danger"><%= alert %></p>
<% end %>
これらを、次の行の上の行に追加します。
<%= yield %>
また、 app/views/ideas/show.html.erb を開いて、
<p id="notice"><%= notice %></p>
を削除します。
同じように app/views/comments/show.html.erb についても削除を行います。これらの notice 行は app/views/layouts/application.html.erb ファイルに同じ行を追加したので、必要ありません。
1.4. User model をセットアップ
User model を作るために generator を使います。
ターミナルもしくはコマンドプロンプト(Windows用)を開いてアプリのディレクトリへ移動し、次のコマンドを実行しましょう。
rails generate devise user
rails db:migrate
1.5. ユーザーを作成
これでユーザを作成する準備がすべて整いました。Devise がアカウントの作成、ログイン、ログアウトなどに関するすべてのコードやルーティングを生成してくれています。
Railsを起動している場合は、Railsを再起動してください。Railsが起動していない場合は起動してください。
Rails のサーバーが起動している事を確認したら、http://localhost:3000/users/sign_up をブラウザで開いてユーザーを作成してください。
1.6.サインアップとログインリンクの追加
あと、やらなければいけないことは、ユーザーがログインできる適切なリンク、または案内をナビゲーションバー右上のコーナーに追加することです。
そのために、 app/views/layouts/application.html.erb を開いて、
<p class="navbar-text float-right">
<% if user_signed_in? %>
Logged in as <strong><%= current_user.email %></strong>.
<%= link_to 'Edit profile', edit_user_registration_path, :class => 'navbar-link' %> |
<%= link_to "Logout", destroy_user_session_path, method: :delete, :class => 'navbar-link' %>
<% else %>
<%= link_to "Sign up", new_user_registration_path, :class => 'navbar-link' %> |
<%= link_to "Login", new_user_session_path, :class => 'navbar-link' %>
<% end %>
</p>
これらを、次の行の下の行に追加します。
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/ideas">Ideas</a>
</li>
...
</ul>
最後にログインしていない時に登録した内容を確認できないようにします。
app/controllers/application_controller.rb を開いて、end と書かれているところの前に、次の行を追加しましょう。
before_action :authenticate_user!
Coachより： ブラウザを開いてログインやログアウトを試してみてください。
2. デザインをもっと追加してみよう
- header , レイアウト , footer , button のデザインをもっと追加してみましょう。
2.1. header をデザインしよう
app/assets/stylesheets/application.css の最後に以下のコードを追加してください。
nav.navbar {
min-height: 38px;
background-color: #f55e55;
background-image: none;
}
次に、これらの行をコードの一番下に追加します。
.navbar a.navbar-brand { font-size: 18px; }
.navbar a.navbar-brand:hover {
color: #fff;
background-color: transparent;
text-decoration: none;
}
2.2.レイアウトをデザインしよう
この行を app/views/ideas/index.html.erb から見つけて、以下のように置き換えてください。：
<%= image_tag idea.picture_url(:thumb) if idea.picture.present?%>
↓
<%= image_tag(idea.picture_url, width: 600) if idea.picture.present? %>
このままでは写真が大きすぎるので、width の数字を 150 に変更しましょう。
app/assets/stylesheets/ideas.scss の最後に以下のコードを追加しましょう。
.container a:hover {
color: #f55e55;
text-decoration: none;
background-color: rgba(255, 255, 255, 0);
}
2.3.footer にスタイルを追加しよう
app/assets/stylesheets/application.css の最後にこのコードを追加しましょう：
footer {
background-color: #ebebeb;
padding: 30px 0;
}
2.4. button にスタイルを追加しよう
http://localhost:3000/ideas/new を開いて、Create Idea ボタンを見つけてください。
app/assets/stylesheets/ideas.scss にこれらのコードを追加しましょう。
.container input[type="submit"] {
height: 30px;
font-size: 13px;
background-color: #f55e55;
border: none;
color: #fff;
}
Coachより： ページを更新して変更を確認しましょう。それから、ヘッダーの色を変えて、試してみましょう。http://color.uisdc.com/ では、色のリファレンスを見ることができます。
16進数カラーコードを用いて色を設定することができます。16進数カラーコード（ex: #f55e55）は、左から2桁ずつ RGB を表しています。
実際に footer の色を変えてみましょう。
3. 管理画面を追加する
管理画面とは、サイトの管理者が見ることのできるページのこと。データの追加や編集、投稿の管理などができます。
rails_admin の gem を使って管理画面を追加してみましょう。
3.1. Gemfileに追加しよう
Gemfileに次の行を追加してください。
gem 'rails_admin', '~> 2.0'
その後ターミナルにて下記のコマンドで
bundle install
インストール
3.2. 設定しよう
ターミナルで
rails g rails_admin:install
全ての項目でenterを押す
3.3. 管理画面にアクセスしてみよう
アプリケーションを再起動して下記にアクセスしてみよう
http://localhost:3000/admin
3.4. おまけ(時間が合ったらdeviseと連携してみよう)
deviseと連携する
下記の部分をコメントアウトをはずしてみよう。
config.authenticate_with do
warden.authenticate! scope: :user
end
config.current_user_method(&:current_user)
ログインしていない時に登録した内容を確認できるようにして、管理画面はログインしないとみれない、普通の画面はログインしなくても見ることが出来るようにします。
app/controllers/application_controller.rb を開いて次の行を削除しましょう。
before_action :authenticate_user!
railsを再起動して
- ログインしているとき
- ログアウトしたとき
で
http://localhost:3000/admin
にアクセス出来るかどうかをチェックしよう。