StaticPages作成

Bootstrapと格闘しながらStaticPagesを作成したよ

こんにちは、はくたむです。
いよいよアプリの作り込みに取りかかれます！ここまでなんか長かったな…笑

全体像を把握する

さて、アプリを作っていくといっても何から始めるんだ…？
チュートリアルの流れに沿ってやるべきか…？
色々悩んだのですが、まずは設計を見ながら最終的にコントローラがいくつ必要か考えました。

StaticPages
- 静的ページのことなので、サービスTOP（ランディングページ）がここにあたります。
Users
- ユーザー登録やログインなどユーザー周りのページになります。deviseで作成。
Words
- 単語登録・編集・削除、一覧、詳細のページです。

最初あまりにも漠然としていてイメージが掴めなかったのですが、これを考えたら構成がまとまってきた気がしました！
早速作っていきたいと思います。

Bootstrapと格闘しながらStaticPagesを作成したよ
- 全体像を把握する
- StaticPages作成

StaticPages作成

初めにサイトのTOPページとなるところから作っていこうと思います。
masterブランチからadd_static_pageというブランチを新たに作成し、切り替えます。

その後、下記のコマンドを実行してStaticPagesのコントローラとメソッド、ビューを作成。
とりあえずTOPページとなるhomeアクションとビューも同時に生成しました。

$ rails g controller StaticPages home

作成したhomeビューをルートでアクセスした時に表示したいのでルーティングを変更します。
config/routes.rb

root :to => 'static_pages#home'

localhost:3000にアクセスした時、static_pages#homeが表示されてればOK！

ページごとのタイトルを設定する

app/views/static_pages/home.html.erb

<% provide :title, "home" %> #homeのところはページごとのタイトル

app/views/layouts/application.html.erb

<title>ChobiMemo | <%= yield :title %></title> #provideをyieldで呼び出す（呼び出すキーは:title)

Bootstrapの導入

下記を参考にBootstrap4を導入

https://qiita.com/NaokiIshimura/items/c8db09daefff5c11dadfqiita.com

ヘッダーメニューの実装

全ページ共通のヘッダーメニューをapp/views/layouts/application.html.erbに作成しました。
Bootstrap4の公式ガイドと格闘しながら、なんとかメニューの右寄せとレスポンシブメニューが実装できました。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <!-- アプリロゴ -->
  <%= link_to "Chobi Memo", '#', id: "logo", class: "navbar-brand" %>
  <!-- レスポンシブメニューボタン：lg -->
  <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーションの切替">
    <span class="navbar-toggler-icon"></span>
  </button>
  <!-- 右寄せメニュー -->
  <div class="collapse navbar-collapse d-lg-flex flex-row-reverse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <%= link_to "新規登録", '#',class: "nav-link" %>
      </li>
      <li class="nav-item">
        <%= link_to "ログイン", '#',class: "nav-link" %>
      </li>
    </ul>
  </div>
</nav>

MEMO：

メニューの右寄せ→ flexboxを使用する
- navbar-expand-lgとなっているのでflexboxもd-lg-flexと合せたらうまく開閉できた

TOPページの変更

ちゃんとしたデザインはあとでやるので、まずはアプリ名の表示と新規登録ボタンを実装し、中央揃えにしました。
app/views/static_pages/home.html.erb

<% provide :title, "home" %>

<div class="container-fluid">
    <div class="p-5 text-center">
        <h1>Chobi Memo</h1>
        <p>調べたことを“ちょびっと”記録</p>
        <%= link_to "新規登録", '#',class: "btn btn-primary badge-pill pr-4 pl-4" %>
    </div>
</div>