概要

Webブラウザ用のパノラマビューワー pannellum をWordPressの投稿や固定ページの表示で使うためのプラグインです。pannellumはHTML5、WebGL、CSS、JavaScriptといった汎用技術で構成されているので、いろいろなプラットフォームのWebブラウザで360°(または、それより狭い)パノラマ画像を表示することができます。
このプラグインでは、投稿や固定ページ内にパノラマ画像用のショートコードを記述することで、iframeタグを使うことなくインライン表示とポップアップ表示に対応しました。

対応バージョン、ブラウザなど

以下で動作を確認しました。

• WordPress 4.7～4.9 (twentyfourteeenテーマ)
• Google Chrome 69.0 (64bit, Windows 10)
• Firefox Quantum 61.0 (64bit, Windows 10)
• Microsoft Edge 42.17 (Windows 10)

なお、Firefox の57.0版ではパノラマが描画されず領域が真っ黒になりました。更新して61.0にしたら問題なし。

パノラマ画像ファイルが大きい場合、ブラウザに拒絶されることもあるし、環境によってはメモリ不足でいきなり落ちたりします。スマホでの表示を考えると、横幅4096ピクセル未満にしておくのが良さそうです。

表示例

Equirectangular-projection.jpg。https://commons.wikimedia.org/wiki/File:Equirectangular-projection.jpg By original by NASA (sensor Terra/MODIS), modified by Mdf [Public domain], via Wikimedia Commons.

正距投影図法(Equirectanglar Projection)によって表現された地球です。こういう風にきちんと合成できればきれいに表示されますね。マウスでドラッグすることで、上下左右に動かすことができます。

パノラマ画像そのものの表示やインタラクションはpannellumスクリプトが処理しているので、詳しくは上のリンクを参照のこと。

導入方法とファイル構成

WordPressにプラグインとして導入する際には、以下のように操作します。

1. こちらのリンクから wp_pannellum.zip をダウンロードする。
2. WordPressのダッシュボードからプラグイン/新規追加を選択し「プラグインを追加」ページを開く。
3. 「プラグインのアップロード」を選択し、さきにダウンロードしておいた wp_pannellum.zip を選択して「今すぐインストール」を選択します。

wp_pannellum.zipの中身

以下のようなディレクトリ構成になっており、プラグインディレクトリにも同じように展開されます。

※ WordPressのバージョンやテーマによっては、プラグイン関係の文言が違うかもしれません。直接サーバーを操作する場合は、…/wp-content/plugins ディレクトリに、上記のwp-pannellum ディレクトリをコピーすればオーケーです。

使い方

ブログの投稿内でパノラマを表示したいところに、以下のようなショートコードを記述します。これは上に載せた地球のパノラマを表現したものです。

※実際のショートコードでは、パラメータの区切りは半角空白としてください。改行を入れるとうまくいきません。

日本列島が最初に見えるよう、緯度経度を意識したpitch、yawを与え、表示範囲をhfovで指定しています。

パラメータについて

ショートコードに与えるパラメータは、もともとのpannellumに用意されていたものと、このプラグイン独自に追加したものがあります(独自拡張のパラメータ名は、”_” を含んでいます)。パラメータ名は以下の表記のように大文字と小文字が混在してもよいし、すべて小文字でも大文字でも構いません。

type (string)

パノラマ画像の種別。省略値は”equirectangular“。現在のところ、プラグインでは省略値の “equirectangular” 以外は考慮していないので、typeの指定は省略してください。

title (string)

パノラマ画像内に表示するタイトル文字列。省略値は””。pannellumスクリプトの問題と思われますが、タイトルを指定しないとき(省略時やtitle=””)、パノラマ画像の左下に黒い矩形(タイトル表示用のdiv)が表示されてしまいます。

url (string)

パノラマ画像ファイルのURIを指定します。”http://…..jpg” のような完全修飾でもよいし、同じブログサイト内のファイルならばディレクトリからの指定でもよいでしょう。初期値は””。

後述しますが独自拡張として、メディアライブラリ内のアタッチメントIDを指定する方法(attachment_id)とプラグインのサンプルディレクトリ内ファイルを指定する方法(sample_image)もあります。

haov (number)

パノラマ画像の水平画角(度)。省略値は360。Horizontal Angle Of View。

voav (number)

パノラマ画像の垂直画角(度)。省略値は180。Vertical Angle Of View。

voffset (number)

pannellumスクリプトのvoffset値。省略値は0。vaov < 180 のパノラマ画像に対して指定してみましたが、ちょっと効果が分かりません。

hfov (number)

初期表示時の水平画角(度)。省略値は60。Horizontal Field Of View。hfovを小さくすると狭い範囲(ズームイン)、大きくすると広い範囲(ズームアウト)が最初に表示されます。

minHfov (number)

ズーム操作時の水平最小画角(度)。省略値は45。ズームイン(拡大)したときの最小の水平画角を指定します。この値より狭い範囲は表示しない、という設定。

maxHfov (number)

ズーム操作時の水平最大画角(度)。省略値は120。ズームアウト(縮小)したときの最大の水平画角を指定します。この値より広い範囲は表示しない、という設定。

pitch (number)

初期表示時の仰角(度)。省略値は0。初期表示時に、画像の水平中心線をに中央にした場合は0、下向きならばマイナス、上向きならばプラスの値を設定します。

minPitch (number)

操作表示時の最小仰角(度)。省略値は-90。表示中のパノラマ画像を上下に動かしたとき、どこまで下が見えるかという設定。

maxPitch (number)

操作表示時の最大仰角(度)。省略値は90。表示中のパノラマ画像を上下に動かしたとき、どこまで上が見えるかという設定。

yaw (number)

初期表示時の回転角(度)。省略値は0。初期表示時に、画像の垂直中心線を中央にしたい場合は0、時計回りの方向を表示するならばプラス、半時計回りの方向を表示するならマイナスの値を設定します。
回転軸の中心に撮影者がいるとしてどちらを向くかということです。撮影者から見て左がマイナス回転、右がプラス回転ということになります。
※最初に載せた地球の場合、地球の中心から外を見ていることになるので回転方向は逆になります。

minYaw (number)

操作表示時の最小回転角(度)。省略値は-180。表示中のパノラマ画像を左右に動かしたとき、どこまで左側が見えるかという設定。autoRotateにも影響します。

maxYaw (number)

操作表示時の最大回転角(度)。省略値は180。表示中のパノラマ画像を左右に動かしたとき、どこまで右側が見えるかという設定。autoRotateにも影響します。

autoload (boolean)

ショートコードを含むページが表示されるとき、指定のパノラマ画像ファイルを自動的に読み込むかどうかを指定。省略値は “false”。自動読み込みを行う場合は、autoload=trueではなくautoload=”true” と記述すること。

autoRotate (number)

自動回転の速度。省略値は0。1秒間あたりの回転角を「度」単位に指定します。0で回転なし。正の値では反時計回り(パノラマは左方向に動く)、負の値では時計回り(右方向に動く)になります。

autoRotateInactivityDelay (number)

autoRotate中に何か操作すると回転が停止します。最後の操作の何msec後に回転を再開するのかを指定します。省略値は2000。

showZoomCtrl (boolean)

パノラマ画像の中にズームコントロール(＋と－)を表示するかどうかを指定します。省略値は “true”。消したい時は、showZoomCtrl=”false” とします。
なお、独自拡張の hide_ctrls=”yes”によってもズームコントロールを非表示にできます。

showFullScreenCtrl (boolean)

パノラマ画像の中にフルスクリーンコントロール(四辺が途切れた四角)を表示するかどうかを指定します。省略値は “true”。消したい時は、showFullScreenCtrl=”false” とします。
フルスクリーン表示をサポートしていないブラウザもあるのかもしれませんが、そのときどうなるのかは分かりません。
なお、独自拡張の hide_ctrls=”yes”によってもフルスクリーンコントロールを非表示にできます。

hide_ctrls (string)

ズームコントロールとフルスクリーンコントロールを同時に非表示とするとき”yes”とします。省略値は”” です(何か文字列を与えると非表示になります)。
このパラメータが !== “” のときには、showZoomCtrlとshowFullScreenCtrl の指定にかかわらず、コントロールは非表示となります。2つとも”false”とするのが面倒で追加しました。

attachment_id (string)

WordPressのメディアライブラリに登録されている画像をパノラマ画像ファイルとして用いるとき、attachment_id=”7777″ といった具合に指定します。省略値は””です。
この指定はurlパラメータによる画像指定を上書きします。

sample_image (string)

このプラグインのsamplesディレクトリ内の画像を使うとき、sample_image=’name.jpg’ のように指定します。省略値は””です。
いちいちurl=で指定するのが面倒になって追加しました。この指定はurlやattachment_idでの指定を上書きします。

popup_view (string)

インラインではなくポップアップ風に表示するとき”yes”や”true”を指定します。省略値は””です(何か文字列を与えるとポップアップします)。
ポップアップした領域を消すときには右上の × かポップアップ領域外(グレイアウトしている領域)をクリックします。

anchor_text (string)

ポップアップ表示を開始するためのアンカータグに表示する文字列を指定します。省略値は”popup panorama”です。
htmlのエスケープを行っていないので、htmlタグやおそらくスクリプトを含めることも可能です。管理者だけしか投稿しないブログの場合は問題ないでしょうが、そうでないならエスケープすべきでしょう。

aspect_ratio (number)

表示するパノラマ表示の横縦比をパーセンテージで指定します。初期値は66。4:3で表示するならば、3÷4×100 = 75、3:2ならば、2÷3×100 =66、16:9ならば9÷16×100 =56とします。

ポップアップ表示と合わせて詳細は以下に。

表示領域の実装

詳しくはwp_pannellum.php 内を見ていただくとして、今回の実装ではパノラマ用のdivの大きさをどうするのかに主眼を置きました。

インライン表示

インライン表示のときの横幅は、WordPressのグローバル変数である、$content_widthとしています。$content_widthは、テーマディレクトリ内の function.php で指定されていると思います。$content_width が未設定の場合、576ピクセルとしています。もしもコンテンツ表示領域の横幅が$content_widthより狭い場合、コンテンツ表示領域幅(パノラマ用divの親要素のwidth() )を用います。

高さは、aspect_ratio の指定によってきまり、横幅 × acpect_ratio ÷ 100 によって算出しています。acpect_ratio が省略されたときには3:2となります。

一つのブログページ(一つの投稿)内に、複数のパノラマをインライン表示できるよう、(ポップアップではない)ショートコードが出てくるたびに id の異なるdivを作り、そのidをpannellumスクリプトに与えるようにしています。
同じページにインライン表示をたくさん載せると、PCのブラウザでも動きの重さを感じることがあるので注意が必要。

ポップアップ表示

ポップアップ表示時の横幅は1200ピクセルまたはブラウザ幅の95%としています。大きさについてはプラグインを導入するブログの都合で変えればよいでしょう。このブログでは、fancyboxプラグインによる写真のポップアップ表示時の横幅を1200ピクセルにしているので、それにそろえました。

ポップアップ表示は背景用のdiv (id=”wp_pannellum_bg“)とポップアップ領域用のdiv (id=”wp_pannellum_popup“)、そしてその中にあるpannellum用のdiv(id=”panorama“)から構成しており、最初のショートコードに遭遇した時点でページ内に作成しています。そのため、一つのページで同時に表示できるポップアップパノラマは一つだけになります(同じdivに表示するので)。
また、ポップアップを閉じるための id=”wp_pannellum_close” というdivを表示します。このdiv内にはstyle.css内の#wp_pannellum_close によって◯の中に × を表示しています。この方法は、CSS ICON というサイトを参考にしました。

ポップアップの表示中にグレイアウトした背景( wp_pannellum_bg ) または クローズボタン(wp_pannellum_close) をクリックするとポップアップ領域を非表示にします。

ポップアップ表示を開始するためのきっかけとして、<a href=”…”>….</a> というシンプルなアンカーを出力しておりテキストとしてanchor_textをそのまま出力しています。anchor_textの出力時にhtmlエスケープしていないことに注意。

表示例その2

プラグインのzipファイル(wp_pannellum.zip)は2つのサンプル画像を含んでいます。これらの画像はwp-pannellumプラグインのテスト表示の場合にのみ利用可能です。

sample1.jpg

sample1.jpg
5年ほど前に札幌の藻岩山から写した夜景です。360度パノラマではないので、minYaw,  maxYawで左右の回転角度を制限しています。

ブログの投稿内でパノラマを表示したいところに、以下のようなショートコードを記述します。

※ 各パラメータごとの改行は読みやすさのために入れてあります。実際の記述時には各パラメータは半角空白で区切ります。

urlパラメータによってプラグインディレクトリのsamples内のファイルを指定しています。うちのブログの場合、こうやって与えるとスキームやホスト名が自動的に補われます。httpsとhttpの両方のスキームを使っていたりテスト用に別のホストで動かすこともあるので、このようにしています。

sample2.jpg

このパノラマをポップアップ

プラグイン作りの過程で素材として作成しました。東京都調布市にある神代植物公園のバラ園にて、Laowa 7.5mmを縦構図に構えて写したものを合成しました。

インライン側のショートコードはこんな具合です。

sample_imageを使って記述を簡略化しました。minPitch, maxPitchなどの各パラメータは、都合よく表示されるよう試行錯誤の上で決めた値です。

ポップアップ側は、上記に以下を追加したものです。

ふつうのカメラでのパノラマ画像の作成

ちゃんとしたequirectangularな画像が作れていないのですが、風景を適当にうつしてパノラマ表示するためには以下のようにしています。

1. 広角レンズを縦構図に構えて、ぐるっと回りながら周囲を撮影。
2. その際に、ファインダーに見えている画角の1/2～1/3程度ずつ角度を変えながら飽きずにシャッターを切る。
3. 理想的には、順光のときと逆光のときとで露出補正を変える。あるいは、撮影後に同じ明るさになるよう補正する。昼間はどうしても太陽に向けてしまうので。
4. 合成には、Microsoft Image Composite Editor が無料だしうまくやってくれる。合成時の投影方法として、Cylindrical(茶筒状)またはSpherical(球面状)を使う。後者の方が向いているように思う。

パノラマ専用カメラ(360°カメラ)を持ってないので、いちど入手して試してみたいところです。ただ、すぐ飽きるかもしれない…。

改版履歴など

0.2版

1. ショートコード名を “wp_pannellum”に変更
2. スマホを縦にして見るとパノラマが縦長になってしまうので、横幅を得てから表示することにした。ただし、表示中にスマホを横倒しにしても表示領域は広くならない。このあたり改善項目としておく。
3. aspect_ratioも実装。
4. 紹介ページ(このページ)を書いて一式をzipしてプラグインをブログ上で公開。

0.1版

1. パノラマ画像をブログに載せようと思ったが、異常に横に長い画像じゃちょっとなと思ってパノラマビューワーを物色しpannellumに行き着いた。
2. とりあえず、pannellumをWordPressで使うためにラップした。
3. popup_viewを実装。起こす手段がなかったのでanchor_textも追加。

プログラムのライセンス

wp-pannellum

Copyright (c) 2018 okiraku-camera.tokyo

Licensed under MIT license.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.