360° Viewer

360°写真ビューアーWordPressプラグイン

概要

このプラグインは、WordPressのブロックエディタで360°パノラマ写真を表示するためのビューアーブロックを提供します。Three.jsを使用して、インタラクティブな360°ビューイング体験を実現します。

機能

• Three.jsを使用した高性能な360°ビューアー
• ドラッグによる視点移動
• マウスホイールとピンチによるズーム操作
• 自動回転機能（インタラクションが無い場合）
• フルスクリーン表示対応
• レスポンシブデザイン（モバイル対応）
• 画面サイズに応じた最適な画像解像度の読み込み
• ローディングインジケータとプログレッシブローディング

インストール方法

1. このプラグインをZIPファイルとしてダウンロードします
   • 360-viewer-1.1.1.zip - 最新版（推奨）
   • 360-viewer-1.1.0.zip - 1.1系初版
   • 360-viewer-1.0.2.zip - 1.0系最終版
   • 360-viewer-1.0.1.zip - 不具合修正版
   • 360-viewer-1.0.0.zip - 初回リリース版
2. WordPressの管理画面から「プラグイン」→「新規追加」→「プラグインのアップロード」を選択します
3. ダウンロードしたZIPファイルをアップロードして、インストールします
4. プラグインを有効化します

開発者向け: 配布ZIPの作成

npm ci
npm run release:zip

• 出力先: releases/360-viewer-<version>.zip
• <version> は package.json の version を使用
• macOS / Windows 両対応（bashやzipコマンド不要）

使用方法

1. WordPressの投稿/固定ページエディタで、「ブロックを追加」をクリックします
2. 「メディア」カテゴリから「360°ビューア」を選択します
3. 「写真を選択」ボタンをクリックして、360°パノラマ写真をアップロードまたは選択します
4. プレビューを確認し、必要に応じて写真を変更できます
5. 投稿/固定ページを公開すると、フロントエンドで360°ビューアーが表示されます

操作方法

• マウス/タッチによるドラッグ：視点の移動
• マウスホイール/ピンチ操作：ズームイン/アウト
• クリック：ズームイン
• Shift+クリック：ズームアウト
• 右上の⛶ボタン：フルスクリーン表示の切り替え

最適な画像

• 等距円筒図法（Equirectangular）形式の360°パノラマ画像を使用してください
• 最適な画像比率は2:1（例：4096x2048、2048x1024など）です
• プラグインは自動的に画面サイズに応じた適切な解像度の画像を読み込みます

注意事項

• ビューアーのパフォーマンスはブラウザとデバイスの性能に依存します
• 高解像度の画像は読み込みに時間がかかる場合があります（プログレッシブローディング対応済み）
• WebGLに対応していないブラウザでは Canvas2D フォールバックモードで動作します（パフォーマンスは低下します）

クレジット

• Three.js - JavaScript 3Dライブラリ

バージョン履歴

• 1.1.1 - バグ修正（自動回転設定の無視、WebGLコンテキストリーク、SPA環境でのリソース未解放、Canvas2D CPU過負荷）
• 1.1.0 - フロントアセット読み込み最適化、WebGL/Canvas2D切り替え改善、リーク/レイアウト不具合修正
• 1.0.2 - バージョン管理運用の改善、リリース表記の統一
• 1.0.1 - 重大な不具合修正（メモリリーク解決、エラーハンドリング強化、Canvas2D描画の復元、文字化け修正）
• 1.0.0 - 初回リリース（モバイル対応強化、ピンチズーム機能、パフォーマンス最適化）