krpanoのlayer要素と属性について。


こんにちは。エンジニアの筒井です。
衣替えのタイミングを見誤り、若干寒い日々を過ごしています。

最近、業務でパノラマのオーサリングを行いました。

ネクストページでは360°パノラマというサービスを展開しています。
https://nxpg.net/360/

パノラマのオーサリングとは

まず、パノラマのオーサリングでどのようなことをしているか説明をします。
今回は、layer要素についての説明記事のため、それに関係する部分を紹介しようと思います。

いづよね360° VR動画お店紹介
こちらは私がオーサリングに携わってはいないのですが、制作実績として公開されているため、当記事で引用しています。

パノラマを見ると、オレンジ色のビックリマークや矢印のアイコンが表示されています。
それぞれクリックすると他のシーン(※)に飛んだり、説明が表示されたりします。
これらのアイコンを配置したり、クリックした時の挙動を設定したりという作業がオーサリングで行われます。

※このパノラマには矢印をクリックすることで「店舗」から「精米室」へ、「精米室」から「店舗」へと移動することができます。この「店舗」と「精米室」をそれぞれシーンと呼びます。

オーサリングツールについて

パノラマを制作するにあたって使用したのは、「krpano」というオーサリングツールです。

krpano公式サイト

krpanoでオーサリングする場合、データをxmlファイルで管理します。
今回はkrpanoで使用するxmlの構造のうち、よく使うlayerという要素と、layer要素内での使用頻度の高い属性について説明します。
公式リファレンスでは以下のページで説明がなされています。
https://krpano.com/docu/xml

layer要素について

layer要素とは、パノラマ内に画像・文字・背景色などを設置したいときに使用する要素です。

layer要素については、公式リファレンスでは以下の部分が相当します。
https://krpano.com/docu/xml/#layer

似ている要素としてhotspot要素が存在しています。
hotspot要素の詳しい説明は今回は割愛しますが、次の項目で説明する要素内で使用できる属性については、layer要素と同じものもあるので参考にしていただければと思います。
要素内では大きさ・位置などをそれぞれの属性で設定していきます。

要素内で使われる頻度の高い属性について

ここでは、要素内で使われる頻度の高い属性についていくつか紹介をします。

name属性
layer要素に名前をつける属性です。
パノラマでは要素に名前をつけておく必要があります。複数のlayer要素を親子関係にしたり、イベントを設定したりするときに、該当のlayer要素を呼び出せなくなるためです。

parent属性
複数のlayer要素を親子関係にするときに使用します。親となるlayer要素名を設定しておくと、その子要素となります。

visible属性
表示・非表示の切り替えを設定します。初期値はtrue(=表示)です。

align属性
要素を画面のどこに置くかを設定します。
中央(center)・左上(lefttop)・上端中央(top)・右上(righttop)・右端中央(right)・右下(rightbottom)・下端中央(bottom)・左下(left bottom)・左端中央(left)が設定可能です。

edge属性
align属性で設定された場所に、layer要素のどの位置が置かれるかを設定します。設定可能な値はalign属性と同じです。

align属性とedge属性に関しては公式リファレンスのイラストレーションを参考にするのがわかりやすいです!

width属性・height属性
横幅・縦幅を設定します。

width属性とheight属性に関しては、片方にpropを設定すると、縦横比を保ったままサイズを変更することができます。

・イベントに関する属性

onhover属性
マウスオーバーした時の挙動を設定します。

onclick属性
クリックした時の挙動を設定します。
「クリックすると説明が表示されるアイコン」は、こちらと上で紹介しているvisible属性を組み合わせて作ることができます。

onloaded属性
読み込み時の挙動を設定します。

イベントに関する属性は、他の属性と比較して、少し記述の仕方が異なります。
例として、layer要素をクリックすると非表示にしたいときは以下のような記述をします。

onclick="set(visible,false);"

おわりに

krpanoのサイトにはサンプル集があり、見ているだけで楽しいです。
また、サンプル集はxmlファイルも公開されているので、どこにどのような要素や属性を使用しているかを見てみると勉強になります。

他の要素や属性について、またオーサリングを進める過程でつまずいた箇所も多かったので、今度はそれらについても記事を書けたらいいなと思います。

オーサリングをしていると英語や数学の勉強をしないとなあと思うことが多かったです。
今年は家にこもって勉強を頑張る一年にしたいです!