こんにちは。 Ajaxカレンダーを導入してみた岩崎です。
ブラウザに搭載されている JavaScriptやHTTP通信機能を利用して、非同期通信を実現する「Ajax」。
Googleマップなどで大いに流行った技術ですが、俺語！でも導入してみるコトにしました。
そのついでに、Blogの各箇所を修正。アクセス性の向上のため、まだまだやるべきコトは多そうです。
“Ajaxカレンダー”や“非同期通信”と聞いても、なかなか分かりにくいと思いますが、簡単に言えば Blogの月別カレンダーが利用しやすくなりました。
これまで、過去のカレンダーを見るには月別の一覧ページに飛ぶしかありませんでした。
しかし、Ajaxカレンダーを導入するコトで、ページの切り替えを行うコトなく過去のカレンダーをみるコトができるようになりました。
実は 3日ほど前から試験的に導入していたのですが、安定して動作しているようなので正式な採用を決めました。
「なるほど！」な Ajax 月送りカレンダー
利用させていただいたのは、小粋空間様の「Ajax 月送りカレンダー」。多少スクリプトを操作していますが、基本的にはそのまま採用しています。
これまで、この手のカレンダーを導入するには Movable Typeのシステムを理解しないと困難だと思っていました。データベース内から、過去ログの情報を取り込まなくてはイケないからです。
それに、自分はあまり動的なページを好みません。毎回データベースにアクセスするのでは、サーバ側の負担も増し、あまり実現的ではないと考えていたのです。
ところが、この「Ajax 月送りカレンダー」は Movable Typeのテンプレートを上手に利用しています。
事前にカレンダー用のテンプレートを作成しておき、再構築時に月別カレンダーを出力させておきます。あとは、そのカレンダーを JavaScriptにて読み込むだけ。
こうするコトで Movable Typeのシステム内を理解しなくとも、過去のカレンダーを表示するコトができます。
まさに「なるほど！」といった感じ。
この他にも、テンプレートを利用するコトで様々な機能を実現するモジュールが存在しているようです。まだまだ Movable Typeの利用価値は高いようですね。
JavaScriptが動作しないブラウザでは、これまで通りの動作が行えるように工夫しています。
また、過去の日記をみた場合に その日記に合わせたカレンダーを表示するようになりました。これまでは 8月の日記をみても 10月の日記をみても、常に最新のカレンダーが表示されていましたが、8月の日記なら 8月のカレンダーが、10月の日記なら 10月のカレンダーが表示されるようになっています。
待ち時間の工夫
「Ajax 月送りカレンダー」の導入に合わせ、コメントの書き込み時にも JavaScriptを利用するコトにしました。
この Blogにコメントをする時、時間帯によっては数十秒待たされる場合があります。テンプレートの構成上 仕方のないコトですが、書き込みがされているのか不安になる恐れがあります。
そこで、コメントの「投稿」ボタンを押した際、「コメントを反映しています」というメッセージが表示されるようになりました。本当は「投稿」ボタンを無効にしたかったのですが、時間の関係上できませんでした。ただ、これだけでも十分に効果はありそうです。
また、メッセージだけではつまらないので、専用の GIFアニメーションも用意。処理中であるコトをアピールし、処理中による体感時間の軽減を工夫してみました。コメントを投稿の際には、ぜひ確認してみてください。
一応、一通りのブラウザで動作を確認していますが、Safariでは文字化けが発生する可能性があります。Safariは この手の文字化けが発生しやすいですね。
その他、Blog内での細かな問題を修正。細かな部分ですが、Blog内のアクセス性が向上できたと思います。近々、Ajaxによる検索機能も追加したいと考えていますが、デザイン面でも影響があるので まだまだ検討の段階です。
…と言うコトで、ますます見やすい Webサイトになるコトを祈りつつ、今日はこの辺で失礼いたします。^-^/~
- at 23:30
- Cat 日記
- Tag JavaScript, Webサイト
- コメント [10]
- ▲
はじめてコメントさせていただきます。
Ajaxでカレンダーを岩崎さんのように過去の日記をみた場合に その日記に合わせたカレンダーを表示するようにしたいのですがなかなかうまく動いてくれません。ソースを好評してはいただけないでしょうか？
はじめまして。 岩崎です。
コメントありがとうございます！
その日の日記にあわせたカレンダーは、なかなか実現できないですよね。私も苦労しました。
ソースは、もちろん OKです。
MovableTypeの組み方を工夫すれば解決するコトができますよ。
↓下記のサンプルをご確認ください。(2008年8月末まで有効)
http://mushikabu.net/blog/2008/01/sample_template.txt
…いかがでしょうか？
実は、そこまで難しいコトをしているワケではなく、MTEntryDateを渡す部分がポイントとなります。
ソース公表していただきありがとうございます！
ダメもとでコメントさせて頂いたのでとってもうれしい～
が・・・
うまく動かず・・・・
何がだめなのか・・・・
もう少し自分なりに考えて見ます。
本当にうれしかった！
ありがとうございます
いえいえ、自分をネットを巡って解決していった身なので、少しでもお役に立てれば幸いです。
やっぱりダメでしょうか？
実際に、状況を見せて頂ければ解決できるカモ知れないので、やっぱり糸口が見えないようであれば、またコメントください。
ずいぶんご無沙汰しておりまして・・・
チャレンジしてはわからずの繰り返しで結局・・・・
お問い合わせさせていただきました。
お時間がある時にご返答いただけるとうれしいです。
なかなか苦戦されているようですね。さっそく送って戴いたサイトを確認させていただきました。
どうも cookieが悪さをしているようです。ある意味 想定通りの動作なのですが、理想の状態ではありません。
ajaxCalendar.js の 5行目を、以下のように変更してみて下さい。
｜var cookie = readCookie("AjaxCal" + id + "dummy");
早々にお返事いただきありがとうございます。
var cookie = readCookie("AjaxCal" + id);
を
var cookie = readCookie("AjaxCal" + id + "dummy");
にしたのですが・・・
カレンダーが表示されなくなってしまいました・・・
この"dummy"にはどのような意味があるのでしょうか？
わからなすぎですみません。
ご教授よろしくお願いいたします
岩崎です。
動きませんでした？うーん、新たに別な問題が発生しているようですね…。
りさんの場合、Cookieが邪魔をしています。
今回のAjaxカレンダーは、最終的に表示されている月を Cookieに保持している為、パラメータを正常に渡しても、Cookieの月が優先されてしまい、正しく表示されないという状況になるようです。
そこで、Cookieを無効にしたハズだったのですが、失敗しました。
今回の解決策は諦めて、別な解決策を検討しましょう。
素直に、パラメータのみで動作するように変更してしまったほうが早いカモ知れません。
ご返答ありがとうございます。
実装したいカレンダーは
◎Ajaxカレンダーのように土日祝日が普通の日と違う色で表示される
◎月送りができる。
◎インデックスページに戻ったときに最新月になる
ようなカレンダーが作成したかったのです。
ううううんなかなか難しいですね
他の方法を探してみます。
もし良い感じのものを発見したら教えてください。
ちょくちょく拝見させていただきます。
詳しく調査できず申し訳ないです。
今の要望を見る限りでは、小粋空間様のカレンダーが 1番妥当そうですね。
とりあえず実装はできているので、惜しい段階にいるとは思うのですが…。
もし、もっと手軽に導入できそうなプラグインがあれば紹介させて頂きますね。