New-Village

月間ブログ。だいたい1カ月に1回は更新しているようです。

アプリケーション作成(固定ページ作成)

初期環境構築の記事でも書いたが、苦労に苦労を重ねて、ようやく記事としてまとめることができた。

初期環境構築で作成した環境を使って、以下のページを構築する。

f:id:New-Village:20140816170023p:plain

いろいろ試行錯誤しているうちに、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) }
end

describe "ヘルプ画面" do
before { visit help_path }

it { should have_content('ヘルプ') }
it { should have_title(full_title('ヘルプ')) }
end

end

 

■ 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 &copy; 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