時間ごとにイメージを切り替えるアプレット

このアプレットは、昔使っていたものです。もともとはトップの タイトルとして作ったのですが、トップに置くには少しうざったいので、リンクページに置いてました。

このアプレットの基本機能は、指定されたGIFイメージをスクロールするという非常に単純なものです。ただ し、スクロールする方向、スクロールするピクセル数、さらに、任意のタイミングで表示しているイメージを サブイメージに切り替えて、簡単な点滅効果を使うことができます。加えて、クライアントマシンの時間を 取得して、その時間値を使って表示するイメージファイルを切り替えることができます。

これらの設定をHTMLより自由に指定することができますが、設定の自由が利く代わりに呪文のようなオプション を設定する必要があります(^_^;)。

このページで使っているアプレットでは、全部で8パターン（夜パターンは同じものです。ただしイメージ ファイルは 同じものを２つ用意しています）あります。はっきりいってこれだけの数のイメージを作るのは大変です が、組み合わせをうまく使うと、なかなか見栄えのするイメージが作れるかもしれません。

＃でも、ここまでするならFlash使った方がいいような・・・

使い方

-------------- ここから --------------
<APPLET CODEBASE="http://fronttom.freeservers.com/java/" CODE="ScrollPlate.class" WIDTH=490 HEIGHT=40 ALT="from JAPAN HOKKAIDO SAPPORO">
<PARAM NAME="images_dir" VALUE="../../java/gif">
<PARAM NAME="images_suffix" VALUE="gif">
<PARAM NAME="hour"    VALUE="0-3 4-6 7-12 13-13 14-17 18-18 19-20 21-23">
<PARAM NAME="images"  VALUE="oyama kumo_l kumo_s front frontd anime">
<PARAM NAME="sleep"   VALUE="800">
<PARAM NAME="draw_no" VALUE="0   1   2   1   2   -1   3   1   2">
<PARAM NAME="draw_x"  VALUE="0   40  11  360 107 380 154 420 466">
<PARAM NAME="draw_y"  VALUE="0   11  5   2   12  0   4   15  8">
<PARAM NAME="draw_z"  VALUE="0   3   3   3   3   0   3   3   3">
<PARAM NAME="draw_v"  VALUE="0   1   2   2   3   0   1   3   1">
<PARAM NAME="draw_sw" VALUE="0   0   0   0   0   5   4   0   0">
<PARAM NAME="draw_ti" VALUE="0   0   0   0   0   10  1   0   0">
</APPLET>
-------------- ここまで --------------

このページでは上記のように指定しています。パラメーターは大きく分けて、イメージのファイル名、 時間セット、更新頻度、そして各イメージの描画についての情報を指定する必要があります。

描画イメージは「hour」で指定される時間セットを使って切り替わります。「images」で指定した ファイル名は、クライアントのシステム時刻とマッチする時間セットの順番によって修飾されます。
上の例では、もし、このページにアクセスしたクライアントのシステム時刻が15時だった場合、15時は 「hour」の指定では、先頭から5番目のセットにマッチするので、イメージファイルとして、
「oyama5.gif、kumo_l5.gif、 kumo_s5.gif、 front5.gif、 frontd5.gif、 anime5.gif」が対象と判断 されます。
もし、クライアントの時刻がどの時間セットにもマッチしないときは、ファイル名に0が付加されます。 また、「hour」パラメーターそのものが指定されていない時は、ファイル名がそのまま使用されます。

これら時間セットの組み合わせと、各イメージの描画情報を細かく指定して、時間に合わせて絵が切り 替わるイメージを表示することができます

時間帯によって変わるすべてのイメージを見たい方は、こちらのページ へどうぞ。ただし、サーバーが混んでいるときは、かなり待たされるか、エラーが出るかもしれません。

パラメーターの説明

images_dir	イメージの置き場所となるディレクトリを指定します。末尾に/が付いていない場合は付加されます
images_suffix	イメージファイルの拡張子を指定します。通常は「GIF」でしょう。 ファイル名に拡張子を付けていない場合は省略してもかまいませんが、付けておくべきです。 時間によるセットの切り替えが設定されている場合には、イメージファイル名にセット番号 を加えて、ピリオドと、ここで設定した拡張子を連結したものが対象イメージとして読み込 まれることになります
hour	イメージを切り替える基準になる時間セットの間隔を設定します たとえば、10時から12時を1セットとするのであれば「10-12」と指定します 時間セットを複数指定する場合はスペースで区切って続けてください。このオプションで 指定した順番で1番からセット番号がふられます。ですから「10-12 13-23」 と設定した場合は10時から12時が1番セット、13時から23時のときには2番セット を使用する（1、2をファイル名の末尾に付加する）という設定になります。 もしここで設定した値の範囲以外の時間の時は、セット無しとして0がファイル名に 付加されます。このパラメーターの指定自体が存在しない場合は、ファイル名が そのまま使われます。 時間判定はあくまでも時間値が使われます。 「11-12」という設定は11時00分から12時59分までマッチする範囲になります。
images	イメージファイル名をスペースで区切って指定します イメージファイルは、同じイメージを複数回指定する手間を省くために、実際の 描画指定時には、ここで指定した順番の番号を使って指定します
sleep	イメージを書き換えるタイミングを指定します ここの値がそのままSleep値として再描画の間隔になります。 JITなどが使えるのであれば、10ぐらいに指定しても動作しますが、せいぜい100程度まで で辞めておいたほうが良いでしょう。上の例では800にしています。あまり早くしても逆 にギクシャクしますから注意してください
draw_no	実際に描画するイメージの番号を指定します imagesに設定したファイル名の順番の番号（0から）を使って、後ろに描画されるものから指定して いきます。同じものを複数描画する場合も、番号で指定するため、煩雑にならずに済みます（って いうか、アプレットでいちいち同じファイル名か確認するのが面倒だから手を抜いてるだけです^_^;）
draw_x	描画を開始するX座標を指定します draw_nowで指定した各画像のイメージを最初に描画するX座標を、draw_nowと同じ順番で指定します。
draw_y	描画を開始するY座標を指定します draw_nowで指定した各画像のイメージを最初に描画するY座標を、draw_nowと同じ順番で指定します。
draw_z	イメージの移動方向を指定します draw_noに指定した各画像のイメージの移動方向を数字（1:上、2:下、3:左、4:右）で指定します。 動かない場合は0を指定してください。
draw_v	移動量をピクセル数で指定します draw_noに指定した各画像のイメージの移動量をピクセル数で指定します。動かないイメージには0を 指定してください。
draw_sw	差し替えるイメージを指定します。 draw_tiのタイミングでイメージを違うイメージに差し替える場合は、ここでイメージ番号を指定し ます。
draw_ti	差し替えイメージの描画頻度を指定します。 draw_swで指定したイメージを描画する、全体の描画回数に対する頻度を指定します。もし、全体が 10回描画される度に差し替えイメージを描画したいのであれば9を指定します。常に差し替えて点滅 させるのであれば1を指定してください。

できる動作の例

-------------- ここから --------------
<APPLET CODEBASE="http://fronttom.freeservers.com/java/" CODE="ScrollPlate.class" WIDTH=490 HEIGHT=40 ALT="from JAPAN HOKKAIDO SAPPORO">
<PARAM NAME="images_dir" VALUE="./grid">
<PARAM NAME="images_suffix" VALUE="gif">
<PARAM NAME="images"	 VALUE="grid up down left right ten metsu">
<PARAM NAME="sleep"   VALUE="100">
<PARAM NAME="draw_no" VALUE="0   1   2   3   4   5">
<PARAM NAME="draw_x"  VALUE="0   20  130 130 20  75">
<PARAM NAME="draw_y"  VALUE="0   20  130 20  130 75">
<PARAM NAME="draw_z"  VALUE="0   1   2   3   4   0">
<PARAM NAME="draw_v"  VALUE="0   1   1   1   1   0">
<PARAM NAME="draw_sw" VALUE="0   0   0   0   0   6">
<PARAM NAME="draw_ti" VALUE="0   0   0   0   0   1">
</APPLET>
-------------- ここまで --------------

注意とお願い