全天球カメラやスマホアプリで撮った360度画像をWebページに配置するケースを考えてほしい。このようなときそのままimgタグで配置するようなことはあり得ない。360度画像を平面で見ても、せっかくの臨場感や没入感を味わうことができないからだ。
きっとぐるりと見渡すようなコンテンツを思い出すのではないだろうか。最近では不動産サイトや会社案内、宿泊施設などで活用されるシーンも増えていて目にすることがあると思う。
このエントリーでは、360度画像を表示するJavaScriptライブラリ「immersive-custom-elements」を紹介したい。
immersive-custom-elementsについて
immersive-custom-elementsは、360度コンテンツをWebサイトに配置できる。ライブラリの読み込みとHTMLカスタム要素の配置のみの簡単仕様になっている。
特徴
- ほかライブラリに依存しない
- 意識的にインスタンスしない
- HTMLカスタム要素で配置が簡単
- オプションはHTMLカスタム要素の属性に記述
導入
導入は、CDNから読み込むかGitHubリポジトリから入手してほしい。今日現在ではnodeパッケージは無かった。したがって、いまはnpmインストールはできない。
CDNで読み込む
<script src="https://rawcdn.githack.com/MozillaReality/immersive-custom-elements/v0.1.0/build/immersive-custom-elements.js"></script>使い方
<img-360>
360度画像用のHTMLカスタム要素だ。
<img-360 src="360-landscape.jpg" width="640" height="360"></img-360>| 属性 | 型 | 必須 | 説明 |
|---|---|---|---|
| src | string | yes | 画像ファイルのパス |
| width | number | yes | 要素の幅 |
| height | number | yes | 要素の高さ |
<video-360>
360度映像を再生するHTMLカスタム要素だ。
<video-360 src="video.mp4" width="640" height="360" loop></video-360>| 属性 | 型 | 必須 | 説明 |
|---|---|---|---|
| src | strings | yes | 映像ファイルのパス |
| width | number | yes | 要素の幅 |
| height | number | yes | 要素の高さ |
| loop | – | no | ビデオループ |
| muted | – | no | 音声ミュート |
| autoplay | – | no | 自動再生 |
360度画像を表示してみる
<img-360>で配置するとご覧のとおりだ。
<!doctype html>
<html lang="ja">
<head>
<script src="https://rawcdn.githack.com/MozillaReality/immersive-custom-elements/v0.1.0/build/immersive-custom-elements.js"></script>
</head>
<body>
<img-360 src="./images/sample.jpg" width="640" height="360"></img-360>
</body>
</html>まとめ
360度画像を表示するJavaScriptライブラリ「immersive-custom-elements」の紹介だった。
サンプルを作るに際して、ダミー画像ジェネレータから読み込むつもりが、カスタム要素枠内に画像が表示されず、ローカルに配置したものに限り表示できた。別ドメインから読み込むようなことがなければ問題ないはずだ。
そして<script>の記述位置においては、ドキュメントだと<head>内に書いているが、</body>の直前でも問題なく機能していた。適当な箇所に記述するとよい。
このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。
