7 : ページを便利にしよう!

前の章:ページを作ろう!

Header7

0 : この章の目的

 作ってみたページをもっとウェブページっぽくしてみる!
第5章第6章で、Ruby on Railsで作れるページの解説をして、ページを使ったデータ操作をやってみました。
でも今のサイトのままでは不便でダサいんで、それを直してみましょう!

この章では、 をやってみましょう!


1 : リンクを完成させよう!

では、ページをもっとクリックで移動できるようにしましょう!
ページ移動(リンク)は、例えばデータの全表示(index)に移動するリンクであれば

1 <a href="/posts">トップに戻る</a>

このように表示させましたね。
詳細はここを参考に見てみて下さい!
この章でも目標としては、
1つのデータの表示(show)」をするページに、下のような「編集するデータの記入(edit)」をするページへのリンクを Chrome posts 1 add edit全てのデータの表示(index)」をするページに、下のような「作成するデータの記入(new)」をするページへのリンクを Chrome posts all add new を加えてみます。
習った内容の復習も兼ねて、やってみましょう!


 ① : editページへのリンクを設定する


まずは編集するデータの記入(edit)をするページへの移動をするリンクを設定してみましょう!

ページの移動はどのようにして設定するか覚えているでしょうか?
※ 覚えていなかったら、ここを参考にしてみて下さい!

1つのデータの表示(show)」をするページに、「編集するデータの記入(edit)」をするページへのリンクを加えましょう。 Chrome posts 1 add edit
1つのデータの表示(show)をするページに設定を加えるので、show.html.erbに設定を加えていきます。

myappをSublime Textで開いてみて、中のapp > views > postsの中にあるshow.html.erbを開きましょう。
※ Sublime Textの開き方はこちらを参考にしてみて下さい

開けたら下のように内容を編集しましょう!

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


1 2 3 4 5 6 7 8 9 <h1>投稿</h1> <hr> <p><%= @post.name %></p> <p><%= @post.content %></p> <p><%= @post.place %> <hr> <p><a href="/posts">トップに戻る</a></p> <p><a href="/posts/<%= @post.id %>/edit">投稿を編集する</a></p> <p><a href="/posts/<%= @post.id %>" data-method="delete">投稿を削除する</a></p>

設定を加えられたら、「myapp」にまで移動して、


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


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

ページを表示させるためのサーバーを立ち上げましょう!

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

※ すでに立ち上げてたら、「Control」と「c」を押して一回停止させてから、もう一度rails sをしましょう!


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



できたら、「0.0.0.0:3000/posts/1」を開いてみましょう!
 Windowsをご利用の方は、「localhost:3000/posts/1」を開いてみて下さい。 Chrome posts 1 add edit リンクは追加されたでしょうか?
リンクが追加されたら、このリンクを開いてみましょう! Chrome posts 1 edit 1 データの編集をするページに移動できたでしょうか?
では、内容の説明をしましょう!

編集するデータの記入(edit)」をするページには、

 ブラウザ
1 0.0.0.0:3000/posts/1/edit

をブラウザで入力して移動しましたね。(詳しくはこちら
今回のリンクでもそれを設定しています。
リンクの文字列は、
<a href="飛ぶページ">表示する文字</a>
で設定します(詳細はこちら)。

「0.0.0.0:3000」というページ自体は「/」で表示できるので、「0.0.0.0:3000/posts/1/edit」のページへのリンク(クリックしたら移動する文字列)は、

1 <a href="/posts/1/edit">投稿を編集する</a>

で設定します。
上のままだと全ての「1つのデータの表示」をするページで「idが1」の編集画面に移動してしまうので、この設定を「idが1」のページのみならずページのidにそったものに対応づけます。

「1つのデータの表示(show)」をするページのデータ操作は下のようになっています。

 posts_controller.rb
1 2 3 def show @post = Post.find(params[:id]) end

これを参考にして、それぞれの「@post」のidにそった「編集するデータの記入(edit)」をするページへの移動をするリンクを設定してみましょう!
※ 分からなかったらここらへんを参考にしてみましょう



 show.html.erb
1 <p><a href="/posts/<%= @post.id %>/edit">投稿を編集する</a></p>


 ② : newページへのリンクを設定する


「edit」ページへの移動もできたので、新しいデータの記入(new)をするページへの移動をするリンクの設定をしてみましょう!

データの全表示(index)をするページに下のようなリンクを加えましょう! Chrome posts all add new
データの全表示(index)をするページを設定するので、index.html.erbに設定を加えます。ではやってみましょう!

myappをSublime Textで開いてみて、index.html.erbを開いてみましょう!
※ 開き方はこちらを参考にして下さい

「新しいデータの記入(new)」をするページへのリンクはどのようにして設定すればいいでしょうか?
※ 「新しいデータの記入(new)」をするページには、「0.0.0.0:3000/posts/new」をブラウザで入力することで移動できます(詳細はこちら)。


1 <a href="/posts/new">新しく投稿する</a>

では、これをindex.html.erbに設定しましょう!

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


1 2 3 4 5 6 7 8 9 <h1>投稿一覧</h1> <hr> <% @posts.each do |p| %> <p><a href="/posts/<%= p.id %>"><%= p.id %></a></p> <p><%= p.name %></p> <p><%= p.content %></p> <hr> <% end %> <a href="/posts/new">新しく投稿する</a>

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


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


サーバーが立ち上がったら、「0.0.0.0:3000/posts」を開いてみて下さい。
 Windowsをご利用の方は、「localhost:3000/posts」を開いてみて下さい。 Chrome posts all add new リンクは追加されたでしょうか?
リンクが追加されたら、リンクを開いてみましょう! Chrome posts new 1 ページの移動はできたでしょうか?

このように新しいデータの記入(new)をするページへのリンクは、

1 <a href="/posts/new">新しく投稿する</a>

で設定します。
データベースの名前が変わったらそれに応じた設定に変えましょう!
 「tweets」データベースの「新しいデータの記入(new)」をするページへ移動するリンクは、どのように設定すればいいでしょうか?


1 <a href="/tweets/new">ツイートする</a>


 ③ : まとめ


今回はページのリンクについて少し触れたので、今までに設定したリンクについてまとめる。

設定した内容はこちらを参考にしてみて下さい
データの作成(create)データの変更(update)をするページへの移動は、ブラウザでの入力ではなくページからの移動になるので、


の5つのページへのリンクについて説明する。

  • 1つのデータの表示(show)」をするページへのリンク

  • 例えば、

    1 <a href="/posts/1">投稿1</a>

    のように
    <a href="/データベース名/idの番号">表示する文字</a>
    
    で表示する(こちらも参考に)。
  • データの全表示(index)」をするページへのリンク

  • 例えば、

    1 <a href="/posts">投稿一覧を見る</a>

    のように
    <a href="/データベース名" >表示する文字</a>
    
    で表示する(こちらも参考に)
  • 新しいデータの記入(new)

  • 例えば、

    1 <a href="/posts/new">新しく投稿する</a>

    のように
    <a href="/データベース名/new">表示する文字</a>
    
    で表示する
  • 編集するデータの記入(edit)

  • 例えば、

    1 <a href="/posts/1/edit">投稿を編集する</a>

    のように
    <a href="/データベース名/idの番号/edit">表示する文字</a>
    
    で表示する
  • データの削除(destroy)

  • 例えば、

    1 <a href="/posts/1" data-method="delete">投稿1を削除する</a>

    のように
    <a href="/データベース名/idの番号" data-method="delete">表示する文字</a>
    
    で表示する(詳しくはこちら

ここまでで全てのページの移動の設定の方法を説明しました。
次はページを綺麗にしてみましょう!

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


2 : Bootstrapでページを装飾する

ページの移動もできて基本的なウェブページもできたんで、ページをもっと綺麗にしてみましょう!
htmlで作ったページの装飾は、

 style.css
1 2 3 4 5 .title{ color:white; font-size:30px; background-color:black; }

上のようなCSSファイルを使って設定をしました。
Ruby on Railsで作ったページも同じようにして設定します。

でも、このCSSファイルを0から設定してページを装飾するのは結構大変です。
この装飾・デザインの大変な作業を軽減してくれるために、公開されているCSSファイルを使ってページを作ることがあります。

今回はこの公開されているCSSファイルの中、Twitter社が開発をした「Bootstrapを使って装飾をしたいと思います。

この章では、Bootstrapが作ってくれたページの装飾に合わせて、ページを装飾してみましょう!

 ① : Bootstrapを導入しよう!


まずページの装飾のサポートをしてくれるBootstrapを導入してみましょう!
Ruby on Railsで作ったウェブページに「Bootstrap」を導入するには、前に使ったgemを使います。


 Windowsをご利用の方は、こちらからBootstrapの導入をして下さい。

 終わったら、こちらから次に進んで下さい。



復習をすると・・・

「gem」とは、Ruby on Railsでページを作る時に使うツールのことで、これを使えば例えば「ユーザー管理」や「画像の保存」などの面倒なツールを勝手に作ってくれる便利なものです。

Gemfile」に使うツールを設定して、ターミナルで「bundle install」を入力することでそのツールが使えるようになります。


このgemを使ってBootstrapを導入してみましょう!
まずはSublime Textでmyappを開き、中にあるGemfileを開いてみましょう!
※ Sublime Textの開き方はこちらを参考にして下さい Sublime text open gemfile このGemfileに、設定を加えます。

 Gemfile
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
※ rails5以上をお使いの場合は、29行目は追加しないで下さい


26 27 28 29 30 gem 'therubyracer' gem 'less-rails' gem 'twitter-bootstrap-rails' gem 'sprockets', '3.6.3' gem 'execjs'

この4行をどこかに加えましょう。
「Bootstrap」と書いているのは1つしかありませんが、コピペでもいいので、面倒くさがらず追加しましょう!
終わったらターミナルでmyappに移動して、

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

終わったらbundle installを入力して、gemをインストールしましょう!

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

 動かない場合は、Gemfile.lockを削除してから、試してみて下さい。

下のような表示は出てきたでしょうか? Terminal bundle install bootstrap これができたらターミナルで、

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

を入力して下さい。 Rails g bootstrap install このような表示が出てきたでしょうか?
これで「Bootstrap」の導入は完了しました!

※ ここで作ったCSSファイルはここからは見ることはできせんが、BootstrapのページからCSSファイルのダウンロードもできるので興味があったらみてみましょう。死ぬほど長いですが・・・
導入ができたらターミナルでrails sを入力して、サーバーを立ち上げて「0.0.0.0:3000/posts」をブラウザで開いてみましょう!

下のようにページの表示が少し変わりましたか? Chrome bootstrap 1 この「Bootstrap」でページを綺麗にしていきましょう!


 ② : Bootstrapを使う!


ここではBootstrapを使って、
  • ボタン
  • 入力欄
  • ページの上につくナビゲーションバー
の3つを作ってみます。
その前に・・・

今のページは、 Chrome bootstrap 1 と少しきつきつな感じになっていると思います。
まずはこれを直していきます。

 ⑴ : container


ここで全体的にきつきつになっているページを、 Chrome bootstrap container のように直してみます!
このページの表示も、Bootstrapでできるのでやってみます!
まずは、Sublime Textでmyappを開いて下さい。
※ Sublime Textの開き方はこちらを参考にして下さい

開けたら、app > views > layouts > application.html.erbを開いてみて下さい。

1 2 3 4 5 6 7 8 9 10 11 12 <!DOCTYPE html> <html> <head> <title>Myapp</title> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %> </head> <body> <%= yield %> </body> </html>

こんな感じのファイルは出てきたでしょうか?
このファイルには、最初に習った「<html>」や「<head>」などが入っていますね。
 簡単に内容について説明します。

10 <%= yield %>

に今まで作ってきたshow.html.erbindex.html.erbなどのページを表示させる設定ファイルが、埋め込まれて表示されていました。

このファイルに内容が埋め込まれていたので、それぞれのファイルで「<html>」や「<head>」を書く必要がなかったんです。

 各種のCSSファイルなどのページの装飾をする設定ファイルは、

5 6 7 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %>

で設定されています。
※ 「stylesheet_link_tag」でCSSファイルの設定、「javascript_include_tag」はjavascriptという動くページの作るための設定ファイル、「csrf_meta_tags」はセキュリティー対策をしていますが、覚える必要はありません。
ではこのapplication.html.erbを設定して、ゆとりのあるページに変えましょう!

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


1 2 3 4 5 6 7 8 9 10 11 12 13 14 <!DOCTYPE html> <html> <head> <title>Myapp</title> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %> </head> <body> <div class="container"> <%= yield %> </div> </body> </html>

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


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


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

下のように表示されたでしょうか? Chrome bootstrap container

今回はhtmlの新しいタグの<div>というものが出てきましたね。
この<div>についての説明をしましょう!
例えば下のようなhtmlファイルで、

 sample.html
1 2 3 <h1>RED</h1> <p>GREEN</p> <small>BLUE</small>

「<h1>」「<p>」「<small>」の各文字列に、

 style.css
1 2 3 4 .mysyle{ color:white; background-color:black; }

を適用させたいとします。
そうするには、、、

 sample.html
1 2 3 <h1 class="mystyle">RED</h1> <p class="mystyle">GREEN</p> <small class="mystyle">BLUE</small>

のように各文字列の設定にclassを加えることもできます。
ただこのように書くのは「class="mystyle"」が3回も入っていて、重複が多いですよね。
このように重複したCSSをまとめて書くのが「<div>」です。
<div>」を使えば、上の設定を下のように書くことができます。

 sample.html
1 2 3 4 5 <div class="mystyle"> <h1>RED</h1> <p>GREEN</p> <small>BLUE</small> </div>

この「<div>」と「</div>」で囲われた部分に、「<div>」で設定した「class」が適用されます。
なので今回のファイルで設定した、

10 11 12 <div class="container"> <%= yield %> </div>

「yield」で埋め込まれた「show.html.erb」などのファイルに、「class="container"」の設定を適用させています。

この「class="container"」の設定はBootstrapの設定で、ページに余白をいれています。

 Bootstrapを導入したら「application.html.erb」に下の設定を加える。

 application.html.erb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 <!DOCTYPE html> <html> <head> <title>Myapp</title> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %> </head> <body> <div class="container"> <%= yield %> </div> </body> </html>


 ⑵ : btn


余白の設定もできたので、まずはボタンから綺麗にしてみましょう!
まずはデータの全表示(index)をするページに作った新しいデータの記入(new)へのリンク(ページ移動するための文字列)を、 Chrome posts all bootstrap btn のような 青いボタン にしましょう!
Bootstrapで青いボタンを作るには、「class」に「btn」と「btn-primary」を指定します。

Sublime Textでmyappを開いて、app > views > posts > index.html.erbを開いて下さい。
※ Sublime Textの開き方はこちらを参考にして下さい

開けたら内容を下のように変更して下さい。

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


1 2 3 4 5 6 7 8 <h1>投稿一覧</h1> <hr> <% @posts.each do |p| %> <p><a href="/posts/<%= p.id %>"><%= p.id %>:<%= p.name %></a></p> <p><%= p.content %></p> <hr> <% end %> <a href="/posts/new" class="btn btn-primary">新しく投稿する</a>

ボタンの変更ついでに、4行目も変更しましたので忘れないで下さい。
1つのデータの表示(show)をするページへの移動の文字列を「id:名前」にしました。
※ 一回「rails s」で動かしたサーバーを「Control」と「c」を一緒に押して止めてから、もう一度「rails s」を入力して下さい。


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


サーバーを再起動させたら、「0.0.0.0:3000/posts」を開いてみましょう。
 Windowsをご利用の方は、「localhost:3000/posts」を開いてみて下さい。

下のような変更された画面がでてきたでしょうか? Chrome posts all bootstrap btn このようにBootstrapで青いボタンのリンクを作るには、
<a class="btn btn-primary">表示する文字列</a>
のようにclass="btn btn-primary"を加えることで設定します。

1 <a href="/posts/new" class="btn btn-primary">新しく投稿する</a>

ボタンの色は青だけではなくて、いろいろな色を使うことができます。

赤色のボタン だったら、btn btn-danger

1 <a href="/posts/new" class="btn btn-danger">赤色のボタン</a>

緑色のボタン だったら、btn btn-success

1 <a href="/posts/new" class="btn btn-success">緑色のボタン</a>

水色のボタン だったら、btn btn-info

1 <a href="/posts/new" class="btn btn-info">水色のボタン</a>

など・・・
詳しくは、ここのページを参考にしてみて下さい。

 緑色のボタンの「http://amazon.com」へのリンク(<a> amazon
を作る設定を答えてください。



1 <a href="http://amazon.com" class="btn btn-success">amazon</a>

このボタンの設定はなにに対してもできるので、「<a>」だけでなく「<h1>」や「<p>」などの普通の文字列に対しても使うことができます。

ボタンの設定の最後に、「new」ページや「edit」ページで設定した送信ボタンにこの設定をして、 Chrome posts new bootstrap btn Chrome posts edit bootstrap btn それぞれ上のような表示にしてみましょう!
まずは「new」ページからやっていきます。
まずはapp > views > posts > new.html.erbを開いてみて下さい。
開けたら、このnew.html.erbを下のように変更してみて下さい。

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


1 2 3 4 5 6 7 8 9 10 11 12 13 14 <h1>投稿を作る</h1> <hr> <%= form_for @post do |f| %> <p>名前</p> <%= f.text_field :name %> <p>内容</p> <%= f.text_area :content %> <p>場所</p> <%= f.text_field :place %> <hr> <%= f.submit "登録する", :class => "btn btn-primary" %> <% end %> <hr> <a href="/posts" class="btn btn-info">トップに戻る</a>

変更はできたでしょうか?
ボタンの設定だけではなく、線の設定(<hr>)もあるので気をつけましょう! Chrome posts new bootstrap btn このようにボタンが表示されたでしょうか?

16行目は先ほどやった内容なので分かるとは思うのですが、14行目が少し分かりづらいですね。

 new.html.erb(14行目)
14 <%= f.submit "登録する", :class => "btn btn-primary" %>

後ろに:class => "btn btn-primary"と書いてあるので、「class」を指定してることは想像できると思います。

送信ボタンで「class」を指定する場合はこの
,:class => "クラス名"
を追加しましょう!
ここに「btn」と好きなボタンの種類を設定すれば、ボタンの設定ができます。

 赤色の送信ボタン を設定してみましょう


1 <%= f.submit "登録する", :class => "btn btn-danger" %>

 edit」ページの表示をする「edit.html.erb」を変更し、 Chrome posts edit bootstrap btn のようにボタンが表示されるようにしましょう!
※ マウスを行の上に置けば、答えが表示されます。


 edit.html.erb(9、11、12行目を変更)
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
1 2 3 4 5 6 7 8 9 10 11 12 <h1>投稿を編集する</h1> <hr> <%= form_for @post do |f| %> <p>内容</p> <%= f.text_area :content %> <p>場所</p> <%= f.text_field :place %> <hr> <%= f.submit "変更する", :class => "btn btn-primary" %> <% end %> <hr> <a href="/posts/<%= @post.id %>" class="btn btn-info">投稿に戻る</a>

 この章で設定が終わった「show」ページの3つのリンクを Chrome posts 1 add edit 下のようなボタンにしてみましょう! Chrome posts show bootstrap btn ※ マウスを行の上に置けば、答えがでます
 show.html.erb
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


1 2 3 4 5 6 7 8 <hr> <p><%= @post.name %></p> <p><%= @post.content %></p> <p><%= @post.place %></p> <hr> <p><a href="/posts" class="btn btn-info">トップに戻る</a></p> <p><a href="/posts/<%= @post.id %>/edit" class="btn btn-success">投稿を編集する</a></p> <p><a href="/posts/<%= @post.id %>" data-method="delete" class="btn btn-danger">投稿を削除する</a></p>

余裕があったらまだ変更していない「create」「update」「destroy」のページも変更しましょう!

 Bootstrapでボタンを設定するには、「class」に「btn」と好きなボタンの種類を設定をします。

 edit.html.erb
1 <%= f.submit "変更する", :class => "btn btn-primary" %>


 ⑶ : form-control


ボタンの設定はできましたか?
class」の内容を少し変えるだけでできたので、意外と簡単にできたのではないかと思います。
次はこの「btn」と似ている感じで、入力欄の装飾もしてみたいと思います。

設定した入力欄を、 Chrome posts new bootstrap btn こんな感じの綺麗な入力欄にしましょう! Chrome posts new bootstrap form control myform
Bootstrapで入力欄を作るには、classform-controlを指定します。
まずは「new」の入力欄(new.html.erb)を変えてみましょう!

Sublime Textでmyappを開いて、app > views > posts > new.html.erbを開いて下さい。
※ Sublime Textの開き方はこちらを参考にして下さい

開けたら内容を下のように変更して下さい。

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


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <h1>投稿を作る</h1> <hr> <%= form_for @post do |f| %> <p>名前</p> <%= f.text_field :name, :class => "form-control" %> <br> <p>内容</p> <%= f.text_area :content, :class => "form-control" %> <br> <p>場所</p> <%= f.text_field :place, :class => "form-control" %> <hr> <%= f.submit "登録する", :class => "btn btn-primary" %> <% end %> <hr> <a href="/posts" class="btn btn-info">トップに戻る</a>

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


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


サーバーを再起動させたら、「0.0.0.0:3000/posts/new」を開いてみましょう。
 Windowsをご利用の方は、「localhost:3000/posts/new」を開いてみて下さい。

下のような画面は表示されたでしょうか? Chrome posts new bootstrap form control all なんかすごい長い入力欄ではありますが、綺麗な入力欄になったのではないかと思います。
このように綺麗な入力欄をBootstrapで設定するには、「class」にform-controlを設定します。

入力欄が「<%= 」「%>」で囲まれているので「class」は、
,:class => "クラス名"
で設定します

 数字「age」を記入する綺麗な入力欄をBootstrapで作るためにはどのような設定をすればいいでしょうか?
※ 数字を入れる入力欄はこちらを参考


1 <%= f.number_field :age, :class => "form-control" %>

 edit」するページの入力欄をBootstrapの設定を使って綺麗にしてみましょう!


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


1 2 3 4 5 6 7 8 9 10 11 12 13 <h1>投稿を編集する</h1> <hr> <%= form_for @post do |f| %> <p>内容</p> <%= f.text_area :content, :class => "form-control" %> <br> <p>場所</p> <%= f.text_field :place, :class => "form-control" %> <hr> <%= f.submit "変更する", :class => "btn btn-primary" %> <% end %> <hr> <a href="/posts/<%= @post.id %>" class="btn btn-info">投稿に戻る</a>

今の入力欄のままでは長すぎるので、それを短くしましょう!
短くするには、CSSで長さの設定をします。

長さは、
width:数字px;
をCSSファイルに設定します。
※ pxという単位は、実際に内容を変更して目分量で変えてみてください。
  参考で言うと、右にあるスライドバーの高さが400pxになります。


では、「new」ページの設定ファイル「new.html.erb」でやってみましょう!

まずはCSSの装飾を設定するための「class」を設定します。ここではmy-formという名前のクラスを追加しましょう。

new.html.erbを下のように変更してみましょう。

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


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <h1>投稿を作る</h1> <hr> <%= form_for @post do |f| %> <p>名前</p> <%= f.text_field :name, :class => "form-control my-form" %> <br> <p>内容</p> <%= f.text_area :content, :class => "form-control my-form" %> <br> <p>場所</p> <%= f.text_field :place, :class => "form-control my-form" %> <hr> <%= f.submit "登録する", :class => "btn btn-primary" %> <% end %> <hr> <a href="/posts" class="btn btn-info">トップに戻る</a>

まだ中身を設定していないので、このmy-form
width:500px;
を設定してみましょう!
まずは、自分で設定するCSSファイルを作ります。
「app > assets > stylesheets」style.scssのファイルを保存して下さい。
※ 保存の方法はこちらを参考にして下さい
※ 名前はなんでもいいですが、一応分かりやすい「style.scss」にしました。

このstyle.scssにCSSの設定を加えていきます。
でも、名前がなぜか「style.scss」と「style.css」ではないのですね。
Ruby on Railsではこのように後ろにscssを使うことで、CSSファイルを使う時の設定の

1 <link rel="stylesheet" href="style.css" type="text/css" />

を自分で追加する必要がなく、勝手に追加してくれます。
 この「style.scss」に
width:500px;
の設定の「my-form」を設定してみましょう!設定の仕方はCSSファイルの設定の方法と同じです。
※ CSSの書き方はこちらをみて下さい


1 2 3 .my-form{ width:500px; }

ここまでで入力欄の長さの設定は終了しました。
※ 一回rails sで動かしたサーバーを「Control」と「c」を一緒に押して止めてから、もう一度rails sを入力して下さい。


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


サーバーの再起動ができたら、「0.0.0.0:3000/posts/new」を開いてみましょう。
 Windowsをご利用の方は、「localhost:3000/posts/new」を開いてみて下さい。

下のように長さは短くなった入力欄になったでしょうか? Chrome posts new bootstrap form control myform
 同じようにして「edit」をするページの入力欄に「my-form」の設定を加えましょう!


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


1 2 3 4 5 6 7 8 9 10 11 12 13 <h1>投稿を編集する</h1> <hr> <%= form_for @post do |f| %> <p>内容</p> <%= f.text_area :content, :class => "form-control my-form" %> <br> <p>場所</p> <%= f.text_field :place, :class => "form-control my-form" %> <hr> <%= f.submit "変更する", :class => "btn btn-primary" %> <% end %> <hr> <a href="/posts/<%= @post.id %>" class="btn btn-info">投稿に戻る</a>

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

下のような表示はでてきたでしょうか? Chrome posts edit bootstrap myform
 Bootstrapで綺麗な入力欄を作るには、「class」に「form-control」を設定する。

 edit.html
1 <%= f.text_field :place, :class => "form-control my-form" %>


 ⑷ : navigation-bar


ここまで入力欄もボタンもできたところで、大分綺麗なページになったのではないかと思います。
ページの装飾の最後で、ページの上についているバー(navigation-bar)をBootstrapの設定した「class」で使ってみたいと思います。

感じとしては、下のようなものにしていきたいと思います。 Chrome posts all bootstrap nav 3
ではやってみましょう!
まずはmyappをSublime Textで開き、app > views > layouts > application.html.erbを開きましょう。
※ Sublime Textの開き方はこちらを参考にして下さい

このapplication.html.erbに設定を加えます。

では9行目の

 application.html.erb(9行目)
9 <body>

の後に、

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <nav id="mainNav" class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="/posts" class="navbar-brand">myapp</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> </ul> </div> </div> </nav>

  • コピー  「Command」と「c」
  •  Windowsをご利用の方は「ctrl」と「c」

  • ペースト 「Command」と「v」
  •  Windowsをご利用の方は「ctrl」と「v」

して追加して下さい。(自分で打つのは大変なので・・・)

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


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


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

下のような表示は出たでしょうか? Chrome posts all bootstrap nav 1 少し内容が被ってしまっていましたが、上にバーがついたと思います。
内容に関しては私もあまり理解でききっていないので説明はしません逆に言えば理解していなくてもコピペすれば使えますが、

10 <a href="/posts" class="navbar-brand">myapp</a>

タイトルの左側にでている「myapp」を出し、「<a>」のリンクで「/posts」へのページ移動をしています。
適宜内容を変えて使ってみましょう!
では、次に被ってしまった内容を直しましょう。
被ってしまった内容を直すには「show」や「index」などページを埋め込んで表示させている、

 application.html.erb(10〜12行目)
10 11 12 <div class="container"> <%= yield %> </div>

をCSSで少しだけ下にずらします。

まずはこの「div」に、main-pageの「class」を設定しましょう。

 <div class="container">に「main-page」のclassを追加してみましょう!


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


10 11 12 <div class="container main-page"> <%= yield %> </div>

では、CSSファイル「style.scss」に「main-page」の設定を加えましょう。


これは、
margin-top:50px;
のようにして設定します。

空白の大きさを変えたければ数字の部分を設定します。
空白を右に作りたければmargin-right:、左ならmargin-left:、下ならmargin-bottom:を設定します。
※ こちらも参考

まずはSublime Textでmyappを開き、app > assets > stylesheets > style.scssを開いてみましょう。
※ Sublime Textの開き方はこちらを参考にして下さい

開けたら下の設定を加えましょう!

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


4 5 6 .main-page{ margin-top:50px; }

これで「main-page」のclassの部分の上に50pxの空白ができました。

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


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


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

下のように表示されたでしょうか? Chrome posts all bootstrap nav 2
最後に下のように Chrome posts all bootstrap nav 3 右側にも新しく投稿するボタンを追加して、「new」ページに移動できるようにしましょう!

右側のボタンの設定は、

 application.html.erb(22,23行目)
19 20 21 22 23 24 25 26 <a href="/posts" class="navbar-brand">myapp</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> </ul> </div> </div> </nav>

に設定を加えます。
ではやってみます。上の22行目の下に内容を追加して下さい。

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


22 23 24 <ul class="nav navbar-nav navbar-right"> <li><a href="/posts/new">新しく投稿する</a></li> </ul>

ここで設定した「<li>」と「</li>」の間で囲われた部分が表示されます。
今回は<a href="/posts/new">新しく投稿する</a>」の部分になりますね。

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


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


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

下のように表示されたでしょうか? Chrome posts all bootstrap nav 3

 では、「/posts」に移動するリンク「トップに戻る」(<a>)を上のバーの右側に追加するための設定はどのようになるでしょうか?(23行目の上にマウスを置くと答えがでます)


 application.html.erb(22〜24行目)
22 23 24 <ul class="nav navbar-nav navbar-right"> <li><a href="/posts">トップに戻る</a></li> </ul>

他のページにも移動してみて、上に同じようなバーが出てくるかを確認して下さい。

 Bootstrapで上に表示させるバーを作るには、

 application.html.erb(10〜26行目)
9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <body> <nav id="mainNav" class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="/posts" class="navbar-brand">myapp</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> </ul> </div> </div> </nav> <div class="container"> <%= yield %> </div> </body>

を追加します。
自分でコードを打つ必要はないので、コピペでもいいのでとりあえず貼り付けてみましょう!

この中でも変更する必要があるのは、
  • 左側につけるボタン

  •  application.html.erb
    10 <a href="/posts" class="navbar-brand">myapp</a>

  • 右側につけるボタン

  •  application.html.erb
    22 23 <ul class="nav navbar-nav navbar-right"> </ul>

    の間に

    1 <li><a href="/posts/new">新しく投稿する</a></li>

    を設定する。
    ここまでお疲れさまです。少しまとめをします。


 ⑸ : まとめ


Bootstrapを使った4つの装飾、containerbtnform-controlnavigation-barについてまとめる
  • container

  • Bootstrapを導入したら、まずapplication.html.erbに下のように<div class="container">の設定を加える。
    この設定で、詰めて表示されているページに余白を入れる。

     application.html.erb
    1 2 3 4 5 6 7 8 9 10 11 12 13 14 <!DOCTYPE html> <html> <head> <title>Myapp</title> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %> </head> <body> <div class="container"> <%= yield %> </div> </body> </html>

    詳しくはこちらから
  • btn

  • classに「btn」と好きなボタンを追加する。

    ボタン

    1 <a href="/posts/new" class="btn btn-primary">ボタン</a>



    1 <%= f.submit "変更する", :class => "btn btn-primary" %>

    詳しくはこちらから
  • form-control

  • 入力欄のclassに「form-control」を追加する。


    1 <%= f.text_field :place, :class => "form-control" %>

    詳しくはこちらから
  • navigation-bar

  • Bootstrapで上に表示させるバーを作るには、下の設定を追加します。
    自分でコードを打つ必要はないので、コピペでもいいのでとりあえず貼り付けてみましょう!

     application.html.erb(10〜26行目)
    9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <body> <nav id="mainNav" class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="/posts" class="navbar-brand">myapp</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> </ul> </div> </div> </nav> <div class="container"> <%= yield %> </div> </body>

    この中でも変更する必要があるのは、
    • 左側につけるボタン

    •  application.html.erb
      10 <a href="/posts" class="navbar-brand">myapp</a>

    • 右側につけるボタン

    •  application.html.erb
      22 23 <ul class="nav navbar-nav navbar-right"> </ul>

      の間に

      1 <li><a href="/posts/new">新しく投稿する</a></li>

      を設定する。

      詳しくはこちらから


 ③ : まとめ


Bootstrapの使い方についてまとめる。


 Windowsをご利用の方は、こちらからBootstrapの導入をして下さい。



Bootstrapを使うには、Gemfileに設定を加えてそれを導入する必要がある。導入するには下の設定をして、

 Gemfile
26 27 28 29 gem 'therubyracer' gem 'less-rails' gem 'twitter-bootstrap-rails' gem 'sprockets', '3.6.3'

設定が終わったらターミナルで、

 ターミナル
1 bundle install

をしてgemをインストールしてから、

 ターミナル
1 rails g bootstrap:install

をすればBootstrapの導入が完了します。
ここでは「Bootstrap」で作ってくれる4つの設定を説明した。

Bootstrapにはこの他にも利用の方法があるので、興味があったらググってみて調べてみましょう!


3 : まとめ

この章では、ページへのリンクの作り方とBootstrapの導入の方法と使い方について触れた。
Bootstrapは簡単にデザインを作れるCSSファイルなので是非とも使ってみましょう!

  • ページのリンク
  • ここを参考

  • Bootstrap
  • ここを参考

また、変更した内容はここにまとめてあるので参考にして下さい。

ここまでお疲れさまでした。
次の章では、 Chrome posts root を「0.0.0.0:3000」に設定して、トップページを作ってみたいと思います。