月間予定表HTMLソース出力JavaScriptのまとめ
本当はこんなエントリ書くより、コードを書いた方が良いのですが、知識の整理の意味も込めて、とりあえずまとめてみます。後で振り返ることが出来るように。
第1期
解析していたのは、電脳レストハウス「梅ちゃん堂」にある、「スケジュール型カレンダー」です。
これを参考にすればなんとか作れるんじゃないか?と思っていたのですが、今のソースを見ると、ほとんど違うものになってます。解析時は以下のサイトをよく参考にしていました。
第2期
第1期の解析で、JavaScriptとはどんなものかをだいたい理解して、コーディングを始めたのがこの時期。3月中には出来るだろうと思っていたのですが、そうはいかず…。解析したスクリプトはDOMを使ってなかったのに、DOMを使おうと思ったのは、以下の記事がきっかけ。偶然tableが例として使われていただけの話なのですが。
Traversing the HTML Table with JavaScript and DOM interfaces
第3期
- 2006-04-02 - 1回休み
- 2006-04-02 - DOMを理解し始める
- 2006-04-03 - IEで動作しない!
- 2006-04-05 - 「IE Developer Toolbar Beta 2」を入れてみる
- 2006-04-06 - IEでDOMで生成したbutton(input要素)のイベントハンドラ(onClick)が正常に動作しない
DOMを理解するのには、以下のページが大変参考になりました。あと、FirefoxのDOM inspectorはDOMを可視化できて大変役立ちました。
しかし、Firefoxでは動いたものの、IEで動作しないという事態に。スクリプト自体が微妙な気もするので、また再検証してから新HPの方にアップしようと思います。現在は、MSDN(本家)にあるDHTMLの説明を読んでいるところ。
第4期
- 2006-04-12 - li要素生成JavaScript
- 2006-04-17 - 月間予定表HTMLソース出力JavaScriptほぼ完成
- 2006-04-18 - 月間予定表HTMLソース出力JavaScript公開
- 2006-04-19 - 月間予定表HTMLソース出力JavaScript Ver UP
「月間予定表HTMLソース出力JavaScript」を単純化したものが、「li要素生成JavaScript」です。当初、「月間予定表HTMLソース出力JavaScript」も「li要素生成JavaScript」のように、内容をブラウザ上で入力してから、ソースを出力する仕様だったのですが、過去エントリでも書いたように、ブラウザ上ではデータの保存が出来ないのはちょっと不便なので、その仕様はやめにしました。ちなみに、修正時にVer1.0としたために、「月間予定表HTMLソース出力JavaScript」はVer0.9から始まっています。DOMの魅力に取りつかれたのがきっかけで、XHTMLが使える有料サーバを借りたり、Firefoxに乗り換えたりしたのもこの頃。
第5期
- 2006-05-02 - 月間予定表HTMLソース出力JavaScript Ver UP その2
- 2006-05-29 - li要素作成JavaScript Ver1.3
- 2006-06-10 - 月間予定表HTMLソース出力JavaScript Ver1.2
見た目を変えるために、class属性追加をするようにした時期。自動化できるところは自動化しようというのが「月間予定表HTMLソース出力JavaScript」の根本にあるところなので。ただし、祝日対応はしない方針です。祝日は毎年一定ではない(祝日法が変われば、その都度変更がある)ので…。祝日入力が大変な月は、その分休みが多い月なので、それで帳消しになるかなとかも思ったりします。
この先は未定です。ブラウザアプリとしてみるなら、これで完成かなあという気がしないでもないですし。
学んだこと
- ソースを読み、手を動かして、理解する
- DOMは面白いが、使いどころが難しい
- 仕様書重要、実装はもっと重要
1番目は、本当に実感したこと。技術は使ってみないと理解できないなあと思いました。2番目は、まだ、DOM Level1の領域しか理解していないのですが、技術としては面白いなと思っています。階層モデルなだけに限界はあるのですが、階層として物事を整理して考える手法は決して役に立たないものではないと思います。3番目は自分の知識のいいかげんさを思い知ったという自戒を込めて。HTMLさえも全然細かい仕様を理解していなくて、改めて勉強中。実装面は主にCSS。「月間予定表HTMLソース出力JavaScript」の利用例サンプルを作成するとき、各ブラウザの実装の違いに苦労しました。CSSについては、はてなRSSのデザインを変更するために、hatena_skyのCSSを読みながら勉強中です。