Ajaxで月送りカレンダー

TOPページ > 210Movable Type > Ajaxで月送りカレンダー

Ajaxで月送りカレンダー

2007年3月 5日 22:25 | Writer: yoshi | 記事本文 | コメント(0) | トラックバック(0)

先日@Styleさんとお話していたとき、Ajaxというキーワードをチラリと聞いた。それで少々興味があったんだが、昨日はフォルダの再帰取得でXMLをDOMで扱おうとすると、またまたAjaxというキーワードが。何コレ？と調べてみると、JavaScriptなんであるが、よくわからない。wikiで調べると、

Ajax（エイジャックス）は、ユーザーインターフェース構築技術の総称。XMLHttpRequest（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、通信結果に応じてダイナミックHTMLで動的にページの一部を書き換えるというアプローチを取る。 AjaxはAsynchronous （エイシンクロナス/アシンクロナス、非同期） JavaScript + XML の略で、2005年2月18日にJesse James Garrettにより名付けられた。

との説明が。これ、ちょっと面白そうじゃないの。で、やってみた。

しかしAjaxで何を実現しよう。Google Mapのような手の込んだものは無理だぞ...と思っていると、そういえばカレンダーが無かったな、と気付く。よし、カレンダーで行こう。と、軽い気分でとりかかった。参考にするサイトは、Movable Typeではビッグネームである小粋空間さん。以下の記事である。

Ajax 月送りカレンダー

熟読？やファイルの準備に30分。作業に30分。この記事を書くのに30分。実装の仕方は小粋空間さんに詳しく記載があるのでそれを見てもらうとする。解説は凄く詳しく丁寧なので、日本語が読めるならばきっと大丈夫と思う。

ちょっと？な点を修正

ちょっとだけわたしの環境では上手くいかないことがあったので修正点を書いておく。

アーカイブマッピングの変更

カレンダー用に新設するアーカイブマッピングを次のように変更。

変更前 yyyy/mm/index.php

変更後 calendar/%y/%m/%i

小粋空間さんにはこの記述が無かった気がする（ボーっとしてて見落としただけかも知れない。いや、要らないのかも知れないが）。なお、不思議なことに小粋空間さんサイトのカレンダーが、うちのIE6では”Not Found”となってしまう。FirefoxではOK。何故...？

スタイルシートの書き換え

IE6では日付の位置が左寄り過ぎで萎え?だったのでスタイルシートへ以下青字部分を追加


.calendar td {
    padding: 2px 0;
    font-size: 10px;
    line-height: 120%;
    text-align: center;
}

使用感

実装されたのが左サイドバーの最上部のカレンダー。動作は実に軽快で心地いい。「カレンダーなんか見えねえよこの半アル中！」という方はご一報ください。

ページ先頭へ

トラックバック(0)

このブログ記事を参照しているブログ一覧: Ajaxで月送りカレンダー

このブログ記事に対するトラックバックURL:

コメントする

Categories

Entries

Feed

Atom
RSS 2.0

スポンサードリンク

Under the Bridge