jQuery の AJax Utilityを利用して、最新 20 エントリイの諸情報を取得表示（ResponseXML版）

• 「jQuery解読によるJavascript学習」関連エントリイ一覧 in this Blog

結論：最近の 20 エントリイに関する Ajax による各種情報取得結果

ここを Click すると Ajax 通信を開始します

Click すると１秒足らずの内に、Ajax 通信により取得した xml ファイルから取得した情報を以下に表示します。

但し、恐縮ですが現時点では IE７ では表示されません。ここで行った方法では IE においては、xml ファイルから dc:date タグと dc:subject タグの情報を取得できないため（IEは名前空間に対応した接頭辞付きタグ名を取得するメソッド「getElementsByTagNameNS」に対応してない）、それらの情報を取得しないようにプログラムを修正して、やっと最新 20 エントリイのタイトル情報等を表示させることが出来ました。またマックを利用できる環境にないため Safari はチェックしようがありません。

FireFox（おそらく Mozilla 系は OK のはず）、Opera 及びIEに限定したバージョンとなっています。

jQuery Ajax をつかって取得した過去の 20 エントリイタイトル等一覧

▲ToTop

jQuery の AJax Utility を ResponseXML モードで使ってみる。

FC2ブログでは URI： http://userName.blogNo.fc2.com/?xml で xml 形式のファイルがブラウザ表示されますが、サイトRSSとして利用されるこのファイルには、次のような諸情報が格納されています。

• 最近のエントリイタイトル
• 最近のエントリイのリンク
• 最近のエントリイの所属カテゴリイ
• 最近のエントリイの投稿日時
• 最近のエントリイの要約文
• 最近のエントリイ本文

などです。

そこで、サーバー上にあるこの xmlファイルに Ajax を利用してアクセスすれば、上記の情報の一部又は全てを取得することが随時可能となります。

jQuery を利用した Ajax Utilities 練習のために

但し、この xml ファイルの情報には常に「最新の」ものに過ぎません。各エントリイからすれば常に最新情報が必要な訳ではありませんから、任意のエントリイからこの情報を活用することはまずないでしょう。その点ではこれから行うことは余り有り難みのあるものではなく、むしろ無用の長物と言えます。

更に、ブロック変数を利用すればいくらでも収集できる情報ですから、ますます意義もないことと言えます。

ところが、各エントリイにとっては「無用の長物」であるこの xml ファイルは jQuery.js の Ajax Utilities を具体的に詳しく知るための一助とするのには、適しています。

そんな訳で、上記の６つの情報の内、タイトル、本文及び要約文を除く４つの情報を jQuery Ajax を活用して取得して上記に表示してみました。なお、ブログ環境設定において サイトRSS 情報に掲載するエントリイ数は 20 としましたので、ここではその全てをゲットしています。

▲ToTop

苦労談

２つ前のエントリイの ResponseText 版同様、今回の ResponseXML 版でも苦労を重ねました。

Ajax では目的とする情報の取得に数百ミリ秒から数秒の時間を要するため、常にそれを考慮したコードを組まないと、undefined や null 値ばかりをゲットしてしまうことを、痛いほど知らされました。

完成したコードとその逐行解説

<script type="text/javascript"><!--
1. (function(limit){
　　 //変数定義
2. 　var No, subject, date, target ={
3. 　　target ={
4. 　　　title:[],
5.   　　link:[],
6. 　　　date:[],
7.   　　subject:[]
8. //　　description:[]	　//冒頭200文字は今回は表示しないので除外
　　　 };
9. 　$.ajax({
   　　//或るFc2サイト（自サイトである必要はない）の xml ファイル URI
11.　　url: /http:.+fc2\.com\//.exec(location.href)[0] + "?xml",
12.　　type: "GET",
13.　　dataType: "xml",　//dataType を xml と指定
14.　  success: function(xml){　//以下が Ajax 通信完了時の実行コード
15.    　$.each(target,function(key){  //各項目毎にイテレート処理
    　　　 //左辺：各項目値を配列に格納。
    　　　 //右辺：xml データから key タグ要素を見つけその各々に対して
16.        target[key] = $.map($(xml).find(key),function(n){
　　　　　　 //タグ内の文字を抽出して左辺に返す。
17.        　return $(n).text()
18.        });
19.      });　//二重のイテレート処理完了。これで目的のデータは取得済みとなる。

      　 //次に取得値を表示する為の巡回処理を行う。
20.　　　for (var i=0; i < target.date.length; i++) {
　　　　　 //環境設定が21件未満または一部表示となっていた場合への
　　　　　 //エラー処理。存在確認を行って、それがなければ break するようにした。
21.　　　　if (!target.link[i+1]) break;
　　　　　 //エントリイ番号の抽出
　　　　　 //リンクタグはサイト全体用のものが最初にあるの
　　　　　 でこれをスキップするために i+1 としている。
22.　　　　No = /entry-([0-9]+)/.exec(target.link[i+1])[1];
　　　　　 //IEでは<dc:subject>タグの抽出が出来ないため
23.　　　　subject = $.browser.msie ? "" : " , " +target.subject[i];
　　　　　 //IEでは<dc:date>タグの抽出が出来ないため
24.　　　　date = $.browser.msie ? "" : " , " +target.date[i].substring(0,10);
　　　　　 //上で全データが取得できたはずなので、その表示のためにタグ
　　　　　 //文字列とセットの文字列化してから html 配列に格納する。
　　　　　 //タイトルタグもサイト全体用のものが最初にあるので、
　　　　　 これをスキップするために、i+1 としている。
25.　　　　html.push( "<li><a href='" + target.link[i+1] + "' target='_blank'>" +
　　　　　　 target.title[i+1] + "</a> (No." + No + subject + date + ")</li>"
26.　　　　　);　//挿入用のデータ完成
27.　　　}　//End of for loop
28.　　　html.length = limit;　//表示するエントリイ数を引数値で設定
　　　　 //環境設定故に20エントリイを対象と出来なかった場合への対応策として
　　　　 //タイトル文字に取得したエントリイ数を表示させることにした。
　　　　 //メソッドチェーンを大いに活用していることに留意を！
29.　　　$("#put625").prev().children().html("jQuery Ajax をつかって取得した過去の " +
30.　　　　 ( (i==20) ? 20 :i-1 ) +" エントリイタイトル等一覧").end().end()
　　　　 //配列の要素を結合子なしで結合して表示タグ内に挿入
31.　　　　.html(html.join('')).slideDown("slow");
32.　　}　//End of success()
313.　});　//End of $.ajax()
//表示数を20に指定。ここを20以内の数字に変えれば表示数を制御できる。
32. })(20);　//End of function()
//--></script>

▲ToTop

苦労談その１──xml ファイルからの目的とするタグの選択

xml ファイルを扱うのは初めてのことでした。だから document.getElementById が使えないことなどは全く知りませんでした。

しかしそのことは今回の作業ではたいした問題ではありません。目的のタグ情報の取得に苦労したことをこそ述べなければならないでしょう。

Fc2 ブログの xml ファイルの場合、例えば日付情報は <dc:date> と言うタグ名に格納されています。これはXML名前空間と呼ばれる拡張されたタグ名で（XML名前空間の簡単な説明）、その検索を行うメソッドgetElementsByTagNameNS によってFirefox等では検索が可能ですが、IEはこのメソッドに対応していません。。

ですからどのようにしてIEにおいて、日付情報を取得するのか悩みました。そのことはカテゴリイ情報の取得においても同様でした（タグ名は <dc:subject> ）。

そこで、巧くいけばラッキーとばかりに "dc:" を除く date や subject 文字列だけでjQuery 検索を掛けてみたところ、何と見事に目的の情報を取得出来てしまったのです（getElementsByTagNameNS を使わないで取得できたのは驚きです）。これは極めてラッキーなことでした。この問題を通過しなければ xml ファイルからの日付情報やカテゴリイ情報の取得は思いもよらなかった訳ですから。

こうして打開策として IE の場合には取得できない情報はゲットしないようにし、その他では日付やカテゴリイのXML名前空間によるタグ名の項目もゲットするように場合分けして解決しました。

苦労談その２──IE 対応策

IE においてはなかなか（10日弱の間） 20 エントリイタイトルが表示できませんでした。その原因を探ろうにも FireBug のような素晴らしい性能を有する IE 向けの debugger が存在しないため（正確に言えば存在するかも知れませんが、その存在を知らないため）、表示を妨げている原因の探索に大変苦労しました。

悩んでいても何も解決しないので、やむを得ず性能の悪い debugger ＝ IEに備え付けのものやIE専用のもの ＝ を利用して原因を探求し、四苦八苦の末にやっとその原因を究明することが出来ました。

上述のように xml 文書では、日付とカテゴリイに関するタグ名が、dc:date、dc:subjectとなっていますが、jQuery.js を使ってこの xml ファイルを対象として走査する場合において、FireFox と Opera においては find("date") と find("subject") メソッドで当該タグを抽出できるのに、IE においてはそれが出来ずに未定義値をゲットしてしまうのです。このことが求める結果を取得・表示できない真相の闇でした。

そこで当座このエントリイにおいては（この後に、もっと一般化したIEでも同様の結果が得られるようなコードを作成したので）、IE で取得できない値はこれをゲットしない用にプログラムを改変して、やっと IE の場合でも最新20エントリイ情報を表示できるようになったのです。ふぅ〜(;_;)ｳﾙｳﾙ

苦労談その３──選択したタグからのテキストの抽出

これには $.each メソッドか $.map メソッドのいずれかを使うことが出来るだろうと考え、今回は後者を利用してみました。どちらでも同様のことが出来るので余り使ったことのない map メソッドに挑戦してみた訳です。

悩んだことは map メソッドの引数でした。ここではｎと言う文字を使いましたが、要は対象配列の各要素を指す訳ですが、これをどの様に表現して良いか思案してしまいました。結局何てことはなかったのですが、map メソッドを使い慣れていなかったためにちょっと苦労してしまいました。（16-17行）

▲ToTop

苦労談その４──二重イテレーター

今回作成したコードで最も自画自賛している箇所が二重イテレーターです。

この方法に至ったのは、xml ファイルから取得したいタグが４つ（ title、link、date、subject ）あることから、各々のタグ取得に関してほぼ同一内容のコードを書いても仕方ない、それは余りに冗長であると思ったからです。

そこでまずタグ名でイテレートできるよう、タグ名をプロパティ名とし、空配列をプロパティ値とするオブジェクトを作成し、その各プロパティに対して $.each メソッドによるイテレート処理を行うことにしました。（2-7行、15行）

配列に対してではなくオブジェクトに対して $.each メソッドを使うことは初めてでしたので、ここでも引数をどうするかでちょっと手間取りました。

この each イテレータの中に、先に述べたように各タグ要素から必要とする文字列を取得するための $.map メソッドによるイテレートを内包させて二重イテレータをしたのです。

各タグを順番に対象とし、そのタグ要素に対して find メソッドを適用して当該タグの全ての要素から構成される配列を作成し、それを当該タグ要素名のプロパティに格納したのです。（15-19行）

苦労談その５──xmlファイルの記事数

Fc2ブログ環境設定 - ブログの設定に「RSSの設定」という項目があります。ここで表示件数と表示順を設定できるのですが、この内容が　21件以上でかつ全文表示となっていなければ、20エントリイのタイトルなどを取得できないことが判明しました。

表示件数 20 以下でもエラーが出るし、たとえ 21 以上となっていても表示順序が「一部表示」となっていると結局 10 件の記事しか掲載されないために、エラーが出てしまいました。

そこで期待したような環境設定になっていない場合の対応策を盛り込みました（21行）。存在有無を確認し、存在しなければ for loop を break するというものです。

これにより 20 件のタイトルを取得できない環境設定となっている場合でも、獲得できる数だけのタイトル名などを取得することを可能としました。

▲ToTop