リッチなWebページにしよう！！（≧∇≦）

おしゃれなデザインと、クエリでのデータ受け渡しをマスターしよう！

1. デザインの基本：CSS (Cascading Style Sheets)

先のページではViewを作りましたが...まだ白黒で素っ気ないですよね(；ω；)
人間で言うなら「寝起きスッピンでパジャマ」の状態です(つд⊂)ｺﾞｼｺﾞｼ
そこで「スタイルシート（CSS）」の出番です！

CSSとは？

例えるなら「Webページの『メイクアップ道具』や『ファッション』」です！
HTMLという「骨格・肉体」に対して、色を塗ったり（メイク）、配置を整えたり（コーディネート）して、魅力的に見せるための指示書です(｀・ω・´)ｼｬｷｰﾝ

やってみよう：CSSを書いてみる

app/assets/stylesheets/application.css← に以下のコードを追記してみましょう。

application.css

/* 全体の背景を少しグレーにして見やすく */
body {
  background-color: #f0f2f5;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #333;
}

/* 見出しをおしゃれに */
h1 {
  color: #0ea5e9; /* スカイブルー */
  text-align: center;
  padding: 20px;
}

ブラウザにこんな感じで表示されれば大成功です！(*^^*)

書き換えたら $ rails server で確認！少し雰囲気が変わったはずです!

これがサイト全体の基本スタイルになります(*‘ω‘ *)

2. 魔法のツール：Bootstrap

CSSを全部自分で書くのは大変ですよね...。
そこで「Bootstrap」を使います！これはTwitter社（現X）が開発したデザインフレームワークです。

Bootstrapとは？

例えるなら「プロのスタイリストが選んだ『既製服のセットアップ』」です！
自分で布から服を縫わなくても（CSSを一から書かなくても）、用意されたクラス名（ブランド服）を着るだけで、誰でも一瞬で今風のデザインになれる魔法のツールです。今回はCDNで配信されているBootstrapのスタイルシートを使います。

CDN (Content Delivery Network) って？

Bootstrapを使うにはファイルをダウンロードする方法もありますが、今回は「CDN」を使います。
CDNとは、例えるなら「全国どこにでもあるコンビニ」です！

通常： 本店（遠くのサーバー）まで商品を取りに行く → 遅い
CDN： 最寄りのコンビニ（近くのサーバー）から受け取る → 速い！

やってみよう：CDNを埋め込む

Webページの「設計図」である app/views/layouts/application.html.erbに以下のコードを上書きします。。

application.html.erb




<!DOCTYPE html>
<html>
  <head>
    <title>My Rails Portfolio</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%# Bootstrap CSS (CDN) - これでプロのデザインパーツが使い放題！ %>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" xintegrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>

  <%# d-flex flex-column min-vh-100 は、フッターを常に最下部に固定するための魔法のクラスです %>
  <body class="d-flex flex-column min-vh-100">
    
    <%# --- ナビゲーションバー (Header) --- %>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4 shadow-sm">
      <div class="container">
        <%# ロゴ部分 %>
        <a class="navbar-brand fw-bold" href="/"> My Page1</a>
        
        <%# スマホ用ハンバーガーボタン %>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <%# メニュー項目 %>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="/">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/my/page1">My Page</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <%# --- メインコンテンツ --- %>
    <main class="container mb-5 flex-grow-1">
      <%# フラッシュメッセージ（通知などがあればここに表示） %>
      <% flash.each do |message_type, message| %>
        <div class="alert alert-<%= message_type == 'notice' ? 'success' : 'danger' %> alert-dismissible fade show shadow-sm" role="alert">
          <%= message %>
          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
      <% end %>

      <%# ここに各Viewの中身（page1.html.erbなど）が埋め込まれます %>
      <div class="bg-white p-5 rounded shadow-sm border">
        <%= yield %>
      </div>
    </main>

    <%# --- フッター --- %>
    <footer class="bg-light text-center text-lg-start mt-auto py-4 border-top">
      <div class="container text-center text-muted">
        <p class="mb-0">© <%= Time.current.year %> My Rails Page1. All rights reserved.</p>
        <small>Ruby on Rails Bootstrap</small>
      </div>
    </footer>

    <%# Bootstrap JS (CDN) - ドロップダウンやハンバーガーメニューを動かすために必要 %>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" xintegrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  </body>
</html>

これだけで、世界中のプロが使うデザインパーツが使い放題になります！(ΦωΦ)
※ボタンに class="btn btn-primary" とつけるだけで青い綺麗なボタンになったりします。

ブラウザにこんな感じで表示されれば大成功です！(*^^*)

3. クエリパラメータを学ぼう！

デザインの次は、データのやり取りです。
「クエリ（Query）」とは「問い合わせ」という意味で、URLを使ってクライアント（ブラウザ）からサーバーに情報を渡す仕組みです。

https://example.com/?name=Elie&age=20

クエリパラメータの仕組み

例えるなら「二郎系ラーメンの注文」です！！

①URL本体： 「食券を出す」
②? (クエリは？)： 「にんにく入れますか？」
③key=value,&(つなぎ)： 「ニンニク&ヤサイマシ&アブラ&カラメ」

クライアント(お客さん)から情報(注文)を受け取るためにクエリがあるのです(ﾟ∀ﾟ)ｵｲｼｲ!

やってみよう：名前を受け取る処理

app/controllers/my_controller.rb を編集して、渡された名前を表示できるようにしましょう。

my_controller.rb

class MyController < ApplicationController
  def page1
    # params[:キー名] で、URLから渡されたデータを取り出せます！
    if params[:name] != nil
      # 名前がある場合
      render html: "<h1>こんにちは、#{params[:name]}さん！</h1>".html_safe
    else
      # 名前がない場合 (nilの場合)
      render html: "<h1>こんにちは、ゲストさん！</h1>".html_safe
    end
  end
end

処理の流れまとめ

[Image of web request response cycle diagram]

1
クライアント： URL .../page1?name=Elie にアクセス。
「Elieという名前付きでページが見たい！」とリクエスト。
2
サーバー (Rails)： params[:name] の中身を確認。
「お、"Elie"が入ってるな。じゃあ名前付きのページを作ろう」
3
レスポンス： 「こんにちは、Elieさん！」というHTMLを返す。

これが動的なWebアプリケーションの第一歩です！(｀・ω・´)

← 前の記事：Viewの基本次の記事：リダイレクトとヘルパー →