Circlet Applet

ver.1.0











Circlet について

Circlet は、メッセージや画像を円柱の側面に貼り付けて回転させるような感じでアニメーション表示させるアプレットです。子供の頃に見た回転する盆提灯のイメージがモチーフになっています。

円柱の裏側が透けて見えるので、立体感が増すとともに、使用する画像によってはとても面白い効果を作り出してくれます。

Circlet には、リンク機能も用意されていますので、 HTML を記述するだけでお手軽に視覚的効果の高いリンクボタンを作成することもできます。


Circlet の使い方

メッセージを表示させる場合

  1. クラスファイル(Circlet.class)を、HTMLファイルと同じ場所(ディレクトリ)に置きます。
  2. HTML ファイルには、例えば以下のように記述します。

    <applet code="Circlet.class" width=200 height=40>
    <param name="message" value="Welcome to my Home Page!!">
    </applet>

    これで出来上がりです。
    message というパラメータのところで指定したテキストがメッセージとして表示されます。

    サンプルを見る。

  3. 表示の大きさを変えたければ、width と height の値を変更してください。それぞれ、幅と高さが変化します。

    <applet code="Circlet.class" width=100 height=100>
    <param name="message" value="Welcome to my Home Page!!">
    </applet>

    サンプルを見る。

  4. メッセージの色は color、背景の色は bgColor というパラメータで設定します。それぞれ、6桁の16進数で表される RGB 値です。

    <applet code="Circlet.class" width=200 height=40>
    <param name="message" value="Welcome to my Home Page!!">
    <param name="color" value="8080FF">
    <param name="bgColor" value="800080">
    </applet>

    サンプルを見る。

  5. 背景の色の方が明るくなってしまうと、文字がはっきり見えず、おかしな感じの表示になってしまいます。これは、Circlet のデフォルトの設定では、表の暗い部分が透過して見えるようになっているためです。

    <applet code="Circlet.class" width=100 height=100>
    <param name="message" value="Welcome to my Home Page!!">
    <param name="color" value="A00000">
    <param name="bgColor" value="FFFFFF">
    </applet>

    サンプルを見る。

    その場合は、type というパラメータに 1 を設定して、明るい部分が透過するようにしてください。

    <applet code="Circlet.class" width=100 height=100>
    <param name="message" value="Welcome to my Home Page!!">
    <param name="color" value="A00000">
    <param name="bgColor" value="FFFFFF">
    <param name="type" value="1">
    </applet>

    サンプルを見る。

  6. フォントを変更する場合は、font というパラメータで、フォント名(TimesRoman, Courier, Helvetica)、スタイル(p, b, i, bi)、ポイント・サイズ(100 以下の整数)を指定します。

    スタイルは、p がプレーン、b がボールド(太字)、i がイタリック(斜体)を表します。また、bi と指定すると太字の斜体になります。

    ポイント・サイズは、オリジナルのフォントの大きさが変化するのであり、表示される文字の大きさが変化するのではないということに注意してください。表示される文字の大きさは、表示領域の大きさに合わせて自動的に決定されます。
    ポイント・サイズによって変化するのは、文字の見栄え(ポイント・サイズが大きいほど、境界のギザギザが減って奇麗になる)とスクロールする速度(ポイント・サイズが大きいほどスクロール速度は遅くなる)です。

    フォント名、スタイル、ポイント・サイズは、次のように"|"(縦棒)で区切って設定します。

    <applet code="Circlet.class" width=200 height=40>
    <param name="message" value="Welcome to my Home Page!!">
    <param name="font" value="Helvetica|bi|48">
    </applet>

    サンプルを見る。

  7. スクロール速度を変えたい場合は、speed というパラメータに数値を設定すれば OK です。値が大きいほど速くなります。(負の値を設定すると逆回転になります。)

    <applet code="Circlet.class" width=200 height=40>
    <param name="message" value="Welcome to my Home Page!!">
    <param name="font" value="Helvetica|bi|48">
    <param name="speed" value="4">
    </applet>

    サンプルを見る。

  8. Circlet では、表面の文字をはっきり見せるため、背面の文字の色に背景色(bgColor)を混ぜることによって、少しぼかして見せています。この背景色を混ぜる割合(混合率)も変更することが可能です。混合率は、merge というパラメータで設定します。混合率は、0 〜 100 の間の整数で、値が小さい程、背景色に近づきます(背面の文字が見えにくくなります)。 0 を設定すると完全に背景色となり、背面の文字は消えてしまいます。

    <applet code="Circlet.class" width=200 height=40>
    <param name="message" value="Welcome to my Home Page!!">
    <param name="merge" value="0">
    </applet>

    サンプルを見る。

    逆に、100 を設定すると背面の文字の色は、表面の文字の色と同じになってしまいます。

    <applet code="Circlet.class" width=200 height=40>
    <param name="message" value="Welcome to my Home Page!!">
    <param name="merge" value="100">
    </applet>

    サンプルを見る。

  9. Circlet には、リンクボタンとしての機能も用意されています。リンクしたいページの URL を url というパラメータで指定すれば OK です。 URL は、相対パスで指定することも可能です。(同じディレクトリにあれば、ファイル名だけで構いません。)

    <applet code="Circlet.class" width=200 height=40>
    <param name="message" value="Slashdot News for Nerds. Stuff that Matters. ">
    <param name="url" value="http://slashdot.org/">
    </applet>

    サンプルを見る。

    また、表示させるフレームを指定したい場合は、target というパラメータにそのフレーム名を指定してください。(HTML のフレーム機能と同様に、_top や _blank などの特殊なフレーム名も使用できます。)
    更に、マウスカーソルが重なった時だけ回転させるようにするには、 pause というパラメータに 1 を指定してください。特にひとつのページに複数の Circlet をリンクボタンとして使用する場合には、 pause 機能が不可欠です。(さもないと極端に重くなってしまいます。)
    それから、マウスカーソルが Circlet に重なったときにブラウザのステータスバーにメッセージを表示させることも可能です。その場合は、status というパラメータに、好きなメッセージを指定してください。

    <applet code="Circlet.class" width=80 height=30>
    <param name="message" value="White Page White Page ">
    <param name="color" value="FFFFFF">
    <param name="url" value="white.html">
    <param name="target" value="right">
    <param name="pause" value="1">
    <param name="status" value="Go to White Page">
    </applet>

    サンプルを見る。

  10. もうひとつ、特殊な機能として、メッセージを表示する時刻を指定する機能があります。例えば、朝の8時に、"Good Morning!!"、夜の11時に、"Good Night!!" を表示させるには、次のように設定します。

    <applet code="Circlet.class" width=200 height=40>
    <param name="message" value="Welcome to my Home Page!!">
    <param name="message@8" value="Good Morning!!">
    <param name="message@23" value="Good Night!!">
    </applet>

    つまり、message@ の次に表示させたい時刻を付加すればいいわけです。指定された時刻以外の時間帯は、message で指定されたメッセージが表示されます。

画像を表示させる場合

  1. クラスファイル(Circlet.class)を、HTMLファイルと同じ場所(ディレクトリ)に置きます。
  2. Circletで使用する画像ファイル(GIF または JPEG)を、HTMLファイルと同じ場所(ディレクトリ)に置きます。ここでは、次の画像(tree.jpg)を用いてみます。

  3. HTML ファイルには、例えば次のように記述します。ファイル名の大文字・小文字は区別する必要があるので注意してください。

    <applet code="Circlet.class" width=160 height=200>
    <param name="image" value="tree.jpg">
    </applet>

    サンプルを見る。

    message と image を同時に指定した場合には、 message の方が優先されます。

  4. 基本的な設定に関しては、メッセージを表示する場合と同じです。例えば、type というパラメータに 1 を設定すると、明るい部分が透けて見えるようになります。

    <applet code="Circlet.class" width=160 height=200>
    <param name="image" value="tree.jpg">
    <param name="type" value="1">
    </applet>

    サンプルを見る。

  5. 上のサンプルは、全体に暗くなってしまって、あまり奇麗じゃないですね。これは、背面の画像の色が背景色(デフォルトで黒)と混ざり合って暗くなっているためです。そこで、bgColor で背景色を設定することで明るくしてみましょう。ただ単に明るくするだけでなく、例えば黄色を指定してみます。

    <applet code="Circlet.class" width=160 height=200>
    <param name="image" value="tree.jpg">
    <param name="type" value="1">
    <param name="bgColor" value="FFFF00">
    </applet>

    サンプルを見る。

  6. 次は、青色を指定してみましょう。夜景のような感じになります。
    この様に、設定するパラメータによって、同じ1枚の画像でも様々な雰囲気に作り替えることができます。

    <applet code="Circlet.class" width=160 height=200>
    <param name="image" value="tree.jpg">
    <param name="type" value="1">
    <param name="bgColor" value="FFFF00">
    </applet>

    サンプルを見る。


ダウンロード

以下をクリックすると、Circlet をダウンロードできます。 ZIP形式の圧縮ファイルですので、WinZipなどのツールで展開してからご利用ください。中にクラスファイルとサンプルが含まれています。

Circlet10.zip

以下をクリックすると、ソースコードを見ることができます。

Circlet.java


パラメータの説明

■appletタグで指定するパラメータ
名前 設定値 意味
code Circlet.class クラスファイル名(固定)
width 正の整数 アプレット表示領域の横幅(ピクセル数)
height 正の整数 アプレット表示領域の縦幅(ピクセル数)
vspace 正の整数 アプレット上下の余白(省略可)
hspace 正の整数 アプレット左右の余白(省略可)

■paramタグで指定するパラメータ

name value 意味
image 画像ファイル名 表示する画像ファイル名を指定します。GIF形式またはJPEG形式が使用できます。ファイル名は大文字・小文字を区別する必要があります。
message 文字列 表示するメッセージを指定します。日本語も使用できますが、古いバージョンのブラウザでは表示できないこともあります。
message@0 〜 message@23 文字列 特定の時刻に表示するメッセージを指定します。 message@ の次の数字が時刻を表します。例えば、message@8 というパラメータを設定した場合、朝の8時〜8時59分までの間、そこに指定したメッセージが表示されます。
speed 正の整数( >= 1 ) アニメーションの動作スピードです。値が大きいほどスピードは早くなります。デフォルトは、1 です。
color 6桁の16進数(RGB値) メッセージの色。デフォルトはオレンジ(FF8000)。
bgColor 6桁の16進数(RGB値) 背景色。デフォルトは黒(000000)。
type 0 または 1 0 を指定した場合、表面の暗い部分が透けて見えます。 1 を指定した場合、表面の明るい部分が透けて見えます。(デフォルトは、0。)
merge 0 〜 100 の間の整数 裏側の画像(またはメッセージ)の背景色との混合率を設定します。小さいほど背景色に近づきます。大きいほど実際の画像(またはメッセージ)の色に近づきます。
url URL(またはファイルの相対パス) クリックした時に表示するリンク先のページを指定します。ページが同一ホストにある場合、相対パスでの指定も可能です。
target フレーム名 リンク先のページを表示するフレームを指定します。(HTML のフレーム機能と同様に、_top や _blank などの特殊なフレーム名も使用可能です。)
pause 0 または 1 0 を指定すると、常時回転します。 1 を指定すると、マウスカーソルが重なった時だけ回転します。(デフォルトは、0。)
status 文字列 マウスカーソルが重なった時に、ブラウザのステータスバーに表示する文字列を指定します。
spaces 0 以上の整数 メッセージの最後に付加するスペース(空白)の個数を指定します。(デフォルトは、1。)

NAKAGAWA Masami ( nakagawa@yo.rim.or.jp )