2005年02月21日

ブログカレンダーのカスタマイズ進展

ちょっと放置気味だったカレンダーツールの改造を進めました。

これまではJavaScriptでゼロからカレンダーツールを制作していました。
しかしこの方法だと日記を投稿した日とそうでない日を判断することが出来ないので、カレンダーの日付にリンクを埋め込むことが出来ませんでした。
無理やりリンクを埋め込もうと思えば出来きないことはないですが...
それだと存在しないリンク先へリンクしてしまったり色々不具合が出てしまいます。
そこで違った方法が無いかと色々参考になるホームページを探しました。

その結果2つのサイトを発見!
@もぐりんの JavaScript > 【ダイナミックHTML】
infinite loop誰にでも出来るコラムの開閉講座!!

この2つのサイトに共通することで参考にしたことはダイナミックHTML(以下DHTML)という技術です。
このDHTMLを使うとどんなことが出来るのかというと...


■サンプルプログラム

ヒデななってどんな人?

←ボタンをクリック!
こんなことが出来ちゃうんです!
ヒデ、ネタにしてゴメンw ←反省の色無し(笑

この様な事をどうやってやっているのか簡単に説明します。

まずこのページを読み込んだ時点ではHTMLソースは以下のようになっています。
<div id="afo"><b>ヒデなな</b>ってどんな人?</div>
そして、『答え』ボタンを押すとdivタグ間の内容が以下のように書き換えられます。
<div id="afo">答え: <b>あふぉあふぉ〜♪</b>・・・以下省略・・・</div>
つまり1度読み込んだHTMLソースを書き換えることによって(←この解釈は間違っているかも...)、動的(ダイナミック)なWebページを実現しています。

そして、今回制作しているカレンダーツールも同様の技術を使って作り直しました。
カレンダー自体はlivedoorで用意されているプラグインツールを使用しました。
そのカレンダーを1度ブラウザに読み込んでから、JavaScriptで色々な要素を書き換えて再表示させています。
その証拠に、トップページを読み込んだ直後にカレンダーの見た目が変わっているはずです。
確認する際はブラウザの『更新』ボタンを押すか、『F5』キーを押さないとダメかも。
一瞬なので分かり辛いですけどね(汗

現時点でカレンダーに追加した機能としては以下の2点です。
・前月と翌月の月別アーカイブページへ移動するリンクボタン
・日&土曜日のフォントカラーを変更

そして今後追加予定の機能は以下の2点
・当日の日付を強調して表示する
・月別アーカイブのページにもカレンダーを設置する

月別アーカイブのページに設置するカレンダーツールはlivedoorで用意されていないので、こちらの方は自作のカレンダーを使おうかと思っています。
だから以前作った自作のカレンダーは無駄ではなかったということですね。ホッ...


トラックバックURL

この記事にコメントする

名前:
URL:
  情報を記憶: 評価: 顔