[未経験からのRuby開発 #3] ダイビングのログブックを紙からWebに変える

#これなに
ここ2年でハマったダイビングで毎回書いている[ログブック](https://kotobank.jp/word/%E3%83%AD%E3%82%B0%E3%83%96%E3%83%83%E3%82%AF-663463#E3.83.80.E3.82.A4.E3.83.93.E3.83.B3.E3.82.B0.E7.94.A8.E8.AA.9E.E9.9B.86)が基本紙で管理していますが、毎回持ち歩くのが面倒なので、Webアプリをつくることにした記録です。

##過去日誌
- [Day2](https://qiita.com/nanataso/items/aca1c04025a242218a5c)
- [Day1](https://qiita.com/nanataso/items/ecfb17aa144486e3fb60)

#Day3にやったこと
##deviseのmigrateエラーをなおす
- Day2の終わりにmigrateがうまくいってないようなエラーがでて力尽きたのでその修正からスタート
    - Day1で `integer` を `int` とかいておいてmigrateできなかったことに忘れていたので、それを確認して修正
    - それでもできませんでした:runner_tone1::dash:

## 先生に相談
- bitbucketでみてくれて、細かくご指導いただきました
    - `bundle install device --path=/vender` してるけど、 `vender`directoryはgit にcommitしないのがお作法だが、commitしてしまっているので **Gemfileに書く**、**bundle installする**という方法でgemをinstallするように統一しましょう
    - なんでエラーになっているかも解説してもらいました
- こまめに `git push` するのをわすれずに
- で、結論 `rails new` から作り直してもいいかもね

ということで、なんの未練もないので最初からやりなおすことにしました。

##やりなおす
- ディレクトリ（素人の私はフォルダと呼んでいる）のnameを`logbook` から `_logbook` に変更します
- あとはDay1でやったrails newをする
- Omniauth は一旦今回は遠慮することにしたので、deviseを使ってログイン機能をつくることにします

###参考
- [[初心者] deviseを使ってログイン機能を実装してみよう](https://qiita.com/Orangina1050/items/a16e655519a60f35b394)

##deviseを使ってログイン機能をつくる
###application雛形をつくる
```
bundle exec rake db:create
rails g controller home index
```
- `rails g controller コントローラー名 アクション名` でコントローラの作成と指定したアクションとルートの設定とビューファイルの作成をする
    - controllerは事前にどんなページが必要か考えておかないとちんぷんかんぷんになるので注意


```ruby:config/routes.rb
Rails.application.routes.draw do
  devise_for :users
  root 'home#index'
  get 'home/index'
end
```
- `http://localhost:3000/` にアクセスして画面に「home#index」と表示されているのを確認してほっとする:hushed:

###deviseをinstall
- gemfileの一番下に `gem 'devise'` を追加

```
bundle install
rails g devise:install
rails g devise user
rake db:migrate
```
- `rails g devise テーブル名` これ重要！

###applicationのViewを実装する
```
rails g devise:views
```
- 今回参考にしているQiitaでは、新規登録画面とログイン画面の2つのViewファイルがあるので、確認する

```ruby:views/home/index.html.erb
<h1>ログインアプリ</h1>

<% if user_signed_in? %>
    <h4> メールアドレス： <%= current_user.email %> </h4>
    <%= link_to "ログアウト", destroy_user_session_path, method: :delete %>
<% else %>  
    <h2> 現在ログインしていません </h2>
    <%= link_to "ログイン", new_user_session_path, class: 'post' %>
    <%= link_to "新規登録", new_user_registration_path, class: 'post' %>
<% end %>
```
![スクリーンショット 2019-07-05 1.51.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160443/74f38ffd-47c9-ba01-9a9a-d765eaee0d5d.png)

:joy:

- 新規登録とログインをそれぞれクリックしてみる
![スクリーンショット 2019-07-05 0.19.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160443/3243c923-5000-4602-22d0-ea21211b3a11.png)

###どうでもいい作業：フォームの英語表記を日本語にする
- 私日本人だし日本語に変えられないのかな？というどうでもいいことを思う
- Viewをいじりだす。`label` のところを変更する

```ruby:views/devise/registrations/new.html.erb
<div class="field">
    <%= f.label :メールアドレス %><br />
    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
</div>
```

![スクリーンショット_2019-07-05_0_23_22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160443/bf3c68dd-1972-64f0-74e9-e1d184980b08.png)

```ruby:views/devise/sessions/new.html.erb
<h2>ログイン</h2>

<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
  <div class="field">
    <%= f.label :メールアドレス %><br />
    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
  </div>

  <div class="field">
    <%= f.label :パスワード %><br />
    <%= f.password_field :password, autocomplete: "current-password" %>
  </div>

  <% if devise_mapping.rememberable? %>
    <div class="field">
      <%= f.check_box :remember_me %>
      <%= f.label :ログイン状態を保持する %>
    </div>
  <% end %>

  <div class="actions">
    <%= f.submit "ログイン" %>
  </div>
<% end %>

<%= render "devise/shared/links" %>
```
- `devise/shared/links` なんじゃなかろうか？

```ruby:views/devise/shared/_links.html.erb
<%- if controller_name != 'sessions' %>
  <%= link_to "ログイン", new_session_path(resource_name) %><br />
<% end %>

<%- if devise_mapping.registerable? && controller_name != 'registrations' %>
  <%= link_to "新規登録", new_registration_path(resource_name) %><br />
<% end %>

<%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
  <%= link_to "パスワードをお忘れですか？", new_password_path(resource_name) %><br />
<% end %>
```
- やらなくてもいいのに日本語に変えていく

![スクリーンショット 2019-07-05 1.57.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160443/a6c8337b-df51-6518-c595-b76c1f487a03.png)

###新規登録に名前を追加できるようにする
####usersテーブルにnameカラムを追加
- 念のためすでにnameがないかdbの `create_table` の内容を確認する

```
rails g migration AddNameToUsers name:string
rake db:migrate
```
- 新規登録画面のViewにnameフォームを追加
![スクリーンショット 2019-07-05 0.34.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160443/6abb0aa9-6aa6-3cff-7851-c197d4017d7a.png)

- 無駄なこだわりを見せて日本語に変更
![スクリーンショット 2019-07-05 0.35.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160443/38c3162c-ab46-d1c8-fbce-23f637ebd9f0.png)

- このままだと名前がDBに保存されないので、deviseが提供している `configure_permitted_parameters` メソッドを利用する

```ruby:controllers/application_controller.rb
class ApplicationController < ActionController::Base
    protect_from_forgery with: :exception

  before_action :configure_permitted_parameters, if: :devise_controller?

  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:name])
  end
end
```
- homeのViewに名前を追加

#Day3の成果
![スクリーンショット 2019-07-05 2.19.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160443/e8b2db34-48e3-df8b-f4a1-c6e8ba597705.png)
![スクリーンショット_2019-07-05_2_21_57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160443/ab5012da-1967-7b4f-ea18-27c13fe24b2f.png)
![スクリーンショット_2019-07-05_0_59_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160443/423275b6-b6c8-51ef-8a81-48b6b870f2c8.png)

同じようにログインフォームからもできました！

#Day4どうする
- ログイン後のhomeのcontrollerとviewをつくりたいので、どういうページにしたいか紙にかいてみる
- それをやるにはどうしたらいいか1回考えて先生に相談する