[index] [bottom]

簡易予定表

簡単な紹介

日本の祝日に対応したカレンダーと、予定表です。祝日は、1948年に施行された現行法の内容を元にしています。春分・秋分両日は、算出により求めているので、遠い将来は間違っているかもしれません。

見た目は大したこと有りませんが、これで結構いろいろな機能を使っています。

データはXMLドキュメントとして、サーバに格納されています。

XMLのロード及びセーブは、W3CのDocument Object Model (DOM) Level 3 Load and Save Specificationと言いたいところですが、正しく実装しているWebブラウザが現時点(2005/3)では存在しないので、XMLHTTPと云う機能を利用しています。

元々は、マイクロソフトのMSXMLの機能の一つですが、mozillにも実装されています。HTTPリクエストヘッダを設定できたり、なんと言ってもレスポンスコードを取得できるので、エラー発生時も原因の切り分けが簡単にできます。

同期・非同期どちらも実装されているので、タイムアウトの処理なども、簡単に実現できます。

ロードしたドキュメントからデータを検索する処理は、XPathを使っています。実際には、IEがDOMのLevel2をサポートしていない為の苦肉の策なのですが。

動作する環境

JavaScriptが動作する事が絶対条件です。安全性に関しては、下記の「セキュリティに関して」の項をお読みください。

FireFox 1.0とIE 5.5以上で動作を確認しています。但し、MSXMLはインストールしているアプリケーションによってバージョンが変わってしまうので、本当に私がテストした環境が、標準のものか分かりません。Windows2000+IE5.5SP2で確認しているので、たぶんそれ以上であれば動作すると思うのですが。

IE6は、Windows2000とXPで問題なく動作するはずです。その他のWebブラウザは確認していませんが、まず間違いなく動作しません。MozillaがW3CのDocument Object Model (DOM) Level 3 Load and Save Specificationを実装した段階で、そちらをサポートしようと思っていますので、それまでお待ちください。

操作方法

初期表示字にはカレンダー部にフォーカスがあります。フォーカスの有無は、薄いグリーンの行が有るかないかで表現されます。

カレンダー部にフォーカスがある状態で、上下の矢印キーを押下すると選択している行が変更できます。遅延イベントが有効になっているので、カレンダー部の選択状態と、予定表部の表示がずれることがありますが、一瞬後には同期がとれます。

カレンダー部にフォーカスがある状態で左右の矢印キーを押下すると、カレンダーに表示する月を変更することができます。

カレンダー部にフォーカスがある状態でEnterキーを押下すると、予定表部にフォーカスが移ります。この状態でShift+Enter(Shiftキーを押しながらEnterキーを押す)を押下すると、カレンダー部にフォーカスが戻ります。

予定表部も上下の矢印キーで選択行を変更できます。Enterを押下すると、選択行の予定表示列が入力可能な状態となります。何かを入力した後Shift+Enterを押下すると、入力内容が予定表に反映されて、入力エリアが消えます。

入力途中でEscキーを押下すると、変更が取り消しとなります。

フォーカスがどこか他に移ってしまったような場合は、マウスでカレンダーか予定表をクリックすれば、クリックした方にフォーカスが移ります。Tabキーでも同様にフォーカスを移動することができます。

設置に関して

このアプリケーションを、ローカルで動作させるためには、Webサーバが動作していることが、条件となります。

必要なファイルは、Webブラウザの「名前を付けて保存」で、「ファイルの種類」に「Webページ、完全」を選択して、適当なディレクトリに保存してください。

このスクリプトが前提としているディレクトリ構成は、下記の通りです。最後が/となっている箇所はディレクトリです。

前提となるディレクトリ構成
     + cgi-bin/
     |    + save.cgi
     |    + comment/
     |         + save.xml
     + 適当なディレクトリ/
          + 保存したファイル

save.xmlのサンプルです、キャラクタエンコードは、UTF-8としてください。

データXMLファイル
<?xml version="1.0" ?>
<!DOCTYPE body [
<!ELEMENT body (extext*)>
<!ELEMENT extext (#PCDATA)>
<!ATTLIST extext id ID #REQUIRED >]>
<body>
    <extext id="d20050101">2005年の始まり始まり</extext>
</body>

save.cgiのサンプルです、参考にしてください。但し、CGIモジュールが使える事を前提としています。

セーブ用cgiスクリプト
#!/usr/bin/perl -wT
##
##  save
##
use CGI;
$q = new CGI;
$isFales = 0;
$fname = 'save.xml';
@names = $q->param();
if (@names) {
    if (! open (IN, "> comment/". $fname)) { $isFales = 1; }
    foreach $name (@names) {
        print IN $q->param($name);
    }
    close IN;
}
print $q->header(-type=>'text/xml',
                 -charset=>'utf-8');

if (0 == $isFales) {
    print '<result code="OK"></result>';
}
else {
    print '<result code="NG"></result>';
}

セーブを行えるようにするには、スクリプトを修正する必要があります。

com_yscjp_Calender.jsのfunction NoteApp()を、コメントを参考にして書き換えてください。

スクリプトのセキュリティに関して

スクリプトを使う上でさけて通れない問題ですが、こればかりは各自の自己責任で使用可否を決定していただく以外、手がありません。

JavaScriptの使用を前提としたコンテンツを公開しておいて何ですが、次々に緊急度の高いセキュリティホールが発見される現状においては、IEを使ってJavaScript使用可の状態でWebをブラウズするのは愚の骨頂ではないと思えるほどです。

セキュアが謳い文句のFireFoxでも、既にいくつかのセキュリティホールが発見されています。

自分が使っているWebブラウザのセキュリティ情報を確実にチェックして、何らかの問題があった場合、それに対して対応がとれるスキルを持った人以外は、Scriptの使用はさけた方が良いかもしれません。

Windows Updateは、対応済みの問題に対処できるだけですので、発見されたセキュリティホールが致命的で、即対応(Scriptの無効化など)が必要な問題である場合には、自力で情報を取得して対応するしか有りません。

分かっている問題点

入力エリア表示時に、改行が挿入されてしまう。

予定表の予定表示列の入力エリアを表示したタイミングで、改行が挿入されてしまう不具合があります。原因究明中ですが、対策できるまでは入力時に削除してください。

keydownイベントの途中でフォーカスを移動していたので、keyupイベントを異動先のテキストエリアが拾ってしまっていたのでした。

入力エリア表示中に、一旦フォーカスをマウスで他に移すと、動作がおかしくなる。

入力エリア表示中に、マウスを使うなどして一旦他にフォーカスを移した後、再度予定表部にフォーカスを移してShift+Enterを押下すると、入力エリアがもう一つできてしまう不具合があります。入力エリアをマウスでクリックするなどして、フォーカスを移した後Escキーで入力エリアを一つずつ消してください。

そもそも処理方式を見直しました。

見えないところで、エラーが発生している

見えないところなので、気にしないでください。

今後の予定

  1. マウスによる行選択の実装。

  2. クラス設計が洗練されていないので、もう少し洗練されたものにする。コメントも、もう少し的確な内容に修正する。

  3. ソースコードの内容に関する、解説を充実させる。

  4. 改造方法に関するドキュメントを作成する。特に表示上の変更は、CSSの設定だけで相当なことができるはずなので、このあたりのドキュメントを充実させる。

[index] [top]