QTVR Diary -OFFLINE- vol.5 追記：Flash無しで画像のクロスフェードを実装するJavaScript

09/21

2008

先日レポートした「QTVR Diary -OFFLINE- vol.5」の中身について、数回に分けて説明する追記コンテンツです。
今回は、スティッチしたパノラマ画像を自分のウェブページに載せる時に、ちょっと知っておくと良いアイデアとして、画像のクロスフェードを実装するJavaScriptをご紹介します。

ところで「なぜFlashではなくてJavaScriptなのか？」という問いには、ボクはこう答えてます。『Flashが嫌いだから！』...何があっても"苦手だから"とは言いません！（爆
もちろん仕事ではFlashも使いますが、ボク自身は余り得意ではありません。人間、覚えられることには限りがありますし、ボクもスーパーマンではありません。このウェブ業界で生きていく上で、"何を取り込み""何を捨てるか"の「捨てる」部分でFlashを選択したワケです。そのお陰で、パノラマVRに関してはそこそこの知識が得られたという感じでしょうか？（苦笑

それに何より、AJAXの流行で今までFlashでしか作れなかった動きのあるサイトが普通のテキストエディタで作れるようになったことが大きいです。
Flashコンテンツは「Adobe Flash」及びその互換ソフトでしか作ることが出来ず、一旦作ってしまったあとでの変更も非常に面倒です。
テキストエディタで作ることが出来るJavaScriptによるアクションは、後々とても簡単に修正ができます。しかも最近は、JavaScriptのアクションライブラリが充実してきて、ヘッダ内でそのjsファイルを読み込んで、本文中にその実行コードの１文を書き足すだけで使えるようになってるのも、便利なところ。ボクのような"プログラマでない"ウェブデザイナーにとっては、非常に使いやすくなってきました。

さらに加えると、Flashを使わずJavaScriptで作り上げると、iPhone/iPod Touchでサイトを見ることが出来るんです！
未だにFlashコンテンツを見ることが出来ないiPhone/iPod Touchでは、JavaScriptによる動きのあるページが唯一のページ内アクションを実現する手段です。
このブログも、PENCILのオフィシャルサイトも全てJavaScriptライブラリで作り込んでいます（なので若干重いのですが）。従って、iPhoneで完全互換を実現しています（ちょっとおかしいところもあるんですが、95％ぐらいは同じな筈です）。

さて今回ご紹介するのは、複数の画像をフェードイン／フェードアウトさせて画像転換させるJavaScriptプログラムの使用方法です。

■ Javascript / CSS Crossfader（bsn.Crossfader.js）
http://www.brandspankingnew.net/archive/2006/09/javascript_css_crossfader.html

サイトからダウンロードして解凍して使います。
使い方はとっても簡単。

<head>内に下記の１文を挿入して、JavaScriptライブラリを読み込みます。

さらに<body>内に複数のレイヤー（<div id="cf1"><div id="cf2"><div id="cf3">）を作り、これらを下記のように配置。クロスフェードのコード「Crossfader」を任意の場所（レイヤーの直下がベター）に置くと完成。

<div id="pano1"><img src="images/img_pano1.jpg" alt="パノラマ1" /></div>
<div id="pano2"><img src="images/img_pano2.jpg" alt="パノラマ2" /></div>
<div id="pano3"><img src="images/img_pano3.jpg" alt="パノラマ3" /></div>
<script type="text/javascript">
　var cf = new Crossfader( new Array('pano1','pano2','pano3'), 500, 2000 );
</script>

CrossFeder函数の数値のうち、前がクロスフェード時間、後ろが静止時間です。
各ライブラリや画像データの場所は、各自のお好きなところに指定してやって下さい。
またクロスフェードのレイヤーは画像だけじゃなくテキストも入れることが出来ます（design studio "PENCIL" オフィシャルサイトでは、画像と共にVRPodcastのフルスクリーンCubicVRページへのリンクテキストも載せています。こんな芸当も出来るのです）。

良かったら、一度チャレンジしてみて下さい。

2008年10月11日(土)15:00〜17:00 参加無料のイベントです。お気軽にお越し下さい！
親睦会（参加費6,000円）の参加申込もこちらからどうぞ

「この記事が役に立った」「この記事で助かった」「この記事は感度した」「この記事で儲かった」...
そんな人は、ぜひ、当サイトの運営資金のご寄付をお願いします。

アイコンをクリックして、iPhoneで使えるパノラマアプリを体感しよう！

PangeaVR free ★★★★★	PangeaVR Pro ¥1,200- ★★★★・	Cube World free ★★★★★	Sphere View ¥230- ★★★・・	Pano Tool ¥350- ★★・・・	PanoCalc ¥230- ★★★・・
AutoStitch ¥230- ★★★★★	TripStitch ¥600- ★★★・・	Pano ¥350- ★★★・・	Panorama ¥1,200- ★★・・・	Panoramas ¥230- ★★・・・	PANORAMA Picker ¥115- ★・・・・
PanoLabo free ★★★★★	PanoLabo Pro ¥600- ★★★★・	Mosaica Lite free ★★★・・	Mosaica free ★★★★・	Panorama Maker ¥230- ★★・・・	Panorama Camera ¥350- ★★・・・
ASKAParama free ★・・・・	MawsonsHut free ★★★・・	EON free ★★・・・	Panoramascope ¥600- ★★★・・	Topo Maps ¥800- ★★・・・	iViews ¥230- ★★★・・
Google Earth free ★★★・・	Seadragon Mobile free ★★・・・	iSynth free ★★★★・	HongKong720° ¥230- ★★・・・	vCathedrals ¥115- ★★★・・	360 Viewer free ★・・・・