01 | 2008/02 |  03

  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 の扱い方がはっきり分かった以上、それを十分に活用すべきであり、そうすれば二重イテレーターも使わずに済むことも大きな利点です。

    スポンサーサイト

    Amazon 広告表示をやめる!

    ここ1年ほどの間、Google Adsence の他に Amazon 広告も掲載していたのですが、それがあるためにブログ表示が極端に遅くなっていることに最近になって(オソスギ!)気がつきました。

    そこでたいした収入が得られている訳でもないので、Amazon広告は中止することとしました。

     これにより少しは表示速度が改善されたはずです。

    jQueryのAJaxUtilityを利用して、他のエントリイのタイトルを表示する(ResponseText版)

    改 訂 履 歴
    • 初稿:2008/2/10 on ver1.2.2
    • 追記:2008/2/16
    • コードの抜本改定:2008/6/30 on ver1.2.6
    • コード微調整:2008/7/1~4
    • コードの更なる調整:2008/7/13

    初めて jQuery AJax Utilities を使ってみる

    直接そのページを開くのではなく、(今開いている頁はそのままで)当該ブログの過去のエントリイ情報を得るにはどうすれば良いのか、とふと思いました。直前の複数のタイトルが随時見られれば、色々便利かなと思ったのが事の発端です。

    言うまでもなく、この Fc2 ブログの場合には、直前/直後の各々 1 つずつのエントリイに関する所定の情報は、所定の単変数によって取得することが出来ます。例えば <%nextentry_url> で直前エントリイの URLを、<%preventry_title> で直後エントリイのタイトルを取得することが出来ます。

    しかしそれは直前直後の僅か 1 つずつのエントリイ情報しか得られません。

    また、最新エントリイのタイトル一覧もブロック変数 <!--recent--> ~ <!--/recent--> で取得することが出来ます。

    しかし、それはあくまでも最新のエントリイに関する情報であって、直前/直後ではない、もっと離れた過去と未来のエントリイ情報を取得する変数は用意されていません。

    任意の1のエントリイの直前/直後のエントリイタイトル一覧を見る変数は用意されていません。

    そこでそれらを取得するには AJax を利用するしかないだろうと判断し、初めて jQuery's Ajax メソッドを利用して試してみました。

    ここでは、このエントリイの前の 10 個のエントリイのタイトルをまとめて取得し、このエントリイ内に表示してみました。

    jQuery.get クラスメソッドを使って別エントリイのタイトル(リンク付き)を取得

    ※ 個別エントリイ表示以外のモードの場合には、ここに何も表示されません。

    •   Now Loading...

    ▲ToTop

    成功したコードを確認する。

    まず最初に、過去の任意の1つのエントリイタイトル情報の取得を試みたところ、これはあっさりと出来てしまいました。その時には、その余りの「容易さ」が、後にアダになるとは思いもしませんでした。(×_×;)シュン

    余りの容易さに意気込んで、次に複数のエントリイ情報を得ようとチャレンジを開始したわけですが、何と現在の表示状態に達するのに5日を要してしまいました。

    何故それ程の時間を要したのか───それを明らかにすることは jQuery を利用する上での注意点を体験を通じて示すことであり、意味のある行為であると思われるので、躓いたことを以下にまとめます。

    jQuery.get(url,data,callback,type) メソッドの callback 関数

    callback 関数は、url で指示したサイトの DOM ツリー全体を引数「 data 」に 取得し、次にその data 値から目的とする情報を取得して当該関数内で様々に処理する仕様となっています。なお、data はユーザーからサーバーへの送信データであり今回は記述しませんでした。

    さて、この callback 関数内で取得した値を、その外の別の関数や Javascript 文の中で直ぐに使用しようとしたのですが、ここで躓きました。

    callback 関数内で処理され取得した値を、その外では「直ぐには」「微妙に」利用出来ない場合があるのです。Ajax 通信故のタイムラグ、つまり Javascript コード進行と並行で行われる Ajax 通信がもたらす指示出しと結果取得とのタイムラグが、「微妙な問題」を引き起こします。

    その具体的な内容を以下に記します。

    過去 Entries のタイトル及びリンク先アドレスの取得に成功したコード

    何はともあれ、成功したコードは以下の通りで、コードに触れながら「微妙な問題」に言及しようと思います。なお以下のコードはこのエントリイの末尾に記述してあるので、基本的に DOM 読み込み完了を待機させる必要はありません。

       // 個別エントリイモード以外の時には、
      1: if (location.href.indexOf("entry")==-1) {
        // Ajax通信開始ボタンを隠蔽し
      2:  $("#pastTitle623").parent().css("display","none");
        // 何もしないでコード進行を終える。
      3:  (function(){return;})();
      4: }
       // ボタンから起動される Ajax 通信実行関数を定義する
      5: var getTitleText = function(limit){
        // この関数を起動するボタンを隠蔽する。
      6:  $("#btn623").css("display","none");
        // 結果表示領域を表示する。この中には Ajax 通信中を知らせる文字列を埋め込んである。
      7:  $("#pastTitle623").css("display","block");
        // 諸変数定義
      8:  var thisEntryNo, getEntryNos=[], thisURL=[],
      9:   regExpr = /entry-([0-9]+)/, html=[], realcnt=0;
        // 今開いているエントリイのエントリイ番号を取得する
     10:  thisEntryNo = regExpr.exec(location.href)[1];
        // タイトル文字列を抽出するための正規表現を定義する
     11:  regExpr = /<title>(.*)<\/title>/;
        // 対象とするエントリイ番号を巡回処理で作成する
     12:  for (var i=1; i<limit+1 && i<thisEntryNo ; i++){
         // エントリイ番号を配列
     13:   getEntryNos.push( thisEntryNo -i);
     14:  }
     15:  // 複数のエントリイを対象として Ajax 通信を実行する
     16:  $.each(getEntryNos,function(i,item){
         // タイトル名などを取得するエントリイの URI アドレスを構成する
     17:   thisURL[i] = "http://hkom.blog1.fc2.com/blog-entry-" + item +".html";
         // 各々の個別エントリイ URI に対して Ajax 通信を行い
         // ResponseText 文を取得する。
     18:   $.get(thisURL[i],function(data){
          // Ajax通信結果であるエントリイHTML文全文からタイトル名を取得
     19:    var titleStr = regExpr.exec(data)[1].substring(19);
          // エントリイタイトル名があれば
     20:    if (!!titleStr){
           // 取得タイトル名などを表示用 HTML 文として整序する
     21:     html[i] = "<li><a href='" + thisURL[i] + "' target='_blank'>" + titleStr +" (EntryNo.:" + item + ")</a></li>";
           // 取得タイトル数をカウンター値に入力する
     22:     ++realcnt;
     23:    }
          // 巡回処理が最後の配列要素に到達したならば
     24:    if (item == getEntryNos[getEntryNos.length-1]){
           // realcnt、つまりタイトル取得数がゼロならば
     25:     var tmp = realcnt==0 ?
            // デコードして「ありません」を代入する
     26:      decodeURI('%E3%81%82%E3%82%8A%E3%81%BE%E3%81%9B%E3%82%93%E3%80%82')
            // タイトル取得数があれば取得結果である配列要素を併合する
     27:      : html.join("");
           // 結果表示タグ内に結果を表示する
     28:     $("#pastTitle623").html(tmp);
     29:    }
     30:   }); // End of $.get()メソッド
     31:  }); // End of $.each()メソッド
     32: } // End of function
     33: 

    dataType(text や json 等)を特に指定していませんので、data は テキスト形式となります(ver1.2.6 の 2881 行から)。このテキスト文は指定した「url」の html 文ですから、正規表現文字列(上のコードリストの 13 行)とその exec メソッド(同上 21 行)を使って、title タグ内の文字列を取得し、かつその中のエントリイタイトル名文字列を抽出しました(つまりブログタイトルを除外しました)。

    上のコード作成上で最も苦労したのは、$.get(url,fn(data){}) で取得した data 値の処理です。

    追記(2008/2/16)

    その後色々調べた結果、そもそもサーバー側が xml ファイルを提供しなければ当然それを取得できない───そんな簡単なことがやっと分かりました。(※ 詳しい方からは「そんなこと当たり前!何を今更言っているのか?!」と叱咤されそうです。)FC2ブログサイトでは通常のアドレスのままでは XMLHttpRequest.ResponseText は取得できても、 XMLHttpRequest.ResponseXML は取得できないことを理解しました。

    具体的には jQuery.js を使っている限り Ajax の動きがブラックボックス化されているので、『 Javascript 第5版』で紹介されているコードを使って、つまりjQuery.js ではなくもっと原始的な Ajax コードを使って確認しました。

    なお、今回行った Text ファイルにたいする正規表現による検索以外の方法でも、例えば XML ファイルを取得する Ajax 通信によってもブログタイトルやそのエントリイタイトルは取得出来ますが、それは一群の最新のエントリイに関するものだけに限定されます。

    追記2(2008/2/16)

    Fc2 ブログは RSS を発行できるのだから、xml が使えないはずはない、と食い下がった結果、次のことに気がつきました。

    uri アドレスの後に「 /?xml 」をオプション的に付加することによって xml ファイルが取得できると言うことを!!

    しかし、ここで取得できる xml ファイルにはある「固定された」制限があります。それは xml ファイルに含まれるエントリイ数です。ブログ環境設定で登録したエントリイ数の、しかも直近の情報しか xml ファイルには含まれません。そのためでしょうか、ブログ環境設定には RSS 固有用のエントリイ数登録が可能となる項目が新設されていました。

    つまり /?xml で取得できる xml ファイルは「最新」エントリイ情報であり、そのエントリイ数は環境設定に依存します。従って RSS 情報の場合のエントリイ数を 11 以上に設定しておけば直近直前の10エントリイのタイトル情報を取得することが可能となります。

    そもそも、この /?xml オプションを利用した Ajax によるタイトル取得については、ブロック変数 <!--recent--> ~ <!--/recent--> で取得できる情報と全く同一になるので、敢えて Ajax を利用する価値は皆無ですが、一応別のエントリイで述べてみたいと思います。

    ( 別 Entry 「 jQuery の AJax Utilityを利用して、最新 20 エントリイの諸情報を取得表示(ResponseXML版) 」 でそれを試みました。 )

    ▲ToTop

    何が問題となったのか

    1. $.get メソッドの後に続くコードの実行に要注意

    非同期通信中で、まだ目的の情報が取得できていないのに、お構いなしにスクリプトのコード進行は先に進む───このことに気がつくのに数日を要しました。これまで自前では全く非同期通信を実行したことがないので、このようなデータ取得時間とコード進行の兼ね合いなどを気に掛ける必要がありませんでした。

    この点こそ、非同期通信の特異性あるいは特徴と言えるかも知れません。

    従って、$.get メソッド内で取得した結果を利用するコードを、$.getメソッドの外でかつ当該メソッドの直後に記述するとエラーとなるか、意味のない結果が得られてしまいがちです。原因を探るべく jQuery 本家サイトをよ~く眺めてみたら、そのことが小さく書いてある箇所がありましたが、初めてAjax コードを書く上で、必ず留意すべき重要な点だと改めて確信した次第です。

    以上の問題、いな特性を踏まえて 18 行以下のコードを書きました。さんざん試行錯誤を重ねた結果、Ajax 通信結果を処理するコードは、全て Ajax 通信メソッドの中に入れるべきであることを改めて学習したのです。

    2. 繰り返し $.get メソッドを利用する場合の注意点

    次に、複数回の $.get メソッド実行によってサーバーから連続して情報を取得する場合においても、予想しなかった問題が発生しました。今回のケースで言えば過去の 10 個のエントリイのタイトルが新しいものから順に下に表示されるようにコードを作ったのです。否、作った筈でした。

    ところが表示結果を見てみると順番が不同になってしまうのです。今開いているエントリイの直前 10 個のエントリイタイトルを確かに取得できているのですが、その順番が大袈裟に言えば表示する度に異なるのです。少なくとも新しいものから順に下に並ばないのです。

    どうしてなのか思案した結果、それは 10 回のそれぞれのタイトル値の取得に要する時間が異なるのではないか、との結論に至りました。当該エントリイの情報量が多ければより多くの時間を、少なければより短時間で目的を達してしまうのだろう、と推測しました。

    実際 FireFox 版の Firebug で通信状況を調べたところ、Ajax 通信完了は各エントリイのファイルサイズに依存し、下図で分かるように完了順序は必ずしも通信開始順にはならないことを確認しました。

    複数の連続する Ajax 通信の進行状況図

    そこで順番に並べるために一工夫しました。(取得完了順ではなく番号順に)配列に順番に情報を格納し、それを順に結合すればよいと考え、それを実行したのです。

    3. DOM ready メソッドとの兼ね合い

    今日(2008/2/10)最終結果に到達するまでずっと、コード全体を DOM ready メソッドでくるんでいました。

    しかし非同期通信そのものやその過程で情報を取得する手順においては、DOM 読み込みが完了している必要はありません。その完了を確認してから実行しなければならない処理は、Ajax処理で取得した情報を、今見ているページ内に挿入する行為だけです。

    そこで本日(2008/2/16)、全体を無名関数で包含して不必要な待機をやめさせ、その結果、可能な限り速く結果を今見ているページに表示できるようにコードを改変しました。

    その後(2008/7/1)更に改変し現在の形にしました。エントリイ表示後に直ぐに無名関数を実行させて自動的に Ajax 通信をスタートするのではなく、ユーザー指示により通信を開始するようにしたのです。Ajax 通信に要する時間を体感できるこの方法がより相応しいとの判断からです。

    次に行うべきことは・・・

    • xml ファイルをゲットして、そこから過去エントリイ情報を取得する試みを行ってみたい。
    • 更に過去の10タイトルを、あるいは後続する未来のタイトルを、各々このエントリイ内においてクリック一つで表示できるようにするのも一興か?、と考えています。同時にその時には、それまで表示されていたタイトル一覧の消去と新しいタイトル一覧の表示を、アニメーションを使って入れ替えればより面白いかも知れない、と考えています。

    ATOK2008 + 広辞苑第六版を早速使う

    発売と同時に購入する理由

    1. ずっと使い続けてきたから
    2. これからも使い続けたいから
    3. 国産品だから
    4. 新しもの好きだから

    以上のいずれも間違いではないが、最大の理由は性能の良さ、つまり製品そのものを評価するからである。

    過去にも書いたが私は MSIME が嫌いである。

    その訳は以下の3点だが、最大の理由は3番目にある。

    1. 国産品ではないから
    2. あのMicrosoft社の製品だから
    3. 性能が悪いから

    MSIME は ATOK に較べて多くの点で劣っている。「大学生と中学生の差」と言える程の格差がある。───変換精度が悪い、変換時の反応速度も遅い、カタカタ語の英字変換機能がない、誤変換訂正戻り機能も不十分、などなど───そもそも MSIME は ATOK と肩を並べて比較できる代物ではない、と思う。

    それでも MS-Office が pre-install されたパソコンが広く出回り、それに”自動的に”添付されている MSIME を、自ずから使用してしまう人はかなりの比率で存在するであろうし、そもそも日本語入力システムに金を費やすことが、パソコンを利用する上で不可欠の必須条件であると理解している人も決して高い比率では存在しないだろう。

    MS-Windows の圧倒的な市場支配によって、MS-DOS 時代に存在した日本語入力システムの多様性と競争が消え失せ、今や事実上二社の製品に限定されてしまい「公平で正当な」競争が行われない現状にあっては、「力」の前に屈服する以外の選択肢がなくなりつつある、と言うことも出来る。

    ▲ToTop

    だからこそ国産の日本語入力システムを利用し続け、支援したい

    冷凍餃子中毒事件によって外国産食料の安全性が社会問題となり、改めて食の安全と食糧自給率の相互関連が問題視されている。歴代自民党政権及びこれに荷担してきた政権党が、主としてアメリカの圧力の元で、戦後一貫して食糧自給率の低下を促進してきたことを今更問題にしても仕方ないのかもしれない。

    国が打ち出した、特定の製品に依存しないパソコン環境= MS-Office 非買宣言は、珍しくアメリカへの反旗として興味深いものがあるが、しかしそれは余りの唐突さと今更ながらの時機を失した点において、滑稽かつ惨めなものであった。

    これから日本語入力システムがどうなっていくのか、適切な競争と研鑽が行われて淘汰されていくのか、市場支配率がものを言って悪貨が良貨を駆逐するのか、予断を許さないだろう。

    だからこそ、私は ATOK を使い続けたい。

    久々にVBAを弄る

    VBAの煩雑と知能程度の低さ

    久々に(5年ぶり以上だろう)VBAを使わざるを得ない状況となった。このソフトは元来余りにダサク、洗練されていないので使いたくないのだが、やむを得ず利用せざるを得ない課題が生じた。

    そして Javascript と余りにも異なるその融通のなさ、原則的な記述の有り様に、心からの「苛立たしさと憤り」を覚えた。「もう二度とVBAなんか触りたくない!」──こんな思いを万度重ねながらそれでも仕様である以上どうすることも出来ず、堪え忍び、怒りを抑えて VBA とつきあわざるを得なかった。

    一言で言えば VBA は「柔軟さに掛ける」!

    コードを打ち込んでいる最中に、何度形式的な警告に頭に来たことか数え上げれば切りがない。

    Javascript では当たり前に出来ることが VBA では出来ない。それが一々勘に障るのである。

    && や || の効能は Javascript や Perl では当たり前であるが VBA では違う。

    また if と then を一体的にセットで入力するのも実に馬鹿らしい。if があれば then が必要なことは論理的必然なのだから、then キーワードなど元々不要なのだ。if……then……なんて「仕様としておかしい」と言わざるを得まい。

    更に、VBA では if の多重構造でもエラー表示が出る。

    ▲ToTop

    Basic とは「馬鹿でもアホでもすぐ弄れるComputer」の略か?

    昔からそういわれてきたが、その指摘にも一理あると言わざるを得ないほどに、頭に来ている!

    出来る限り使いたくない言語───それがVBAである。

    jQuery()の挙動を解読する(25) Event コードの解読を終えて──jQuery解読(37)

    経過

    約一ヶ月を要して jQuery の Event 関連コードを私なりに解読し終えました。

    jQuery を利用してイベントを扱ってみて、その使いやすさに惚れ込み、是非動く仕組みを知りたいと思い、jQuery.find() メソッド解読作業を中断して、 Event 関連コードを先に解読したのでした。

    解読作業においては、余りに複雑なバインド方法に苦労させられましたが、イベントを扱う上での注意点やイベントオブジェクトの性質などについて深く学習することが出来、改めて根源的なコードを理解することの意義を噛みしめています。予想したとおり jQuery.js は絶好の学習ツールだと再認識しました。

    次は何を・・・

    さて、イベントコードを理解した今、一つにはそれを踏まえてこのサイトで使っている自作コードを改訂すべきだと思っています。jQuery.js 解読を通じて、見よう見まねで3年越しで作成・編集してきた自作コードには、相当の無駄があることが分かってきたからです。

    二つ目には、理解したイベントコードの活用をこのブログ上で更に色々試みてみたいと思います。特にマウスイベント以外の例えばキーイベントにもチャレンジしてみたいし、殆ど利用することがなかった form 関係タグに係るイベント(具体的にはselect、change、submit 及び focus、blur )も、このブログのコメントブロックで試してみようかと思います。

    そして三つ目には解読作業を先に進める課題があります。

    そもそも jQuery の core.js 解読から始めたのですが、突如 Event コード解読に浮気してしまいましたから、元の鞘に収めて core.js 解読に戻るべきなのです。

    引き続く解読作業を core.js の何から始めるか?

    core.js は jQuery API の分類で言えば、jQuery Core、Selectors、Attributes、Traversing、Manipulation、CSS 及び Utilities に係る部分で、selector.js、event.js、offset.js、fx.js、ajax.js は別になります。しかし、selectors.js 部分は jQuery.find() メソッドに関わるコードを含んでいますので、core.js を解読する場合、結局解読対象ファイルは event.js、offset.js、fx.js、ajax.js を除くその他となります。

    当座は未完となっている jQuery.find() メソッドの解読をまず終わらせ、その上で DOM による操作やCSS、ユーティリティーズに進むことにしよう、と考えています。

    そして、find メソッド解読を通じて Selectors、Traversing、Maipulation 及び CSS に関するコードも自ずから解明することになるでしょう。

    その解読作業はいつまで係るか分かりませんが、出来うるならば ver 1.2.3 登場前に終わることが出来れば幸いです。因みに本家サイトが利用している最新の jQuery.js のバージョンは 1.2.3a となっていますが、まだ ver1.2.3 は公式に公開されていません。

    When will jQuery 1.2.3 be released ?

    jQuery 1.2.3 will be released TBD.
    Frequently Asked Questions - jQuery JavaScript Library

     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が開きます。

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