アプリケーションの作成

$ 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コードを追加

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

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とは

• TweetAppとは

TweetAppとは

SNSサービスです。 近況やつぶやきを投稿し、他のユーザーと楽しくコミュニケーションできます。