アプリケーションの作成
$ rails new アプリケーション名
サーバーを立ち上げる
$ rails server
上記でサーバーを起動した後下記というURLにアクセスすると初期画面が表示される
localhost:3000
トップページを作成
$ rails generate controller home top
ページを表示するために必要なファイルが作られる
上記のコマンドを実行すると新しいWebページが自動で作られ下記というURLにアクセスできるようになる
localhost:3000/home/top
ページの作成に必要なもの
ページが表示されるまでに、ルーティング→コントローラ→ビューという順で処理が行われている
ビュー(view) ページの「見た目」を作るためのHTMLファイル
ビューはviewsフォルダの中に置かれる「homeフォルダ」と「top.html.erb」(HTMLファイル)というファイルが作成される「erb」は少し特殊なファイル形式
「top.html.erb」(HTMLファイル)を編集することで表示する内容を変更することができる
$ 「app/views/home/top.html.erb」を開いて下記を追加
つぶやきで、世界はつながる
今の気持ちをつぶやいてみよう！
ブラウザのプレビュー画面で「localhost:3000/home/top」にアクセス
コントローラ(controller)
「rails generate controller home top」を実行すると「home_controller.rb」というコントローラのファイルが作成されファイルの中に「topメソッド」が追加される
コントローラ内のメソッドを「アクション」と呼ぶ
アクションはコントローラと同じ名前のビューフォルダからアクションと同じ名前のHTMLファイルを探してブラウザに返す
$ 「app/controllers/home_controller.rb」
上記を開き「topアクション」が追加されていることを確認する
ルーティング(routing)はブラウザとコントローラを繋ぐ役割を担う
送信されたURLに対して「どのコントローラのどのアクション」で処理するかを決める「対応表」のこと
ブラウザでURLを入力するとルーティング(対応表)がURLを見て適切なコントローラのアクションを呼び出す
ルーティングは「config/routes.rb」に定義され「get "URL" => "コントローラー名#アクション名"」という文法で書かれる
ブラウザから「localhost:3000/home/top」というURLが送信されたときにhomeコントローラーのtopアクションで処理されるようになる
「config/routes.rb」を開く
Rails.application.routes.draw do
get "home/top" => "home#top"
end
下記はアクセスできる
localhost:3000/home/top
下記はエラーが発生する
localhost:3000/home/hello
ルーティングを変える URLを書き換え
Rails.application.routes.draw do
# 「get "home/top"」の部分を書き換えてください
get "top" => "home#top"
end
サービス紹介ページを追加
①ルーティングを追加 「config/routes.rb」で
Rails.application.routes.draw do
get "top" => "home#top"
# aboutアクションへのルーティングを設定してください
get "about" => "home#about"
end
②コントローラ(アクション)を追加
homeコントローラ（app/controllers/home_controller.rb）にaboutアクションを追加
class HomeController < ApplicationController
def top
end
# aboutアクションを追加してください
def about
end
end
③ビューを追加
app/views/配下のhomeフォルダを右クリックして「新規ファイル」を選択
about.html.erb
という名前でエンター
下記のHTMLコードを追加
TweetAppとは
SNSサービスです。 近況やつぶやきを投稿し、他のユーザーと楽しくコミュニケーションできます。
localhost:3000/about
にアクセスしサービス紹介ページが表示されること
レイアウトを整える
CSSファイル
CSSファイルは「app/assets/stylesheets」フォルダに入っている
「rails generate controller home ...」コマンドを実行したときにCSSファイル(home.scss)も自動生成される
「scss」はCSSを拡張したもの
Railsでは、「stylesheets」フォルダの中に保存されているCSSファイルに
コードを書けば、すべてのビューにCSSが適用される
トップページとサービス紹介ページのCSSを「home.scss」に記述していく
画像の保存場所
画像は、「public」フォルダに配置しておくと
画像名をビューファイルやCSSファイルに「」や「background-image: url("/画像名");」のように
指定するだけで簡単に画像を表示することができる
/.jpg /.png
home.scss
.top-main {
padding: 200px 0 100px;
text-align: center;
position: absolute;
top: 0;
width: 100%;
height: auto;
min-height: 100%;
color: white;
background-color: #3ecdc6;
background-repeat: no-repeat;
background-position: center 50%;
background-size: cover;
background-image: url("/top.jpg");
}
about.html.erb
TweetAppとは
SNSサービスです。
近況やつぶやきを投稿し、他のユーザーと楽しくコミュニケーションできます。
トップページのURLを変更する
「localhost:3000」 (後ろに/○○がないURL) に対応するルーティングは
「get "/" => "コントローラ名#アクション名"」というようにURLに"/"を指定する
Rails.application.routes.draw do
# 「get "top"」の部分を書き換えてください
get "/" => "home#top"
get "about" => "home#about"
end
リンクの使い方
リンクを作成するためにはタグでテキストを囲み「href=" "」の中にURLを指定する
つぶやきで、世界はつながる
今の気持ちをつぶやいてみよう！
TweetAppとは
SNSサービスです。 近況やつぶやきを投稿し、他のユーザーと楽しくコミュニケーションできます。