krpanoを使ってみたメモ
###はじめに
krpanoとは、dmmやVR系のウェブサイトで広く使われている（2015年5月現在）360度プレイヤー。
基本はパノラマ静止画のビューワーだが、pluginが多数用意されていて、これらを使うと、360度動画の再生や、スマホのジャイロ機能の連動なども手軽にできる。
再生やセッティングに独自のxmlファイルを使うので、最初少し使い方にクセがある。
jsに慣れてるなら、なるべくjavascript interfaceの.call()からkrpano Actionsと呼ばれる独自関数を呼ぶのがわかりやすい？
###基本
情報はあまりないので、基本的には公式ドキュメントを見ながら、exampleファイルを探り探りいじっていくことになる。
公式サイト
http://krpano.com/
krpanoの使い方マニュアル - 360°パノラマVRニュース
http://panorama.poo.tokyo/krpano-manual/
krpanoについて日本語でまとめられた良記事を載せてくれています。
###htmlにkrpanoの読み込み
HTMLファイルの、bodyタグ内に以下を記述。
<div id="pano" style="width:100%;height:100%;">
<noscript>
<table style="width:100%;height:100%;">
<tr style="vertical-align:middle;"><td>
<div style="text-align:center;">
ERROR:<br/><br/>Javascript not activated<br/><br/>
</div>
</td>
</tr></table>
</noscript>
<script>
embedpano({
swf:"./krpano.swf",
id:"krpanoObj",
xml:"./vid360.xml",
target:"pano",
html5:(document.domain ? "prefer" : "auto"),
passQueryParameters:true
});
init();
</script>
</div>
###XMLファイルの記述
公式リファレンス： http://krpano.com/docu/xml/
以下、上記 embedpano({..., xml:"./vid360.xml", ...}) で読み込んだvid360.xmlの中身の一部。
一番外側のタグ
<krpano version="1.18" bgcolor="0x000000"> </krpano>
外部xmlの読み込み
例："skin"というフォルダに入った"videointerface.xml"を読み込み
<include url="skin/videointerface.xml" />
pluginの読み込み
各pluginの詳細は公式ページを参照
<plugin name="xxxx"/>
actionの定義
<action name="my_action">xxxxxx</action>
タグの間にactionを定義する。基本的な書き方はjsと同じだが、krpano用の、krpano actionが使える。
ここで定義したactionは他のactionや、javascript APIの**.call()**などから呼ぶことができる。
###javascriptからkrpanoを操作する
公式リファレンス: http://krpano.com/docu/js/
####基本：krpanoオブジェクトの呼び出し
javascriptからは、getElementByIdでkrpanoオブジェクトにアクセスできる。
document.getElementById(id)
idは、最初に embedpano({id:xxx}) で指定したもの。
毎回、getElementByIdで取得するのも面倒なので、**krpano()**という関数を作っておくと便利。
function krpano(){
return document.getElementById("krpanoObj");
}
####プラグインへのアクセス
plugin[pluginname]
####主なAPI
基本的に以下の３つ。
実際の各操作は.call()でkrpanoのactionsを呼ぶことになる。
.get(variable:string);
※variableは、文字列として指定することに注意
例：Videoplayer pluginから、loadbytes変数の値を取得。
krpano().get("plugin[video].loadedbytes");
.set(variable:string, value);
※variableは、文字列として指定することに注意
例：gyro pluginのenabled変数をfalseに設定。
krpano().set("plugin[gyro].enabled", false);
.call(action:string);
※actionは、文字列として指定することに注意
例：Videoplayer pluginのpause()関数(action)を呼ぶ。
krpano().call("plugin[video].pause();");
どんなactionsがあるかなどの詳細は以下
↓↓↓
Krpanoのリファレンス
http://krpano.com/docu/actions/
Videoplayer pluginのリファレンス
http://krpano.com/plugins/videoplayer/
Gyro pluginのリファレンス
http://krpano.com/plugins/userplugins/fieldofview/gyro/
###プロダクト版のユーザー登録
試用版では、画面にwatermarkがつく。解除にはプロダクト版の購入が必要。
プロダクト版を購入すると、メールでライセンスコードが送られてくる。
公式サイトからダウンロードしたファイル一式の中にkrpano Tools.app (macosxの場合)というアプリが入っていて、その中の"Settings"でライセンスコードを入力すると、watermarkのないjsファイルなどが生成される。