Ruby on Rails Ⅰ

# アプリケーションの作成
$ 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」を開いて下記を追加
<div class="main top-main">
  <div class="top-message">
    <h2>つぶやきで、世界はつながる</h2>
    <p>今の気持ちをつぶやいてみよう！</p>
  </div>
</div>
# ブラウザのプレビュー画面で「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コードを追加

<div class="about-main">
  <h2>TweetAppとは</h2>
  <p>
    SNSサービスです。
    近況やつぶやきを投稿し、他のユーザーと楽しくコミュニケーションできます。
  </p>
</div>

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ファイルに「<img src="/画像名" >」や「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
<div class="about-main">
  <h2>TweetAppとは</h2>
  <p>
    SNSサービスです。
    近況やつぶやきを投稿し、他のユーザーと楽しくコミュニケーションできます。
  </p>
  <img class="about-img" src="/tweets.png">
</div>


# トップページのURLを変更する
「localhost:3000」 (後ろに/○○がないURL) に対応するルーティングは
「get "/" => "コントローラ名#アクション名"」というようにURLに"/"を指定する

Rails.application.routes.draw do
  # 「get "top"」の部分を書き換えてください
  get "/" => "home#top"
  get "about" => "home#about"
end


# リンクの使い方
# リンクを作成するためには<a>タグでテキストを囲み「href=" "」の中にURLを指定する

<header>
  <div class="header-logo">
    <!--トップページへのリンクにしてください-->
    <a href="/">TweetApp</a>
  </div>
  <ul class="header-menus">
    <li>
      <!--サービス紹介ページへのリンクにしてください-->
      <a href="/about">TweetAppとは</a>
    </li>
  </ul>
</header>

<div class="main top-main">
  <div class="top-message">
    <h2>つぶやきで、世界はつながる</h2>
    <p>今の気持ちをつぶやいてみよう！</p>
  </div>
</div>
    
    
<header>
  <div class="header-logo">
    <!--トップページへのリンクにしてください-->
    <a href="/">TweetApp</a>
  </div>
  <ul class="header-menus">
    <li>
      <!--サービス紹介ページへのリンクにしてください-->
      <a href="/about">TweetAppとは</a>
    </li>
  </ul>
</header>
<div class="about-main">
  <h2>TweetAppとは</h2>
  <p>
    SNSサービスです。
    近況やつぶやきを投稿し、他のユーザーと楽しくコミュニケーションできます。
  </p>
  <img class="about-img" src="/tweets.png">
</div>