制作実績に360度映像を載せるページを作ったとき、初案には視点を動かせる球体がありました。けれど、動いていたのは静止画を貼ったデモです。作品の動画を見ながら視点を動かせるページが欲しかったので、指示と完成条件を組み直しました。実装を任せるときにどこまで具体的に伝えれば、意図したものができるのか。その試行錯誤をまとめます。
最初のずれは「動く」の意味だった
球面に写真を貼れば、ドラッグで周りを見回せます。それだけを見ると360度の操作は成立しています。でも、同じ景色の時間は進みません。制作実績として確認したいのは、撮影・編集した映像が時間とともに流れ、その最中に観客が別の方向を向けることです。画面上の操作が似ていても、観客が受け取る内容が違います。
この違いを受け、静止画を球に貼る演出を外し、YouTubeで配信している実作品のプレイヤーを中心にしました。通常の映像作品は別の一覧に分けました。通常動画も同じプレイヤーで再生できるため、作品データで動画の種類を明示しないと、ページを作る側も読む側も区別しづらくなるからです。
AIへの指示を、完成の判定まで書く
今回のやり取りをもとに、次回使える形に整理した指示例です。
360度作品の紹介ページを作る。素材は指定したYouTubeの実作品。作品を選んで再生すると、映像の再生時刻が進み、その間に視点を左右に動かせること。通常動画は別枠に分ける。完了報告には、選択した作品と実際の再生動画の一致、再生状態、視点変更の確認結果を書く。確認できない環境は、環境名と症状を分けて記録する。
この指示で重要なのは「見た目が360度らしい」という形容を、操作の順番に変えていることです。自分で案件を置き換えるなら、「利用者が何をして、結果として何が変わるか」を一文書いてから、実装を頼むと確認しやすくなります。
構築手順は、作品の整理、プレイヤー、表示の順
先に作品ごとにタイトル、動画ID、種類、視聴リンクを揃えます。作品数を見出しに直書きすると、追加のたびに表示とデータがずれるため、選択肢や件数は登録したデータから作ります。古い紹介ページにあった講演や施工動画も候補になりますが、収録されていることと360度作品であることは別の確認です。
次に埋め込みプレイヤーを用意し、視聴を始めたときに対象の動画を読み込みます。制作版ではYouTube IFrame APIの準備完了、再生状態の変化、エラーを扱いました。再生前に使う画像や角マークは、再生中にプレイヤーの上に重ならないようにします。見た目の演出がクリックやドラッグを受け止めると、動画側の操作が届かなくなるためです。
埋め込みが読み込まれても、動画が再生されたとは限らない
iframeは、別のサイトの表示をページ内に埋め込む枠です。枠の読み込み完了だけでは、その中で目的の作品が再生されたか分かりません。まず再生状態と実際の動画IDを確認し、そのあと再生時刻の進みを見ます。360度作品ではさらに視点を変え、対応している環境で視点情報が変わるかを確認します。yawは左右を向く角度の目安です。値を読めない環境で視点操作を確認済みにする必要はありません。
当時の検証では、アプリ内ブラウザーで実動画の再生と視点変更を確認できました。一方、Chromeのスマホ表示を模した検証ではYouTubeの読み込みエラーがありました。画面幅を変えた確認と、実機での映像再生は別に記録しています。使える環境と制約のある環境が分かれば、利用者が埋め込みで見られないときにもYouTubeで作品を開ける導線を残せます。
自分のページで試すときの確認順
選択した作品名と実際に流れる動画が一致するか。再生時間が進むか。視点操作の前後で見える方向が変わるか。通常動画が360度作品として扱われていないか。この順に確認すると、再生の問題と視点操作の問題を分けられます。私はこのページで、見た目が完成した段階と、使う人の操作が成立した段階を分けて確認するようにしました。
コメント