最終更新日：2006.05.01
webmaster@kototone.jp
こととねは、クリエイティブ・コモンズ・ライセンス（表示 - 継承 2.1 日本）の下でライセンスされています。
時間割表示スクリプトの使い方について説明します。
時間割表示スクリプトはJavaScriptによって作成されています。そのため、CGIの使えないサーバをご利用の場合でも使用することができます。
時間割表示スクリプトには、簡単に時間割テーブルを出力することのできる関数がひとつと、時間割テーブル全般を扱うクラスがひとつ用意されています。時間割テーブルを扱うクラスには、フィールドがいくつか、それとメソッドがいくつか用意されています。
出力されるHTMLにはスタイルに関する指定がなされていません。そのかわり、CSSを用いて見た目を制御できるよう、クラスがいくつか指定されています。
時間割表示スクリプトは外部JavaScriptファイルとして提供されます。時間割を表示させたいページに、外部JavaScriptファイルを読み込むための行を追加します。
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script src="./classtt.js" type="text/javascript" charset="Shift_JIS"></script>
<link rel="stylesheet" href="./classtt.css" type="text/css">強調されている部分で、ファイルへのパスを指定します。ファイルの位置によってはパスを書き換える必要があるかもしれません。よくわからない場合には、htmlファイルと関係ファイルを同じフォルダ（ディレクトリ）に入れておくとよいでしょう。
なお、classtt.jsがJavaScriptのファイル、classtt.cssが時間割テーブルのスタイルを指定しているCSSファイルです。
簡単に時間割を表示したい場合はprint_tt()関数を使うとよいでしょう。この関数を使うことで、任意の列数、任意の行数の時間割テーブルを表示させることができます。また、必要があれば学校名の指定も可能です。
<script type="text/javascript">
print_tt();
</script>この関数を使用すると、使ったその箇所に時間割テーブルが生成、表示されます。引数を指定しない場合は、7列7行のテーブルが作成され、学校名はさくらの高校と表示されます。
テーブルの列数、行数を指定することもできます。例えば5列3行のテーブルを表示させたい場合には、次のように記述します。
<script type="text/javascript">
print_tt(3, 5);
</script>次の授業をテーブル中央に表示させるため、出力される列行数は常に奇数になるよう調整されます。また、列の最大数は7であり、それ以上の数値が指定されたとしても7列までしか表示されません。
学校名を指定したい場合は、列数、行数を指定したうえで、学校名を指定します。
<script type="text/javascript">
print_tt(7, 7, 'かがやき高校');
</script>学校名を指定する場合には、列数、行数を省略できません。ご注意ください。
授業時間割を表示するためのクラスです。先ほど説明したprint_tt()関数は、その内部でClassTimeTableクラスを使用しています。
print_tt()関数で呼び出される時間割ではなく、自分の好みにそうよう表示を変更したいという場合には、ClassTimeTableクラスを使用します。
クラスを使ってテーブルを表示する場合、どのようにすればよいかを説明します。サンプルスクリプトとして、print_tt()関数がどのようにクラスを使用しているかを見てみましょう。
function print_tt(colNumber, rowNumber, schoolName) {
//インスタンスの生成。
//print_tt()関数の引数colNumberとrowNumberでテーブルの列数、行数が設定されていることに気をつけてください。
var ctt = new ClassTimeTable(colNumber, rowNumber);
//print_tt()関数の引数schoolNameで学校名が指定されていたら、学校名を設定する。
if (schoolName != undefined) {
ctt.setSchoolname(schoolName);
}
//変数nowDateに現在の年月日を、nowTimeに現在の時刻を代入。
//数値オブジェクトを文字列に変換するためにtoString()メソッドが使われていることに注意してください。
var nowDate = ctt.cYear.toString() + '年' + ctt.cMonth.toString() + '月' + ctt.cDate.toString() + '日' + ctt.daysArray[ctt.cDay] + '曜日';
var nowTime = ctt.cHours.toString() + '時' + ctt.cMinutes.toString() + '分' + ctt.cSeconds.toString() + '秒';
//getNextclass()で取得した次の授業名を変数nextClassに代入。
var nextClass = ctt.getNextclass();
//getCurrentclass()で取得した現在の授業名を変数currentClassに代入。
var currentClass = ctt.getCurrentclass()
//変数announceTimeに時刻を案内する文字列を代入。
var announceTime = '現在時刻は<strong class="time_announce">' + nowDate + ' ' + nowTime + '</strong>。';
//inClass()メソッドで授業の継続終了を判定する。
//授業中であった場合には変数announceTimeに開講中の授業を案内する文字列を加える。
if (ctt.inClass()) {
announceTime += '<strong class="class_announce">' + currentClass + '</strong>が開講中。';
}
//変数announceTimeに次の授業を案内する文字列を代入。
var announceClass = '次の授業は<strong class="class_announce">' + nextClass + '</strong>です。';
//printTable()メソッドで時間割テーブルを出力する。
ctt.printTable();
//printP()メソッドで各種案内文を出力する。
//出力されるp要素にclass属性が設定されていることに注意してください。
ctt.printP(announceClass, 'tmo_announce_class');
ctt.printP(announceTime, 'tmo_announce_time');
} また、このサイトのトップページで使われていたいるスクリプトも参照して見てください。
var ctt = new ClassTimeTable(1, 3); //1列3行のテーブルを作成します。
var currentdate = ctt.cYear.toString() + '/' + ctt.cMonth.toString() + '/' + ctt.cDate.toString() + '（' + ctt.daysArray[ctt.cDay] + '）';
var currenttime = '';
if (ctt.cHours.toString().length == 1) { //時間が一桁の場合、頭に0をつけて二桁にします。以下分秒においても同様です。
currenttime = '0' + ctt.cHours.toString();
} else {
currenttime = ctt.cHours.toString();
}
if (ctt.cMinutes.toString().length ==1) {
currenttime += ':0' + ctt.cMinutes.toString();
} else {
currenttime += ':' + ctt.cMinutes.toString();
}
if (ctt.cSeconds.toString().length ==1) {
currenttime += ':0' + ctt.cSeconds.toString();
} else {
currenttime += ':' + ctt.cSeconds.toString();
}
ctt.setTablename('時間割'); //テーブル名を設定しています
ctt.printTable();
ctt.printP('次の授業：' + ctt.getNextclass(), 'tmo_nextclass');
if (ctt.inClass()) {
ctt.printP('開講中：' + ctt.getCurrentclass(), 'tmo_currentclass');
}
ctt.printP(currentdate, 'tmo_date');
ctt.printP(currenttime, 'tmo_time');このスクリプトで得られる時間割テーブルは次のようなものです。
print_tt()関数およびClassTimeTableクラスによって出力されるHTMLには、スタイルに関する設定がいっさいなされていません。そのかわり、CSSを用いてスタイルの変更ができるよう、主要な要素に対してclass属性の指定がなされています。
print_tt()関数が出力するHTMLを模式的に示します。
| 曜日 | 曜日 | 曜日 | 曜日 | 曜日 | |
|---|---|---|---|---|---|
| 23:45 | 科目名 | 科目名 | 科目名 | 科目名 | 科目名 |
| 00:00 | 科目名 | 科目名 | 科目名 | 科目名 | 科目名 |
| 00:15 | 科目名 | 科目名 | 科目名 | 科目名 | 科目名 |
| 00:30 | 科目名 | 科目名 | 科目名 | 科目名 | 科目名 |
| 00:00 | 科目名 | 科目名 | 科目名 | 科目名 | 科目名 |
次の授業は科目名です。
現在時刻はyear年month月date日day曜日 hours時minutes分seconds秒。科目名が開講中。
<table class="tmo_ctt">
<caption>テーブル名</caption>
<col class="clock_time">
<col class="days">
<col class="days">
<col class="today">
<col class="days">
<col class="days">
<thead>
<tr>
<td> </td>
<th>曜日</th>
<th>曜日</th>
<th>曜日</th>
<th>曜日</th>
<th>曜日</th>
</tr>
</thead>
<tbody class="past">
<tr>
<th>23:45</th>
<td>科目名</td>
<td>科目名</td>
<td>科目名</td>
<td>科目名</td>
<td>科目名</td>
</tr>
</tbody>
<tbody class="present">
<tr>
<th>00:00</th>
<td>科目名</td>
<td>科目名</td>
<td>科目名</td>
<td>科目名</td>
<td>科目名</td>
</tr>
<tr class="nexttime">
<th>00:15</th>
<td>科目名</td>
<td>科目名</td>
<td class="next">科目名</td>
<td>科目名</td>
<td>科目名</td>
</tr>
<tr>
<th>00:30</th>
<td>科目名</td>
<td>科目名</td>
<td>科目名</td>
<td>科目名</td>
<td>科目名</td>
</tr>
</tbody>
<tbody class="future">
<tr>
<th>00:00</th>
<td>科目名</td>
<td>科目名</td>
<td>科目名</td>
<td>科目名</td>
<td>科目名</td>
</tr>
</tbody>
</table>
<p class="tmo_announce_class">次の授業は<strong class="class_announce">科目名</strong>です。</p>
<p class="tmo_announce_time">現在時刻は<strong class="time_announce">year年month月date日day曜日 hours時minutes分seconds秒</strong>。<strong class="class_announce">科目名</strong>が開講中。</p>上述のtable要素とその子要素の説明に同様です。
print_tt()関数およびClassTimeTableクラスによって出力されるHTMLには、スタイルに関する設定がいっさいなされていませんでした。基本的な見た目はclasstt.jsと一緒に配布されているclasstt.cssによって指定されています。スタイルを変更したいという場合にはCSSを書き換えることで対処します。
table.tmo_ctt {border: solid gray 2px; border-collapse: collapse; width: auto; margin: 0;}
table.tmo_ctt th {border: solid gray 1px; background: #FFFFCC; padding: 4px; width: auto;}
table.tmo_ctt td {border: solid gray 1px; padding: 4px; width: auto;}
table.tmo_ctt tbody.past {background: #EEEEEE;}
table.tmo_ctt tbody.future {background: #EEEEEE;}
table.tmo_ctt tr.nexttime {background: #FFEEFF;}
table.tmo_ctt col.today {background: #FFEEFF;}
table.tmo_ctt td.next {background: #FFCCFF;}
p.tmo_announce_class strong {color: black;}
p.tmo_announce_time strong {color: black;}CSSでの指定はごく基本的な範囲にとどめています。そのほとんどはtable.tmo_cttに対する指定であり、テーブルの枠および罫線、背景色等に対する設定が中心です。スタイルの設定されている要素については、上記の出力されるHTMLをご参照ください。
ここではCSSに関する説明はしませんが、CSSを解説しているサイト等を参考に、いろいろ試してみられることをお勧めいたします。