Windows10 + heroku + github + Ruby on Rails 事始め⑤ 画像編（2020/02版）

# 概要

 - [事始め③](https://qiita.com/miu200521358/items/3faf4d5d04e19d858b06)で作成したユーザー情報テーブルにプロフィール画像を追加する
 - 画像をファイルパス形式で扱う

# 画像をパス形式で表示する

## 画像を用意する

まずは `public`フォルダ以下に画像を配置します。
画像は、[いらすとや](https://www.irasutoya.com/)様よりお借りしました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/290101d1-416b-6c7f-2139-991a545cb47c.png)

## カラム追加

命名規約に沿ってコマンドを実行すると、そのコマンドに応じた変更が適用されます。

```
rails generate migration クラス名 カラム名:データ型 (カラム名:データ型 ...)
```

>クラス名はAddXXXToYYYまたはRemoveXXXFromYYYとします。
>YYYにはテーブル名を指定します。
>XXXには追加又は削除するカラム名を指定するのですが違う文字列でも構いません
>(複数のカラムを同時に追加する場合などは指定できないので)。

引用元: [Ruby on Rails カラムの追加と削除 - Qiita](https://qiita.com/azusanakano/items/a2847e4e582b9a627e3a)

```bash
<ワークディレクトリ>/ror-sample (work-create-page)
$ rails generate migration AddImagePathToUsers image_path:string
      invoke  active_record
      create    db/migrate/20200205032200_add_image_path_to_users.rb
```

`db/migrate/20200205032200_add_image_path_to_users.rb` が作成されました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/5038a620-ad16-a5ea-205b-0d27213f7017.png)


## 画面表示設定

`image_tag` を使って画像の表示を指定します。

```ruby
<% @users.each do |user| %>
<dl>
    <dt><%= user.name %></dt>
    <dd>
        <ul>
            <li>性別: <%= user.sex %></li>
            <li>誕生日: <%= user.birthday %></li>
            <li><%= image_tag user.image_path %></li> 
        </ul>
    </dd>
</dl>
<% end %>
```

## 初期データ設定

`db\seeds.rb` で初期データを設定します。
パス区切り文字は `\` ではなく、 `/` を使用してしてください。
画像パスは `public`ディレクトリをルートと見なしたパスとなります。
（`asset` 以下に画像を設定する方法もあります）

```ruby
User.create(:name => "山田　太郎", :sex => 1, :birthday => "2011-11-14", :image_path => "/user/casino_dealer_man.png")
User.create(:name => "佐藤　花子", :sex => 2, :birthday => "2012-02-08", :image_path => "/user/hatake_tagayasu_woman.png")
User.create(:name => "田中　葵", :sex => 3, :birthday => "2013-10-25", :image_path => "/user/job_sakaya_woman.png")
```

## DB定義更新

DB定義を変更したので、マイグレーションを行います。
ただ、データ入力も最初からやり直したいので、`reset`を追加したい…のですが、Windowsでは `rails db:migrate:reset` が失敗するそうなので、手動削除の後、作成し直します。
参考：[Ruby on Rails - db:migrate:reset でエラーが出ます｜teratail](https://teratail.com/questions/67393)

```bash
<ワークディレクトリ>/ror-sample (work-create-page)
$ rm db/development.sqlite3

<ワークディレクトリ>/ror-sample (work-create-page)
$ rails db:create db:migrate
Database 'db/test.sqlite3' already exists
Created database 'db/development.sqlite3'
== 20200201042410 CreateBlogs: migrating ======================================
-- create_table(:blogs)
   -> 0.0037s
== 20200201042410 CreateBlogs: migrated (0.0038s) =============================

== 20200203060442 CreateUsers: migrating ======================================
-- create_table(:users)
   -> 0.0105s
== 20200203060442 CreateUsers: migrated (0.0106s) =============================

```

## スキーマ確認

```sql
$ rails dbconsole
.schema users
CREATE TABLE IF NOT EXISTS "users" ("id" integer PRIMARY KEY AUTOINCREMENT NOT NULL, "name" varchar, "sex" integer, "birthday" date, "image_path" varchar, "created_at" datetime NOT NULL, "updated_at" datetime NOT NULL);
```

## 初期データ投入

```bash
$ rake db:seed
```

## データ確認

```
select * from users;
1|山田　太郎|1|2011-11-14|/user/casino_dealer_man.png|2020-02-05 04:14:13.126918|2020-02-05 04:14:13.126918
2|佐藤　花子|2|2012-02-08|/user/hatake_tagayasu_woman.png|2020-02-05 04:14:13.291832|2020-02-05 04:14:13.291832
3|田中　葵|3|2013-10-25|/user/job_sakaya_woman.png|2020-02-05 04:14:13.418899|2020-02-05 04:14:13.418899
```

## サーバー起動

```bash
<ワークディレクトリ>\ror-sample>rails server
=> Booting Puma
=> Rails 5.2.4.1 application starting in development
=> Run `rails server -h` for more startup options
*** SIGUSR2 not implemented, signal based restart unavailable!
*** SIGUSR1 not implemented, signal based restart unavailable!
*** SIGHUP not implemented, signal based logs reopening unavailable!
Puma starting in single mode...
* Version 3.12.2 (ruby 2.6.5-p114), codename: Llamas in Pajamas
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://localhost:3000
Use Ctrl-C to stop
```

## 画面確認

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/d111e732-567d-7c22-2144-658555570ecd.png)

画像が表示されました。

## 動画を表示したい場合

画像は `image_tag` でしたが、動画は、`video_tag` で表示できます。
動画は `public` 配下におかないと参照できないそうなので、ご注意ください。

## github にあげる

```bash
<ワークディレクトリ>/ror-sample (work-create-page)
$ git add -A
$ git commit -m "プロフィール画像表示追加"
$ git push origin work-create-page
```

## heroku にデプロイする

再起動などで、ログイン認証が切れている場合、`heroku login` で再接続してください。

```bash
$ git push heroku work-create-page:master
Counting objects: 20, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (18/18), done.
Writing objects: 100% (20/20), 90.09 KiB | 6.43 MiB/s, done.
Total 20 (delta 11), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Ruby app detected
（略）
```

## heroku のDBを作り直す

```
Lunaria@Lunaria-PC MINGW64 /d/Project/20200201_heroku_ror/ror-sample (work-create-page)
$ heroku pg:reset <データベース名> --confirm <アプリ名>
```

データベース名は、herokuダッシュボードで確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/d4052d0b-26df-2cfd-6a35-c278b50a6205.png)

```bash
$ heroku run rails db:migrate
```

## 初期データ投入

```bash
$ heroku run rake db:seed
```

## データ確認

Dataclipはその時点のデータの状況を保持する？ようなので、新しくクリップを作って確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/cc529fa3-8a8d-488e-5c84-b9f1c95de33d.png)

## 画面確認

herokuでも画像が出せました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/cceffbc4-415b-031e-acea-3159b1d9d7b1.png)