ギャラリーページ

945字程度約3分

2025-08-28

システム概要

フォトアルバムシステムは、2つのストレージモードと柔軟な表示制御をサポートしています。

サポートされているモード

ローカルモード: 画像はサーバーのローカルファイルシステムに保存されます。
外部リンクモード: 画像は外部URLを介して参照されます。

主要機能

アルバムの自動スキャンと生成
複数のレイアウト（グリッド/メイソンリー）のサポート
アルバムの表示制御（表示/非表示）
タグとメタデータ管理
レスポンシブデザイン

アルバムモード

モード比較

機能	ローカルモード	外部リンクモード
画像ストレージ	ローカルファイルシステム	外部URL
読み込み速度	速い	外部サービスに依存
ストレージコスト	サーバー容量を占有	ローカルストレージコストなし
安定性	高い	外部サービスに依存
設定の複雑さ	シンプル	中程度
適切なシナリオ	個人ウェブサイト、小規模プロジェクト	大規模な画像ライブラリ、CDN最適化

基本設定

アルバムシステムを有効にするには、src/config.ts ファイルに以下の設定を追加します。

// src/config.ts
export const siteConfig = {
  // ... その他の設定
  gallery: {
    enable: true, // ギャラリー機能を有効にする
    mode: 'local', // 'local' または 'external'
    path: '/gallery', // ギャラリーページのURLパス
    localPath: 'src/assets/gallery', // ローカルモードの場合、画像が保存されているディレクトリ
    externalLinks: [], // 外部リンクモードの場合、画像URLの配列
    layout: 'grid', // 'grid' または 'masonry'
    showTitle: true, // アルバムタイトルを表示するかどうか
    showDescription: true, // アルバムの説明を表示するかどうか
    showTags: true, // タグを表示するかどうか
    pageSize: 20, // ページあたりの画像数
  },
};

`gallery` オブジェクトのプロパティ

enable: boolean。ギャラリー機能を有効にするかどうか。デフォルトはfalse。
mode: 'local' | 'external'。画像のストレージモード。デフォルトは'local'。
path: string。ギャラリーページのURLパス。デフォルトは/gallery。
localPath: string。ローカルモードの場合、画像が保存されているディレクトリのパス。プロジェクトルートからの相対パス。デフォルトはsrc/assets/gallery。
externalLinks: string[]。外部リンクモードの場合、画像URLの配列。各URLは画像ファイルへの直接リンクである必要があります。
layout: 'grid' | 'masonry'。アルバムのレイアウト。デフォルトは'grid'。
showTitle: boolean。アルバムタイトルを表示するかどうか。デフォルトはtrue。
showDescription: boolean。アルバムの説明を表示するかどうか。デフォルトはtrue。
showTags: boolean。タグを表示するかどうか。デフォルトはtrue。
pageSize: number。ページあたりの画像数。デフォルトは20。

ローカルモードの詳細ガイド

ローカルモードでは、画像はMizukiプロジェクト内の指定されたディレクトリに保存されます。システムは自動的にこのディレクトリをスキャンし、画像をギャラリーに表示します。

1. 画像の準備

画像をlocalPathで指定されたディレクトリ（例: src/assets/gallery）に配置します。サブディレクトリを作成してアルバムを整理することもできます。

src/assets/gallery/
├── album1/
│   ├── image1.jpg
│   ├── image2.png
│   └── info.json
├── album2/
│   ├── image3.jpg
│   └── image4.gif
└── image5.jpg

2. `info.json` ファイル

各アルバムディレクトリにinfo.jsonファイルを作成することで、アルバムのメタデータ（タイトル、説明、タグなど）を定義できます。

info.json の例：

{
  "title": "美しい風景",
  "description": "世界中の美しい風景写真集です。",
  "tags": ["風景", "自然", "旅行"],
  "hidden": false // アルバムを非表示にするかどうか
}

title: string。アルバムのタイトル。
description: string。アルバムの説明。
tags: string[]。アルバムに関連するタグ。
hidden: boolean。アルバムをギャラリーページに表示するかどうか。trueの場合、アルバムは表示されません。デフォルトはfalse。

3. 画像のメタデータ

個々の画像にメタデータを追加するには、画像ファイルと同じ名前で.jsonファイルを作成します。

image1.json の例：

{
  "title": "夕焼けの山",
  "description": "夕焼けに染まる雄大な山の景色。",
  "tags": ["夕焼け", "山", "絶景"]
}

title: string。画像のタイトル。
description: string。画像の説明。
tags: string[]。画像に関連するタグ。

外部リンクモードの詳細ガイド

外部リンクモードでは、画像は外部URLから読み込まれます。これは、CDNを使用している場合や、画像を別のストレージサービスに保存している場合に便利です。

1. 画像URLの準備

externalLinks配列に画像への直接リンクを追加します。

// src/config.ts
export const siteConfig = {
  // ... その他の設定
  gallery: {
    enable: true,
    mode: 'external',
    path: '/gallery',
    externalLinks: [
      'https://example.com/images/image1.jpg',
      'https://example.com/images/image2.png',
      'https://example.com/images/image3.gif',
    ],
    // ... その他の設定
  },
};

2. メタデータの追加

外部リンクモードでは、個々の画像にメタデータを直接追加することはできません。必要に応じて、画像の説明やタイトルは、externalLinks配列の各要素をオブジェクトとして定義することで実現できます。

例：

// src/config.ts
export const siteConfig = {
  // ... その他の設定
  gallery: {
    enable: true,
    mode: 'external',
    path: '/gallery',
    externalLinks: [
      {
        url: 'https://example.com/images/image1.jpg',
        title: '夕焼けの山',
        description: '夕焼けに染まる雄大な山の景色。',
        tags: ['夕焼け', '山', '絶景'],
      },
      {
        url: 'https://example.com/images/image2.png',
        title: '森の小道',
        description: '静かな森の中の小道。',
        tags: ['森', '小道', '静寂'],
      },
    ],
    // ... その他の設定
  },
};

隠し機能

アルバムの非表示

ローカルモードでは、info.jsonファイルに"hidden": trueを設定することで、特定のアルバムをギャラリーページに表示しないようにできます。これは、プライベートな写真や未完成のアルバムに便利です。

画像の遅延読み込み

パフォーマンスを向上させるために、画像はデフォルトで遅延読み込みされます。これにより、ページの初期読み込み速度が向上します。

レスポンシブ画像

Mizukiは、さまざまなデバイスで最適な表示を保証するために、レスポンシブ画像を自動的に生成します。

完全な設定例

// src/config.ts
export const siteConfig = {
  // ... その他の設定
  gallery: {
    enable: true,
    mode: 'local', // または 'external'
    path: '/gallery',
    localPath: 'src/assets/gallery',
    externalLinks: [], // 外部リンクモードの場合のみ使用
    layout: 'masonry', // または 'grid'
    showTitle: true,
    showDescription: true,
    showTags: true,
    pageSize: 15,
  },
};

ベストプラクティス

画像サイズの最適化: ウェブ用に画像を最適化し、ファイルサイズを小さくすることで、読み込み速度を向上させます。
意味のあるファイル名: 画像ファイル名には、内容を反映した意味のある名前を使用します。これはSEOにも役立ちます。
定期的なバックアップ: ローカルモードを使用している場合は、画像ディレクトリを定期的にバックアップしてください。
CDNの利用: 外部リンクモードを使用している場合は、CDN（コンテンツデリバリーネットワーク）を利用して画像の配信速度を向上させることを検討してください。

よくある質問

Q: ギャラリーページが表示されません。
- A: src/config.tsのgallery.enableがtrueに設定されているか確認してください。また、pathがナビゲーションバーに正しく追加されているか確認してください。
Q: 画像が読み込まれません。
- A: ローカルモードの場合、localPathが正しいか、画像ファイルがそのディレクトリに存在するか確認してください。外部リンクモードの場合、externalLinksのURLが正しいか、画像に直接アクセスできるか確認してください。
Q: アルバムの順序を変更できますか？
- A: ローカルモードの場合、ディレクトリ名またはinfo.jsonにプレフィックス（例: 01-album, 02-album）を追加することで、手動で順序を制御できます。外部リンクモードの場合、externalLinks配列の順序がそのまま表示順になります。
Q: ギャラリーページに検索機能を追加できますか？
- A: 現在、組み込みの検索機能はありませんが、カスタムコンポーネントとして実装することは可能です。

このガイドが、Mizukiテーマでフォトアルバムシステムを効果的に使用するのに役立つことを願っています。