prototype.jsを使ってタグ検索結果を同一ページに表示させる : Anatommy

仕事で使う機会はまずないでしょうけど、Ajax(Asynchronous JavaScript + XML)の簡単な動作ぐらいは知っておこうと思って、prototype.jsに関するページを斜め読みしてみたんですが、世の中には便利なものを作る人がいるんですね。

あまりにも簡単に使えそうだったので、JavaScriptに関する知識もないくせに、リストで選択されたMovable Typeのエントリータグの検索結果を同じページ内に流し込むということをやってみました。普段コーディングを全くやらない人間による、~~非常に酷い~~愉快なコードになったので晒しておきます。ちなみにFirefoxでしか動作しないようです。

<script src="/prototype.js" type="text/javascript"></script>
<script language="JavaScript">
<!--
function tagSearch(){
  var url= 'http://anatommy.org/mt-search.cgi?tag=' + $F('tagList') + '&Template=feed&IncludeBlogs=1';
  var myAjax = new Ajax.Request(
    url,
    {
      method: 'get',
      onComplete: showResponse
    });
}

  function showResponse(originalRequest) {
    var xmlDoc = originalRequest.responseXML;
    var entryList = xmlDoc.getElementsByTagName('entry');
    var tagResult = '<p>';
    var titleCounter = 1;
    var linkCounter = 2;
    for (i=0;i<entryList.length;i++) {
      if(titleCounter>1){
        tagResult = tagResult + '<br />';
      }
    tagResult = tagResult + '<a href=' + xmlDoc.getElementsByTagName('link')[linkCounter].getAttribute('href') + '>' + xmlDoc.getElementsByTagName('title')[titleCounter].firstChild.nodeValue + '</a>';
    titleCounter++;
    linkCounter++;
    }
    tagResult = tagResult + '</p>';
    document.getElementById('disp').innerHTML = tagResult;
}
-->
</script>

これはJavaScriptの部分です。後ほど出てくるリストで選択されたタグをURLのパラメータにセットして検索結果のAtomを取得して、そこに記述されているエントリータイトルとエントリーURLを使ってHTMLを書き出しています。随所に苦しさが表れていますね。

<p>
<select id="tagList" size="1">
  <MTTags>
  <option value="<$MTTagName$>"><$MTTagName$></option>
  </MTTags>
</select>
<input type="button" value="タグ表示" onClick="tagSearch();">
</p>
<hr size="1">
<div id="disp"></div>

こちらはHTMLの部分です。<MTTags>は全てのタグを書き出すためのMovable Typeのループタグですね。タグの名前は<$MTTagName$>で設定します。これをリストの選択肢として選択して、ユーザーがボタンをクリックすると上述のJavaScriptが実行され、「<div id="disp"></div>」の中に書き込まれるという処理です。

実際に私が書いたコードの質はともかくとして、JavaScriptの知識がまったくない人間でもとりあえず動く仕組みを作れるという意味でprototype.jsの敷居の低さがよく分かります。

【追記 2006/07/07 12:42】 Internet Explorerでは動作しないようですが、ブラウザの違いをハンドリングするのは面倒そうなのでこれ以上深入りするのは止めにします。

【参考・関連ページ】

Anatommy

prototype.jsを使ってタグ検索結果を同一ページに表示させる

Categories

Archives

Meta