メインコンテンツへ移動
AIチュートリアル

ローカルプレビューから Cloudflare Pages へ：中国語版 AI Pose Gallery のデプロイ

このチュートリアルでは、中国語版 AI Pose Gallery の機能、データ構造、使用方法を紹介し、ローカルプレビュー、データ検証、翻訳の更新、Cloudflare Pages へのデプロイまで解説します。

約13分で読了
ローカルプレビューから Cloudflare Pages へ：中国語版 AI Pose Gallery のデプロイ

プロジェクト概要

AI Pose Gallery 中国語版は、AI画像生成、3D制作、写真の参考資料向けに作られた、人体ポーズの静的ギャラリーです。プロジェクトには288グループ、1439枚の複数アングル参考画像を収録し、元サイトの日本語メタデータを中国語に完全翻訳しています。

リポジトリには1439枚のJPGサムネイルと1439枚のPNG原画像、合計2878個の画像ファイルが保存されています。フロントエンドは依存関係のないシングルページアプリケーションで、フレームワークのインストールやビルドツールの実行は不要です。

AI Pose Gallery 中国語版ギャラリーのプレビュー

オンラインデモで実際の動作を確認したり、GitHubリポジトリから完全なプロジェクトを取得したりできます。

ギャラリーには成人向けのポーズ参考資料が含まれており、一部のカテゴリ名には性行為に関する用語が使われています。内容は芸術制作、動作の参考、フロントエンド技術の学習のみを目的としています。未成年者はアクセスしないでください。

主な機能

検索と複合フィルター

ギャラリーは4つの体系で構成され、各体系の画像数とポーズグループ数が表示されます。検索ボックスではポーズ名、番号、ID、カテゴリキーワードを検索でき、/キーで検索ボックスにすばやくフォーカスできます。

  • 4つのポーズ体系タブ
  • 26種類の動作カテゴリ
  • 正面、斜め側面、側面、俯瞰、あおりの5種類の視点
  • 体系、カテゴリ、視点による複合フィルター
  • フィルター条件の一括リセット

グループ表示と個別表示

ページにはポーズ別グループ表示と個別表示の2つのモードがあります。グループカードには同じポーズの複数アングルのサムネイルが表示され、サムネイルにカーソルを合わせるかクリックすると、カードのメイン画像を切り替えられます。

ライトボックスを開くと、まず300×400のサムネイルが表示され、その後900×1200のPNG原画像が読み込まれます。ライトボックスではPNGのダウンロード、レコードIDのコピー、新しいウィンドウでの画像表示が可能です。

  • ← と →：現在のポーズのアングルを切り替え
  • ↑ と ↓：ポーズを切り替え
  • Esc：ライトボックスを閉じる
  • スマートフォンで左右にスワイプ：画像を切り替え

レスポンシブレイアウト

デスクトップでは複数列のグリッド、スマートフォンでは2列のグリッドを使用します。モバイル端末ではフィルターパネルを展開・折りたたみでき、狭い画面でも閲覧しやすくなっています。

データ規模と構造

1439件のレコードは4つの体系に分かれています。

  • 全身・1人・標準系：365件
  • 全身・1人・セクシー系：399件
  • 上半身・1人：400件
  • 2人・密着系：275件

フロントエンドは実際には data/pose-zh.json を読み込みます。各レコードには一意のID、体系、ポーズ番号、カテゴリ、ポーズ名、アングル、サムネイルパス、原画像パス、検索文字列が含まれます。

{
  "id": "full_sexy_P001_front",
  "体系": "全身・1人・セクシー系",
  "ポーズ番号": "P001",
  "カテゴリ": "立ちポーズ",
  "ポーズ名": "S字立ち・腰を横に突き出す",
  "アングル": "正面",
  "サムネイル": "thumbs/…jpg",
  "原画像": "img/…png",
  "検索": "フロントエンドのあいまい検索に使用する連結文字列"
}

data/pose.json には、翻訳の校正やデータの再投入に利用できるよう、元の日本語フィールドとデータが保持されています。data/translations.csv には323件の日中対訳レコードが収録されています。

プロジェクトの取得

GitとPython 3を用意し、リポジトリをクローンしてプロジェクトディレクトリに移動します。

git clone https://github.com/anhao/ai-pose-gallery-zh.git
cd ai-pose-gallery-zh

npmやPythonの依存関係をインストールする手順はありません。主要ページは index.html にあり、データと画像は対応するリポジトリ内のディレクトリに保存されています。

重要なディレクトリ

  • index.html：依存関係のないシングルページギャラリー
  • data/：日本語データ、中国語データ、カテゴリ、翻訳対照表
  • thumbs/：1439枚の300×400 JPGサムネイル
  • img/：1439枚の900×1200 PNG原画像
  • scripts/：ダウンロード、翻訳反映、検証、公開用スクリプト
  • _headers：Cloudflare Pagesのキャッシュポリシー
  • robots.txt と sitemap.xml：検索エンジン設定

ギャラリーをローカルで起動

ページは fetch でJSONデータを読み込むため、index.html を直接ダブルクリックして開くことはできません。ローカルファイルプロトコルで直接開くと、ブラウザーのセキュリティポリシーによってリクエストがブロックされます。

リポジトリのルートディレクトリでPython HTTPサーバーを起動します。

python3 -m http.server 8000

続いて、次のURLを開きます。

http://127.0.0.1:8000

ページの読み込み後、次の手順で基本操作を確認できます。

  1. 上部のタブからポーズ体系を1つ選択します。
  2. 動作カテゴリと1つ以上の視点を選択します。
  3. 検索ボックスにポーズ名、番号、ID、カテゴリキーワードを入力します。
  4. グループモードと個別モードを切り替えます。
  5. カードをクリックしてライトボックスを開き、キーボードまたはタッチジェスチャーで移動します。
  6. ライトボックスでPNG原画像をダウンロードするか、レコードIDをコピーします。

画像と翻訳データのメンテナンス

画像を再ダウンロード

リポジトリには並列ダウンロードスクリプトが用意されています。すでに存在するファイルは自動的にスキップされるため、コマンドは繰り返し実行でき、中断した位置からの再開と自動リトライにも対応しています。

python3 scripts/download.py

デフォルトの並列数は48です。並列数を変更する場合は WORKERS を設定します。

WORKERS=64 python3 scripts/download.py

中国語翻訳を更新

翻訳辞書は scripts/i18n.py にあります。翻訳文を変更した後、反映スクリプトを実行して中国語データを再生成します。

python3 scripts/apply_translation.py

生成結果はフロントエンドから読み込まれます。更新後は、data/pose-zh.json の体系、カテゴリ、ポーズ名、アングル、検索フィールドが想定どおりか確認することをおすすめします。

画像の完全性を検証

検証スクリプトは2878個のファイルについて、存在、ファイルサイズ、画像ヘッダーを確認します。

python3 scripts/verify.py

素材の再ダウンロード、ディレクトリの移動、正式なデプロイの前に検証を実行すると、オンライン環境での画像欠落や破損のリスクを減らせます。

Cloudflare Pagesへのデプロイ

このプロジェクトは純粋な静的サイトであり、GitHubに接続してCloudflare Pagesに自動公開させる方法がおすすめです。

  1. Cloudflare Dashboardにログインします。
  2. Workers & Pagesに移動し、Create、Pages、Connect to Gitの順に選択します。
  3. プロジェクトリポジトリを選択し、本番ブランチを main に設定します。
  4. Framework presetを None に設定します。
  5. Build commandを bash scripts/build.sh に設定します。
  6. Build output directoryを dist に設定します。
  7. 保存してデプロイします。通常は約2〜5分後に https://<project>.pages.dev のアドレスが発行されます。

以後、本番ブランチに git push するたびに、Cloudflare Pagesが自動的に再ビルドして公開します。

Build output directoryをリポジトリのルートに直接設定しないでください。ルートディレクトリの .git には数百MBのデータが含まれる場合があり、Cloudflareがそのpackファイルをスキャンする際に、1ファイルあたり25 MiBの制限に抵触する可能性があります。scripts/build.sh はサイトに必要なファイルだけを dist にコピーします。

リポジトリ内の最大ファイルは約917 KBで、公開ディレクトリには約2883個のファイルがあります。Cloudflare Pagesの1ファイル25 MiB未満、1回のデプロイ20000ファイル以下という制限を満たしています。

コマンドラインでデプロイ

GitHubに接続しない場合は、公開ディレクトリを生成してからWranglerでアップロードすることもできます。

bash scripts/build.sh
npx wrangler pages deploy dist --project-name ai-pose-gallery-zh

_headers では img/ と thumbs/ に1年間の強力なキャッシュが設定されており、変更されていない画像へのブラウザーからの重複リクエストを防ぎます。

高度な設定の提案

正式なドメイン名を変更

リポジトリ内の絶対アドレスは、デフォルトで https://ai-pose-gallery.anhao.app/ を指しています。Forkして自分のドメインにデプロイする場合は、次の箇所も同時に変更する必要があります。

  • index.html のcanonicalアドレス
  • Open Graphの og:* アドレス
  • Twitter Cardの twitter:* 設定
  • JSON-LD構造化データ内のサイトアドレス
  • robots.txt 内のsitemapアドレス
  • sitemap.xml 内のトップページアドレス

これらのアドレスを統一して更新することで、カスタムドメインと pages.dev ドメインが検索エンジンに重複ページと見なされるのを防げます。

SEOの意味を維持

ページには、独立したdescription、keywords、author、Open Graph、Twitter Cardに加え、WebSite と ImageGallery のJSON-LDデータが設定されています。フロントエンドを変更する際も、主見出しを1つに保ち、明確なセクション見出しを使用し、ポーズ名と視点を含む画像の代替テキストを維持してください。

サムネイルには遅延読み込みを使用し、ライトボックスでは小さい画像を先に表示してから原画像をリクエストします。ページ機能を拡張する場合も、この読み込み順を維持することをおすすめします。900×1200のPNGが同時にリクエストされると、初期表示速度に影響する可能性があります。

データ変更時にフィールドの一貫性を維持

検索、フィルター、グループ表示、アングル切り替えはすべて pose-zh.json のフィールドに依存しています。レコードを手動編集する際は、id の一意性、画像の相対パス、体系名、カテゴリ、ポーズ番号、アングル名に特に注意し、変更後に検証スクリプトを実行してください。

著作権と利用範囲

画像および原データの著作権は、原作者のギアに帰属します。リポジトリの管理者はこれらの素材に対する権利を主張しておらず、プロジェクトも原作品の商用利用許諾を構成するものではありません。

scripts/ と index.html のコードはMITライセンスで提供されますが、このライセンスは img/、thumbs/、data/ に含まれる画像および原データを対象としません。素材を再配布または利用する前に、用途が関連する著作権要件を満たしていることを確認してください。

まとめ

AI Pose Galleryの中国語版は、データの完全な日本語化、ローカル画像リソース、レスポンシブなフロントエンドを、依存関係なしの静的プロジェクトに統合しています。Python HTTPサーバーでローカルプレビューを実行でき、内蔵スクリプトを使って素材の再ダウンロード、翻訳の更新、アセットの検証が可能です。その後、Cloudflare Pagesで迅速に公開できます。独自バージョンをデプロイする際は、ドメイン関連のSEO設定を調整し、プロジェクトのコンテンツに関する注意事項と著作権の範囲を遵守してください。