• ホーム
  • テクノロジー
  • 360度画像をインタラクティブ表示するJavaScriptライブラリ「immersive-custom-elements」の使い方

360度画像をインタラクティブ表示するJavaScriptライブラリ「immersive-custom-elements」の使い方

全天球カメラやスマホアプリで撮った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>
属性必須説明
srcstringyes画像ファイルのパス
widthnumberyes要素の幅
heightnumberyes要素の高さ

<video-360>

360度映像を再生するHTMLカスタム要素だ。

<video-360 src="video.mp4" width="640" height="360" loop></video-360>
属性必須説明
srcstringsyes映像ファイルのパス
widthnumberyes要素の幅
heightnumberyes要素の高さ
loopnoビデオループ
mutedno音声ミュート
autoplayno自動再生

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>の直前でも問題なく機能していた。適当な箇所に記述するとよい。

このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

コメントを残す

メールアドレスが公開されることはありません。*がついている欄は必須項目です。

日本語が含まれない投稿は無視されますのでご注意ください。