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

ポートフォリオ作成

Website Sell
トップ画面

まぁこんな派手なトップ画面を作成し、まずはデザインでしょって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

redgreen を表示できるようにする。

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もうちょっと変更しなきゃかもしれないけど。

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