0. 全体像（やることの流れ）

1. 導入チェックリスト（現場での確認ポイント）

1-1. 撮影／収集

1. 解像度：水中では細部が見えにくいので、できれば 5.7K 以上（理想は 8K/60fps）。
2. 光量：水中は青っぽく暗くなりやすい。明るいライト＋拡散板が有効。
3. 距離の基準：レーザーの点や、既知サイズの物体を写し込み、後で大きさを推定できるようにする。
4. ログ：方位（コンパス）、深さ、流れ等の記録があると判断の助けになる。
5. 権利：YouTubeの動画を使う際は、規約やライセンスに注意。

1-2. つなぎ（ステッチ）

1. 露出や白バランスを整え、つなぎ目（縫い目）が目立たないよう調整。
2. 水中は模様が少なく、つなぎがズレやすい。手動微調整で対応。
3. 仕上げは「横長の球面画像（2:1）」で出力しておくと後工程が楽。

1-3. 見やすく補正（方向・色）

1. 上下や北の方向を統一（「いつ見ても向きが同じ」だと迷いにくい）。
2. 赤色が弱くなりがちなので色補正（チャートがあればベター）。
3. 暗所ノイズは動画フィルタで軽減（例：FFmpeg の atadenoise）。

1-4. AIで注目点を自動抽出（必要に応じて）

1. 球面の画像を6つの面（キューブマップ）に分けて通常のAI（YOLO等）にかける方法が扱いやすい。
2. 見る方向の周辺だけを高精細にする「Tangent Image」という方法もある（軽くて速い）。
3. 見つけた場所の座標（向き）を記録して、あとで画面に印（ホットスポット）を付ける。

1-5. 見せ方（Web）

1. 段階1：YouTube 360をページに埋め込み、時間に合わせて説明テキストを切り替える。
2. 段階2：Pannellum（または A-Frame）で自社ホスト。ホットスポットを自由に配置。
3. 段階3：AIの結果をリアルタイム表示。学習ログ（どこを見たか等）も取る。

1-6. 体験の評価（UX）

1. 理解度テストやチェックリストで「前よりわかるようになったか」を確認。
2. 視線の動きや注目箇所をヒートマップにするのも有効。
3. 酔いや不快感のアンケート（SSQ）で安全面もチェック。
4. 「確実さ（自信度）」の表示を入れて、過信を防ぐ。

2. まずは簡単：YouTube 360 を埋め込んで説明を同期

次のサンプルは、YouTube の 360°動画（ 例の海中動画）を ページに埋め込み、再生時間に合わせて「説明パネル」の内容を切り替えるだけのものです。 HTMLに貼り付ければ動きます（サイトにアップするだけでOK）。

<!-- ▼ 動画と説明のボックス -->
<div id="player"></div>
<div id="note" class="card">ここに海中構造の説明が出ます</div>

<!-- ▼ YouTube IFrame API -->
<script src="https://www.youtube.com/iframe_api"></script>
<script>
  let player;

  // 時間ごとの説明（自由に増減できます）
  const notes = [
    { start: 10, end: 25, text: "主柱A：基礎部に砂の堆積（目安 3cm）" },
    { start: 26, end: 40, text: "リブR3：軽い腐食（次回の潜行時に近接確認）" },
    { start: 41, end: 60, text: "ケーブル結束部：緩み疑い（流れが強い地点）" }
  ];

  // API 読み込み後に呼ばれる関数（必須の名前）
  function onYouTubeIframeAPIReady() {
    player = new YT.Player("player", {
      height: "450",
      width: "800",
      videoId: "G5il6L8ExBg",
      playerVars: { playsinline: 1 },
      events: { onReady: onReady }
    });
  }

  function onReady() {
    setInterval(() => {
      const t = player.getCurrentTime();
      const n = notes.find(n => t >= n.start && t <= n.end);
      document.getElementById("note").textContent = n ? n.text : "—";
    }, 300);
  }
</script>

3. 次の段階：Pannellum で自社ホスト＋印（ホットスポット）

Pannellum は、横長の球面画像（2:1）や対応動画をブラウザで表示する軽いツールです。 下のサンプルは静止画ですが、動画にも応用できます。球面上の場所（向き）に 情報の印（ホットスポット）を付けられます。

<!-- ▼ Pannellum の読み込み（CDN） -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/pannellum/build/pannellum.css"
/>
<script src="https://cdn.jsdelivr.net/npm/pannellum/build/pannellum.js"></script>

<!-- ▼ 表示領域 -->
<div id="panorama" style="width: 100%; height: 520px;"></div>

<script>
  // 画像：equirectangular（2:1）を指定
  const viewer = pannellum.viewer("panorama", {
    type: "equirectangular",
    panorama: "seafloor_8k.jpg",   // 自分の画像に差し替えてください
    autoLoad: true,
    pitch: 0,
    yaw: 0,
    hfov: 95,
    hotSpots: [
      { pitch: -12, yaw: 55,  type: "info", text: "主柱A：堆積" },
      { pitch: -3,  yaw: 122, type: "info", text: "配線結束：緩み疑い" }
    ]
  });

  // あとから印を追加する関数（AIの結果などを反映できます）
  function addHotspot(yaw, pitch, label) {
    const id = "hs_" + Math.random().toString(36).slice(2);
    viewer.addHotSpot({ pitch, yaw, type: "info", text: label, id });
  }
</script>

3-1. 360°動画を扱う時の目安

1. 形式：equirectangular の MP4（H.264/HEVC）。8K なら 60〜120 Mbps 程度を目安。
2. サーバ設定：HTTP/2 以上、部分読み込み（Range リクエスト）対応。
3. メタデータ（Spherical Video V2）を付けると再生互換性が上がります。

# 例：YouTube向けの球面メタ付与（spatialmedia ツール）
python spatialmedia -i input.mp4 output_injected.mp4

4. AIで「気になる場所」を見つける（やさしい説明）

4-1. 基本の考え方

• 球面画像（ぐるっと全方向）を、6つの面（前後左右＋上下）に分ける。
• 各面は「普通の画像」になるので、一般的な物体検出（YOLO 等）を使える。
• 見つかった位置を、球面上の向き（yaw/pitch）に戻して、印を打つ。

4-2. 位置を球面の向きに戻すイメージ（擬似コード）

# キューブ面内の座標(u, v) から 球面の向き(yaw, pitch) を計算する例
# ※あくまでイメージ（擬似コード）です。実装は環境に合わせてください。
import math

def vec_from_face_uv(u, v, face):
    # u, v は各面の -1..1 の正規化座標（中心0）
    if face == 'front':
        x, y, z =  u,  v,  1
    elif face == 'back':
        x, y, z = -u,  v, -1
    elif face == 'right':
        x, y, z =  1,  v, -u
    elif face == 'left':
        x, y, z = -1,  v,  u
    elif face == 'top':
        x, y, z =  u,  1, -v
    elif face == 'bottom':
        x, y, z =  u, -1,  v
    # 正規化
    n = (x*x + y*y + z*z) ** 0.5
    return (x/n, y/n, z/n)

def vec_to_yaw_pitch(x, y, z):
    yaw   = math.degrees(math.atan2(x, z))   # -180..180（左右の向き）
    pitch = math.degrees(math.asin(y))       # -90..90  （上下の向き）
    return yaw, pitch

4-3. 水中ならではの下処理

• 色補正：赤みが弱い映像は、赤チャンネルを少し強めると見やすい。
• ノイズ：暗い場所のザラつきは動画フィルタで軽減（FFmpeg など）。
• 濁りや浮遊物：連続フレームで共通しているかを見て、一時的な点は無視する工夫が有効。

4-4. FFmpeg 例（配信向けに整える）

# ノイズ軽減＋リサイズ＋ストリーミング最適化の例
ffmpeg -i input_8k_er.mp4 \
  -vf "hqdn3d=2:1:3:3,scale=7680:3840:flags=lanczos" \
  -c:v libx264 -preset slow -tune film -profile:v high -level 5.2 \
  -pix_fmt yuv420p -b:v 90M -movflags +faststart \
  output_8k_stream.mp4

5. 台帳（メタ情報）の持ち方（最低限）

6. 品質の目安と受け入れ条件

• 見え方：8K の球面映像で、主要な部位が拡大せずに判別できる。
• 向き：視点を変えても「北や上」の基準が崩れない。
• AI：誤判定が多くならないよう、疑わしい所は手動確認する運用に。
• 体験：理解が以前より良くなったか（テストで確認）。酔いが出ないか。
• 権利：肖像や機微な情報がある場合はアクセス制限をかける。

7. 90日ロードマップ（無理なく段階的に）

1. 0–30日：YouTube 360 を埋め込んで時間同期の説明を付ける。簡単な理解度チェックを作る。
2. 30–60日：Pannellum に移行。8K 再生とホットスポット配置。必要なら簡易AI（よく見る所の自動提案など）。
3. 60–90日：AIの精度を改善。体験のABテスト（2パターン比較）で伝わりやすさを検証。

8. リスクと対策（現場で困らないために）

• 濁り・暗さ：できるだけ明るく、色を補正。撮影手順を定めて再現性を上げる。
• AIの間違い：「AIの推測にすぎない」ことを画面に示し、最終判断は人が行う。
• 酔い：ズームや回転のスピードを制限。固定視点モードも用意。
• 権利：限定公開やアクセス制御を必ず設定。外部配布は慎重に。

9. 最終チェックリスト（出す前に見る項目）

• 【素材】解像度・明るさ OK / 距離の目安（基準物）ある？
• 【処理】つなぎ目は目立たない？ 向き（上・北）は整っている？
• 【補正】色・ノイズは許容範囲？
• 【印】重要箇所にホットスポットが付いている？ 説明は伝わる？
• 【体験】理解度は改善？ 酔いは出ない？ フィードバックは取れている？
• 【配信】8K再生OK？ 回線とサーバは耐えられる？ アクセス制御は設定済？