09 | 2017/10 |  11

  1. 無料サーバー

User forum-FC2BLOG-Info-Edit Template-Post-Edit-Upload-LogOut

CSSやJavascript自習の苦闘史を綴っていきたい。恐縮ですがJavascriptを有効にしてご覧ください。
2005年12月から社会問題も掲載!

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 

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

改訂履歴
  • 初出:2008/2/18
  • 全面改訂:2010/5/16

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

Click すると1秒足らずの内に、Ajax 同期通信により xml ファイルをゲットし、次に、ゲットした xml ファイルから必要な情報を取りだし、この文章の下にリストとして表示します。表示される内容は 20 個の最新投稿エントリイに係る情報です。

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

    FC2ブログでは URI: http://userName.blogNo.fc2.com/?xml で xml 形式のファイルがブラウザ表示されます。サイトRSSとして利用されるこのファイルには、次のような諸情報が格納されています。( 但し、2010年4月から、ブログの設定において「 RSS 広告を表示しない 」設定に変えないと、素の xml ファイルは取得出来ず、xmlファイルは RSS リーダーによって解読されてしまいます。 )

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

    などです。

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

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

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

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

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

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

    ▲ToTop

    完成しこのエントリイで利用している Javascript コード

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

    そして結論として同期通信を採用することにしました。今回の目的はxmlファイルを扱うことであり、またボタンをクリックしてAjax通信を行うわけですから、敢えて非同期通信にする必要がないと考えました。

    完成したコード Ver1

      1:var getXMLObj = function(limit){
      2:  $put = $("#put625").empty();
      3:  $put.prev().children().empty();
      4:  var  data, No, subject, date, html=[],
      5:    target ={
      6:        title:[],
      7:        link:[],
      8:        "dc\\:date":[],  //meta-character
      9:        "dc\\:subject":[]  //meta-character
     10:    };
     11:  $.ajax({
     12:    url: /http:.+fc2\.com\//.exec(location.href)[0] + "?xml",
     13:    type: "GET",
     14:    dataType: "xml",
     15:    async:false, //同期通信を行う
     16:    success: function(xml){
     17:      data = xml;
     18:    }//End of success()
     19:  });  //End of ajax()
     20:  $.each(target,function(key){
     21:    target[key] = $.map($(data).find(key),function(n){
     22:      return $(n).text()
     23:    });
     24:  });
     25:  for (var i=1; i < limit+1; i++) {
     26:    if (!target.link[i+1]) break;
     27:    No = /entry-([0-9]+)/.exec(target.link[i])[1];
     28:    subject = " , " +target["dc\\:subject"][i];
     29:    date =" , " +target["dc\\:date"][i].substring(0,10);
     30:    html.push( "<li><a href='" + target.link[i] + "' target='_blank'>" +
     31:         target.title[i] + "</a> (No." + No + subject + date + ")</li>");
     32:  }
     33:  html.length = limit;
     34:  $("#put625").prev().children().html("jQuery Ajax をつかって取得した過去の " +
     35:     ( (i==20) ? 20 :i-1 ) +" エントリイタイトル等一覧").end().end()
     36:    .html(html.join('')).slideDown("slow");
     37:};  //End of function()

    ▲ToTop

    完成したコード Ver2───こちらの方が遙かにスマートだ

      1:var getXMLObj = function(limit){
      2:  $put = $("#put625").empty();
      3:  $put.prev().children().empty();
      4:  var data, No, subject, date, html=[];
      5:  $.ajax({
      6:    url: /http:.+fc2\.com\//.exec(location.href)[0] + "?xml",
      7:    type: "GET",
      8:    dataType: "xml",
      9:    async:false,
     10:    success: function(xml){
     11:      data = xml;
     12:    }//End of success()
     13:  });  //End of ajax()
     14:  $.each($("item",data),function(){
     15:    No = /entry-([0-9]+)/.exec($(this).find("link").text())[1];
     16:    subject = " , " +$(this).find("dc\\:subject").text();
     17:    date =" , " + $(this).find("dc\\:date").text().substring(0,10);
     18:    html.push( "<li><a href='" + $(this).find("link").text() +
     19:                     "' target='_blank'>" +
     20:           $(this).find("title").text() + "</a> (No." + No + subject + date + ")</li>");
     21:
     22:  });
     23:  html.length = limit;
     24:  $put.prev().children().html("jQuery Ajax をつかって取得した過去の " +
     25:    ( (i==20) ? 20 :limit ) +" エントリイタイトル等一覧").end().end()
     26:    .html(html.join('')).slideDown("slow");
     27:};  //End of function()

    ▲ToTop

    コード作成上の苦労談( 1~5 は Ver1 について、6 は Ver2 について )

    その1──目的とするタグの xml ファイルからの抽出

    xml ファイルを扱うのは初めてのことだったので暗中模索しました。

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

    しかし、そこは jQuery。 素晴らしさの一例でしょうが、このようなダグ名でも抽出することが出来る仕様となっています。

    Selectors - jQuery API 頁の冒頭にリテラル文字列内に【 " ; $ , . + - : & > <・・・】などの meta-characters が存在する場合の対処法が、端的に「 you must escape the character with two backslashes: \\. 」と記されています。

    この既述を見いだすまでに、あちこちグーグってみて、この件の記載がある幾つかのサイトを見つけましたが、本家サイトにしっかり記載されているとは盲点でした。

    なお、2008年段階では、駄目元とばかりに "dc:" を除く date や subject 文字列だけで jQuery 検索を掛けてみたところ、何と見事に目的の情報を取得出来てしまったのです。しかし、2010年にはそれは駄目でした。jquery.js のバージョンの違いによってこの差異が出たのかもしれませんが、それは兎も角、2010年には 2008 年時点のコーディングでは、ここで目的としたパフォーマンスは全く実現できなくなったので、今回コードを全面的に見直したのです。

    その2──IE 対応策

    【この項は 2008 年段階のもので既に解決していますが、経過として残しておきます。】

    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エントリイ情報を表示できるようになったのです。ふぅ~(;_;)ウルウル

    ▲ToTop

    その3──選択したタグからのテキストの抽出

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

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

    その4──二重イテレーター

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

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

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

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

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

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

    その5──xmlファイルの記事数

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

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

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

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

    ▲ToTop

    その6──もっと効率的なコード Ver2 を作成しました

    2008 年と 2010 年 5 月とコードを弄ってきて、どうもすっきりしない感じがしていました。くどいというか、徒に複雑になっているというか、余り「消化が良くない」のです。

    xml ファイルの構成が良く分かったのにその知識が活かされていないと思われるし、もっと明快なコーディングが行えるのではないか、と考えました。

    そして完成されたのが Ver2 です。

    行数もかなり減少したし、target オブジェクトを使用しなくても済んでいることも合理的です。何よりも meta - character の扱い方がはっきり分かった以上、それを十分に活用すべきであり、そうすれば二重イテレーターも使わずに済むことも大きな利点です。

     

    ■ コメントの投稿 ■

    管理者にだけ表示を許可する

    ●トラックバック●

    ■トラックバックURLはこちら■
    http://hkom.blog1.fc2.com/tb.php/625-fa44a0da

    ●参照元一覧●

    <provided Fc2>
    <provided i2i>

    ▲ToTop

     90%近いシェアを握っているインターネットエクスプローラの描画エンジンを利用したタブbrowser。沢山のタブbrowserがあるが、多機能、カスタマイズフリー、スクリプト利用等で一日の長がある。Gekkoエンジンへの対応も行われ、IEからの自立独立の方向に向かっている。2005年7月にはIE7が登場する見通しの中で、今後の発展が望まれる。

     多様なCSS作成支援機能を備えた、タグ入力式 HTML&CSS作成支援エディタ。スキンデザインもすっきりしている。テキストエディター上で作成するよりも確実で安全にタグ打ちが出来る。
    文字コードを選べないのが欠点。

     StyleNote同様のタグ入力式 HTML&CSS 作成支援エディタ。長年使用してきたが現在StyleNoteに乗り換えつつある。

     クリップボード履歴情報を活用する為のソフト。画像まで履歴を取ってくれるのが嬉しい。このソフトを使わない日は絶対ない程に重宝し、愛用している。

     起動中のウィンドウの「コピーできない」説明文などの文字列を取得し、コピー可能な文字データにするツール。何かと便利。

     ストリーミングデータを保存することが出来るソフト。動画利用には不可欠なソフトだ。

     無料ながらレイヤー機能を有し、スクリプトによる拡張も可能な、sleipnir作者が提供している優れもの画像編集ソフト。

     画面キャプチャソフトと言えばこれに勝るものなし、ではないだろうか? 様々な取得方法を有しており、ブログ作成にもHomepage作成に不可欠だ。Jtrimと並んでWoodyBellsの作品。

     複数ファイルの同時編集は出来ないが、透過pngも作れる画像編集ソフト。
    (以下当該サイトから抜粋)初心者にも簡単に操作が出来るフォトレタッチソフトです。多くの加工機能で画像に様々な効果を与えることができます。非常に軽快に動作するため、ストレスなく操作できます。

     Animation Gifファイルを作れる無料ソフト。

     キャプチャソフト。画面内にサイト全体が表示しきれない場合でも、これを使えば全体をキャプチャすることが出来る。

     画像処理。画像のフォーマット変換のみならず、色数やサイズ、圧縮率の変更まで一括処理できてしまう『BatchGOO!』は、大量の画像をまとめて処理したいときに大変便利なソフト。BMP, TIFF, JPEG, PCX, PNG の相互変換をはじめ、色数・サイズ・解像度の統一、JPEG圧縮率の調節など、ホームページ用の画像や携帯電話用の壁紙を揃えるのに抜群の相性を見せる。(Vectorの当該ソフト紹介頁より抜粋引用)

     名前から直ぐに想像が付くように画像のサイズを測るためのソフトだ。Homepage作成には欠かせない。2カラム、3カラムのレイアウトを行う場合に大変重宝する。

     ランチャーソフトは沢山あるが、中でもこれが一押しだ。2年以上使ってきたがその操作性には毎日満足している。これを使い始めてからデスクトップには一切のアイコンを表示することをやめてしまった。

     AdobeReader7によって、起動時間が長すぎるという長年のユーザーの不満はある程度解消した。そのためこの高速化ソフトは存在価値が低下してしまったかもしれない。AdobeReader6迄はこのソフトによる起動高速化で恩恵を受けてきた。

     IE専用が難点だが、様々なサイト内でIDやパスワードを入力するのに重宝するソフト。コンテキストメニューから簡単に起動できるのがGood! sleipnir等のIEの描画エンジンを利用しているブラウザでも使える。

     利用しているパソコンの諸元値を取得するには、このソフトがベストだ。インストール済みソフトの一覧が取得できるのも嬉しい。

     WMPは機能が豊富なだけ重い。RealPlayerも同様だ。そこでMedia Player Classicを使いたい。動作が軽快なだけではなく、対応しているファイル形式もすこぶる多く、これひとつで、wmvもrmも表示できてしまうのだから凄い! 数多あるMedia Playerの王様と言えるだろう。

     自宅でPCを起動しているときには必ず起動しているメディアプレーヤー。何かと過剰なWinampよりも、起動も速くスキンはシンプルだ。

     DivX, Xvid, Mov, Vob, Mpeg, Mpeg4, avi, wmv, dv, などの動画をDVD-Video形式に変換できるフリーソフト。クリックするとDVD関連ソフト紹介サイト=「DVDなToolたち」なるHomepageが開きます。

    ----------
    200802180015
    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。