Rails プロジェクトの開始(topページ表示まで) #Ruby

Railsのバージョンを指定してプロジェクト作成

cd ~/environment/ 　#作成するディレクトリへ移動
rails _5.2.5_ new アプリ名 --database=mysql --skip-test
　# version5.2.5を指定、DB:mySQL、testスキップ

データベース作成

cloud9OSがUbuntsの場合、database.ymlを変更

config/database.yml

(16行目) username: dbuser
(17行目) password: dbpass

作成したアプリへ移動cd アプリ名
データベースを作成rails db:create
rails sで動作確認（サーバを起動）

ジェネレータ設定

rails gで不要なものを自動生成しない設定
config/initializersに【generators.rb】ファイルを作成し、以下を必要に応じて記述

config/initializers/generators.rb

Rails.application.config.generators do |g|
  g.stylesheets false   #CSS
  g.javascripts false   #javascripts
  g.helper false        #helper
  g.skip_routes true    #routes
end

ページネーション(ページ割り)

Gemfileにgem 'kaminari'を追加し、bundle install
bootstrapデザインを適用rails g kaminari:views bootstrap4

トップページ作成(model不要)

1.ルーティング作成

config/routes.rb

Rails.application.routes.draw do
  root to: 'toppages#index'
end

2.toppage controllerを作成(indexアクション、viewファイル自動生成)
rails g controller toppages index

3-1.共通レイアウト
app/views/layouts/application.html.erbが全てのページ(view)の共通レイアウト。
追加で作成していくviewが<%= yield %>部分に反映されていく。

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html  lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>アプリ名</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

    <%= stylesheet_link_tag  'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script>
  </head>

  <body>
    <%= render 'layouts/navbar' %>

    <div class="container">
      <%= render 'layouts/flash_messages' %>

      <%= yield %> #ここにそれぞれのviewが反映される
    </div>
  </body>
</html>

3-2. フラッシュ
コントローラで設定する「フラッシュメッセージ」をパーシャル( _***.html.erb)として作成。

app/views/layouts/_flash_messages.html.erb

<% flash.each do |message_type, message| %>
  <div class="alert alert-<%= message_type %>"><%= message %></div>
<% end %>

3-3.エラーメッセージ
validationで発生する「エラーメッセージ」をパーシャルとして作成。

app/views/layouts/_error_messages.html.erb

<% if model.errors.any? %>
  <div id="error_explanation" class="alert alert-warning">
    <ul class="mb-0">
      <% model.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
    </ul>
  </div>
<% end %>

3-4.ナビバー
共通のナビバー（上部バー）をパーシャルで作成。

app/views/layouts/_navbar.html.erb

<header class="mb-4">
  <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
    <a class="navbar-brand" href="/">アプリ名</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
      <ul class="navbar-nav">
        <li class="nav-item"><a href="#" class="nav-link">Signup</a></li>
        <li class="nav-item"><a href="#" class="nav-link">Login</a></li>
      </ul>
    </div>
  </nav>
</header>

4.viewファイル編集

app/views/toppages/index.html.erb

<div class="center jumbotron">
  <div class="text-center">
    <h1>ようこそ、'アプリ名'へ！</h1>
  </div>
</div>

プレビューで表示を確認。