[途中]Rails tutorial 終了後、実際にサイトを作り公開する (windows)

# はじめに
Qiitaというか、こういうコミュニティサイトは初めてなので何ともぎこちなく進めます。
ここ最近rubyを勉強する機会があり「3ステップでしっかり学ぶ Ruby入門」や「たのしいRuby」やら「パーフェクトRuby」(途中で諦めた)をパラパラと見ていました。 その後、[Ruby On Rails tutorial](https://railstutorial.jp)を全てを理解をする事は諦めつつも最後まで行きました。それから2019/07/22 現在、何か簡単なサイトを遊びながら作りつつ、ついでに備忘録をとろうかなと思い、Qiitaを書いていく事にしました。
### ■ 環境
+ windows 8.1
+ Rails 5.1.6
+ ruby 2.3.3p222 (2016-11-21 revision 56859) [i386-mingw32]
+ Bundler version 1.15.3

### ■ tutorial (Rails 5.1 第4版)で省略した事
+ AWS Cloud9
+ Bitbucket
+ heroku
+ 3.6章 高度なセットアップの「minitest reporters」や「Guard」(設定が上手くいかず)
+ DB Browser for SQLite
+ 理解()

### ■ windows環境の注意点

+ dbを再度migrateする時「.sqlite3」ファイルを更新できないようです。[参照リンク](https://teratail.com/questions/67393)

```bash
# ↓ 失敗
$ rails db:migrate:reset 
# ↓ 成功
$ rm db/development.sqlite3  # test.sqlite3も同時にrmするならば → $ rm db/*.sqlite3
$ rails db:create db:migrate
$ rails db:migrate RAILS_ENV=test
```

# 目標
#### 1) ~~HelloWorld表示サイトを作成しherokuで公開~~ 完了(2019/07/23)
#### 2) ~~伝言掲示板サイトを作成しherokuで公開~~ 完了(2019/07/27)
#### 3) ~~ブログサイトを作成しherokuで公開~~ 完了(2019/08/04)
#### 4) sign in with twitterで認証する簡単な交流サイト
#### 5) ****
:
#### 99) Netflixの交流サイトを作成し自分の管理するサーバーで公開

# 本文
ここから目標を達成すべく実際にやった事を記述していきます。主に備忘録です。
## 0) 用語集メモ
[参照](https://qiita.com/drafts/2738db1cbb25e336f624/edit)

## 1) HelloWorld表示サイトを作成しherokuで公開
### 1-1 RailsでHelloWorld appを作成する(省略)
詳細は[tutorialの1章へ](https://railstutorial.jp/chapters/beginning?version=5.1#code-rails_command)
### 1-2 heroku導入
[参照](https://qiita.com/take1457a/items/70078badaff37b2d57e5)

## 2) 伝言掲示板サイトを作成しherokuで公開

~~「注意」2019/07/27 現在herokuにアップできず、どこが悪いのかわかっていません。間違った事を書いている可能性があります。~~  恥ずかしながらherokuの方のdbをmigrateしていなかったためのエラーでした。こういった事からも分かるように、ここに書かれている事を参考にする際は要注意です！！！何かおかしなことを平気で書いている可能性があります。

伝言掲示板サイトイメージ
![伝言掲示板サイトイメージ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467400/c25c4b97-5e85-f078-af93-7b2603b205a0.png)

### 2-1 デフォルトのGemfileについて確認
[参照](https://qiita.com/take1457a/items/a1e8f3bfd4254bda8a10)

### 2-2 generate について
![rails_generate.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467400/d09a1288-6914-9d94-6180-8394e3bda51d.png)
![rails_generate_detail.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467400/31aa5c27-99f4-f74a-167f-0a7500a3a37e.png)

### 2-3 手順(testはしません())

```bash
$ rails _5.1.6_ new dengon_keiziban #アプリ立ち上げ
```
Gemfil書き換え (各機能をよくわかっていないためtutorialから拝借+α)

```:Gemfile
source 'https://rubygems.org'

gem 'rails',        '5.1.6'
gem 'bootstrap-sass', '3.3.7' #追加した(便利なフレームワーク)
gem 'puma',         '3.9.1'
gem 'sass-rails',   '5.0.6'
gem 'uglifier',     '3.2.0'
gem 'coffee-rails', '4.2.2'
gem 'jquery-rails', '4.3.1'
gem 'turbolinks',   '5.0.1'
gem 'jbuilder',     '2.7.0'

gem 'will_paginate',           '3.1.6' #追加した(ページング用)
gem 'bootstrap-will_paginate', '1.0.0' #追加した(ページング用)

group :development, :test do
  gem 'sqlite3', '1.3.13'
  gem 'byebug',  '9.0.6', platform: :mri
end

group :development do
  gem 'web-console',           '3.5.1'
  gem 'listen',                '3.1.5'
  gem 'spring',                '2.0.2'
  gem 'spring-watcher-listen', '2.0.1'
end

group :test do
  gem 'rails-controller-testing', '1.0.2'
  gem 'minitest',                 '5.10.3'
  gem 'minitest-reporters',       '1.1.14'
  gem 'guard',                    '2.13.0'
  gem 'guard-minitest',           '2.4.4'
end

group :production do
  gem 'pg', '0.20.0'
end

# Windows環境ではtzinfo-dataというgemを含める必要があります
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

```

```bash
$ bundle update
$ bundle install
$ rails generate controller Mains home write #コントローラー Main/ home, write 生成
```

動作確認

```bash
$ rails server # $ rails s
#localhost:3000にアクセス。動作確認
$ git init
$ git add -A
$ git commit -m "Initial repository" # 以降commitは各自の判断で
# ctrl + c
# y + enter
```

```bash
$ rails generate model Main name:string comment:text #モデル Main (name, comment) 生成
$ rails db:migrate #migrate 内容を元にdbを構築
# もしwindows使っていてdbを入れなおす場合以下の通りすると良いかもしれない
# $ rm db/*sqlite3
# $ rails db:create db:migrate
```

(ここはしなくてもいい) 寂しいのでdbに事前にデータを入れておく

```ruby:db/seeds.rb
10.times do |i|
  Main.create!(
    name: "Name #{i+1}",
    comment: "Comment #{i+1}",
  )
end
```

```bash
$ rails db:seed
# dbにちゃんと入ったか確認したい場合は以下の通りすると良いかもしれない
# $ rails console
# > Main.count
# 10 が返ってきたらok
# exit
```

routesを変更(createの部分をあまり理解できていない)
「注意」私は手探りで作っています。正しくない事をやっているかもしれません。

```ruby:config/routes.rb
Rails.application.routes.draw do
  root 'mains#home'
  get  '/home',   to: 'mains#home'
  get  '/write',  to: 'mains#write'
  post '/write', to: 'mains#create'
end
```

controllerを変更

```ruby:app/controllers/mains_controller.rb
class MainsController < ApplicationController
  def home
    @mains = Main.paginate(page: params[:page], per_page: 5)
  end

  def write
    @main = Main.new
  end

  def create
  @main = Main.new(main_params)
  if @main.valid?
    if @main.name.empty?
      @main.name = '名無し'
    end
    @main.save
    flash[:success] = '投稿完了!'
    redirect_to(home_path)
  else
    flash[:danger] = '投稿失敗!'
    redirect_to(write_path)
  end
end

private

  def main_params
    params.require(:main).permit(:name, :comment)
  end
end
```

modelを変更(validateを設定する)

```ruby:app/models/main.rb
class Main < ApplicationRecord
  validates :name, length: { maximum: 10 }
  validates :comment, presence: true, length: { maximum: 20 }
end
```

viewを変更

```ruby:app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title><%= yield(:title) %> | 伝言掲示板</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

    <!--[if lt IE 9]>
      <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
      </script>
    <![endif]-->
  </head>
  <body>
    <% flash.each do |message_type, message| %>
      <div class="alert alert-<%= message_type %>"><%= message %></div>
    <% end %>
    <%= yield %>
  </body>
</html>
```

```ruby:app/views/mains/home.html.erb
<% provide(:title, "Home") %>

<%= link_to "コメントを書き込む",   write_path, class: "btn btn-lg btn-info btn-block posi-fix"%>

<br><br>
<%= will_paginate %>

<% @mains.each do |main| %>
<div class="container text-left comment-box"><h3>
  <%= main.created_at.strftime("%Y-%m-%d %H:%M") %> @<%= main.name %><br>
  <%= main.comment %></h3>
</div>
<% end %>

<%= will_paginate %>
```

```ruby:app/views/mains/write.html.erb
<% provide(:title, "Write") %>
<%= link_to "戻る",   home_path, class: "btn btn-lg btn-info btn-block posi-fix" %>

<br><br><br><br>
<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <%= form_for(@main, url: write_path) do |m| %>
      <%= m.label :name %>
      <%= m.text_field :name, :placeholder => "名無し" %>

      <%= m.label :comment %>
      <%= m.text_area :comment %>

      <%= m.submit "書き込む", class: "btn btn-primary" %>
    <% end %>
    <p>Nameは10文字以下<br>Commentは20文字以下, 空文字なし</p>
  </div>
</div>
```
cssで体裁を整える
customファイルを作り書き込む(デフォルトのcssファイルをいじりたいが、こっちの方が良さそう)

```bash
$ touch app/assets/stylesheets/custom.scss
```

```css:app/assets/stylesheets/custom.scss
@import "bootstrap-sprockets";
@import "bootstrap";

.posi-fix {
  position: fixed;
}

.comment-box {
  background: #FFFFDD;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-bottom: 10px;
}

/* forms */
input, textarea, select, .uneditable-input {
  border: 1px solid #bbb;
  width: 100%;
  margin-bottom: 15px;
}
```
起動確認

```bash
$ rails server # $ rails s
#localhost:3000にアクセス。動作確認
# ctrl + c
# y + enter
```

heroku にデプロイ

```bash
$ git add -A
$ git commit -m "finish"
# 私はmasterブランチで編集しているのでmergeは省略
$ heroku login --interactive
Email: (heroku登録時のEmail)
Password: (heroku登録時のPassword)
$ heroku create
$ git push heroku master

###今回の失敗(heroku側でのdb構築忘れ)###
$ heroku addons:add heroku-postgresql
$ heroku run rails db:migrate
#####################################

$ heroku open
```
### 2-4 伝言掲示板完成図
![伝言掲示板完成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467400/f4673c24-3d8d-e0a9-fa75-8f995ec3a85d.png)

## 3) ブログサイトを作成しherokuで公開
まとめる力が無いため後でまとめようと思います。
ブログサイトイメージ
![ブログサイトイメージ1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467400/ffd96da0-c24e-d2b9-6a7c-d29df4e50a17.png)
![ブログサイトイメージ2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467400/d9e6ecb6-4dd7-ff59-e7b3-921df7b27933.png)

### 3-1 config について
[参照](https://qiita.com/take1457a/items/e12b216b909a940c5bab)

### 3-2 rails bootstrap gridシステムの基本
[参照](https://qiita.com/take1457a/items/f49271590be59c5a598e)

### 3-3 rails bootstrap paginationの基本
[参照](https://qiita.com/take1457a/items/48a501ce290a94235548)

### 3-4 rails has_many, belongs_toの基本

### 3-5 binary data (画像)をdbに入れる

### 3-7 log inについて

### 3-8 ブログサイト完成図
![ブログサイト完成図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467400/d33fc3b6-1a2d-71ae-738d-477fcbb69e2c.png)
![ブログサイト完成図2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467400/2c447640-7497-db36-937d-30ce8c96caba.png)

## 4) sign in with twitterで認証する簡単な交流サイト