Skip to content

Trippy3/art_gallery

BranchesTags

Repository files navigation

Aviary's Art Gallery

趣味で描いている油絵作品を展示するポートフォリオサイトです。ユニークな横スクロールタイムラインインターフェースで作品を閲覧できます。

https://aviary-gallery.vercel.app/

主な機能

  • 横スクロールギャラリー: スクロールジャッキング技術による直感的な作品閲覧
  • タイムライン表示: 年別マーカーによる作品の時系列表示
  • タイムラインジャンプ: ヘッダーメニューから年を選択して該当年の作品へスムーズスクロール
  • 作品詳細ページ: 各作品の詳細情報を個別ページで表示
  • 画像ライトボックス: 作品詳細ページで画像をクリックして全画面表示
  • About Me ページ: アーティストプロフィール、制作理念、スキル紹介
  • レスポンシブデザイン: モバイル、タブレット、デスクトップ対応
  • OGP対応: SNSシェア時に最適な画像・タイトル・説明を表示
  • ロゴ表示: ヘッダーにロゴ画像とサイト名を表示、クリックでトップページへ遷移

技術スタック

カテゴリ 技術
フレームワーク Next.js 15.2.4 (App Router)
React v19
言語 TypeScript v5 (strict mode)
スタイリング Tailwind CSS v4
UIコンポーネント shadcn/ui (New York style) + Radix UI
アイコン Lucide React
テーマ next-themes
パッケージマネージャー pnpm
E2Eテスト Playwright

開発環境のセットアップ

必要条件

  • Node.js 18.x 以上
  • pnpm

インストール

# 依存関係のインストール
pnpm install

# 開発サーバーの起動 (http://localhost:3000)
pnpm dev

# 本番ビルド
pnpm build

# 本番サーバーの起動
pnpm start

# リント実行
pnpm lint

プロジェクト構成

art_gallery/
├── app/
│   ├── layout.tsx              # ルートレイアウト（metadataBase設定含む）
│   ├── page.tsx                # メインページ
│   ├── manifest.ts             # PWAマニフェスト設定
│   ├── globals.css             # グローバルスタイル・CSS変数
│   ├── favicon.ico             # ファビコン
│   ├── icon.png                # アプリアイコン
│   ├── apple-icon.png          # Apple タッチアイコン
│   ├── about_me/
│   │   └── page.tsx            # About Meページ
│   └── artwork/
│       └── [id]/
│           └── page.tsx        # 作品詳細ページ
├── components/
│   ├── ui/                     # shadcn/ui コンポーネント
│   ├── header.tsx              # ナビゲーションヘッダー（ロゴ表示）
│   ├── hero.tsx                # ヒーローセクション
│   ├── horizontal-scroll-gallery.tsx  # 横スクロールギャラリー
│   ├── artwork-card.tsx        # 作品カード
│   ├── footer.tsx              # フッター
│   └── theme-provider.tsx      # テーマプロバイダー
├── lib/
│   ├── utils.ts                # ユーティリティ関数
│   └── data/
│       └── artworks.ts         # 作品データ
├── public/
│   ├── aviary_logo_1.png       # サイトロゴ画像
│   ├── icon-192.png            # PWAアイコン（192x192）
│   ├── icon-512.png            # PWAアイコン（512x512）
│   └── images/                 # 作品画像
└── tests/
    ├── e2e/                    # E2Eテスト
    ├── fixtures/               # テストデータ
    └── helpers/                # テストヘルパー

作品の追加方法

1. 作品データの編集

lib/data/artworks.ts の artworks 配列に新しい作品を追加します：

{
  id: 13,                           // ユニークなID
  title: '作品タイトル',              // 作品名（日本語）
  year: '2025',                     // 制作年
  month: '01',                      // 制作月（タイムライン順序用）
  description: '作品の説明文',        // 説明（日本語）
  image: '/images/artwork.jpg',     // 画像パス（public/配下）
  tags: ['油彩', 'F10号'],           // タグ（日本語）
  orientation: 'portrait',          // 'portrait' | 'landscape'
}

2. 画像の配置

作品画像を public/images/ ディレクトリに配置します。

3. 向きの設定

orientation プロパティで画像の向きを指定：

  • portrait: 縦長（デフォルト）
  • landscape: 横長

E2Eテスト

初回セットアップ

# ブラウザのインストール（初回のみ）
pnpm exec playwright install chromium firefox

テストの実行

日常的に使用するコマンド:

# 開発中の高速テスト（Chromiumのみ、推奨）
pnpm test:e2e:chromium

# モバイル表示のテスト
pnpm test:e2e:mobile

全ブラウザテスト（CI/リリース前）:

# 全ブラウザでテスト実行（Chromium + Firefox + Mobile Chrome）
pnpm test:e2e

デバッグ・開発用:

# UIモードでテスト実行（テスト選択・実行状況の可視化）
pnpm test:e2e:ui

# ブラウザを表示してテスト実行
pnpm test:e2e:headed

# デバッグモード（ステップ実行）
pnpm test:e2e:debug

# テストレポートの表示
pnpm test:e2e:report

# 特定のテストファイルを実行
pnpm exec playwright test tests/e2e/home.spec.ts

対応ブラウザ

ブラウザ 用途
Chromium デスクトップ Chrome/Edge ユーザー向け
Firefox 異なるレンダリングエンジン（Gecko）での互換性検証
Mobile Chrome モバイルビューポートでの動作検証

Note: WebKit（Safari）は Linux 環境での不安定性のため除外。Safari の正確な検証は macOS/iOS 実機で行うことを推奨。

テストファイル

ファイル 内容
home.spec.ts ホームページ、ギャラリー、タイムラインジャンプ
about-me.spec.ts About Meページ、ページ間ナビゲーション
artwork-detail.spec.ts 作品詳細ページ、ライトボックス
navigation.spec.ts ヘッダー、メニュー、年別スクロール

テスト方針

詳細は E2E_TEST_PLAN.md を参照。

  • UX/操作フローを検証する（ページ遷移、メニュー開閉、スクロール動作）
  • データ内容は検証しない（特定のテキスト、要素数など）

テーマのカスタマイズ

テーマカラーは app/globals.css のCSS変数で定義されています：

:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  /* その他のカラー変数 */
}

.dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  /* ダークモードのカラー変数 */
}

パスエイリアス

@/ エイリアスを使用してインポートを簡潔に記述できます：

import { Component } from "@/components/component"
import { artworks } from "@/lib/data/artworks"

注意事項

v0.app同期

このリポジトリはv0.appと自動同期されています。v0.app上での変更は自動的にこのリポジトリにプッシュされます。ローカルでの変更は上書きされる可能性があるため注意してください。

ビルド設定

next.config.mjs では以下の設定が有効になっています（v0.appのデフォルト）：

  • ESLint: ビルド時のエラーを無視
  • TypeScript: ビルドエラーを無視
  • Images: 最適化を無効化

コンテンツの言語

UIは日本語で表示されます。コンテンツを変更する際は言語の一貫性を保ってください。

OGP設定

SNSでシェアした際に表示される画像・タイトル・説明が自動設定されます。

動作

ページ OGP画像
トップページ 最新作品の画像（yearで降順ソート）
作品詳細ページ 該当作品の画像

環境変数

本番環境では metadataBase に正しいドメインを設定するため、以下の環境変数を使用します：

変数名 説明
VERCEL_URL Vercelが自動設定（優先使用）
NEXT_PUBLIC_BASE_URL カスタムドメイン用（例: https://example.com）

Vercelデプロイの場合は自動で設定されるため、追加設定は不要です。

About

aviary-gallery.vercel.app/

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Languages