More than 5 years have passed since last update.

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

Last updated at 2019-08-04Posted at 2019-07-22

はじめに

Qiitaというか、こういうコミュニティサイトは初めてなので何ともぎこちなく進めます。
ここ最近rubyを勉強する機会があり「3ステップでしっかり学ぶ Ruby入門」や「たのしいRuby」やら「パーフェクトRuby」(途中で諦めた)をパラパラと見ていました。その後、Ruby On Rails tutorialを全てを理解をする事は諦めつつも最後まで行きました。それから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」ファイルを更新できないようです。参照リンク

# ↓ 失敗
$ 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) 用語集メモ

参照

1) HelloWorld表示サイトを作成しherokuで公開

1-1 RailsでHelloWorld appを作成する(省略)

詳細はtutorialの1章へ

1-2 heroku導入

参照

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

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

伝言掲示板サイトイメージ

2-1 デフォルトのGemfileについて確認

参照

2-2 generate について

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

$ 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]

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

動作確認

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

$ 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に事前にデータを入れておく

db/seeds.rb

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

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

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

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を変更

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を設定する)

app/models/main.rb

class Main < ApplicationRecord
  validates :name, length: { maximum: 10 }
  validates :comment, presence: true, length: { maximum: 20 }
end

viewを変更

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>

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 %>

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ファイルをいじりたいが、こっちの方が良さそう)

$ touch app/assets/stylesheets/custom.scss

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;
}

起動確認

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

heroku にデプロイ

$ 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 伝言掲示板完成図

3) ブログサイトを作成しherokuで公開

まとめる力が無いため後でまとめようと思います。
ブログサイトイメージ

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

はじめに

■ 環境

■ tutorial (Rails 5.1 第4版)で省略した事

■ windows環境の注意点

目標

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) 用語集メモ

1) HelloWorld表示サイトを作成しherokuで公開

1-1 RailsでHelloWorld appを作成する(省略)

1-2 heroku導入

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

2-1 デフォルトのGemfileについて確認

2-2 generate について

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

2-4 伝言掲示板完成図

3) ブログサイトを作成しherokuで公開

3-1 config について

3-2 rails bootstrap gridシステムの基本

3-3 rails bootstrap paginationの基本

3-4 rails has_many, belongs_toの基本

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

3-7 log inについて

3-8 ブログサイト完成図

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

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

はじめに

■ 環境

■ tutorial (Rails 5.1 第4版)で省略した事

■ windows環境の注意点

目標

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) 用語集メモ

1) HelloWorld表示サイトを作成しherokuで公開

1-1 RailsでHelloWorld appを作成する(省略)

1-2 heroku導入

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

2-1 デフォルトのGemfileについて確認

2-2 generate について

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

2-4 伝言掲示板完成図

3) ブログサイトを作成しherokuで公開

3-1 config について

3-2 rails bootstrap gridシステムの基本

3-3 rails bootstrap paginationの基本

3-4 rails has_many, belongs_toの基本

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

3-7 log inについて

3-8 ブログサイト完成図

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

1) HelloWorld表示サイトを作成しherokuで公開完了(2019/07/23)

2) 伝言掲示板サイトを作成しherokuで公開完了(2019/07/27)

3) ブログサイトを作成しherokuで公開完了(2019/08/04)