サイトに360度画像を埋め込む方法
公開日
by
サイトに360度画像を埋め込む方法を紹介します。
例えば、無料で簡単に実装したい時に便利な方法です。
360度画像を埋め込むなら Pannellum
ここでは「Pannellum」を使った360度画像を埋め込む方法を紹介します。
おすすめの理由は、実装が簡単、見た目がシンプル、機能の追加も簡単です。
Pannellum をダウンロード
まずは Pannellum のサイトへアクセス。
Downloads ページから最新の Pannellum ファイルをダウンロード。
ダウンロードした「pannellum」ファイルを、画像を公開したいサーバーへアップロードして事前準備は完了です。
次のファイル構成をもとに説明を続けます。
【サーバー】
┣ pannellum（アップロードしたファイル）
┣ index.html（360度画像埋め込みたいページ）
┗ image.jpg（360度画像）
360度画像の埋め込み
HTMLファイルの360度画像を表示したい場所に次のコードを追加します。
<iframe
allowfullscreen
src="http://hogehoge.com/pannellum/pannellum.htm#panorama=http://hogehoge.com/image.jpg&autoLoad=true">
</iframe>
サイズは適宜指定を加えてください。
カスタマイズするための変更箇所は二箇所。
src の値の最初のURLに pannellum ディレクトリの pannellum.htm ファイルを指定。
サンプルコードではこのURL「http://hogehoge.com/pannellum/pannellum.htm」
次に、後半の panorama に画像の URL を指定します。
サンプルコードではこのURL「http://hogehoge.com/image.jpg」
ちなみに、サンプルコードには画像の自動読み込み（autoLoad=true）が指定されています。
以上二箇所を変更。プレビューを行い動作を確認してください。
※ローカルでのプレビューは正しく表示されない場合があります、ご注意ください。
レスポンシブ対応
360度画像をレスポンシブ対応する場合は、親要素とCSSを追加します。
<style>
.pannellum-wrap {
position: relative;
max-width: 100%;
padding-top: 56%;
}
.pannellum-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class="pannellum-wrap">
<iframe
allowfullscreen
src="http://hogehoge.com/pannellum/pannellum.htm#panorama=http://hogehoge.com/image.jpg&autoLoad=true">
</iframe>
</div>
オプションの追加
iframe 内の src に値をすることで「自動スクロール」や「画像の自動読み込み」などを追加することができます。
オートスクロール
画像のオートスクロールを追加する場合は iframe の src の値に＆区切りで「autoRotate=-2」を追加します。
<iframe
allowfullscreen
src="http://hogehoge.com/pannellum/pannellum.htm#panorama=http://hogehoge.com/image.jpg&autoLoad=true&autoRotate=-2">
</iframe>
スクロールの速度や向きは値の数値を変えて対応してください。
画像の自動読み込み
画像の自動読み込みを追加する場合は iframe の src の値に＆区切りで「autoLoad=true」を追加します。
<iframe
allowfullscreen
src="http://hogehoge.com/pannellum/pannellum.htm#panorama=http://hogehoge.com/image.jpg&autoLoad=true">
</iframe>
まとめ
サイトに360度画像を埋め込む方法を紹介しました。
