Railsアプリを作るときの共通パーツの設定
初期設定はこちら。 mom0tomo.hateblo.jp
共通レイアウトはapp/views/layouts/ に配置する。
headタグのパーツ
app/views/layouts/application.html.erb
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>アプリケーション名</title> <%= csrf_meta_tags %> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <%= render 'layouts/navbar' %> <div class="container"> <%= render 'layouts/flash_messages' %> <%= yield %> </div> </body> </html>
flashメッセージのパーツ
app/views/layouts/_flash_messages.html.erb
<% flash.each do |message_type, message| %> <div class="alert alert-<%= message_type %>"><%= message %></div> <% end %>
flash[:success] / flash[:danger]などよく使う。
エラーメッセージのパーツ
app/views/layouts/_error_messages.html.erb
<% if model.errors.any? %> <div class="alert alert-warning"> <ul> <% model.errors.full_messages.each do |message| %> <li><%= message %></li> <% end %> </ul> </div> <% end %>
以下は必須とは限らないがだいたい必要になるパーツ。
ナビバーのパーツ
app/views/layouts/_navbar.html.erb
<header> <nav class="navbar navbar-inverse navbar-static-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/">アプリケーション名</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Signup</a></li> <li><a href="#">Login</a></li> </ul> </div> </div> </nav> </header>