3 : ウェブページの雛形を作ろう!

前の章:Ruby on Rails の基本

Header3

0 : この章の目的

 HTMLの記述の方法・Ruby on Railsの雛形ウェブページの作り方を学び、Railsの雛形を開いてみる。
Ruby on Railsを動かす環境もできたので、
早速、Ruby on Railsでウェブページを作ってましょう!

・・・と言いたいのですが、その前にまず自分でページを作るために必要となる知識について少し説明したいと思います。

 ここで質問です。ウェブページはなにで表示されているのでしょうか?

第1章でも説明しましたが、HTMLファイルという文字列でページの表示の方法が決められています。 Fb code これはFacebookトップページの長い長いHTMLファイルですが、この文字列がどのようにページを表示させるかを決めています。

FacebookのページのHTMLファイルは長いですが、簡単なページならもっと短く書くこともできます。
まずはこのHTMLを使って、ページを作ってみましょう!


1 : HTMLの基本

 ① : 簡単なページを作ろう!


まずは、FinderでDesktop内に「rails_project」というフォルダを作ってください。


 Windowsをご利用の方は、こちらを参考にして下さい。

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



 これから作るファイルはrails_projectに保存して下さい。 Finder mkdir rails project
前の章でインストールしたSublime Textを使って、HTMLファイルを作っていきます。
※ 場所が分からなくなったら、右上の虫眼鏡マークをクリックして「Sublime Text」と入力して探してみましょう

このSublime Textで、HTMLファイルやRuby on Rails設定ファイルを自分の表示させたいように設定していきます


 Windowsをご利用の方は、こちらを参考にして、
「rails_project」フォルダに「sample.html」を保存して下さい。

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


Sublime text new window 下のようなウィンドウが開けたでしょうか? Window sublime text ウィンドウは出てきたら、「File > Save」をクリックして下さい。 Sublime text save ウィンドウが出てきたら、下のように選択してファイルを保存してください。 Sublime text save after Finderのrails_projectフォルダを確認すると、sample.htmlが作成されていることを確認できると思います。 Finder sample html

作成したファイルに下の文字列を入力してみて下さい。(左の数字は行数なので無視して下さい。)

また設定するファイルは半角英数字でないと動きませんので、日本語以外の部分は半角英数字で入力して下さい。
 sample.html(半角英数で入力)
※ 面倒であればコピペでもいいです
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>テスト</p>
</body>
</html>
Sublime text sample html1 入力が終わったら、「Command」と「s」を一緒に押してください。
これをしないと内容は変更されません。



 Windowsをご利用の方は、「ctrl」と「s」で内容を保存して下さい。



Finderでrails_projectのフォルダを開き、それを下の手順で開いてみて下さい。 Window open with chrome 下のようなページが表示されましたでしょうか? Chrome sample html
「テスト」とだけ表示されていますね。
長い文章を打ち込んだ(もしくはコピペした)のに、表示されたのがこれだけでは少し悲しいですね...

それもウェブページの表示をさせているのは、「<body>」と「</body>」で囲まれた「<p>テスト</p>」の部分だけだからです。

 なのでこれからは、<body>」と「</body>」で囲まれた部分以外は基本的にコピペして貼り付ければ問題ないです

 sample.html(半角英数で入力)
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>テスト</p>
</body>
</html>

<p>」と「</p>」で囲まれた部分に入力された文字列がウェブページで表示されます。
  • <p>は普通の大きさの文字
  • <h1>で大きい字
  • <h2>でまぁまぁ大きい字
  • <h3>で少し大きい字
  • <img>で画像表示
  • <br>で改行
などたくさんの表記の仕方があります。

 詳細はこちらを参考にして下さい
 ウェブページを作る際に表示させる文章・画像などは<body>」と「</body>」で囲まれた部分に記述される。

 sample.htmlファイル内の、<p>の代わりに<h1>を使ってページを表示させてみよう!
ファイルを閉じてしまったらファイルの開き方をみて下さい

※ 設定の変更が終わったら、「Command」と「s」を一緒に押して変更を保存して下さい。変更が保存されないと結果は反映されません。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して下さい。


 ② : ページを装飾しよう!


ここまででページの表示の仕方を説明しました。
ですが、正直言って思ったよりもダサくって失望した人も多いのではないかと思います。

それもそのはずです。
HTMLは単に文章や画像などのデータを表示させるだけで、どのように表示させるかは別の設定ファイルを使わなければならないからです。
そのファイルのことを、CSSファイルと言います。

早速、このCSSファイルを作って、少しだけ装飾してみましょう!
まずは、「rails_project」のフォルダに「style.css」というファイルを保存してみましょう!
※ 「style.css」という名前にしたのは、この名前がよく使われているからというだけであって深い理由はありません。
※ ファイルの保存の仕方が分からなくなったら、こちらを参考にして下さい。
 Windowsでのファイルの保存はこちらを参考にして下さい。


下のように表示されたでしょうか? Window style css Finderには、下のようにStyle.cssとSample.htmlが入っているでしょうか? Finder rails project ファイルが保存できたら、下のように内容を変更して下さい。
※ ファイルの開き方はこちらを参考にして下さい
 style.css(半角英数字で入力)
1
2
3
h1{
color:red;
}
Sublime text style css  sample.html(5,8行目を変更/半角英数字で入力)
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<h1>テスト</h1>
</body>
</html>

文字列の変更ができたら、「Command」と「s」を一緒に押して内容を保存しましょう!


 Windowsをお使いの方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。



変更が完了したら、下の手順にしたがって「sample.html」をブラウザで開いてみましょう! Window open with chrome 下のように表示されましたか? Chrome sample html2 文字が赤色に変わりましたね。まだ簡単なものでしかないですが、このような装飾をCSSファイルで設定します。
では、変更した内容を説明していきます!
まずは、変更を加えたhtmlファイルから説明しましょう。

 sample.html
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<h1>テスト</h1>
</body>
</html>

「<body>と</body>の間以外は基本的にコピペでいい!」と言ったのに早速例外が出てきましたね
この1行で、装飾に「style.css」というCSSファイルを使うことを設定しています。
中に「style.css」という名前が入っているのが見えますね。ここでどのCSSファイルを使い装飾するかを決めています。使う時はCSSファイル名以外の部分はコピペで、<head></head>の間に書き加えることで適用されます。
例えば「style2.css」というCSSファイルを指定する時は、

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

<head></head>の間に記述します。

CSSファイルで設定をする時は、この1行を付け加え忘れないようにしましょう!
では、装飾をするCSSファイルについて説明しましょう。

 style.css
1
2
3
h1{
color:red;
}

装飾をするCSSファイルは
装飾をしたい部分の名前{
  装飾の方法
}
のように設定します。
装飾の方法の一つである色の変更は、
color:色の名前;
と書いて設定します。

この場合は、

1
<h1>テスト</h1>

の行の<h1>と</h1>の間を指定して、赤色にする設定をしています。

 試しに別の色に変えてみましょう!

 style.css(半角英数で入力)
※ 変更ができたら「Command」と「s」を一緒に押して、内容を保存しましょう。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。
1
2
3
h1{
color:blue;
}

終わったらページを再度読み込んでみて下さい。内容は変わったでしょうか?
※ ブラウザでの開き方はこちらを参考にして下さい
ここまでで色を変更する設定をしてみましたが、装飾の方法はこれだけではありません。
他にも文字の大きさを変える設定や、背景色を変える設定などがあります。下のようにファイルの設定を変更してみましょう!

 style.css(半角英数で入力)
※ 変更ができたら「Command」と「s」を一緒に押して、内容を保存しましょう。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。
1
2
3
4

5
h1{
color:blue;
font-size:50px;
background-color:yellow;
}

終わったら再度読み込んでみましょう。下のように表示されたでしょうか?
※ ブラウザでの開き方はこちらを参考にして下さい Chrome sample html3 文字の大きさは、
font-size:文字の大きさpx;
と書いて設定します。

pxはコンピューター内の大きさの単位なので、適当に変更して表示させていきながら確認するのがいいでしょう。

背景色は、
background-color:色の名前;
と書いて設定します。

簡単なまとめもあるのでこちらも利用ください。
装飾は他にもたくさんありますので、興味があったら調べてみましょう!

ここまでで、ページの装飾の方法について説明しました。

今の方法のままでも装飾はできますが、これだと<h1>は色が青で文字の大きさが50px/背景色が黄色の文字しか表示できません。
文字などの装飾はできても、そのバラエティが少なければあまり使い勝手は良くないですよね。

なのでCSSファイルではページの装飾に名前をつけて、それをhtmlファイルの中身と対応させることができます。
では、やってみましょう!

「rails_projects」フォルダの「sample.html」と「style.css」を開いてみましょう!
※ ファイルの開き方はこちらを参考にして下さい

 sample.html(半角英数で入力)
※ 内容を変更できたら、「Command」と「s」を一緒に押して保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<h1>テスト</h1>
<h1 class="title">テスト</h1>
</body>
</html>

 style.css(半角英数で入力)
※ 内容を変更できたら、「Command」と「s」を一緒に押して保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。
1
2
3
4

5
.title{
color:white;
font-size:30px;
background-color:black;
}


終わったら再度読み込んでみましょう。下のように表示されたでしょうか?
※ ブラウザでの開き方はこちらを参考にして下さい Chrome sample html4 上がなにも装飾を設定していない<h1>、下が装飾を設定した<h1>になります。
CSSファイル内で、
.名前{
  装飾の内容
}
と書くことで、いくつかの装飾の集まりに名前を設定することができます。
今回の名前はtitleになっていますがこれは適当につけたものなので、自由につけて大丈夫です。

htmlファイル内での表示には、
class="名前"
<h1><p>などの中に入れることで適用されます。こちらには「.」をつける必要はありません。
ここの名前が、CSSファイルで設定した名前と一致すると装飾は適用されます。

 装飾をしなかった上の<h1>とCSSファイルを変更して装飾をしてみよう!
※ 半角英数字での入力と、「Command」と「s」で保存することを忘れずに
 Windowsをご利用の方は、「ctrl」と「s」で。


 ③ : まとめ


ページは文字や画像を表示させるhtmlファイルと、装飾をするCSSファイルでできている。
  • htmlファイルは基本的に<body></body>の中身を
  • CSSファイルは装飾をする部分を{}で囲った部分を
変更することでページ表示の設定をしていく。


2 : Railsでウェブページの雛形を作ろう!

ここまでで、htmlとCSSを使ったページの表示の方法を説明しました。

実際のウェブページの表示は、この二つの設定ファイルを設定しながらやっていきます。細かい手法などの内容は適宜内容を付け加えていきます。
この章から実際にRuby on Railsでウェブページを作っていきます。
基礎編ではこちらのようなページを作ってみます。

Ruby on Railsでは、出来上がっている雛形に自分で設定を加えていくことでウェブページを作っていきます。
この章では、Ruby on Railsでウェブページの雛形を作り、それを開いてみる部分までをやってみましょう!
Railsでは、前の章で使ったターミナルを使ってウェブページの雛形を作ります。
右上にある虫眼鏡マークを押して、「ターミナル」を検索して開きましょう。

 前章の復習です。まずはターミナル内でデスクトップの位置に行きましょう。
※ 分からなかったらこちらを参考にして下さい


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



デスクトップまで行けたら、

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

と入力して「rails_project」に移動しましょう。
※ 半角英数字で入力して下さい


 ① : rails new


では、Railsでウェブページの雛形を作りましょう!

ターミナル(半角英数字で入力)
1 rails new myapp -d mysql

と入力して下さい!

 Windowsをお使いの方は、下の入力をして下さい。

 コマンドプロンプト(半角英数字で入力)
1 rails new myapp

Rails new myapp 2 こんな感じに表示されて、 Rails new myapp after こんな感じに表示されましたでしょうか?
これでウェブページの雛形は完成しました!

Finderで確認してみましょう。 Finder myapp 「rails_project」にmyappというフォルダができているのが確認できますか?

この「myapp」がウェブページの雛形の中にある設定ファイルを、
自分の好きな設定に変更していくことでウェブページを作っていきます。

では、さっきの

ターミナル
1 rails new ページ名 -d mysql

はなにをしたのでしょうか?

これは
「myappという名前のウェブページの雛形を作れ!(rails new myapp)MySQLというデータベースを使って(-d mysql)」
というコンピューターへの命令になります。


 Windowsでは、後ろになんの入力もなく「Sqlite」というデータベースを使う設定をしています。


これ以上は説明のしようがないので次にウェブページの雛形を作る時は、

 ターミナル(半角英数字で入力)
1 rails new ページ名 -d mysql


 Windowsをお使いの方は、下の入力をして下さい。

 コマンドプロンプト(半角英数字で入力)
1 rails new myapp

をターミナルに入力して下さい。
 ウェブページの雛形を作る時は、ターミナルで「rails new ウェブページ名 -d mysql」と入力する。


 ② : 雛形の諸設定


前章では

 ターミナル
1 rails new ページ名 -d mysql

 コマンドプロンプト
1 rails new ページ名

でウェブページの雛形を作りました。
でもこれだけではウェブページの雛形はまだ完成していません。
ターミナルで行うまだ終わっていない設定があります。

その設定は、
  • ウェブページを作るのに必要になるツールの設定と導入
  • データベースの用意
に2つになります。

 ここではその設定を完了させましょう。


 ⑴ : ツールの導入と設定

Railsでは、インターネット上に公開されているウェブページを作る際のツール(gemといいます)を使いながらウェブページを作っていきます。

これらツールをウェブページに導入していくことで、例えば自分で作るとなると手間がかかるユーザー管理や画像の保存などを自動的に作ってくれます

 ここではこのgemの導入と設定をしましょう!
まずはSublime Textで、先ほど作った「myapp」を選択して開いてみましょう。
※ ファイル・フォルダの開き方はこちらを参考にして下さい
 Windowsでのファイル・フォルダの開き方はこちらを参考にして下さい


下のようなウィンドウはでてきましたでしょうか? Window sublime text myapp 開けたら下の手順に従って、「Gemfile」というファイルを開いてください。 下のような文字列が出て来れば、大丈夫です。 Sublime text open gemfile このGemfile」というファイルで、ツールの設定をしています。
内容がすでに書いてあるのは、初期設定で必要なツールがすでに設定されているからです。

中身を見ると、「gem '〜'」とか「gem '〜','〜'」という感じで表示されているのが分かると思います。

ツールを使いたければ、
gem 'ツール名'
を「Gemfile」に追加して設定します。(必要なら「, 'バージョン名'」を加える)
ここまでで「Gemfile」というツールの設定ファイルについて説明しました。

これで設定は終わりましたが、まだツールの導入ができていません。導入ができていないので、まだツールを使うことはできません。

 ここで設定したツールの導入をしてみましょう!
ツールの設定は「Gemfile」の設定を変更することで行いましたが、ツールの導入はターミナルで行います。

まずはターミナルを開いて(分からなかったらこちらを参照)、デスクトップ内の「rails_project」にまで移動して下さい。

 Windowsでの「rails_projects」での移動は、こちらを参考


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

ここまでできたら、さっき作った「myapp」に移動しましょう。

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

Terminal cd myapp では、ツールを導入してみましょう!下の文字を入力して下さい。
※ 半角英数字で入力して下さい。

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

 動かない場合は、Gemfile.lockを削除してから、試してみて下さい。 Terminal bundle install after 入力すると、このような画面は表示されたでしょうか?
よく見ると、設定ファイルに入っていたツールが表示されていると思います。

これからは設定を決めている「Gemfile」にツールを追加する度に、ターミナルで「bundle install」を入力します。

これでツールの導入は完了しました。
※ ここではツールと書き続けてきましたが、正確に言えば「gem」です。余力があれば覚えて下さい。


 Windowsをお使いの方は、こちらの作業も行なって下さい!



 ツールの設定は「Gemfile」ファイルの中身を変更して、ツールの導入はターミナルで「bundle install」を入力して行う。


 ⑵ : データベースの用意

ここまででRailsで使うツール(gem)の設定と導入の方法について説明しました。
ですが設定はもう一つあります。それはデータベースの用意です。

ウェブページでデータの保存を行う時に必要になる空のExcelの表(データベース)を作ります。
すぐ終わるので早速やってみましょう!
まずはターミナルで「myapp」まで移動してみて下さい。
※ 分からなかったら、こちらを参考して下さい
 Windowsをご利用の方は、こちらを参考にして下さい。

できたら下の文字を入力して下さい。

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

 動かない場合は、bundle execを前につけ、bundle exec rake ...で入力して下さい。 Terminal rake db create これでデータベースの用意、空のExcelの表の用意は終わりました!
これで終わりなのは寂しいので、実際に本当にできたかを確認しましょう。
前章でインストールした「Sequel Pro」を使って、空のExcelの表・データベースを見てみましょう!


  Windowsをご利用の方は、SqliteBrowserを使います。
 こちらを参考にして、db > development.sqlite3を開いて下さい。

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


まずは右上の虫眼鏡で「Sequel Pro」を検索して開いてみましょう!
開けたら、下の手順にしたがって「Connect」を押して下さい。 Sequel pro 下のように表示されたでしょうか? Sequel pro main page できたら左上の「Choose Database」を選択して下さい。 Sequel pro choose database 出てきたリストボックスの中に「myapp_development」はありますか?
これがウェブページでデータを保存するデータベースになります。
※ 「ページ名_development」がデータベースの名前になります。 Sequel pro select myapp ここまででひと通りの設定は終了です。
 データベースは「rake db:create」と入力して作成する


 ⑶ : まとめ


  • ターミナルで、「rails new ページ名 -d mysql
  • コマンドプロンプトで、「rails new ページ名
を入力してページを作ったら・・・
  • ツール(gem)の設定と導入
  •  ターミナルで「bundle install」を入力して、ツール(gem)を導入する。

     Windowsをお使いの方は、こちらの作業も行なって下さい!


  • データベースの用意
  •  「rake db:create」でデータベースを作成する
を行う


 ③ : 雛形を開く


これで雛形は完成しましたが、開けないと本当にできたか分からないですよね?
ここで出来上がったウェブページを開いてみましょう!
まずはターミナルで「myapp」まで移動してみて下さい。
※ 分からなかったら、こちらを参考にして下さい

 Windowsをご利用の方は、こちらを参考にして下さい。


できたら下の文字を入力して下さい。

ターミナル
1 rails s

下のように表示されたでしょうか? Terminal rails s この「rails s」という入力で、ページの表示と保存をする機械・サーバーを使っているコンピューターの中で動かします。
※ 今動かしているサーバーは自分のコンピューター内で動かしてるものなので、自分のコンピューターからしか見れません。
これでウェブページを表示させることができました。
ブラウザで、0.0.0.0:3000を開いてみて下さい。


 Windowsをご利用の方は、localhost:3000を開いて下さい。


Chrome localhost1 このようなページは出てきたでしょうか?これがページの雛形になります。
以後Ruby on Railsで作ったページは、この0.0.0.0:3000で開きます。


 Windowsをご利用の方は、localhost:3000を開いて下さい。



それでは、「rails s」で動かしたサーバーを一回止めましょう。
「rails s」を入力したターミナルの画面で、「Command」と「c」を一緒に押してみてください。

 Windowsをご利用の方は、「ctrl」と「c」を一緒に押して下さい。


Terminal rails s finish これでページの表示と保存をするサーバーを止めることができました。
もう一度ブラウザで、0.0.0.0:3000を開いてみましょう。


 Windowsをご利用の方は、localhost:3000を開いて下さい。


今回はサーバーが動いていないので、ページは表示されないはずです。
Railsでページを表示させる必要はない時には、「Command」と「c」を一緒に押してサーバーを停止させて下さい。そうしないと電池が無駄に使われます。


 Windowsをご利用の方は「ctrl」と「c」を一緒に押して下さい。



 設定が終わった雛形は、「rails s」をターミナルで入力した状態で「0.0.0.0:3000」をブラウザで開くことで見ることができる。


 Windowsをご利用の方は、localhost:3000を開きます。



3 : この章のまとめ

この章では、
  • ページを表示させる設定ファイルhtmlと、その装飾をする設定ファイルCSS
  • Railsで作る雛形ウェブページの作り方と開き方
について学んびました。それぞれについて簡単なまとめをします。
⑴ htmlとCSS

htmlはページの表示についての設定するファイルになり、これは今後のRailsでのページの表示の設定にも使われる。
書き方は以下のようになる。

 sample.html(半角英数字で入力)
※ CSSファイルを利用する場合は、5行名を追加
1 2 3 4 5 6 7 8 9 10 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="利用するCSSファイル名" type="text/css" /> </head> <body> <p>内容</p> </body> </html>

CSSはhtmlへの装飾の仕方を設定するファイルになり、これもRailsのページ表示には必要になる。
書き方は例えば以下のようになる

 style.css(半角英数字で入力)
1 2 3 4 5 .title{ color:white; font-size:30px; background-color:black; }

⑵ Railsでの雛形ウェブページの作成

Railsでの雛形ウェブページの作成はターミナルで行います(場所は右上の虫眼鏡で探してみて下さい)。
まずは雛形の作成を

 ターミナル
1 rails new ページ名 -d mysql

 Windowsをお使いの方は、

 コマンドプロンプト
1 rails new ページ名

を行い、作ったフォルダに移動するために

 ターミナル
1 cd ページ名

をしてから、Railsで使うツール・gemのインストールを行います。

 ターミナル
1 bundle install

その後で、ウェブページのデータの保存をするためのデータベースを用意します。

 ターミナル
1 rake db:create

ここまでで雛形の設定は終了です。雛形を実際に開くには、

ターミナル
1 rails s

をしてサーバーをスタートさせ、ページの表示とデータの保存をしていきます。
サーバーが動いていれば、0.0.0.0:3000で雛形のページを開けるはずです。


 Windowsをご利用の方は、localhost:3000を開いて下さい。



サーバーを閉じるときは、ターミナルの画面で「Command」と「c」を一緒に押してください。
サーバーを立ち上げっぱなしにすると、無駄に電池を使います。


 Windowsをご利用の方は、「ctrl」と「c」を一緒に押して下さい。



 ここまでで、Railsを使ったウェブページの雛形の作成は終了です。
  次の章では、ウェブページでのデータの保存について学びます。