krpano・パノラマデータ「vtour」の中身を覗いてみるよ

<々回に最新版のkrpanoを使ってパノラマデータを作り、前回、その見方をざっくり紹介してきました。今回は、そのパノラマデータのフォルダ「vtour」の中身を覗いて、パノラマが表示される仕組みを調べてみましょう。
0

「vtour」フォルダの中身拝見

「vtour」フォルダを開くと、こんなファイル・フォルダがあります。
1a

片っ端から開いていきます。

panosフォルダ

panosフォルダを開くと、hills6.tilesという名称のフォルダがあります。hills6は、元画像の名前です。tilesは、高解像度表示用にバラバラにされたタイル状の画像、という意味です。

2 どんどん開いて中を見てみましょう。

3 6つのフォルダと、二つの画像があります。フォルダの名前は、f(フロント)、r(ライト)、b(バック)、l(レフト)、u(アップ)、d(ダウン)で、それぞれの画像の六方向の向きと一致しています。一つ一つ開いてみてください。細かに分割された画像に辿り着きます。
画像は、preview と thumb で、その名の通り、プレビューと、サムネイル用に使われます。プレビュー画像は、本画像が開くまでにとりあえず表示する超軽い画像。サムネイルは、画面下のサムネイルボタンをクリックした時に表示される画像です。

pluginsフォルダ

plluginsは、文字通りプラグイン(追加機能を加えるためのちいさなプログラム)が入っています。js(ジャバスクリプト/html5用)、swf(スウィフ/flash用)の他に、xmlもあります。 4

skinフォルダ

skinとはもちろん肌の意味ですが、ユーザインタフェースの外観のことです。パノラマを表示した時に画面に配置されているボタン類などの画像と、これらの機能を指定したxmlが、このフォルダに収められています。現時点では使われていないボタンもありますが、各種の設定を行うことで使われるようになります。

5

tour.htmlファイルを開いてみる

パノラマを表示するには、tour.htmlファイルを開きますが、これをテキストエディタで開いてみましょう。

6

webデザインなどができる人なら読めるはずですが、当面大切なのは、4箇所だけです。一番上が、webページのタイトルです。タブブラウザでは、タブに表示されますので、適切なパノラマ名に変えます。日本語を使えます。
中間より下の部分で、js、swf、xmlの指定がなされていることだけ、確認しておきます。

7

つまり、パノラマが開く流れは次のようになります。

htmlファイルで、tour.js、tour.swf、tour.xml を指定

jsは、html5でパノラマを動かす仕組みが入っています(swfをhtmlにつなぐ役目も兼ねています)
swfは、FLASHでパノラマを動かす仕組みが入っています

xml でパノラマ表示の仕様を設定しています

panosがパノラマ画像、pluginsが付加機能、skinがインターフェースの外観



その他のファイル

他に、「tour_editor.html」と「tour_testingserver.exe」「tour_testingserver_macos」があります。前者は、パノラマツアーを編集するためのhtmlファイルで、後日紹介します。「tour_testingserver.exe」と「tour_testingserver_macos」は、ローカルホストサーバー経由で同じディレクトリーにあるtour.htmlまたはindex.htmlファイルを開くための実行ファイルです。前々回、テスティングサーバーを開いてhtmlファイルをドラッグすると書いたのですが、これらをクリックするだけでもパノラマを開くことができます。ただ、私のmac環境(10.8.5)では「tour_testingserver_macos」は正常に動作しませんでした。windowsは「tour_testingserver.exe」で開くことができました。

ふむふむ。要するに、xmlをいじれば、いろいろなカスタマイズができる。というわけです。
さっそくいじってみたいとこすですが、次回はちょっと寄り道をして、xmlをいじるのに必要な、テキストエディタのお話しをします。
いい話があるんですよ。ふっふっふ。

futter

  • 基礎知識
  • ▼ページをクリック

  • facebook

  • 住所・連絡先

    電話: 044-433-7212
       
  • 2016年12月
    « 11月    
     1234
    567891011
    12131415161718
    19202122232425
    262728293031  
  • リンク

    写真道場
  • ちいさな伝記
  • サイト内を検索できます