2021年09月03日 に更新

Laravel で 360° パノラマ写真を表示する

こんにちは。フリーランス・コンサルタント＆エンジニアの 九保すこひ です。

さてさて、私はサイクリングが趣味なので、行った先でよく写真をとり、後で暇なときに「あー、あのとき楽しかったな😊」なんてカンジになっています。

ただ、どんなにいい写真でも当時直接見た景色には勝てないですよね。
やっぱり写真には風、音、においはありませんし、一部分を切り取った景色なので没入感はありません。

でも、科学は進歩してます！

そうです。
この「没入感」をより感じさせてくれる技術が・・・・・

360°パノラマ写真

です。

例えば次のような写真です。

※ なお、iframe版なのでフルスクリーンは動きません。

これ、ウェブサイトに用意してたらすごくクールですよね👍

ということで、今回はLaravelでこの「360°パノラマ写真」機能をつくってみたいと思います。

ぜひ何かの参考になりましたら嬉しいです😊✨

「電動の折りたたみ自転車ほしい❗」

開発環境： Laravel 8.x、Photo Sphere Viewer

パノラマ画像を用意する

まずは表示する画像を用意します。

正直なところ、「RICOH THETA」のような360°対応のカメラを買おうかとも思いましたが、一回使うだけになりそうなので😂、今回は pixabay から以下の画像をダウンロードさせてもらうことにしました。


⚠ ご注意：この写真は縮小してます

【ダウンロードURL】
https://pixabay.com/photos/winter-panorama-mountains-snow-2383930/

なお、この画像の最大解像度はなんと「19968×9979」😳なのですが、さすがに大きすぎるので一段階少ない解像度「1920×959」をダウンロードしました。

ダウンロードが完了したら、「public/images/」フォルダに設置しておいてください。

パッケージを用意する

では、JavaScriptで360°パノラマ写真を表示することができるパッケージをインストールします。

今回使うのは「Photo Sphere Viewer」です。

他にも同様のパッケージがありますが、以下の点でPhoto Sphere Viewerを選びました。

  • 今でも頻繁にアップデートされている
  • スターが1000を超えている
  • 実際に試してみたら動きがスムーズだった
  • アイコンがきれいだった
  • Photo Sphere Viewer という響きがなんか好き😊

ということでPhoto Sphere Viewerをインストールしていきましょう。

※ なお、Photo Sphere ViewerにはCDNも用意されています。もしインストールがめんどうな方はここは飛ばしても問題ありません。

では、以下のコマンドを実行してください。

npm install photo-sphere-viewer

すると、パッケージがインストールされるので、ビルドしてこのパッケージが使えるようにします。まずはJavaScriptです。

resources/js/app.js

// 省略

window.PhotoSphereViewer = require('photo-sphere-viewer'); // 👈 ここを追加しました

そして、CSSの方もセットします。

resources/css/app.css

// 省略

@import "photo-sphere-viewer/dist/photo-sphere-viewer.css"; // 👈 ここを追加しました

では、ビルドしましょう。
以下のコマンドを実行してください。

npm run dev

これで、/js/app.jsと/css/app.cssにPhoto Sphere Viewerが入りました。あとは、この２つのファイルをそれぞれ読み込むだけでOKです！

ルート＆ビューをつくる

では、今回はメインがJavaScriptになるのでビュー＆ルートだけで作成していきます。

まずは、ルートです。

routes/web.php

// 省略

Route::get('360_panorama', fn() => view('360_panorama'));

※ アロー関数を使っているので、php 7.4未満の場合は通常のfunctionを使ってください。

続いてビューです。

resources/views/360_panorama.blade.php

<html>
<head>
    <link rel="stylesheet" href="/css/app.css"/>
</head>

<div id="app">
    <div id="viewer"></div>
</div>

<script src="/js/app.js"></script>
<script>

    new PhotoSphereViewer.Viewer({
        container: document.querySelector('#viewer'),
        panorama: '/images/winter-2383930_1920.jpg' // 👈 ここがさっきセットした画像です
    });

</script>
</html>

はい、たったこれだけで完成です❗

あとは、ブラウザで「http://******/360_panorama」にアクセスするだけで360°画像を体験することができます👍

なお、npmを使わずにcdnで実装する場合はこちら。

<html>
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.css"/>
</head>

<div id="app">
    <div id="viewer"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uevent@2/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.js"></script>
<script>

    new PhotoSphereViewer.Viewer({
        container: document.querySelector('#viewer'),
        panorama: '/images/winter-2383930_1920.jpg'
    });

</script>
</html>

こちらも数行増えただけで完了できます。
ありがたい話ですね😊

オプション

さすがにこれだけだと面白くないので、自由に設定変更できる基本的な「オプション値」も紹介します。

plugins

各種プラグインをセットします。（プラグインの使い方は、マーカーを表示する をご覧ください）

caption

ビューアの下にタイトル表示することができます

size

ビューアの表示サイズを変更できます。

size: { width:500, height:300 }

navbar

ナビゲーションバーに表示するボタンを指定します。

navbar: [
    'autorotate', // 自動ローテーションボタン
    'caption',  // タイトル表示
    'download'  // ダウンロードボタン
]

この状態で表示すると以下のようになります。
↓↓↓

なお、全ボタンは本家ページを参照してください。

【参考ページ】https://photo-sphere-viewer.js.org/guide/navbar.html#core-buttons

minFov、maxFov

視野がどこまでのいけるかの指定。
1〜179の範囲で指定。

defaultZoomLvl

ズームレベル。
0〜100で指定。

fisheye

魚眼レンズを有効にするかしないか。デフォルトは、false。

defaultLong、defaultLat

初期の回転位置。

autorotateDelay

●秒後に自動回転がはじまる。ミリ秒で指定。

autorotateDelay: 3000

autorotateSpeed

回転速度。

autorotateSpeed: '5rpm'

autorotateLat

回転するときの縦の移動。（つまり指定しない場合真横に回転することになります）

lang

翻訳データ。
日本語の場合は次のようにセットしてください。

lang: {
    autorotate: '自動回転',
    zoom      : 'ズーム',
    zoomOut   : 'ズームアウト',
    zoomIn    : 'ズームイン',
    move      : '移動',
    download  : 'ダウンロード',
    fullscreen: 'フルスクリーン',
    menu      : 'メニュー',
    twoFingers: '２本の指で操作',
    ctrlZoom  : 'ズームに ctrl + scroll を使う',
    loadError : '画像が読み込めませんでした',
}

loadingImg、loadingTxt

起動時に表示する画像とテキスト

mousewheel、mousemove

マウスホイール、マウスドラッグを有効にするかどうか。
初期値はtrueです。

mousewheelCtrlKey

ズームする場合はctrlキーを押さないといけなくなる。
初期値はfalse。

captureCursor

マウスを移動するだけで回転できるようにする。
初期値はfalse。

touchmoveTwoFingers

回転するために２本指でのタッチが必要になる。
初期値はfalse。

マーカーを表示する

さらに、360°パノラマビューアの特定の場所に以下のピンを表示し、クリックしたら文章が表示されるようにしてみましょう。

マーカーの表示はプラグインを使うので、再度ビルドが必要です。
まずはJavaScriptです。

resources/js/app.js

// 省略

window.PhotoSphereViewer = require('photo-sphere-viewer');
window.PhotoSphereViewer.MarkersPlugin = require('photo-sphere-viewer/dist/plugins/markers'); // 👈 ここを追加しました。

そして、CSSです。

resources/css/app.css

// 省略

@import "photo-sphere-viewer/dist/photo-sphere-viewer.css";
@import "photo-sphere-viewer/dist/plugins/markers.css"; // 👈 ここを追加しました

これで以下のコマンドを実行します。

npm run dev

すると、PhotoSphereViewer.MarkersPluginがマーカープラグインの本体になりますので、以下のようにして使ってください。

resources/views/360_panorama.blade.php

<html>
<head>
    <link rel="stylesheet" href="/css/app.css"/>
</head>

<div id="app">
    <div id="viewer"></div>
</div>

<script src="/js/app.js"></script>
<script>

    new PhotoSphereViewer.Viewer({
        container: document.querySelector('#viewer'),
        panorama: '/images/winter-2383930_1920.jpg',

        plugins: [
            [PhotoSphereViewer.MarkersPlugin, {
                markers: [{
                    id: 'image',
                    longitude: 0.06,
                    latitude: 0.03,
                    image: '/images/pin-1976106_100.png',
                    width: 100,
                    height: 100,
                    anchor: 'bottom center',
                    tooltip: 'クリックしてね！',
                    content: '宝物をうめました（ウソ）'
                }]
            }],
        ],
    });

</script>
</html>

なお、CDNの場合はそれぞれ以下を設置することで実行できます。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/plugins/markers.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/plugins/markers.min.js"></script>

テストしてみる

せっかくなのでデモページを用意しました。
以下からご自身でテストしてみてください👍

【デモページ】 ノーマル版、マーカー付き版

企業様へのご提案

360°パノラマ写真を使うと以下のようなことが実現できます。

  • マンションや住宅、ホテルの中を「没入感」を伴って内覧してもらうことができるので、よりお客さんにイメージしてもらいやすい。
  • 旅行先の景色をパノラマで見せることで、より魅力のある商品を提案できる。
  • 撮影範囲が広いので、大勢であっても１枚の写真に写ることができる。
  • マーカー付きにすることで、ひとつひとつの家具の説明や料金を表示＆リンクでその商品ページへ移動できる（もしくはカートに商品を追加できる）
開発のご依頼お待ちしております
開発のご依頼はこちらから: お問い合わせ
どうぞよろしくお願いいたします！ by 九保すこひ

おわりに

ということで今回は「360°パノラマ写真」機能をLaravelを使って実装してみました。

もちろん目的によりますが、現地に行って体験をしてもらうためにはきっといいコンテンツになるんじゃないでしょうか。

しかも、Insta360 Nano Sのような機材を使えば iPhoneを360°カメラ化することもできるので、それほど難しい知識がしなくても導入できるかと思います。

ぜひ皆さんも挑戦してみてくださいね。

ではでは〜❗

「念のため１ヶ所で何枚も写真とるので、
スマホがパンパンです😂」

このエントリーをはてなブックマークに追加       follow us in feedly  

合わせて読みたい