亜細亜ノ蛾 - Weblog

肝心のコードは？

まず、サイドバー部分・div#utilities の中身はこれだけです。過去記事へのリンクのみ張っています（JavaScript を表示しないブラウザ向け）。

<div id="utilities">
  <p class="archives"><a href="#" title="過去の記事を読む">More...</a></p>
</div>
<!--end utilities-->

中身は、まったくそのままの内容で、「utilities_inc.html」とでも名前をつけて出力するようにします（新規インデックステンプレートを作る）。

そして、下記コードで読み込みます。

<script type="text/javascript" src="http://example.com/js/jquery-1.2.1.min.js"></script>
<!-- jQuery を利用してサイドバーの内容を AJAX で読み込む！ -->
<script type="text/javascript">

  $(function(){                  // DOMの読み込みが完了したら実行

  $("#utilities")                // ID utilitiesの
  .empty()                       // 子要素を消去して
  .load("./utilities_inc.html");  // AJAXで内容を読み込む

  });                            //これだけ :-D 

</script>

──なんと、たったこれだけです。肝心の部分は、まとめてワンライナでも書けます。

$("#utilities").empty().load("./utilities_inc.html");

自分が jQuery のことを「ちょっとすごい CSS」と呼ぶ理由が、おわかりいただけたでしょうか？

注意点

AJAX の、というか JavaScript の仕様上、サイドバーに別の JavaScript を読み込む記述がある場合、うまく動作しません。

その回避策は──いろいろありますが、また次回、もしくはみなさんへの宿題ということで……。

あとちなみに、AJAX で読み込むと「とくに IE は 強力にキャッシュされる」ので、サイドバーの内容を更新しても反映されない、ということをよく聞きますが、jQuery の load を使う限り大丈夫でした。

なぜ AJAX 化するのか

狙いはこんなところ。

• 共通部分を一ファイルにまとめて管理しやすく
• ページのファイルサイズを減らす
• 検索エンジンのボットに拾われない

感謝！

サンプルページは、下記のページをそのまま使いました（Copyright やライセンス表示を消さずに改変しましたが、これで良かったでしょうか？）

wu さんに感謝！

• Vicunaのスキンをローカルで編集・調整する方法
• Tag Cloudのスタイル