トップページ、アバウトページ、フッター、ヘッダーの作成

トップページの作成

トップ画面の作成を行っていく。

トップ画面は、homesコントローラのtopアクションに対応するtop.html.erbにて作成していく。

トップ画面のルーティングを行い、root_pathの設定を行う。aboutのルーティングも設定する。

config/routes.rb

Rails.application.routes.draw do
  root 'homes#top'
  get "home/about" => "homes#about" , as: "about"
end

これで、サーバーを立ち上げた際のページがtopページに変更される。

トップページの作成

トップページの見本が下記となる。

作成が必要な部分の洗い出しを行う。

ヘッダー、フッターの作成
メイン部分の作成

1. ヘッダー、フッターの作成

ヘッダーとフッターの作成を行っていく。

ヘッダーとフッターはすべてのページで必要なため、app/views/layout/application.html.erbに記載していく。

(省略)
<body>
    <header>
      <nav>
        <div>
          <%= link_to 'Bookers', root_path %>
        </div>
        <ul>
          <li>
            <%= link_to root_path do %>
              <i class="fas fa-home" aria-hidden="true"> Home</i>
            <% end %>
          </li>
          <li>
            <%= link_to about_path do %>
              <i class="fas fa-link" aria-hidden="true"> About</i>
            <% end %>
          </li>
          <li>
            <%= link_to new_user_registration_path do %>
              <i class="fas fa-user-plus" aria-hidden="true"> Sign up</i>
            <% end %>
          </li>
          <li>
            <%= link_to new_user_session_path do %>
              <i class="fas fa-sign-in-alt" aria-hidden="true"> Log in</i>
            <% end %>
          </li>
        </ul>
      </nav>
    </header>
    <%= yield %>
    <footer>
      <div>
        <p>CopyRight Infratop.inc</p>
      </div>
    </footer>
  </body>
</html>

表示ビュー（top画面)

レイアウトは整えていないが、上記のようなヘッダーとフッターが作成される。

ヘッダーの説明

1. リンク先について

・Bookersはtop画面へのリンク。(root_path)

・Homeはtop画面へのリンク。(root_path)

・AboutはAbout画面へのリンク(about_path)

・Sign upはSign up画面へのリンク(new_user_registration_path)　deviseにて作成。

・Log inはLog in画面へのリンク(new_user_session_path)　deviseにて作成。

ルーティングの確認方法。

$ rails routes

上記を実行すると、ルーティングのパスを確認することができる。

2. ロゴについて

各種ロゴはfontawesomにて導入。

app/views/layout/application.html.erbに自分のアカウントのコードを記述すること。(*******の部分を変更。)

<!DOCTYPE html>
<html>
  <head>
（省略）
    <script src="https://kit.fontawesome.com/*******.js" crossorigin="anonymous"></script>
（省略）
  </head>

2. メイン部分の作成

メインはapp/views/homes/top.html.erbを編集する。

app/views/homes/top.html.erb

<div>
  <h1>welcome to <i class="fas fa-book" aria-hidden="true"></i><strong>Bookers</strong>  !!</h1>
  <p>In  <i class="fas fa-book" aria-hidden="true">In  </i><strong>Bookers</strong>, </p>
  <p>you can share and exchange  your opinions , inpressions , and emotions</p>
  <p> about various books!</p>
  <div>
    <div><%= link_to "Log in", new_user_session_path %></div>
    <div><%= link_to "Sign up", new_user_registration_path %></div>
  </div>
</div>

Web表示

aboutページの作成

同様にaboutページのviewも作成していく。

app/views/homes/about.html.erb

<div>
  <h1>Welcome to <i class="fas fa-book" aria-hidden="true"></i><strong>Bookers</strong>!</h1>
</div>

リンク先の確認

ヘッダーからのリンクがそれぞれのリンク先に遷移するか確認する。

deviseの導入により、Log in画面、Sign up画面もデフォルトの記述がされている。

以上。

アプリケーションの作成参考URL　作成するアプリケーションについて - takifugu’s blog