アプリケーション作成(固定ページ作成)
初期環境構築の記事でも書いたが、苦労に苦労を重ねて、ようやく記事としてまとめることができた。
初期環境構築で作成した環境を使って、以下のページを構築する。
いろいろ試行錯誤しているうちに、bootstrap3の使い方が分かってきたので、調子に乗って Ruby on Rails チュートリアルのホーム画面とは異なる構成になってしまった。
■ とりあえず…
ブランチを作ります。
~/workspace/xapp9(master)$ git checkout -b static-pages
■ 固定ページの作成
チュートリアルにのっとって作っているので、まずはコントローラーとテストを作ります。
~/workspace/xapp9(static-pages)$ rails g controller StaticPages home help --no-test-framework
~/workspace/xapp9(static-pages)$ rails generate integration_test static_pages
■ テストの作成
はじめにテストを効率化するために、utilities.rbにホームページ・タイトルを生成するユーティリティを作成します。
./spec/support/utilities.rb
def full_title(page_title)
base_title = "XAPP9"
if page_title.empty?
base_title
else
"#{base_title} | #{page_title}"
end
end
次に固定ページのテストを作成します。
./spec/requests/static_pages_spec.rb
require 'spec_helper'
describe "Static pages" do
subject { page }
describe "ホーム画面" do
before { visit root_path }it { should have_content('xapp9') }
it { should have_title(full_title('')) }
it { should_not have_title('| Home') }
it { should have_link('ログイン', href: root_path) }
enddescribe "ヘルプ画面" do
before { visit help_path }it { should have_content('ヘルプ') }
it { should have_title(full_title('ヘルプ')) }
endend
■ Configファイル関係の修正
以前、アップロードした際にエラーが発生したので、慣例に基づいて以下の項目をコメントアウトしている。
./config/environments/production.rb
# Do not dump schema after migrations.
# config.active_record.dump_schema_after_migration = false
アセットプリコンパイルを設定。
./config/application.rb
module Xapp9
class Application < Rails::Application
...
config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
end
end
ルートファイルを設定。
./config/route.rb
Rails.application.routes.draw do
root 'static_pages#home'
match '/help', to: 'static_pages#help', via: 'get'
■ スタイルシートの設定
アセットパイプラインを設定します。
./app/assets/stylesheets/application.css
/*
* This is a manifest file that'll automatically include all the stylesheets
* available in this directory and any sub-directories. You're free to add
* application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style
* scope.
*= require_self
*= require_tree .
*/
ブートストラップのインポートと見た目を整えるためのスタイルシートを設定します。
./app/assets/stylesheets/custom.css.scss
@import "bootstrap";
/* mixins, variables, etc. */
$grayMediumLight: #eaeaea;
/* universal */
html {
overflow-y: scroll;
}body {
padding-top: 50px;
}section {
overflow: auto;
}textarea {
resize: vertical;
}h1, h2, h3, h4, h5, h6 {
line-height: 1;
font-weight: bold;
}.bold {
font-weight: bold;
}/* header */
.navbar-brand {
margin-right: 10px;
font-size: 1.7em;
color: white !important;
text-transform: uppercase;
letter-spacing: -1px;
&:hover {
color: white;
text-decoration: none;
}
}.navbar-btn {
margin-left: 10px;
}/* footer */
footer {
margin-top: 45px;
padding-top: 5px;
border-top: 1px solid $grayMediumLight;
color: $gray-light;
text-align: center;
}/* home */
.jumbotron {
text-align: center;
}
■ ヘルパーの設定
タイトルを動的に生成できるように、ヘルパーを作成します。
./app/assets/helpers/application_helper.rb
# ページごとの完全なタイトルを返します。
def full_title(page_title)
base_title = "XAPP9"
if page_title.empty?
base_title
else
"#{base_title} | #{page_title}"
end
end
■ ビューの作成
./app/views/layouts/_footer.html.erb
<footer>
<small>Copyright © kzki. All Rights Reserved. </small>
</footer>
./app/views/layouts/_header.html.erb
<header class="navbar navbar-inverse navbar-static-top navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<%= link_to "xapp8", root_path, class: "navbar-brand bold" %>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "ホーム", root_path %></li>
<li><%= link_to "ヘルプ", help_path %></li>
<li><%= button_to "ログイン", root_path, :class => "btn btn-success navbar-btn", :method => :get %></li>
</ul>
</div>
</div>
</header>
./app/views/layouts/_shim.html.erb
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
./app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
<%= render 'layouts/shim' %>
</head><body>
<%= render 'layouts/header' %>
<div class="container">
<%= yield %>
<%= render 'layouts/footer' %>
</div>
</body>
</html>
./app/views/static_pages/home.html.erb
<div class="jumbotron">
<h1>ようこそ XAPP8 へ</h1>
<p>このアプリケーションは、Railsビギナーによるテスト用アプリケーションです。</p><%= link_to "アカウントを作成", '#', class: "btn btn-primary btn-lg bold" %>
</div><div class="row">
<div class="col-md-4">
<h2>Railsチュートリアル</h2>
<p>このアプリケーションは、本格的なプログラミング経験の無い主が、Michael Hartlの"Ruby on Rails チュートリアル"を一通りこなした後に作成しているものです。</p>
<p><%= button_to "チュートリアル", 'http://railstutorial.jp/?version=4.0#top', class: "btn btn-default" %></p>
</div>
<div class="col-md-4">
<h2>新しい村</h2>
<p>このアプリケーションの作成過程については、主のブログ"新しい村”にて公開しています。</p><p> </p>
<p><%= button_to "新しい村", 'http://new-village.hatenablog.com', class: "btn btn-default" %></p>
</div>
<div class="col-md-4">
<h2>Github</h2>
<p>このアプリケーションのソースコードについてはGithubで管理しています。</p><p> </p>
<p><%= button_to "Github", 'https://github.com/Kzki/xapp8', class: "btn btn-default" %></p>
</div>
</div>
./app/views/static_pages/help.html.erb /help.html.erb
<% provide(:title, 'help') %>
<h1>help</h1>
<p>
このページの作成過程はブログ
<a href="http://new-village.hatenablog.com/">新しい村</a>
で記録しています。また、このソースコードは、
<a href="https://github.com/Kzki/xapp9">こちら</a>
から確認することができます。
</p>
■ 最後に
ここまでの更新をコミットして、各サービスにプッシュします。
~/workspace/xapp9(static-pages*)$ git add .
~/workspace/xapp9(static-pages)$ git commit -m "固定ページ作成"
~/workspace/xapp9(static-pages)$ git checkout master
~/workspace/xapp9(master)$ git merge static-pages
~/workspace/xapp9(master)$ git push
~/workspace/xapp9(master)$ git push heroku