StaffRoll Applet

ver.1.0

StaffRoll について

StaffRoll は、映画のエンディングのスタッフロールのように、 テキストをスクロール表示させることのできるアプレットです。

文字のスタイルや背景画像など様々な設定が可能です。 また、テキストにリンクを張ることもできます。

なお、このアプレットは JDK1.1 以上の実行環境が必要です。 Windows 用の比較的新しいブラウザは問題ありませんが、 古いバージョンのブラウザや Mac 版では表示できない可能性があります。

StaffRoll の使い方

  1. クラスファイル ( StaffRoll.class と RollText.class ) を、 HTMLファイルと同じ場所（ディレクトリ）に置きます。
    もし、背景画像を表示させたい場合は、GIF または JPEG の画像ファイルも HTMLファイルと同じ場所（ディレクトリ）に置きます。

  2. HTMLファイルには、例えば次のように記述します。 これは、上のサンプルの設定内容です。
    ちょっと長くなります。

    <applet code="StaffRoll.class" width=288 height=206>
    <param name="bgImage" value="PHOT078.JPG">
    <param name="relief" value="sunken">
    <param name="borderColor" value="E8E8E8">
    <param name="border" value="2">
    <param name="text1" value="StaffRollの説明|">
    <param name="align1" value="center">
    <param name="fsize1" value="26">
    <param name="color1" value="FFA080">
    <param name="shadow1" value="000000">
    <param name="text2" value="StaffRoll は、映画のエンディングのスタッフロールのように、テキストをスクロール表示させることのできるアプレットです。|">
    <param name="text3" value="左寄せ">
    <param name="align3" value="left">
    <param name="text4" value="センタリング">
    <param name="align4" value="center">
    <param name="text5" value="右寄せ">
    <param name="align5" value="right">
    <param name="text6" value="|なども自由に指定できます。">
    <param name="text7" value="|長ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーいテキストだって折り返して表示してくれます。">
    <param name="align7" value="wrap">
    <param name="text8" value="|大きいフォントや">
    <param name="fsize8" value="30">
    <param name="text9" value="|小さいフォント">
    <param name="fsize9" value="8">
    <param name="text10" value="|Serif 明朝">
    <param name="fname10" value="Serif">
    <param name="fsize10" value="20">
    <param name="text11" value="SansSerif ゴシック">
    <param name="fname11" value="SansSerif">
    <param name="fsize11" value="20">
    <param name="text12" value="Monospaced 等幅">
    <param name="fname12" value="Monospaced">
    <param name="fsize12" value="20">
    <param name="text13" value="PLAIN プレイン">
    <param name="fstyle13" value="p">
    <param name="fsize13" value="20">
    <param name="text14" value="BOLD ボールド">
    <param name="fstyle14" value="b">
    <param name="fsize14" value="20">
    <param name="text15" value="ITALIC イタリック">
    <param name="fstyle15" value="i">
    <param name="fsize15" value="20">
    <param name="text16" value="|のように色々なスタイルのフォントを指定することも可能です。|">
    <param name="text17" value="色も色々指定できます。">
    <param name="color17" value="FF0000">
    <param name="text18" value="色も色々指定できます。">
    <param name="color18" value="00FF00">
    <param name="text19" value="色も色々指定できます。">
    <param name="color19" value="0000FF">
    <param name="text20" value="|こんな感じで影を付けて表示することもできます。">
    <param name="shadow20" value="000000">
    <param name="text21" value="|影の色を変えることもできます。">
    <param name="shadow21" value="FF0000">
    <param name="text22" value="|テキストにリンク機能を持たせることだってできてしまいます。例えば、以下のテキストをクリックすると、そのホームページへ飛んでいきます。|">
    <param name="text23" value="Nakagawa Masami Home Page with Java|">
    <param name="url23" value="http://www.yo.rim.or.jp/~nakagawa/">
    <param name="color23" value="FFFF80">
    <param name="text24" value="背景画像を表示させたり、表示するテキストを別ファイルから読み込んだりすることも可能です。">
    <param name="text25" value="|StaffRoll は、フリーソフトです。自由にダウンロードしてご利用ください。">
    <param name="color25" value="FF4040">
    <param name="shadow25" value="000000">
    <param name="fstyle25" value="i">
    <param name="align25" value="wrap">
    </applet>

  3. では、上記の設定内容の意味について以下に順を追って解説します。

    <applet code="StaffRoll.class" width=288 height=206>
    クラスファイル名と、表示領域の幅（width) と高さ（height) を指定しています。

    <param name="bgImage" value="PHOT014.JPG">
    背景画像ファイルを設定しています。（ファイル名は、大文字・小文字を区別する必要があります。）
    画像はアプレットの表示領域の大きさに合わせて自動的にリサイズされます。

    ちなみに、背景色を指定する場合は、bgColorというパラメータを使用します。 （パラメータの詳細については、パラメータの説明を参照してください。）

    <param name="relief" value="sunken">
    <param name="borderColor" value="E8E8E8">
    <param name="border" value="2">
    外枠のデザインを設定しています。 （ちょっとかっこつけようとしているだけですので、別に設定しなくても構いません。）
    relief というパラメータに、sunken を指定した場合、沈み込むようなデザインになります。 逆に、raised を指定した場合は、浮き上がるようなデザインになります。 plain を指定すると、平坦になります。
    borderColor は、外枠の色です。StaffRoll では、色の指定は全て6桁の16進数（ＲＧＢ値）を用います。 ここでは、HTMLの背景色に合わせるため、明るい灰色を指定しています。 borderColor を明示的に指定しない場合は、bgColor の値が用いられます。
    border は、外枠の太さ（ピクセル数）です。デフォルトは、1 です。

    <param name="text1" value="StaffRollの説明|">
    1番最初に表示するテキストの内容です。"|"(縦棒）は、改行を意味します。 この場合は、一番最後に改行があるので、空行が挿入されることになります。

    <param name="align1" value="center">
    1番最初に表示するテキストのレイアウトを設定しています。center は、センタリングを意味します。左寄せは、left、右寄せは、right です。
    デフォルトは、wrap です。wrap は、左寄せで表示領域の幅に合わせてテキストを折り返して表示してくれます。

    <param name="fsize1" value="26">
    1番最初に表示するテキストのフォントサイズを指定しています。 フォントサイズのデフォルトは、12 です。

    <param name="color1" value="FFA080">
    1番最初に表示するテキストの文字の色を指定しています。 文字の色のデフォルトは、白(000000)です。

    <param name="shadow1" value="000000">
    1番最初に表示するテキストの影の色を指定しています。 影の色を設定しなければ、影は表示されません。

    <param name="text2" value="StaffRoll は、映画のエンディングのスタッフロールのように、テキストをスクロール表示させることのできるアプレットです。|">
    2番目に表示するテキストの内容を設定しています。 この様に、StaffRoll では、表示するテキスト毎に順番に、 text1, text2, text3, …… というパラメータ名を使用します。 番号が重複してはいけませんが、途中の番号が抜けても構いません。 この番号を、ここでは「テキスト番号」と呼ぶことにします。
    デフォルトでは、最大100まで「テキスト番号」を指定できます。 もし、100を超える場合は、"max" というパラメータで、最大の「テキスト番号」を設定し直す必要があります。

    <param name="text3" value="左寄せ">
    <param name="align3" value="left">
    3番目に表示するテキストの内容とその属性を設定しています。 パラメータ名の最後が数値で終わっている場合、それらは全て「テキスト番号」を意味します。 「テキスト番号」を含むパラメータは、その「テキスト番号」で指定されるテキストの属性を設定しています。 したがって、align3 というパラメータは、text3 で設定されているテキストのレイアウトを設定することになります。
    ここでは、align3 に left を設定しているので、text3 に設定したテキストは、左寄せで表示されることになります。
    wrap と left の違いは、テキストの長さが表示領域を超える場合に、テキストを改行するかしないかの違いです。 wrap は改行しますが、left は改行しません。 したがって、通常は left を設定する必要はないと思います。

    <param name="text4" value="センタリング">
    <param name="align4" value="center">
    4番目に表示するテキストはセンタリングで表示。

    <param name="text5" value="右寄せ">
    <param name="align5" value="right">
    5番目に表示するテキストは右寄せで表示。

    <param name="text6" value="|なども自由に指定できます。">
    <param name="text7" value="|長ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーいテキストも、折り返して表示してくれます。">
    <param name="align7" value="wrap">
    7番目に表示するテキストは折り返して表示。
    前に説明したように、デフォルトで wrap が設定されているので、本当は wrap を明示的に設定する必要はありません。

    <param name="text8" value="|大きいフォントや">
    <param name="fsize8" value="30">
    <param name="text9" value="|小さいフォント">
    <param name="fsize9" value="8">
    フォントの大きさ（ポイントサイズ）は、fsize というパラメータで設定します。

    <param name="text10" value="|Serif 明朝">
    <param name="fname10" value="Serif">
    <param name="fsize10" value="20">
    <param name="text11" value="SansSerif ゴシック">
    <param name="fname11" value="SansSerif">
    <param name="fsize11" value="20">
    <param name="text12" value="Monospaced 等幅">
    <param name="fname12" value="Monospaced">
    <param name="fsize12" value="20">
    フォント名は、fname というパラメータで設定します。 設定可能なフォント名は、"Serif"（明朝）、"SansSerif"（ゴシック）、"Monospaced"（等幅）の3種類です。

    <param name="text13" value="PLAIN プレイン">
    <param name="fstyle13" value="p">
    <param name="fsize13" value="20">
    <param name="text14" value="BOLD ボールド">
    <param name="fstyle14" value="b">
    <param name="fsize14" value="20">
    <param name="text15" value="ITALIC イタリック">
    <param name="fstyle15" value="i">
    <param name="fsize15" value="20">
    フォントのスタイルは、fstyle というパラメータで設定します。 p がプレイン、b がボールド、i がイタリックです。 bi と設定すると、ボールドでイタリックになります。

    <param name="text16" value="|のように色々なスタイルのフォントを指定することも可能です。|">
    <param name="text17" value="色も色々指定できます。">
    <param name="color17" value="FF0000">
    <param name="text18" value="色も色々指定できます。">
    <param name="color18" value="00FF00">
    <param name="text19" value="色も色々指定できます。">
    <param name="color19" value="0000FF">
    文字の色は、color というパラメータで設定します。

    <param name="text20" value="|こんな感じで影を付けて表示することもできます。">
    <param name="shadow20" value="000000">
    <param name="text21" value="|影の色を変えることもできます。">
    <param name="shadow21" value="FF0000">
    テキストに影を付けることもできます。 影の色は、shadow というパラメータで設定します。 shadow を設定しなければ、影は表示されません。

    <param name="text22" value="|テキストにリンク機能を持たせることだってできてしまいます。例えば、以下のテキストをクリックすると、そのホームページへ飛んでいきます。|">
    <param name="text23" value="Nakagawa Masami Home Page with Java|">
    <param name="url23" value="http://www.yo.rim.or.jp/~nakagawa/">
    <param name="color23" value="FFFF80">
    テキストにリンクを張ることもできます。 url というパラメータで、リンク先の URL を設定すれば OK です。
    リンクを設定したテキストにマウスカーソルが重なった場合、文字の色が変化すると同時に、 クリックを容易にするためスクロールが停止します。

    <param name="text24" value="背景画像を表示させたり、表示するテキストを別ファイルから読み込んだりすることも可能です。">
    <param name="text25" value="|StaffRoll は、フリーソフトです。自由にダウンロードしてご利用ください。">
    <param name="color25" value="FF4040">
    <param name="shadow25" value="000000">
    <param name="fstyle25" value="i">
    <param name="align25" value="wrap">
    </applet>
    これで、設定はおしまいです。凝った表現にしようとすると、どうしても設定項目が増えてしまうのでたいへんですが頑張ってみてください。
    特に凝ったことをせず、ただテキストをスクロール表示するだけでしたら、こんなに細かい設定は必要ありませんので、ご安心を。

    また、ファイル名を指定することにより、別に用意したテキストファイルを読み込んで表示させることも可能です。

    別に用意したテキストファイルの内容を表示するサンプル

ダウンロード

下のリンクをクリックすれば、StaffRoll をダウンロードできます。 ZIP形式のアーカイブファイルですので、ZIP形式に対応したアーカイブツール （WinZip など）を利用して展開してください。 中にクラスファイルとサンプルが含まれています。

StaffRoll10.zip

下のリンクをクリックすれば、StaffRoll のソースコードを見ることができます。

StaffRoll.java

パラメータの説明

■ applet タグで設定するパラメータ

名前設定値意味
codeStaffRoll.classクラスファイル名（固定）
width正の整数アプレット表示領域の横幅（ピクセル数）
height正の整数アプレット表示領域の縦幅（ピクセル数）
vspace正の整数アプレット上下の余白（省略可）
hspace正の整数アプレット左右の余白（省略可）

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

「テキスト番号−有」の欄が「○」のパラメータは、パラメータ名(name)の最後に 数値（テキスト番号）を付加することにより、テキスト毎の設定が可能です。
「テキスト番号−無」の欄が「○」のパラメータは、パラメータ名の最後に 数値（テキスト番号）を付加せずに設定可能なことを示しています。 その設定値は、StaffRollとStaffRollで表示されるテキスト全体に影響を与えます。 但し、テキスト番号付きの設定の方が優先されます。

name value 意味 デフォルト テキスト番号
有 無
max 正の整数 「テキスト番号」の最大値 100 × ○
text 文字列 表示させるテキスト なし ○ ×
fname Serif 明朝 SansSerif ○ ○
SansSerif ゴシック
Monospaced 等幅
fsize 正の整数 フォントのポイントサイズ 12 ○ ○
fstyle p プレイン p ○ ○
b ボールド
i イタリック
bi （または ib） ボールド＋イタリック
color 6桁の16進数 文字の色 FFFFFF ○ ○
shadow 6桁の16進数 文字の影の色 000000 ○ ○
bgColor 6桁の16進数 背景色 000000 × ○
borderColor 6桁の16進数 境界線の色 000000 × ○
margin 正の整数 左右の余白（ピクセル数） 20 × ○
border 正の整数 境界線の幅（ピクセル数） 1 × ○
relief none 境界線なし none × ○
sunken 沈み込むようなデザインの境界線
raised 浮き上がるようなデザインの境界線
plain 平坦なデザインの境界線
link 6桁の16進数 マウスカーソルがリンクに重なった時の文字の色 FF00FF ○ ○
alink 6桁の16進数 リンクをクリックした時の文字の色 FF0000 ○ ○
url URL リンク先のURL なし ○ ×
align wrap テキストを左寄せで表示。表示領域の幅で折り返す。 wrap ○ ○
left テキストを左寄せで表示。
center テキストをセンタリングで表示。
right テキストを右寄せで表示。
speed 正の整数 スクロール速度（ピクセル数）。1コマあたりの移動距離。 1 × ○
interval 正の整数（20以上） スクロール速度（ミリ秒）。1コマあたりの表示時間。 20 × ○
file テキストファイル名 テキストを別ファイルから読み込む時に指定する。 なし × ○
bgImage 画像ファイル名（GIF または JPEG） 背景画像のファイル名。 なし × ○
target フレーム名 リンク先のページを表示するフレーム名。HTMLのターゲット機能と同様に、 _blank, _self, _parent, _top などの特殊なフレーム名も使用可能。 なし × ○

nakagawa@yo.rim.or.jp