krpanoメモ #JavaScript

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ファイルなどが生成される。