【Ruby on Rails7】トップページを作成したい【Docker/OrbStack】

はじめに
MVCモデル
流れ
事前準備
1.ルーティングの設定
1. ルーティングの確認
2.コントローラーを作成
3.ビューを作成
1. TailwindCSSを導入
2. トップページを作成
画面の確認
まとめ

はじめに

今回は、Rails7でアプリケーションのトップページを作成していきます。

前回に続きDockerを使用した環境で進めていきます。

プロジェクトの作成は以下で実施していますので、ご参考ください。

MVCモデル

今回もMVCモデルに倣って作成します。

MVCモデルについては以下を御覧ください。

流れ

ルーティングの設定
コントローラーを作成
ビューを作成

事前準備

プロジェクトのルートディレクトリで、以下のコマンドを実行してコンテナを起動しておきましょう。

% docker compose up

1.ルーティングの設定

以下のファイルを以下の通り編集します。

config/routes.rb

Rails.application.routes.draw do
  root 'top#index'
end

ルーティングの確認

ターミナルで以下のコマンドを実行してルーティングを確認します。

# check container name
% docker ps
# describe routing
% docker exec -it cafe-buddy-1-web-1 rails routes

railsで始まるルートが大量に表示されますが、デフォルトで設定されているものです。

top_index GET /top/index(.:format) top#indexが確認できればOKです。

作成したルートは、topコントローラーのindexアクションです。

2.コントローラーを作成

以下のコマンドでコントローラーを作成します。

% docker exec -it cafe-buddy-1-web-1 rails g controller top

作成したコントローラーにアクションを追加します。

作成しておいたルートにルーティングされる際にアクションが実行されます。

app/controllers/top_controller.rb

class TopController < ApplicationController
  def index
  end
end

3.ビューを作成

次に画面の見た目を作成していきます。

TailwindCSSを導入

Gemfileに以下を追加します。

gem 'tailwindcss-rails'

以下のコマンド実行します。

% docker exec -it cafe-buddy-1-web-1 bundle install
% docker exec -it cafe-buddy-1-web-1 rails tailwindcss:install

トップページを作成

以下のコマンドでhtmlを作成します。

% touch app/views/top/index.html.erb

サンプルアプリケーションのhtmlを以下に記述します。

app/views/top/index.html.erb

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>趣味でつながる</title>
    <script src="<https://cdn.tailwindcss.com>"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        hobby: {
                            light: '#FAF3E0',
                            medium: '#F0A500',
                            dark: '#E45826'
                        }
                    }
                }
            }
        };
    </script>
</head>
<body class="bg-hobby-light text-gray-800">
    <!-- ナビゲーションバー -->
    <nav class="bg-white shadow-lg">
        <div class="max-w-7xl mx-auto px-4">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <span class="text-hobby-dark text-2xl font-bold">趣味でつながる</span>
                </div>
                <div class="hidden md:flex items-center space-x-4">
                    <a href="#" class="text-gray-600 hover:text-hobby-medium px-3 py-2">ホーム</a>
                    <a href="#" class="text-gray-600 hover:text-hobby-medium px-3 py-2">マッチング</a>
                    <a href="#" class="text-gray-600 hover:text-hobby-medium px-3 py-2">イベント</a>
                    <a href="#" class="bg-hobby-medium text-white px-4 py-2 rounded-md hover:bg-hobby-dark">ログイン</a>
                </div>
            </div>
        </div>
    </nav>

    <!-- ヒーローセクション -->
    <header class="relative bg-hobby-medium py-16">
        <div class="max-w-7xl mx-auto text-center px-4 sm:px-6 lg:px-8">
            <h1 class="text-5xl font-extrabold text-white">
                <span class="block">趣味で広がる</span>
                <span class="block text-hobby-light">新しい仲間との出会い</span>
            </h1>
            <p class="mt-6 text-lg text-white max-w-xl mx-auto">
                趣味を共有できる仲間とのつながりを見つけよう。<br>あなたの好きなことをもっと楽しむための場所です。
            </p>
            <div class="mt-8">
                <a href="#" class="bg-hobby-dark text-white px-8 py-3 rounded-lg shadow-md hover:bg-hobby-medium">
                    今すぐ始める
                </a>
            </div>
        </div>
    </header>

    <!-- 特徴セクション -->
    <section class="py-12">
        <div class="max-w-7xl mx-auto px-4">
            <h2 class="text-3xl font-bold text-center text-gray-800">特徴</h2>
            <p class="text-center text-gray-600 mt-4">
                趣味を共有するためのシンプルで安全なプラットフォーム
            </p>
            <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transition duration-300">
                    <h3 class="text-xl font-semibold text-hobby-medium mb-2">簡単マッチング</h3>
                    <p class="text-gray-600">趣味を登録して共通の興味を持つ仲間と出会いましょう。</p>
                </div>
                <div class="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transition duration-300">
                    <h3 class="text-xl font-semibold text-hobby-medium mb-2">イベント参加</h3>
                    <p class="text-gray-600">オンラインでもオフラインでも、趣味仲間と交流できます。</p>
                </div>
                <div class="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transition duration-300">
                    <h3 class="text-xl font-semibold text-hobby-medium mb-2">安全な環境</h3>
                    <p class="text-gray-600">安心して利用できる本人確認システムを採用しています。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 使い方セクション -->
    <section class="py-12 bg-white">
        <div class="max-w-7xl mx-auto px-4">
            <h2 class="text-3xl font-bold text-center text-gray-800">使い方</h2>
            <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6 text-center">
                <div class="bg-hobby-light p-6 rounded-lg">
                    <h3 class="text-lg font-semibold text-hobby-medium mb-2">1. 登録</h3>
                    <p class="text-gray-600">プロフィールを作成し、興味のある分野を登録します。</p>
                </div>
                <div class="bg-hobby-light p-6 rounded-lg">
                    <h3 class="text-lg font-semibold text-hobby-medium mb-2">2. 検索</h3>
                    <p class="text-gray-600">趣味や地域で検索して仲間を探します。</p>
                </div>
                <div class="bg-hobby-light p-6 rounded-lg">
                    <h3 class="text-lg font-semibold text-hobby-medium mb-2">3. 交流</h3>
                    <p class="text-gray-600">オンラインやオフラインで交流し、趣味を楽しみましょう。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- フッター -->
    <footer class="bg-gray-800 text-white py-6">
        <div class="max-w-7xl mx-auto text-center">
            <p>&copy; 2024 趣味でつながる. All rights reserved.</p>
        </div>
    </footer>
</body>
</html>