mediaboxとzoomifyで簡単に楽して画像をリッチに見せる
「手軽にネット上でチラシを配信したいんだけど…できればFlashを使った今風な感じで・・・」という相談を持ちかけられたのでお手軽な方法を考えてみた。忘れないうちにメモを。
今回はまずサンプルページをご覧ください。
mediabox&zoomifyサンプルページ
では下準備として今回Zoomifyで表示させたい画像を用意してください。今回は利用者にFlashでズームしながら画像を見てもらうわけなので、準備する画像もそこそこの解像度のものを選びましょう。ちなみにサンプルページの画像は2400ｘ1800ｐｘです。
用意をするのが面倒な方はサンプルで使用した変な画像をお使いください
sample.jpg - 2.08MB
つかえるもんならフリー素材として使っていただいて結構です。
さてサンプルページで使われているエフェクトですが、最近大企業のwebサイトでも見かけるようになったlightbox系のjavascriptです。今回は、画像はもちろんYouTubeやFlash・webサイト等を表示できるmediaboxを使いました。
まずはmediabox本体のjsをダウンロードします。
Mediabox
ダウンロードはページのちょうど真ん中くらいにあります。とりあえずscriptの三つを感謝しつつダウンロードします。そして次はそのしたのDependanciesから、Mediaboxを動かすのに必要な、Mootools javascriptライブラリをダウンロードします。
Mootoolsは必要な機能を自らチェックしてダウンロードする必要があるので、Mediaboxのサイトに書いてあるとおりにチェックを入れましょう。
これでMediaboxを使う準備は整ったのですが、swfを表示する場合はswfobject.jsが必要になってきます。なのでMootoolsへのリンクの下にあるSWFobjectのサイトへいきます。
すると開いたらすぐにDownloadへのリンクがあるのでそれを押してSWFObject 1.5.zipを頂きます。ダウンロードが終わったら解凍しましょう。今回利用するのはその中にあるswfobject.jsだけです。
さてこれで必要なjsはそろいましたので、次は任意の画像を拡大できるFlashを自動で生成してくれるZoomifyをダウンロードします。Adobe Photoshop CS3を使っている方は既にZoomifyを内蔵していますのでそれを利用するのもいいかもしれません。
しかし、今回は誰でも無料で使えるZoomify-EZを書き出してくれるフリーソフトのZoomifyer EZ利用します。(あれれ、どっちがどっちだ)
zoomify - Zoomifyのトップページ
Zoomifyer EZ - 利用するZoomifyer EZのページ
ダウンロードしたzipを解凍するとこんな感じ
Zoomifyer EZの使い方はいたって簡単なので割愛します。起動して使用したい画像を選択するだけです。アイコンへのドロップも対応してますので放り投げてください。
すると選択した画像と同じの名前のフォルダを自動で作ってくれます。上で用意したsample.jpgを使ったと仮定すと、sampleというフォルダが生成されていると思います。これでFlash的な作業は終了です。次は今作ったsampleフォルダ(中にはTileGroup0とImageProperties.xmlが入ってるはず)のパスをHTMLに埋め込みます。さすがにこればっかりは手作業ですがテンプレートが同梱されているので楽です。
まずZoomifyer EZのフォルダに同梱されてあるTemplate.htmを開きます。するとテーブルのなかにobjectが入ってますのでそれを編集します。書き換える場所は2箇所です。
<PARAM NAME="FlashVars" VALUE="zoomifyImagePath=http://www.zoomify.com/content/test/">
を
<PARAM NAME="FlashVars" VALUE="zoomifyImagePath=sample/">
にして、もうひとつは
EMBED FlashVars="zoomifyImagePath=http://www.zoomify.com/content/test/"
を
EMBED FlashVars="zoomifyImagePath=sample/"
に書き換えます。基本的にzoomifyImagePath=の後を先ほどのフォルダの名前にします。あとはobjectとembedの中のwidthとheightをおのおのちょうどいい大きさにしてやります。
それが終わったらHTMLにjsやmediabox.css等のlinkをかけばおしまいです。
mediabox&zoomifyサンプルページ
一応ファイル構成とHMLTを書いておきます。参考になれば。
index.htmlにはscript srcを書いて、test.htmlには先ほど編集したZoomifyのコードを書きます。
テキストリンクでもよかったのですが、なんか味気ないのでサムネイルにしました。
index.html
<html> <head> <title>無題ドキュメント</title> <link rel="stylesheet" href="mediabox.css" type="text/css" media="screen"> <script src="js/mootools-release-1.11.js" type="text/javascript"></script> <script src="js/mediabox72.js" type="text/javascript"></script> <script src="js/swfobject.js" type="text/javascript"></script> </head> <body> <a href="test.html" rel="mediabox[700px 615px]" title="朝の森"><img src="sample_s.jpg" /></a> </body>
Mediaboxの使い方は、上のように rel=”mediabox[width height]“と記入してください。みてのとおりですが、呼び出すサイズもそのなかで指定します。
test.html
<HTML> <body> <div style="width:700px;height:600px;background-color:#000;" > <OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" WIDTH="700" HEIGHT="600" ID="theMovie"> <PARAM NAME="FlashVars" VALUE="zoomifyImagePath=sample/"> <PARAM NAME="MENU" VALUE="FALSE"> <PARAM NAME="SRC" VALUE="zoomifyViewer.swf"> <EMBED FlashVars="zoomifyImagePath=sample/" SRC="zoomifyViewer.swf" MENU="false" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" WIDTH="700" HEIGHT="600" NAME="theMovie"></EMBED> </OBJECT> <span id="copy">Powered by <a href="http://www.zoomify.com/" target="_blank">Zoomify</a></span> </div> </body> </html>
今回のサンプルのソースはかなり汚い(間違っている)ので、あてにしないでください。書き直すのがマンドクセぇ(’A')=3
あとサンプルページではMediaboxのCloseボタンを日本語の奴に変えています。「英語なんか使ってたまるかこの野郎！」という日本男児はこれでも使ってください。
Trackbacks
Comments
Comment