親会社のDX担当さんに「旧型だし、使っていないなら頂戴よ」なんて軽口を言っていたら、本当に頂いてしまった「THETA S」。
ありがとうございます。まだまだ現役で実用できるお宝です。
360°動画はとても重たいし、撮影者の視界の外まで映すので、映ってはいけないものが映っていたり(ガクブル)、正直あまり利用シーンは多くないかもしれませんが、360°静止画をパノラマで表示するのは、我が社の作業風景を紹介する上でとても有効だと思っています。
なぜなら我が社の現場はどこも風光明媚な場所だから。
一つネックなのは、THETAで撮影した360°コンテンツをWEBで公開するには有料プラン(THETA360.biz)に加入する必要があること。きっと色々な機能が使えて素晴らしいサービスなのだろうと思いますけど。。。
シンプルにパノラマ写真をページに掲載したいだけなので、いつも通り無料のヤツを検索。
すると、「Pannellum」ってクールなツールを発見したので、早速実装してみました。
こだわったのは360°のアイコンをオーバーレイで表示させたところ。
折角のギミックですから、「こいつ…動くぞ!」と、しっかり主張することが大事だと思います。
追記(ShortcorderとPannellumの設定)
今後、投稿する際にPannellumを組み込むことが増えるかもしれないので、ショートコード化することにしました。そこで導入したプラグインが「Shortcorder」。↓ショートコードの例↓
[sc name="pannellum" imageurl="/test.jpg"][/sc]
初めて使いますが、なるほど便利なものですね。この例は、カスタムパラメータ(”imageurl”)に画像URL(”/test.jpg”)を代入して使用しています。代入する画像URLを変更すれば、違うパノラマ画像を表示できるので超楽チンです。
Pannellumは公式ページ(https://pannellum.org/ )に使い方の説明とサンプルがありますから、実装の難易度は高くないです。ここでは色々パラメータを試してみたかったのでiframeではなくAPIを使用しています。
360°アイコンのオーバーレイは、ChatGPTに教えてもらいました。
プロンプトは「pannellumで生成する div panorama にpng画像をオーバーレイしたい。」です。
あっという間にコードを吐き出してくれます。
いやはや、すごい時代です。はい。。。
ちなみに、THETAで撮影した動画からpannellum用の静止画を保存するには、Windows標準の「フォト」を使えば簡単にできます。
「フォト」でMP4を再生したら、お好みのフレームで一時停止。メディアコントローラにある「”…”ボタン(その他のオプション)」をクリックして「フレームの保存」でOK。