krpano・xmlをいじってスキンを簡単カスタマイズ

<lt;pranoはv17あたりから、簡単にカスタマイズできるようなつくりが加わりました。1からxmlを書かなくても、true/false(真/偽)や、数値、urlなどを変更するだけで、見た目の印象を大きく変えられます。xmlの書き方に馴染むためにも、これらを変更して何が変わるのか? を理解していく過程を体験しておくことは重要です。xmlを自分で書く場合も、基本的にトライ&エラーの繰り返しですからね。
エラーとその修正を繰り返すことでしか見えない世界もあるんだと思います。失敗の数が多いほど、面白いモノが作れるじゃないかなぁ。

まずは、VTOURフォルダを開き、デフォルトのスキンを観察しておくところからスタートします。

01

これがデフォルトのスキンです。

0

VTOURフォルダの中にある、tour.xmlを書き換えてカスタマイズします。

2016-11-13-14-41-18

始めるよ

tour.xmlを開くと、寒けがするような文字列が並んでいます。意味がわからないから、怖いんですよね。でも、ちょっと心を落ち着けて観察すると、少しだけ、意味がわかる英単語が見つかります。暗号を解くヒントは、こいういうところからですね。

1

上から7行目あたりに、skin_settings と単語が見つかります。単語といわず、code(コード)といいましょう。かっこいいから。ダビンチ・コードのコードですが、これは暗号というよりも、体系化された符号 というような意味でしょう。

true と false を書き換えてみる

さて、早速ですが、13行目の webvr=”true” を探して、true を false に書き換えてみます。true(トゥルー)は「真」、false(フォルス)は「偽」の意で、要するに、webvrを、使う/表示する/onにする、場合には ture。逆に、webvrを、使わない/表示しない/offにする、場合は false を指定します。ちなみに、コンピュータの2進法で、true=1 、false=0 を当てられていますので、trueを1に、falseを0に書き換えても、問題なく機能します。数字と間違えると困るので、基本的にはやりませんが。

2016-11-13-14-37-57

さて、webvr=”false” にしたら、xmlを保存(ファイル→保存、ctrl+s キーなど)して、ブラウザ画面に表示されたパノラマをリロード(再読み込み)してみましょう。

2016-11-13-8-27-07

メガネアイコンがなくなりました。これで、メガネアイコンが、webvr のボタンだった、ということが確実にわかります。まあ、一事が万事、こんな調子で理解していきます。やってみなきゃわかんないわけですよ。大科学実験で。

日本語の文字列を表示させてみる

VTOUR では、作成したパノラマ全体のタイトルと、一つ一つのパノラマ(シーンという)のタイトルを別々につけることができます。それぞれを日本語で入力して、表示させてみましょう。まずは、1行目にある title の中身です。もともとは、Virtual Tour になっていますが、ここに適当な名前を入れます。大切なのは、”(ダブルコーテーション) と ” の中に入れること。” を消したりしないこと。” と ” の外には、日本語(2バイト文字)は使わないこと。です。このあたりの文法は、後日、まとめて紹介しますが、もし、エラーがでて表示がされなくったら、だいたい、こうした基本的なミスが原因です。

2016-11-13-8-28-31

次にシーンのタイトルを変更します。78行目のtitleの中です。

2016-11-13-8-30-23

保存して、リロードすると・・。

2016-11-13-8-30-57

数字を変更してみる

VTOURでは、ボタンが収められた箱の大きさや位置をかなり自由に変更できます。layout という項目を探して、値を変更してみしょう。ここでは、width(幅)を、100% から60%に変えてみます。

2016-11-13-8-39-08



100%は、画面幅の一杯一杯を指しているのですが、その下の layout_maxwidth=”814″ では、最大幅を814ピクセルに指定していますので、これが幅の大きさの限界になっています。こうした事情は、実際に試して、コードを深読みしていって初めて、何がどうなってそうなるのかがわかります。

2016-11-13-8-40-14

色を変えてみる

design_bgcolor=”0x2D3E50″ は、ボタン列の下地の色の指定です。webなどで使われるカラーコード(♯2D3E50)と同じです。フォトショップでも使えますよね。最初の2桁が赤、次の2桁が緑、最後の2桁が青 で、それぞれ16進法で著されます。

2016-11-13-8-42-18

ff0000なので、真っ赤になりました。

2016-11-13-8-42-00

さてさて、こんな具合で、なんとなくわかりそうなところをいろいろ変更してみて、何が変わるか? 試してみてください。変わらなければ、なんだかわからないモノ、と保留にしておきましょう。その内、わかるようになります。
最初から、全部きっちりわかろうとするのは時間の無駄です。わかるところからわかっていくのが早道です。

スキンボタンとレイアウトの変更

ちょっと目先を変えて、skinフォルダを開いてみてください。透明に白いボタンの画像なので見にくいですが、vtourskin.png と、vtourskon_light.png の2つはとても良く似ています。違いは、ボタンのデザインのみ。デフォルトで使われているのは前者で、後者は別デザインの予備として置かれているものです。これを変えてみましょう。

2016-11-13-8-43-31

45行目の、design=”vtourskin.png” の中身を、vtourskon_light.png に書き換えます。

2016-11-13-8-44-04

ボタンデザインが変わりました。

2016-11-13-8-44-38

要するに、vtourskin.png のボタンデザインを、同じサイズ・位置で変更すれば、それだけでオリジナルのスキンレイアウトが完成する、というわけ。
まずは、ここからスタートするのが楽しいです。

レイアウトを変えてみる

VTOURには、これ以外にもスキンレイアウトのパターンが6種類用意されています。63~68行までの、コメントアウトされている部分がそれです。webデザインなどで、htmlを書く人なら馴染み深いと思いますが、 に挟まれた文字列は、コメント扱いになり、プログラム本文としては扱われません。自分のメモ書きや、当面使わないコードを隠しておくのに使います。こうして本文扱いにしないことを、コメントアウト といいます。つまり、63~68行 は、オマケのレイアウトサンプルとして隠されているわけです。これを使うには、コメントアウトを解除する( の両方を消す)だけです。

2016-11-13-16-03-47

レイアウトが変わりました。

2016-11-13-16-04-37

まあ、こんな次第で、一つ一つコードを変更してみて、何が変わるかを確かめてみましょう。この部分の変更だけで、オリジナルデザインにすることがでますので、ちょっと頑張って作ってみるのもよい勉強になります。

futter

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

  • facebook

  • 住所・連絡先

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

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