8 : トップページを作ろう!

前の章:ページを綺麗にしよう!

Header8

0 : この章の目的

0.0.0.0:3000」にページを設定し、CSSで画像を表示させる方法について学ぶ。
今まで作ってきたページは全て「0.0.0.0:3000/posts」や「0.0.0.0:3000/posts/1」などの少し長い入力をブラウザにしなければいけないページでした。

これだと少し長くて面倒ですよね。
今回は「0.0.0.0:3000」という簡単な入力で、下のようなトップページ風なページを表示してみたいと思います。
※ まだページを作っていないので、今はRailsの雛形のページが出てくると思います。 Chrome posts root これでなんとなくウェブページっぽくなるのではないでしょうか?
ではやってみましょう!


1 : トップページを作る

 ① : ページを設定しよう!


まずは「0.0.0.0:3000」を開いてみましょう!
 Windowsをご利用の方は、「localhost:3000」を開いてみて下さい。

下のような画面はでてきたでしょうか? Chrome localhost1 これは最初のrails newで作った雛形のページになります。
ここに自分のページを設定してみましょう。
ページを設定するにはなにをすれば良かったか覚えているでしょうか?
  • どのページを使うかの設定
  • データ操作の設定
  • ページの設定
3つでしたね。

今回はトップページなのでデータ操作をしないページを作ります。

今までデータ操作をするページしか作ってこなかったので、「データ操作をしないページを作ってもいいのか」という問題はありますが、実はできました。
データ操作をしない分だけ、このページではデータベースの定義(Excelの表を決めること)は必要ありません。

このようなデータ操作をしないページはindex」ページで設定します。
では実際にやってみます。
まずはターミナルでmyappにまで移動して下さい。


 Windowsでの移動の方法はこちらを参考


 ターミナル
1 2 3 cd Desktop cd rails_project cd myapp

移動ができたら下の入力をして下さい。

ターミナル
 Windowsをご利用の方は、「コマンドプロンプト」をご利用下さい。
1 rails g controller welcome

下のような表示はでてきたでしょうか? Rails g controller welcome この
rails g controller データベース名
の入力は、データベースにそったデータ操作とページの設定ファイルを作る入力でしたね。

今回はそのwelcomeデータベースは作っていませんね。
今回のようにデータ操作をせずページだけを表示させたい時は、ターミナルで
rails g controller 名前(単数形)
を入力して「controller」の設定ファイルとページの設定ファイルを作ります。

「welcome」データベースのデータ操作はする必要はないのですが、ページの設定のためにこの入力をします。
※ もしこのページでデータベースの保存された投稿を表示させるなら、作成された「controller」ファイルに「@post」などの設定を加える必要があります。

少し例外になりますが、覚えて下されば幸いです。

  • rails g controller 名前(複数形)
  • データベースを使うページ設定をします。(詳細はこちら
  • rails g controller 名前(単数形)
  • データベースを使わないページ設定をします。

まずは「どのページを使うか」から設定しましょう。
Sublime Textでmyappを開き、「config > routes.rb」を開いて下さい。
※ Sublime Textの開き方はこちらを参考にして下さい

このroutes.rb」ファイルに設定を加えます。

 まずは復習からです。「welcome」の「index」ページを使用するにはどのような設定を加えればいいでしょうか?
(分からなかったらこちらを参考)



 routes.rb
1 resources :welcome, :only => [:index]

この1行をroutes.rbに追加しましょう!
上の1行を追加したら、routes.rbに下の設定を加えましょう。

 routes.rb(4行目を追加)
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


1 2 3 4 5 5 6 7 8 9 ... 58 59 Rails.application.routes.draw do resources :posts , :only => [:show, :index, :new, :create, :edit, :update, :destroy] resources :welcome, :only => [:index] root "welcome#index" # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # You can have the root of your site routed with "root" # root 'welcome#index' # 省略 # end end

この
root "表示させるページの設定フォルダ#表示させるページ"
が「0.0.0.0:3000」で指定したページを表示する設定になります。

今回は「views > welcome」の「index.html.erb」の設定ファイルを「0.0.0.0:3000」で表示するよう設定しています。

また逆に「posts」の「index」ページをトップページにするなら、

1 root "posts#index"

のように設定します。

このように「0.0.0.0:3000」にページを表示するには、
root "表示させるページの設定フォルダ#表示させるページ"
で設定する。

 「views > top」にある「index.html.erb」を「0.0.0.0:3000」に表示させるには「routes.rb」にどのような設定をすればいいでしょうか?


 routes.rb
1 root "top#index"

使用するページの指定もできたので、次はデータ操作についてやってみたいと思います。
とは言っても設定することはありませんのですぐに終わります。

まずはapp > controllers > welcome_controller.rbを開いてみましょう!
これはさっきの「rails g controller welcome」で作られた設定ファイルで、ここにページごとのデータ操作を設定します。
このファイルを下のように設定してみましょう!

 welcome_controller.rb(2、3行目を追加)
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


1 2 3 4 class WelcomeController < ApplicationController def index end end

「welcome」ではindexのページのみを使うのでこのように設定しました。

今回はデータを表示させたりはしないのでなにも設定しませんが、例えば「post」のデータベースの情報を表示させたいなら、

1 @posts = Post.all

のように「@posts」の標識を設定して、それをhtmlで表示させます。

データを表示させるかどうかは別にして後で追加する可能性もあるので、上のようにindexのデータ操作の設定を加えましょう。
最後にページの設定をしてみましょう!
まずは、「app > views > welcome」に「index.html.erb」を保存してみましょう!
※ 保存の方法はこちらを参考にして下さい

この「index.html.erb」ファイルがページを表示させるための設定ファイルになります。

試しに内容を変更してみて、実際に表示させてみましょう!
まずは内容を下のように変更してみましょう!

 index.html.erb(welcomeファルダ)
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


1 2 3 <h1>ようこそ</h1> <br> <a href="/posts" class="btn btn-primary">投稿一覧を見る</a>

内容は大丈夫でしょうか?
「/posts」のリンクBootstrapの「btn」で作っていますね。

ではこれを開いてみましょう!
※ 内容を適用させるために、rails sで動かしたサーバーを「Control」と「c」を一緒に押して止めてから、もう一度rails sを入力して下さい。


 Windowsをご利用の方は、
 「rails s」で動かしたサーバーを「ctrl」と「c」を一緒に押して止めてから、もう一度「rails s」を入力して下さい。


0.0.0.0:3000を開いてみましょう!
 Windowsをご利用の方は、「localhost:3000」を開いてみて下さい。 Chrome posts root before このように表示されたでしょうか?
0.0.0.0:3000へのページの設定もできましたね。
次はこのページに内容を加えて、下のようなトップページにしてみましょう! Chrome posts root


 ② : ページを作ってみよう!


最初に設定した0.0.0.0:3000に画像を表示させてみましょう。
まずは画像ファイルをRuby on Railsの設定ファイルに追加します。

こちらに画像ファイルがあるので、これをダウンロードして、
「app > assets > images」に画像ファイルを保存して下さい。 Chrome image save assets1 Chrome image save assets2 Sublime Textでmyappを開いてみて、「app > assets > images > header12.jpg」を開いてみて下さい。
下のような画像は表示されたでしょうか? Sublime text header12 この保存された画像を表示させてみます。
まずはindex.html.erbを下のように変更してみて下さい。

 index.html.erb(1、3行目)
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


1 2 3 4 5 <div class="header-image"> <h1ようこそ</h1> </div> <br> <a href="/posts" class="btn btn-primary">投稿一覧を見る</a>

開いても内容は変更されていないと思いますが、
このheader-imageに画像を表示させる設定をstyle.scssに加えます。

 style.scss(7〜15行目を追加)
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


7 8 9 10 11 12 13 14 .header-image{ background-image: url(/assets/header12.jpg); height:400px; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; }

※ 一回rails sで動かしたサーバーを「Control」と「c」を一緒に押して止めてから、もう一度rails sを入力して下さい。


 Windowsをご利用の方は、
 「rails s」で動かしたサーバーを「ctrl」と「c」を一緒に押して止めてから、もう一度「rails s」を入力して下さい。


できたら、「0.0.0.0:3000」を開いてみましょう!
 Windowsをご利用の方は、「localhost:3000」を開いてみて下さい。

下のように表示されたでしょうか? Chrome posts root image
内容について説明しましょう。
まず、

8 background-image: url(/assets/header12.jpg);

ここで、先に保存したheader12.jpgheader-imageの背景に使用することを設定しています。

もしheader.jpgを使うなら、

8 background-image: url(/assets/header.jpg);

という設定になります。
9 height:400px;

で高さの設定をしています。
横の長さはコンピューターが画像の大きさに合わせて勝手に決めてくれますが、自分で決めたいなら
width:好きな長さpx(もしくは%)
できめることもできます。
最後の4行は、
10 11 12 13 -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover;

画面の大きさが変更された時に、それに応じた画像の大きさの変更をする設定になります。

いろいろな設定はありますが、コピペで使ってみて慣れましょう。
今の状態だと文字が左上の表示されて見づらいですね。最後にこの文字を中央に配置してみましょう。

まず文字を Chrome posts root text center みたいに中央揃えに配置してみましょう。これもBootstrapの設定でできます。

 index.html.erb(2行目を変更)
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


1 2 3 4 5 <div class="header-image"> <h1 class="text-center"><strong>ようこそ</strong></h1> </div> <br> <a href="/posts" class="btn btn-primary">投稿一覧を見る</a>

※ 「<strong>と</strong>」の間の部分は、強調されて表示されます。
※ 一回rails sで動かしたサーバーを「Control」と「c」を一緒に押して止めてから、もう一度rails sを入力して下さい。



 Windowsをご利用の方は、
 「rails s」で動かしたサーバーを「ctrl」と「c」を一緒に押して止めてから、もう一度「rails s」を入力して下さい。


できたら、「0.0.0.0:3000」を開いてみましょう!
 Windowsをご利用の方は、「localhost:3000」を開いてみて下さい。

文字は中央揃えになったでしょうか? Chrome posts root text center このようにBootstrapで文字を中央揃えにするには
text-center
をclassに設定します。

1 <h1 class="text-center"><strong>ようこそ</strong></h1>

また右揃えにしたければ「text-right」、左揃えにしたければ「text-left」を使います。
中央揃えにはできたと思いますが、まだ文字が上に張り付いていますね。
次はこれを直しましょう。

まずはこの「<h1>」に、class「header-content」を設定しましょう。

 index.html.erb
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


2 <h1 class="text-center header-content"><strong>ようこそ</strong></h1>

このheader-contentの装飾の内容をstyle.scssに設定していきます。

 まずは練習として、class「header-content」の文字の大きさを75pxにする設定をしてみましょう。

文字の大きさは、
font-size:文字の大きさpx;
で設定します。


 style.scss
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


16 17 18 .header-content{ font-size:75px; }

ではこのheader-contentに、文字を下に下げる設定を追加します。

文字を下に下げるなら空白を作る
margin-top:150px
でできるでしょうか?

実際に加えてみると、 Chrome posts root margin このように逆に上に空白ができてしまいました。
この「margin」は要素の外に空白を作る設定なので、今回のようにすでにある要素(<div>)の中では使っても外側に空白ができてしまします。

今回のような要素(<div>)の中で空白を作るには、「padding」という設定を使います。
ではこのpaddingを使って設定をしてみましょう。

 style.scss(18行目を追加)
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


16 17 18 19 .header-content{ font-size:75px; padding-top:150px; }

※ 一回rails sで動かしたサーバーを「Control」と「c」を一緒に押して止めてから、もう一度rails sを入力して下さい。


 Windowsをご利用の方は、
 「rails s」で動かしたサーバーを「ctrl」と「c」を一緒に押して止めてから、もう一度「rails s」を入力して下さい。


できたら、「0.0.0.0:3000」を開いてみましょう!
 Windowsをご利用の方は、「localhost:3000」を開いてみて下さい。

下のように表示されたでしょうか? Chrome posts root ここらへんは分かりづらい部分も多いと思うので、適宜使っていきながら試してみましょう。


 ③ : まとめ


この章では、
  • データ操作をしないページ設定
  • 0.0.0.0:3000」のページ設定
  • CSSを使った画像表示とPadding
の3つについて説明した。その内容についてまとめる。

設定した内容はこちらを参考にしてみて下さい
データ操作をしないページ

データベースへの保存などを使ったデータ操作をしないようなページを設定するにはindexページを使う。
ページ設定をするにはまず、

 ターミナル
1 rails g controller ページ名(単数形)

で設定ファイルviewとcontrollerを作成する。

これが終わったら、データ操作は行なわなくても3つの設定をする必要がある。

  • どのページを使うかの設定

  • データ操作をしないので、config > routes.rbindexだけを設定する。

     routes.rb
    1 resources :welcome, :only => [:index]

  • データ操作の設定

  • データ操作はしなくても、app > controllers > 名前_controller.rbdef indexを設定する。

     welcome_controller.rb
    1 2 3 4 class WelcomeController < ApplicationController def index end end

  • ページの設定

  • app > views > 名前のフォルダにindex.html.erbを保存し、好きに設定する。

     index.html.erb
    1 2 3 4 5 <div class="header-image"> <h1 class="text-center"><strong>ようこそ</strong></h1> </div> <br> <a href="/posts" class="btn btn-primary">投稿一覧を見る</a>

0.0.0.0:3000」へのページ表示

0.0.0.0:3000」にページを設定するにはconfig > routes.rb

 routes.rb
1 root "使用するviewフォルダ名#ページ名"

を設定する。
CSSの設定(画像表示とPadding)

  • CSSでの画像の表示

  • CSSを適用させるための領域「<div>」のclassで画像を表示させるには、

     style.scss
    7 8 9 10 11 12 13 14 .header-image{ background-image: url(/assets/header12.jpg); height:400px; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; }

    のように設定する。
    画像の名前「header12.jpg」高さ「height:400px;」以外は基本コピペで問題ない。
  • Padding

  • 要素の外の空白は「margin」で設定するが、要素の中の空白はpaddingで設定する。

     style.css
    1 2 3 .example{ padding:150px; }

    ここらへんは適宜設定を変えながら試してみましょう!

    設定した内容はここにまとめてあるので見てみて下さい


次の章では、「devise」というgemを使いユーザー管理ができるようにします。

ユーザー管理もできれば、もうウェブページもそれなりの形になるのではないかと思います。
まだ少しありますが、頑張っていきましょう!