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

RuiC-PoseAtlas チュートリアル：3言語対応の人体ポーズ参考ギャラリーの構築と利用

このチュートリアルでは、RuiC-PoseAtlasを使って複数の角度から見た人体ポーズ参考画像を閲覧・ダウンロードし、ローカル起動、ショートカット操作、3言語リンクの共有、データ検証、新しいポーズの追加、静的サイトのデプロイまで行う方法を解説します。

約15分で読了
RuiC-PoseAtlas チュートリアル：3言語対応の人体ポーズ参考ギャラリー

RuiC-PoseAtlasについて

RuiC-PoseAtlas は、完全に静的でランタイム依存関係のない人体ポーズ参考ライブラリです。プロジェクトには288組のポーズと1,439枚の人体線画が収録されており、同じポーズの正面、斜め、側面、俯瞰、仰視アングルをまとめて管理できます。制作者は体勢、比率、四肢の向き、カメラとの関係を連続して比較できます。

RuiC-PoseAtlasのプレビュー

AI画像生成、イラスト、漫画、3Dモデリング、アニメーション、写真構図、ビジュアルデザインに適しており、ネイティブフロントエンドプロジェクトの学習事例としても利用できます。サイトは純粋なHTML、CSS、ES Modulesで構築されており、React、Vue、バンドラーには依存していません。

コンテンツに関する注意：本プロジェクトは成人の制作者を対象としており、一部の内容は未成年者に適していません。利用時は、お住まいの地域の法令および各プラットフォームの規約を遵守してください。

すぐに閲覧したい場合は、RuiC-PoseAtlasオンラインデモを開いてください。ソースコードの調査、データのカスタマイズ、自分でのデプロイが必要な場合は、後述の手順でリポジトリをクローンしてください。

主な機能

  • 複数アングルの比較：各ポーズには4～5種類のアングルがあり、カードまたは大画像ページで切り替えられます。
  • 2種類の閲覧モード：「ポーズ別」では同じグループのアングルをまとめ、「単体」モードでは各アングルを個別に表示します。
  • 複合フィルター：シリーズ、カテゴリ、アングルで絞り込めます。プロジェクトには4つのコンテンツシリーズと26のサブカテゴリがあります。
  • 多言語検索：中国語、英語、日本語の名称を同時にインデックス化し、ポーズ番号、カテゴリ、シリーズでも検索できます。
  • 3言語インターフェース：中文、English、日本語を即時に切り替えられ、選択内容はlocalStorageに保存されます。
  • キーボード操作：矢印キーでアングルやポーズを切り替え、Escで大画像を閉じられます。
  • 元画像のダウンロード：大画像ページから900 × 1200 PNGファイルをダウンロードできます。
  • ディープリンク：URLから特定の言語、ポーズ、アングルを直接共有できます。
  • レスポンシブレイアウト：デスクトップの複数列グリッド、モバイルの2列カード、狭い画面での大画像閲覧に対応しています。
  • 開発用検証：npm run verifyでデータ、翻訳、ファイル参照、画像サイズ、i18nキーを確認できます。

人体ポーズライブラリの閲覧画面

実行環境の準備

通常の閲覧には、最新のブラウザーと静的HTTPサーバーだけが必要です。READMEではPython 3の使用を推奨しています。データの再生成、画像の復元、完全性検証を行う場合は、Node.js 18以降も必要です。

  • Chrome、Edge、Safari、Firefoxなどの最新ブラウザー
  • Python 3またはその他の静的サーバー
  • Node.js 18以降（スクリプトタスクでのみ使用）
  • 十分なディスク容量。PNG元画像は約654 MB、サムネイルは約25 MBを使用します

ローカルへのインストールと起動

ステップ1：リポジトリをクローンする

git clone https://github.com/HRuiCcc/RuiC-PoseAtlas.git
cd RuiC-PoseAtlas

リポジトリには1,439枚のPNG元画像と1,439枚のJPEGサムネイルが完全に含まれているため、初回のクローンには時間がかかる場合があります。

ステップ2：静的サーバーを起動する

python3 -m http.server 8123 --bind 127.0.0.1

次にブラウザーで以下へアクセスします。

http://127.0.0.1:8123/

Node.jsがインストールされている場合は、プロジェクトが提供するコマンドを直接実行することもできます。

npm start

index.htmlを直接ダブルクリックしないでください。ページはfetch()でdata/poses.jsonを読み込むため、file://プロトコルではブラウザーの同一オリジンポリシーによりブロックされ、空白のページが表示される可能性があります。

基本的な使い方

ポーズの検索と絞り込み

  1. 検索ボックスに中国語、英語、日本語のポーズ名、またはP019のような番号を入力します。
  2. 上部のシリーズタグを使って対象範囲を絞り込みます。
  3. カテゴリとアングルを選択し、複数の条件を組み合わせます。
  4. 「ポーズ別」と「単体」を切り替え、ポーズグループの比較または画像単位の絞り込みを行います。
  5. モバイル端末では「フィルター」をタップして、折りたたまれたフィルターパネルを開きます。

カードと大画像の閲覧

カード下部のアングルサムネイルをクリックすると、カード内で該当アングルを直接プレビューできます。カードのメイン画像またはタイトルをクリックすると、大画像が開きます。カード内でアングルを選択してからメイン画像をクリックすると、大画像ページは選択したアングルから表示されます。

複数アングルのポーズ大画像閲覧

大画像ページでは、以下のキーボード操作に対応しています。

  • ←と→：前または次のアングルに切り替えます。
  • ↑と↓：前または次のポーズに切り替えます。
  • Esc：大画像を閉じます。
  • Tab：大画像ページ内のコントロール間でフォーカスを移動します。

ページには、ポーズ名、番号、シリーズ、カテゴリ、現在のアングル、画像サイズも表示されます。参考素材を保存する場合は、「元画像をダウンロード（PNG）」をクリックしてください。

言語の切り替えとディープリンクの共有

右上から中国語、英語、日本語を切り替えられます。言語の選択は、まずURLパラメーター、次にlocalStorageを読み取り、最後にブラウザーの言語に基づいてデフォルトのインターフェースを決定します。

http://127.0.0.1:8123/?lang=en
http://127.0.0.1:8123/?lang=ja#pose=full_single_P019&angle=side

2つ目の例では、日本語インターフェースを開き、full_single_P019の側面アングルを表示します。オンラインでデプロイした後も、同じパラメーターとハッシュ構造を使って特定のコンテンツを共有できます。

プロジェクト構成を理解する

プロジェクトはデータ駆動型の設計を採用しており、data/poses.jsonがライブラリの中核データソースです。フィルター、検索、カード、大画像ページはすべてこのデータから生成されます。

RuiC-PoseAtlas/
├── index.html
├── assets/
│   ├── css/app.css
│   ├── js/app.js
│   └── js/i18n.js
├── data/poses.json
├── img/
├── thumbs/
├── scripts/
├── .github/workflows/
└── package.json
  • assets/js/app.js：データの読み込み、検索とフィルタリング、ページの描画、大画像の操作、ショートカットキーを担当します。
  • assets/js/i18n.js：3言語のインターフェース文言をまとめて保存します。
  • data/poses.json：288組のポーズ、3言語の名称、画像パスを保存します。
  • img/：900 × 1200 PNG元画像を保存します。
  • thumbs/：300 × 400 JPEGサムネイルを保存します。
  • scripts/：データ構築、画像復元、完全性検証のスクリプトを含みます。

データの再構築と検証

データスクリプトはサードパーティーパッケージに依存しません。元データまたは英語名を変更した後は、以下を実行できます。

npm run data
npm run verify

npm run dataは、scripts/source/にある中国語・日本語のレコードと英語名の一覧を統合し、ポーズ番号ごとにアングルをまとめて、コンパクトなdata/poses.jsonを生成します。

npm run verifyは、ポーズと画像の数、3言語の名称、シリーズとカテゴリの翻訳、画像参照、重複ファイル、画像形式とサイズ、ページで使用されるi18nキーの完全性を確認します。データを変更した後は、画像の欠落、リンク切れ、翻訳不足を防ぐため、必ずこのコマンドを実行してください。

新しいポーズグループを追加する

  1. 4～5枚のPNG元画像をimg/に入れます。
  2. 対応する300 × 400 JPEGサムネイルをthumbs/に入れます。
  3. scripts/source/のソースレコードにポーズ項目を追加します。
  4. scripts/en-pose-names.jsonに英語名を追加します。
  5. npm run data && npm run verifyを実行します。

画像を追加する前に、適切な使用および配布の許諾を自分が保有していることを必ず確認してください。プロジェクトのソースコードはMIT Licenseで提供されていますが、画像、元データ、名称はMITライセンスの対象外です。

不足している画像ファイルを復元する

新しくクローンした後に一部の画像が不足している場合は、以下を実行できます。

npm run fetch-images

スクリプトはポーズデータから画像パスを収集し、不足しているファイルを並列ダウンロードします。正しい署名を持つ既存ファイルはスキップし、PNGおよびJPEGファイルの署名を検証します。ダウンロードに失敗した場合は、別のソースに切り替えて再試行します。リポジトリにはFetch image assetsというGitHub Actionsワークフローも用意されています。

静的ウェブサイトとしてデプロイする

GitHub Pagesを使用する

リポジトリには.github/workflows/deploy-pages.ymlが組み込まれています。サイトに関係するファイルをmainブランチへプッシュすると、ワークフローが自動的にデプロイします。ActionsページからDeploy to GitHub Pagesを手動で実行することもできます。

この処理では、サイトの実行に必要なエントリーポイント、リソース、データ、画像だけをパッケージ化し、README、ビルドスクリプト、ドキュメントディレクトリ内のその他のファイルをすべて公開することはありません。

Cloudflare Pagesを使用する

  1. Cloudflare PagesでGitHubリポジトリを接続します。
  2. Framework presetをNoneに設定します。
  3. Build commandは空欄のままにします。
  4. Output directoryを/に設定します。
  5. 設定を保存してデプロイを開始します。

プロジェクトが提供する_headersには、元画像とサムネイルに1年間の強力なキャッシュ、データファイルに5分間のキャッシュが設定されており、index.htmlは毎回再検証されます。

その他のホスティングプラットフォーム

Netlify、Vercel、オブジェクトストレージ、Nginxでもこのプロジェクトをホスティングできます。ビルド手順はないため、リポジトリのルートディレクトリを静的サイトのディレクトリとして指定するだけです。カスタムドメインを使用する場合は、ソーシャルプラットフォームがカバー画像を取得しやすくなるよう、index.html内のog:imageを絶対URLに変更することを推奨します。

応用テクニック

  • デプロイサイズを削減：グリッド表示だけが必要な場合は、サムネイルのみを残し、データ内の原画像フィールドとダウンロード処理を調整できます。ただし、大きな画像の表示と原画像のダウンロード機能は利用できなくなります。
  • 遅延読み込みを活用：ギャラリーのグリッドでは JPEG サムネイルのみをリクエストし、PNG 原画像は大きな画像を開くとき、またはダウンロードするときだけ読み込みます。初期表示を高速化するために原画像を削除する必要はありません。
  • 新しい言語を追加：assets/js/i18n.js、ポーズデータの names フィールド、言語切り替えボタンを同時に変更し、その後に完全性チェックを実行する必要があります。
  • 相対パスを維持：プロジェクトのリソースはすべて相対パスを使用しているため、ドメインのルートディレクトリにもサブディレクトリにもデプロイできます。
  • 変更後は先に検証：画像の追加、分類の調整、翻訳の変更にかかわらず、必ず npm run verify を実行してください。
  • 公開範囲に注意：GitHub Pages のブランチ公開方式を採用する場合は、公開ディレクトリを限定し、スクリプト、ドキュメント、その他の無関係なリポジトリファイルが静的リソースとして公開されないようにしてください。

RuiC-PoseAtlas モバイル画面

著作権と利用範囲

プロジェクトのフロントエンドコード、スタイル、スクリプト、ドキュメントには MIT License を適用します。画像、元データ、名称の著作権は原作者に帰属し、MIT ライセンスの対象外です。原作者は、商用制作、編集、参考を含め、作品を創作の参考として利用することを許可していますが、画像データ自体の再配布、転載、転売は禁止しています。商用利用の前に原サイトの説明を読み、適法性を自ら確認してください。

元のプロジェクトは POSE-DB-01 で、原作者は ギア です。RuiC-PoseAtlas は非公式に整理したバージョンで、主にデータ整理、英語名の補足、フロントエンドの再構築を行っています。

まとめ

RuiC-PoseAtlas は、分散していた多角度のポーズ素材を、検索、絞り込み、ダウンロードが可能な3言語対応の静的ギャラリーに整理しています。一般ユーザーは構図やポージングの参考として直接利用でき、開発者はデータ駆動型アーキテクチャ、ネイティブ ES Modules、国際化、アクセシビリティ、静的デプロイ方式について学べます。ローカルでの起動が完了したら、まずキーボード操作とディープリンクに慣れ、必要に応じてデータを拡張したり、自分用のバージョンをデプロイしたりすることをおすすめします。