ドラクエ時計

概　　　要

Webページにドラクエの文字の時計を表示する Javaアプレットです。
デジタル表示とアナログ表示の両方に対応しており、HTMLタグからパラメータを指定することによって一つのアプレットで様々な表示が可能です。
Javaアプレットは CGI などと違いサーバには依存しないため、ホームページを持っている方ならどなたでも設置できます。

サ　ン　プ　ル

例えばこのような時計を表示することができます。（クリックすると実際に動く時計をご覧になれます）






秒針：sweep motion 長針、短針：sweep motion	秒針：step motion 長針、短針：sweep motion	秒針：step motion 長針、短針：step motion

設　置　方　法

まず、プログラムをダウンロードしてください。

DQClock.zip （2005/06/11）

ダウンロードしたらファイルを解凍してください。
解凍すると８つのクラスファイルが作成されます。
ファイル名が DQClock から始まる５つのファイルがドラクエ時計本体です。
TimeZoneChanger から始まるものはドラクエ時計のタイムゾーンを変えるためのコンボボックスを表示するためのアプレットです（後述）。
タイムゾーンを変える必要がない場合は TimeZoneChanger から始まる３つのファイルは削除しても差し支えありません。
あとはクラスファイルをお使いのホームページスペースにアップロードして、時計を表示したいページに <applet> タグを挿入するだけです。
クラスファイルは必ず同じディレクトリにアップロードしてください。
<applet> タグとパラメータの詳細は次の項で説明します。

タグ　および　パラメータ　の　説明

<applet> タグは一般に次の形式で表されます。

<applet code="codeName" codebase="baseURL" alt="altText"

　　　　　width="appletWidth" height="appletHeight">

　　<param name="paramName1" value="paramValue1">

　　<param name="paramName2" value="paramValue2">

　　<param name="paramName3" value="paramValue3">



　　　　　　　　　　　　　　・

　　　　　　　　　　　　　　・

　　　　　　　　　　　　　　・



　　<param name="paramNameN" value="paramValueN">

</applet>

<applet> タグ

code にはアプレットの名前を指定します。
codebase にはHTML文書から見たアプレットの相対URLを指定します。（省略可）
alt にはアプレットが表示できないブラウザのための代替テキストを記述します。（省略可）
width と height にはアプレットの幅と高さを指定します。

<param> タグ

name にはパラメータの名前の指定します。
value にはパラメータの値の指定します。
<param> タグは必ず <applet> ～ </applet> の間に記述します。

では、実際のパラメータの指定方法を説明していきます。

<applet> タグの説明からしていきます。
基本形は、

<applet code="DQClock" codebase="./" alt="ドラクエ時計"

　　　　　width="198" height="62">

</applet>

これです。

アプレットを表示するHTMLファイルが存在するディレクトリとアプレットが存在するディレクトリが同じ場合は codebase は省略できます。
そうでない場合は codebase によってアプレットの位置を指定する必要があります。
例えば、ページのアドレスが http://www.abc.com/def/clock.html で、アプレットが http://www.abc.com/def/applet/ に存在するとしたら、codebase="applet/" とします。

幅と高さは表示したい時計の種類によって３通りあります。
デジタル時計の場合は width="198" height="62"、
アナログ時計で年・月・日付・曜日のどれかを表示する場合は width="190" height="230"、
アナログ時計で年・月・日付・曜日すべてを表示しない場合は width="190" height="190" としてください。

次に <param> タグの説明です。
<param> タグはすべて省略可能で、省略した属性はデフォルトの値になります。
指定したい属性だけを <param> タグで指定すればＯＫです。

・デジタル／アナログ属性

<param name="digitalOrAnalog" value="DorA">

value="digital" または value="d" とするとデジタル時計に、
value="analog" または value="a" とするとアナログ時計になります。
デジタルとアナログでは時計の大きさが違うので、<applet> タグによる大きさの指定も変えてください。
デフォルトの値はデジタルです。

・色属性

<param name="foregroundColor" value="color">


<param name="backgroundColor" value="color">

<param name="backgroundColor1" value="color">

<param name="backgroundColor2" value="color">


<param name="borderColor" value="color">

<param name="borderColor1" value="color">

<param name="borderColor2" value="color">


<param name="yearColor" value="color">

<param name="yearColor1" value="color">

<param name="yearColor2" value="color">

<param name="yearColor3" value="color">

<param name="yearColor4" value="color">

<param name="yearColor5" value="color">

<param name="yearColor6" value="color">


<param name="monthColor" value="color">

<param name="monthColor1" value="color">

<param name="monthColor2" value="color">

<param name="monthColor3" value="color">

<param name="monthColor4" value="color">


<param name="dateColor" value="color">

<param name="dateColor1" value="color">

<param name="dateColor2" value="color">

<param name="dateColor3" value="color">

<param name="dateColor4" value="color">


<param name="dayOfWeekColor" value="color">

<param name="dayOfWeekColor1" value="color">

<param name="dayOfWeekColor2" value="color">

<param name="dayOfWeekColor3" value="color">

<param name="dayOfWeekColor4" value="color">

<param name="dayOfWeekColor5" value="color">


<param name="AMColor" value="color">

<param name="AMColor1" value="color">

<param name="AMColor2" value="color">


<param name="PMColor" value="color">

<param name="PMColor1" value="color">

<param name="PMColor2" value="color">


<param name="fullColor" value="color">

<param name="fullColor1" value="color">

<param name="fullColor2" value="color">

<param name="fullColor3" value="color">


<param name="halfColor" value="color">

<param name="halfColor1" value="color">

<param name="halfColor2" value="color">

<param name="halfColor3" value="color">


<param name="hourColor" value="color">

<param name="hourColor1" value="color">

<param name="hourColor2" value="color">


<param name="minuteColor" value="color">

<param name="minuteColor1" value="color">

<param name="minuteColor2" value="color">


<param name="secondColor" value="color">

<param name="secondColor1" value="color">

<param name="secondColor2" value="color">


<param name="separatorColor" value="color">

<param name="separatorColor1" value="color">

<param name="separatorColor2" value="color">


<param name="markColor" value="color">

<param name="markColor1" value="color">

<param name="markColor2" value="color">

<param name="markColor3" value="color">

<param name="markColor4" value="color">

<param name="markColor5" value="color">


<param name="dialColor" value="color">

<param name="dialColor1" value="color">

<param name="dialColor2" value="color">

<param name="dialColor3" value="color">

<param name="dialColor4" value="color">

<param name="dialColor5" value="color">

<param name="dialColor6" value="color">

<param name="dialColor7" value="color">

<param name="dialColor8" value="color">

<param name="dialColor9" value="color">

<param name="dialColor10" value="color">

<param name="dialColor11" value="color">

<param name="dialColor12" value="color">

foregroundColor は文字、数字、枠（、アナログ時計の針）を描画する色です。
他の属性で指定されない文字等はすべてこの foregroundColor で描画されます。

backgroundColor は全体の、
backgroundColor1 は枠の中の（アナログのときは上の枠の中の）、
backgroundColor2 はアナログ時計の下の枠の中の、背景色です。

foregroundColor、backgroundColor、backgroundColor1、backgroundColor2 をすべて省略したときのデフォルトの値は描画色が白で背景色が黒です。

borderColor はすべての枠の、
borderColor1 は枠の（アナログのときは上の枠の）、
borderColor2 はアナログ時計の下の枠の、色です。

yearColor は年を表すすべての文字の、
yearColor1 は年を表す文字の１文字目の、
yearColor2 は年を表す文字の２文字目の、
yearColor3 は年を表す文字の３文字目の、
yearColor4 は年を表す文字の４文字目の、
yearColor5 は年を表す文字の５文字目の、
yearColor6 は年を表す文字の６文字目の、色です。

monthColor は月を表すすべての文字の、
monthColor1 は月を表す文字の１文字目の、
monthColor2 は月を表す文字の２文字目の、
monthColor3 は月を表す文字の３文字目の、
monthColor4 は月を表す文字の４文字目の、色です。

dateColor は日付を表すすべての文字の、
dateColor1 は日付を表す文字の１文字目の、
dateColor2 は日付を表す文字の２文字目の、
dateColor3 は日付を表す文字の３文字目の、
dateColor4 は日付を表す文字の４文字目の、色です。

dayOfWeekColor は曜日を表すすべての文字の、
dayOfWeekColor1 は曜日を表す文字の１文字目の、
dayOfWeekColor2 は曜日を表す文字の２文字目の、
dayOfWeekColor3 は曜日を表す文字の３文字目の、
dayOfWeekColor4 は曜日を表す文字の４文字目の、
dayOfWeekColor5 は曜日を表す文字の５文字目の、色です。

AMColor は AM を表すすべての文字の、
AMColor1 は AM を表す文字の１文字目の、
AMColor2 は AM を表す文字の２文字目の、色です。

PMColor は PM を表すすべての文字の、
PMColor1 は PM を表す文字の１文字目の、
PMColor2 は PM を表す文字の２文字目の、色です。

fullColor は 24H を表すすべての文字の、
fullColor1 は 24H を表す文字の１文字目の、
fullColor2 は 24H を表す文字の２文字目の、
fullColor3 は 24H を表す文字の３文字目の、色です。
アナログ時計では関係ありません。

halfColor は 12H を表すすべての文字の、
halfColor1 は 12H を表す文字の１文字目の、
halfColor2 は 12H を表す文字の２文字目の、
halfColor3 は 12H を表す文字の３文字目の、色です。
アナログ時計では関係ありません。

hourColor は時間を表すすべての文字の（アナログのときは短針の）、
hourColor1 は時間を表す文字の１文字目の（アナログのときは短針の）、
hourColor2 は時間を表す文字の２文字目の、色です。

minuteColor は分を表すすべての文字の（アナログのときは長針の）、
minuteColor1 は分を表す文字の１文字目の（アナログのときは長針の）、
minuteColor2 は分を表す文字の２文字目の、色です。

secondColor は秒を表すすべての文字の（アナログのときは秒針の）、
secondColor1 は秒を表す文字の１文字目の（アナログのときは秒針の）、
secondColor2 は秒を表す文字の２文字目の、色です。

separatorColor は時間と分および分と秒を区切る「：」の、
separatorColor1 は時間と分を区切る「：」の、
separatorColor2 は分と秒を区切る「：」の、色です。
アナログ時計では関係ありません。

markColor は太陽・星・月・水・命のマークの、
markColor1 は太陽のマークの、
markColor2 は星のマークの、
markColor3 は月のマークの、
markColor4 は水のマークの、
markColor5 は命のマークの、色です。
アナログ時計では関係ありません。

dialColor は文字盤のすべての数字の、
dialColor1 は文字盤の１の字の、
dialColor2 は文字盤の２の字の、
dialColor3 は文字盤の３の字の、
dialColor4 は文字盤の４の字の、
dialColor5 は文字盤の５の字の、
dialColor6 は文字盤の６の字の、
dialColor7 は文字盤の７の字の、
dialColor8 は文字盤の８の字の、
dialColor9 は文字盤の９の字の、
dialColor10 は文字盤の１０の字の、
dialColor11 は文字盤の１１の字の、
dialColor12 は文字盤の１２の字の、色です
デジタル時計では関係ありません。

色の指定は色の名前か１６進数で行います。
色の名前としては、black、blue、cyan、darkGray、gray、green、lightGray、magenta、orange、pink、red、white、yellow を使うことができます。
１６進数で色の指定をする場合は、value="#FFFFFF" のように指定してください。

・クリックによる停止、再開属性

<param name="stopByClick" value="YorN">

value="yes" または value="y" または value="true" または value="t" とすると、アプレットをクリックしたときに時計が止まり、止まっている状態でクリックするとまた動き出すようになります。
時計が動いているということは常にスレッドが動いているということなので、この機能を使えば必要のないときには時計を止めておくことができます。
value="no" または value="n" または value="false" または value="f" とすると、クリックしても時計は止まりません。
デフォルトの値は value="yes" の状態です。

・２４時間／１２時間表示属性

<param name="fullOrHalf" value="ForH">

value="full" または value="f" とすると、時間を２４時間制で表示します。
value="half" または value="h" とすると、時間を１２時間制で表示します。
アナログ時計では関係ありません。
デフォルトの値は２４時間表示です。

・表示／非表示属性

<param name="showYear" value="YorN">

<param name="showMonth" value="YorN">

<param name="showDate" value="YorN">

<param name="showDayOfWeek" value="YorN">

<param name="showAMPM" value="YorN">

<param name="showFullHalf" value="YorN">

<param name="showSecond" value="YorN">

showYear は年を、
showMonth は月を、
showDate は日付を、
showDayOfWeek は曜日を、
showAMPM は AM/PM を、
showFullHalf は 24H/12H を、
showSecond は秒を表す文字を（アナログのときは秒針を）、表示するかどうかを指定します。

value="yes" または value="y" または value="true" または value="t" とすると、表示されます。
value="no" または value="n" または value="false" または value="f" とすると、表示されません。

showYear、showMonth、showDate、showDayOfWeek をすべてを非表示にすると、
デジタル時計では太陽・星・月・水・命のマークが時間表示を囲むように表示され、
アナログ時計ではアプレットの大きさが変わります。
アナログの場合は <applet> タグによる大きさの指定も変えてください。

デフォルトの値は value="yes" の状態です。

・針の動作属性

<param name="motionTypeSecond" value="type">

<param name="motionTypeMinute" value="type">

motionTypeSecond は秒針の、
motionTypeMinute は長針と短針の、動作を指定します。

value="sweep" とすると、スウィープモーションになります。
value="step" とすると、ステップモーションになります。
スウィープモーションというのは、針が止まることなく常に動き続ける動き方のことを言います。
ステップモーションというのは、カチッカチッと秒や分単位で動く動き方のことを言います。
このアプレットのステップモーションでは、秒針は１秒おきに、長針と短針は１分おきに動きます。

デジタル時計では関係ありません。
デフォルトの値はスウィープモーションです。

タイムゾーンの変更

ドラクエ時計はデフォルトではアプレットが動作しているコンピュータの時間を表示しているだけです。
この度、タイムゾーンを変えられるように仕様を変更しました。

ドラクエ時計を見る人がタイムゾーンを選択できるようにする方法

DQClock.zip に同梱してある TimeZoneChanger を使います。
TimeZoneChanger は DQClock と同じページに設置してください。
例えば、

<table border="0" cellspacing="0" cellpadding="0">

　　<tr><td>

　　　　<applet code="DQClock" codebase="./" alt="ドラクエ時計"

　　　　　　　　　width="198" height="62">

　　　　</applet>

　　</td></tr>

　　<tr><td>

　　　　<applet code="TimeZoneChanger" codebase="./" alt="タイムゾーン変更"

　　　　　　　　　width="196" height="26">

　　　　</applet>

　　</td></tr>

</table>

とすると、

このようにコンボボックスが表示されます。

TimeZoneChanger には以下のオプションがあります。
TimeZoneChanger の <applet> ～ </applet> の中に記述してください。

・タイムゾーン名称変更

<param name="(timeZoneID)" value="timeZoneName">

<param name="showAll" value="YorN">

デフォルトではコンボボックスに表示される名前はタイムゾーンＩＤとなっています。
コンボボックスに表示される名前を変えたいときは、name にタイムゾーンＩＤを、value に表示したい名前を記述します。
また、showAll はすべてのタイムゾーンを表示するかどうかを指定します。

サンプルを作りました。
これをそのまま使うか、必要なところだけを抜き出して使うと簡単でいいと思います。
名前は私が付けましたので気に入らないところは直して使ってください。

ドラクエ時計をタイムゾーンを指定して設置する方法

DQClock に

<param name="timeZone" value="(timeZoneID)">

を追加するだけです。
TimeZoneChanger は必要ありません。
タイムゾーンＩＤは上記のサンプルを参考にしてください。