Basic 4.ログイン機能、デザインの追加、管理画面を作成しよう

# 1. Devise で認証機能を追加

facebook などのアプリにもあるようなログイン機能を追加してみましょう。
devise の gem をアプリにインストールして設定していきましょう。

**Coachより：** gemとはどのようなものか簡単に説明してください。

![スクリーンショット (44).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496885/8fadaa9b-d475-4eb9-892b-b06720505084.png)



## 1.1. devise gem を追加

アプリの `Gemfile` を開いて、次の行を追加します。

```ruby: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` と書かれているところの上の行に、次の行を追加しましょう。

```ruby:config/environments/development.rb
config.action_mailer.default_url_options = { host: 'localhost:3000' }
```

さらに `app/views/layouts/application.html.erb` を開いて、

```erb: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 %>
```

これらを、次の行の上の行に追加します。

```erb:app/views/layouts/application.html.erb
<%= yield %>
```

また、 `app/views/ideas/show.html.erb` を開いて、

```erb: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](http://localhost:3000/users/sign_up) をブラウザで開いてユーザーを作成してください。

## 1.6.サインアップとログインリンクの追加

あと、やらなければいけないことは、ユーザーがログインできる適切なリンク、または案内をナビゲーションバー右上のコーナーに追加することです。
そのために、 `app/views/layouts/application.html.erb` を開いて、

```erb: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>
```

これらを、次の行の下の行に追加します。

```erb:app/views/layouts/application.html.erb
<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` と書かれているところの前に、次の行を追加しましょう。

```ruby:app/controllers/application_controller.rb
before_action :authenticate_user!
```

**Coachより：** ブラウザを開いてログインやログアウトを試してみてください。



# 2. デザインをもっと追加してみよう
- header , レイアウト , footer , button のデザインをもっと追加してみましょう。

![スクリーンショット (47).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496885/1075d28c-be3e-0af0-f889-0c1714ac20dd.png)


## 2.1. header をデザインしよう

`app/assets/stylesheets/application.css` の最後に以下のコードを追加してください。

```css:app/assets/stylesheets/application.css
nav.navbar {
  min-height: 38px;
  background-color: #f55e55;
  background-image: none;
}
```


次に、これらの行をコードの一番下に追加します。

```css:app/assets/stylesheets/application.css
.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` から見つけて、以下のように置き換えてください。：

```erb:app/views/ideas/index.html.erb
<%= image_tag idea.picture_url(:thumb) if idea.picture.present?%>
```

↓

```erb:app/views/ideas/index.html.erb
<%= image_tag(idea.picture_url, width: 600) if idea.picture.present? %>
```

このままでは写真が大きすぎるので、width の数字を 150 に変更しましょう。

`app/assets/stylesheets/ideas.scss` の最後に以下のコードを追加しましょう。

```css: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` の最後にこのコードを追加しましょう：

```css:app/assets/stylesheets/application.css
footer {
  background-color: #ebebeb;
  padding: 30px 0;
}
```

## 2.4. button にスタイルを追加しよう

[http://localhost:3000/ideas/new](http://localhost:3000/ideas/new) を開いて、`Create Idea` ボタンを見つけてください。

`app/assets/stylesheets/ideas.scss` にこれらのコードを追加しましょう。

```css: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/](http://color.uisdc.com/) では、色のリファレンスを見ることができます。
16進数カラーコードを用いて色を設定することができます。16進数カラーコード（ex: #f55e55）は、左から2桁ずつ RGB を表しています。
実際に footer の色を変えてみましょう。






# 3. 管理画面を追加する

管理画面とは、サイトの管理者が見ることのできるページのこと。データの追加や編集、投稿の管理などができます。
rails_admin の gem を使って管理画面を追加してみましょう。

![スクリーンショット (50).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496885/2f42ac07-2afc-ef72-e91d-2a01b84e256c.png)


## 3.1. Gemfileに追加しよう
`Gemfile`に次の行を追加してください。

```rb: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と連携する
下記の部分をコメントアウトをはずしてみよう。

```rb:config/initializers/rails_admin.rb
config.authenticate_with do
  warden.authenticate! scope: :user
end
config.current_user_method(&:current_user)
```

ログインしていない時に登録した内容を確認できるようにして、管理画面はログインしないとみれない、普通の画面はログインしなくても見ることが出来るようにします。
app/controllers/application_controller.rb を開いて次の行を削除しましょう。

```rb:app/controllers/application_controller.rb
before_action :authenticate_user!
```

railsを再起動して
- ログインしているとき
- ログアウトしたとき
で
http://localhost:3000/admin
にアクセス出来るかどうかをチェックしよう。