【Ruby on Rails】ポートフォリオ作成してみた。その３

ポートフォリオ作成

まぁこんな派手なトップ画面を作成し、まずはデザインでしょってCSSを凝りだしてみた。

ポートフォリオ作成

Bootstrap

まずBootstrapのボタンのカラーを変更したい。

どうしたらいいのだろう？

チュートリアルでBootstrapは入ってる。

ベースカラーが「#428bca」

表面的なカラーは変更できるんだけど、ボタンに対してBootstrapいろんな設定をしてくれていてボタンをクリックして最後のカラーって何よ？状態。

これはlessファイルを変更した方がいいんでしょ。

getbootstrap.com

この画面のColorを変更してDownloadする。

ダウンロードしたファイルを解凍してcssにある

bootstrap.css
bootstrap.min.css

app/assets/cssにアップロード。

jsにある

bootstrap.js
bootstrap.min.js

app/assets/javascriptにアップロード。

これで対応されるといいのですが。。。な状況です。

読み込みはしているのを確認したものの、「検証」で確認すると打ち消しが走ってしまっているのが気になる。

静的ページの作成から

まず、静的なページって概念が今までなかったから、チュートリアルの「ほぼ静的なページ」って？・・・って思っていたのだけど、ここからスタートだから最初は失敗した。静的なページの概念を勘違いしていた。

ここで言うところの静的ページになるところはhomeくらい。チュートリアルにはhelpも一緒に生成していたので、いつか使えるか？ってことで同じにすることにした。

コントロールの作成

$ rails g controller StaticPages home help

StaticPages：コントローラ名
home/help：アクション名

戻し方

コントローラ名を間違えたとかって気づいたら戻して再度生成した方が良いらしい。いろんなものが同時に作成されていてファイル名の修正しきれないし。

$ rails g destroy controller StaticPage home help

進めると・・・

config/routes.rb
追加したアクションのルールを設定する。

Rails.application.routes.draw do
　get 'static_pages/home'
　get 'static_pages/help'
　root 'application#hello'
end

この時点ではサンプルで最初に作った「ハロワ」がルートディレクトリにあるまま。

app/controllers/static_pages_controller.rb

class StaticPagesController < ApplicationController
　def home
　end
　

　def help
　end
end

app/views/static_pages/home.html.erb Homeページ用にビューが生成されている。

app/views/static_pages/help.html.erb Helpページ用にビューが生成されている。

まぁサンプルですからね。

チュートリアルのまま、テストをしていきます。

テスト

コントローラ作成でデフォルトのファイルは作成されている。

test/controllers/static_pages_controller_test.rb

require 'test_helper'

class StaticPagesControllerTest ActionDispatch::IntegrationTest

　test "should get home" do
　　get static_pages_home_url
　　assert_response :success
　end

　test "should get help" do
　　get static_pages_help_url
　　assert_response :success
　end
end

$ rails test

この状態はGREENですな。

基本的な感じはチュートリアルに沿って、ここでは別にREDにするテストしてから何かするってことじゃなくて、まずテスト部分を追加して、REDを確認してから、GREENになるように作成していくという手順が正しいということらしい。

慣れるまではやりたいことを書き始めちゃうんだけどね。

タイトルの修正

チュートリアル通りにやってみる。

html部分は・・・はてなブログに貼り付けられない。

HomeページをルートURLにする

Rails.application.routes.draw do
　root 'static_pages#home'
　get 'static_pages/home'
　get 'static_pages/help'
end

minitest reporters

redや green を表示できるようにする。

test/test_helper.rb

ENV['RAILS_ENV'] ||= 'test'
require File.expand_path('../../config/environment', FILE)
require 'rails/test_help'
require "minitest/reporters"
Minitest::Reporters.use!
　

class ActiveSupport::TestCase
　# Setup all fixtures in test/fixtures/*.yml for all tests
　# in alphabetical order.
　fixtures :all

　# Add more helper methods to be used by all tests here...
end

これ必要。ここの部分入れないとなぁって。

入れないとね、ダラダラ〜って大変なことになる。

ってことでホームはこんな感じでいっかな。

ヘッダー部分の設定

ヘッダーに

<header class="jumbotron">
　<div class="container">
　　<p><%= image_tag("logo.png", :alt => "Rails logo") %></p>
　</div>
</header>

として、あとはCSSで対応。app/assets/stylesheets/ custom.scssを新規で作成して

header.jumbotron{
　height: 650px;
　background: image-url("websell.png") center 0 no-repeat;
　background-size: cover;
}

h1.jumbotron-h1{
　text-indent:100%;
　white-space:nowrap;
　overflow:hidden;
}

@media (max-width: 767px){
　header.jumbotron {
　height: 410px;
　　background: image-url("websell@0.75x.png") center no-repeat;
　　background-size: cover;
　}
}

jumbotronもうちょっと変更しなきゃかもしれないけど。

次からは動的ページをまとめていく。