ＨＴＭＬを使ったスライドショー (その２)
前回、このコラムでご紹介した｢ＸＰパワートイズ｣で作成するスライドショーはなかなか重宝しますが、いざ使ってみると注文をつけたくなる箇所は少なくありません。たとえば、写真をスライドショーのＣＤに焼いてプレゼントするような場合、年配の相手であれば英語の表示がわかりづらいとか、複数のスライドショーを作成した場合、それらを行き来するコントロール･ボタンも欲しくなってきます。
図①
図②
図③
図④また、デザイン面ではコントロール･ボタンが大きすぎて下品な印象を与えるとか、｢Filmstrip｣の画面はもっと小さな縮小画像で間隔を狭くしたほうが選択する上で便利だとか、その画像の縮小率も縦か横の長いほうを75ピクセルへ落とす初期設定よりは縦のサイズを統一したほうが決まる場合もあるわけです。当然ながらスライドショーのプログラマーは様々なパターンを考慮し、その時点の最大公約数に妥協点を見出すしかありません。
そんな既成服もちょっとした工夫でイージーオーダーどころかテーラーメイドへ早変わりというのが、ＨＴＭＬ(ハイパーテキスト)を使ったプログラムの嬉しさです。たとえば、右図は250枚の画像から成るスライドショー17パターンで構成された例ですが、これらを前回ご紹介したものと比べてみると、よくおわかりいただけるでしょう。
右の図①からは、１パターンのスライドショーしか起動できなかった前回の実例と比べ、17パターンのメニューから選択が可能です。図②では右上のコントロール･ボタンが一回り小さくなって、前後のスライドショーへ移動するためのボタンも新たに２つ追加されました。図③では下に並ぶ各縮小画像が小さくなった反面、表示される枚数は前回の８枚から16枚へ増えて選択しやすくなり、それがさらに顕著なのは図④です。
そこで、今から上記の具体的な改造方法をご紹介してゆくわけですが、限られた紙面の関係上、その範囲は｢ＸＰパワートイズ｣のスライドショーをコントロールする｢viewer.htm｣というファイルの改造のみに限定させていただくこと、および以下ご紹介する実例が機能するのはWindows XPかそれ以前のMeなどでインターネット･エクスプローラのバージョンが更新されている場合のみに限定されることをご了承ください。
まず、スライドショーを日本語化する方法をご紹介する前にご覧いただきたいのは、前回の作例を実際に日本語化した作例です。画面右上のコントロール･ボタンのサイズが違うのはさておき、左上のメニューが英語と日本語でどう違うか、これでおわかりいただけましたか？
この改造方法は、｢viewer.htm｣ファイルがディスク上のどこにあり、それをどうやってメモ帳などのテキストエディタで開くかわかるかたなら、他の知識がなくてもいたって簡単です。｢ＸＰパワートイズ｣の作成した｢viewer.htm｣ファイルをテキストエディタで開くと、ほぼ最後のほうで(空文字の部分を除けば)次の式①Ａとまったく同じ内容の箇所が見つかります。その中で太字の部分さえ日本語で書き直せばいいわけです。
ただ、これだけだと文字のサイズやフォント、あるいはメニュー項目の間隔が不揃いとなり、そこまで気になるかたは他の赤文字の部分をお好みの形で書き直して下さい。先の作例の場合、初期設定が｢12pt｣のサイズを｢9pt｣へ、フォントは｢Trebuchet MS, Arial, sans-serif｣から｢ＭＳ ゴシック｣へ、間隔も文字数に合わせて｢写真の選択｣と｢写真の一覧｣の｢width｣をそれぞれ｢100｣から｢76｣へと変更しました。
その具体的な記述例が式①Ｂであり、こちらをご覧いただくとイメージははっきりと浮かぶはずですが、緑文字の部分はさらに追加された｢マニュアル｣の項目のためのスクリプトなので無視して下さい(いうまでもなく、マニュアルのファイルそのものがないと機能しませんから)。
式①Ａ
<table id=advcontrols style="cursor: hand; font-size: 12pt; color:#03a0fc; font-family:
Trebuchet MS, Arial, sans-serif">
<td width=100 id=advcontrols1 style='color:#03a0fc' onclick='Slideshow()'>Slide Show</td>
<td width=100 id=advcontrols2 style='color:#03a0fc' onclick='Film()'>Filmstrip</td>
<td width=100 id=advcontrols3 style='color:#03a0fc' onclick='Contact()'>Previews</td>
</table>
式①Ｂ
<table id=advcontrols style="cursor: hand; font-size: 9pt; color:#03a0fc; font-family: ＭＳ ゴシック">
<td width=100 id=advcontrols1 style='color:#03a0fc' onclick='Slideshow()'>スライドショー</td>
<td width=76 id=advcontrols2 style='color:#03a0fc' onclick='Film()'>写真の選択</td>
<td width=76 id=advcontrols3 style='color:#03a0fc' onclick='Contact()'>写真の一覧</td>
<td width=76 id=advcontrols4 style='color:#03a0fc' onclick='window.open("manual.htm","manual",
"width=600,height=400,resizable=0,scrollbars=1,toolbar=0")'>マニュアル</td>
</table>
日本語化ともう１つ、作例での主な改造箇所は縮小画像のサイズです。初期設定だと前述の通り縦か横の長いほうが75ピクセルへ落とされ、それらのファイル名は｢オリジナル名.thumb.jpg｣となります。たとえば元の画像が｢bicycle.jpg｣というファイル名だとしたら、その縮小画像は｢bicycle.thumb.jpg｣というわけです。したがって、ディスク上で縮小画像を見つけることが改造の第１段階であり、見つかったら｢フォトショップ｣などの画像処理ソフトを使ってサイズを変更して下さい。
作例では｢100ピクセル×75ピクセル｣だった縮小画像のサイズを｢80ピクセル×60ピクセル｣へ落とし、さらにフィルターで輪舞をシャープにしてあります。こうして材料の準備が整った次は、｢viewer.htm｣ファイルを何箇所か書き直さなくてはなりません。記述内容の順でいくと、まず｢viewer.htm｣ファイルの最初のほうに｢function loadedDoc()｣という項目があり、式②Ａはその17行目以降です(不要な改行と行頭の空文字を省略)。
式②Ａ
{contactText = contactText + "<td height=120 width=120><img onclick=filmJump(" + x + ") style=\"cursor:hand; padding:20px\" src=\"" + vThumb[x] + "\"></td>"}}
contactText = contactText + "</tr>"}
contactText = contactText + "</table></center>"
contact.innerHTML = contactText
var filmThumbsText = "<table style=\"width:600; overflow-x: scroll\"><tr height=120>"
for (i = 0 ; i < vThumb.length ; i++)
{filmThumbsText = filmThumbsText + "<td align=center width=120 id=filmThumb" + i + "><div id=filmThumbCell" + i + " style = \"padding:5px; border: solid 0 #00b; border-width:2px\"><img onclick=filmSelect(" + i + ") class=THUMB style=\"cursor:hand; padding:20px\" src=\"" + vThumb[i] + "\"></div></td>"}
式②Ｂ
{contactText = contactText + "<td height=90 width=90><img onclick=filmJump(" + x + ") style=\"cursor:hand; padding:5px\" src=\"" + vThumb[x] + "\"></td>"}}
contactText = contactText + "</tr>"}
contactText = contactText + "</table></center>"
contact.innerHTML = contactText
var filmThumbsText = "<table style=\"overflow-x: scroll\"><tr height=90>"
for (i = 0 ; i < vThumb.length ; i++)
{filmThumbsText = filmThumbsText + "<td align=center width=90 id=filmThumb" + i + "><div id=filmThumbCell" + i + " style = \"padding:2px; border: solid 0 #00b; border-width:0px\"><img onclick=filmSelect(" + i + ") class=THUMB style=\"cursor:hand; padding:0px\" src=\"" + vThumb[i] + "\"></div></td>"}
この式②Ａで赤文字の部分をそれぞれ式②Ｂの数値へ変更し、緑文字の部分を削除して下さい。｢width｣で縮小画像の幅が指定された状態でも問題はなく、５枚の画像の幅がそれぞれ120ピクセルから90ピクセルに変更されたということは｢600｣という数値を｢450｣へ変更すればいいのですが、それだと縮小画像を縦のサイズ(たとえば60ピクセル)で統一した場合、縦長の縮小画像でも幅は90ピクセルとなるため無駄なスペースが生じます。
そういうわけで余計な｢width:600;｣を削除すると、スペースのセーブばかりではなく、縦長の縮小画像でも画像と画像の間隔が揃って見栄えは良くなるというわけです。もし、削除しなければ、冒頭の図③の縮小画像が図④のような疎(まば)らな間隔で並び、表示される画像数は10/16まで減ってしまうのがおわかりいただけるでしょうか？
式③
if ((document.body.clientHeight - 220) > 0)
{film.height = document.body.clientHeight - 220}
続いては、｢viewer.htm｣ファイルの２/５あたりに｢function Film()｣という項目があるのを見つけて下さい。右の式③はその10行目以降で、この｢220｣を両方とも｢160｣に変更します。これ以上数値が小さくなるとスクロールバーは画面の下へ隠れてしまい、縮小画像の数が多くて画面に入りきらない場合、はみ出した画像へ移動(スクロール)できません。
もっとも、この数値は式②や次の式④での設定と関連しており、そちらの数値が変わればこちらも変更しなくてはならず、もし縮小画像の高さ(縦)が60ピクセルより大きいか小さい場合は、それに合わせて３箇所の数値を調整して下さい。３箇所のうち残るのが｢viewer.htm｣ファイルの一番最後から数行目の式④Ａです。
式④Ａ
<div id=filmthumbs style="width:100%; height:150; display:none; overflow-y:none; overflow-x:scroll"></div>
式④Ｂ
<div id=filmthumbs style="width:100%; height:108; display:none; overflow-y:hidden; overflow-x:scroll"></div>
これを式④Ｂのように、まず赤文字の部分は｢150｣を｢108｣へ、緑文字の部分は｢none｣を｢hidden｣へと書き直して下さい。前者が縮小画像を表示する帯(フィルム)の高さの指定であるのに対し、後者はその縦のスクロール･バーの指定です(｢スクロール･バーのカスタマイズ｣を参照)。後者の初期設定が｢none｣となっているのは、そもそも｢Filmstrip(写真の選択)｣ページで縦のスクロール･バーを必要としないからですが、この設定ではスルロール･バーこそ表示されなくても右端へその幅だけブランクが生じ、｢hidden｣と書き直すことで余計なブランクはなくなり画面がスッキリします。
式⑤
else{
slidemain.filters[0].Apply();
slidemain.filters[0].transition=17
slidemain.src=vImage[iImage]
slidemain.filters[0].Play();}
縮小画像の改造ともう１つ、スライドショーで画像が替わる時の効果ですが、初期設定の｢Stripes left down｣では画面全体が右上から左下へ斜線に分割されながら表示される１パターンです。しかし、効果はこれだけでなく全部で23種類が使用可能であり、それらをランダム表示することも出来ます。設定の変更はいたって簡単で、たった１箇所の番号を書き直すだけです。
｢viewer.htm｣ファイルのちょうど真ん中あたりの｢function changeImage(x,y)｣という項目を探せば、その７行目に右の式⑤と同じ内容の箇所が見つかります。この赤文字の数字を、たとえば初期設定の｢17｣から｢23｣に書き直すと、効果がランダム表示へ変更され、各番号と指定できる効果の関係は以前ご紹介した｢スライド効果｣のリストを参照して下さい。
あと、作例ではコントロール･ボタンのサイズも変わっていますが、その改造方法については新たなボタンの追加方法ともども次回ご紹介する予定です。ともあれ、ここまでの裏技(テクニック)をぜひ一度お試し下さい。健闘を祈ります！ (続く)
|
お断り