関連エントリー： Google Adsenseの表示タイミングを制御する

　このサイトのppBlog's webRingのリストは、BlogPeople からdocument.writeで書き出しています。というかBlogPeopleのスクリプトがそうなっているのですが。で、document.writeが、HTMLソースの最初の方にあると、document.writeによる書き出しが終わるまで、それ以降のページのレンダリング(HTMLの書き出し)はストップした状態となります。document.writeによって呼び出している外部サーバー(ここではBlogPeople)のレスポンスが速ければ、ページ描画で待たされることはありませんが、たまにはレスポンスが遅くて、ページの残りがなかなか表示されないという事態は起こりえます。このdocument.writeは、広告バナーなどでも当たり前のように使われていて、メインコンテンツの内容が知りたいのに、バナー広告がなかなか表示されず、イライラしたという経験もあるかと思います。確か、GoogleのADWordsなどでも使われているのではないでしょうか。

　こういう事態を避けるには、HTMLソースの最後の方で document.write を呼び出すというのがあり、これはこれで有効ですが、そう汎用性のあるやり方ではなく、また、スクリプト(JavaScript)がHTMLの中で、あちこちに散らばるのは美しくないです。

　ここでは、document.writeの内容をとりあえず配列などに一時的に退避させといて(この間にHTMLソースの描画は進んでいきます)、ページ読み込み完了と同時に、そのストックしておいたdocument.write内容を吐き出すという方法について書いておきます。

　まず、普通にdocument.writeを含んだ外部スクリプトを呼び出すやり方。これは、BlogPeopleがこうしましょう、と述べているものです。

<script type="text/javascript"
  src="http://www.blogpeople.net/display/usr/0f0d40535b5b4103.js"
  charset="euc-jp"></script>

これの実際の中身は、次のようになっています。

document.write('<div class=¥'blogpeople-main¥'>');
document.write('登録されたサイト')
　　　　　：
　　　　　：
document.write('</div>');
document.write('<div class=¥'blogpeople-powered-by¥'>');
document.write('<br /><a href=¥'･･･¥' target=¥'_blank¥'><img src=¥'･･･¥' border=¥'0¥' alt=¥'Powered By BlogPeople¥' /></a>');
document.write('</div>');

ここに使われているdocument.write内容をとりあえず配列に入れておけば良いのですが、それには次のようにします。

(function(){
  var alts = []; // document.writeの内容を入れておく配列を準備 
  d._write = d.write; // オリジナルはコピーしておく
  d.write = function(s){ alts.push(s);} // d.writeを新たに定義
  var src = "http://www.blogpeople.net/display/usr/0f0d40535b5b4103.js";
  var script = d.createElement('script');
  script.setAttribute('type', 'text/javascript');
  script.setAttribute('charset', 'euc-jp');
  script.setAttribute('src', src);
  d.getElementsByTagName('head')[0].appendChild(script);
  addEvent(window, "load", function(){
   o("_webRing").innerHTML = alts.join(""); // 指定した場所に流し込む
   d.write = d._write; // d.writeを元の定義に戻しておく
  });
 }());

　ポイントは、既存のdocument.writeを新たに、

document.write = function(s){ alts.push(s); }

と再定義している点です。ここではaltsという配列に退避させています。こうすることで、document.writeによる書き出しを待つことなく、残りのページレンダリングを進めていくことが出来ます。このスクリプトで、SafariでもIE6でもFirefoxでもきちんと動くことを確認しています。

　小生のブログであるmartin.p2b.jpのwebRing と、このサイトにあるwebRing とは同じ外部スクリプトを呼び出しているのですが、比較のために、このサイトのwebRingは上記の手法で、martin'sの方は従来の方法で呼び出しています。BlogPeopleのサーバーレスポンスは素早いので、なかなか差が実感できにくいかと思いますが、このサイトのやつは、(サイドバーのHTMLソースはdocument.writeよりも後にもかかわらず)サイドバーが先に表示されて、最後にwebRingのリストが表示されるのに対して、martin'sの方は、HTMLソースの順序通り、webRingリスト→サイドバーという順序で表示されています。

　ちなみに、このサイトのwebRingは、ppBlogの「ページ作成機能」を使って作成しているのですが、具体的に、どのような内容になっているのか、理解の一助のために添付しておきますね。

　まぁ、こんなアプローチもありますよということで

添付ファイル： webRing.txt 

JavaScript  

Updated Entry: http://p2b.jp/200805-events-order

　今日は七夕Wですね。小学生の頃は、学校総出で「♪笹の葉さーらさら〜」ってやって、七夕伝説に思いを馳せたものですが。いつになってもガキの頃の心を忘れない大人でいたいものです。

　さて、Ajaxの隆盛によって、その根幹であるJavaScriptはブログに欠かせないものとなっています。ppBlogも例外ではなく、至るところで活躍してます。一般にブログの(トップ)ページは、色々な情報を詰め込んでいるために、ファイルサイズは大きくなる傾向にあり、また、画像も至るところで使われるために、読み込むべきコンテンツサイズは更に大きくなります。ブロードバンドが当たり前の今日でもページの表示にちょっと待たされるのは珍しいことではありません。で、JavaScriptは(画像も含めた)ページの内容物が全部読み込まれた後に作動させるのが一般的です。なので、もし、画像の読み込みに時間がかかったりすると、JavaScriptがうまく動かずに、狙い通りの効果が得られなかったり、スクリプトエラーが出たりします。こういうのはたいてい、window.onloadやBODYタグでのonloadイベントで制御しているんですが、JavaScript使いなら、画像の読み込みを待たずに、ページの構成要素(DOMエレメント)がパース(読み込まれて解釈)された時点でプログラムを走らせたいと思うものです。

　その解決法として、JavaScriptマスターのDean Edwards 氏が、window.onload問題を解決した！ と言ったのが昨年の9月頃で、このブログでも言及した ことがあります。彼のやり方は、Mozilla系ブラウザの隠し要素DOMContentLoadedを利用したもので、IEはこれに対応していないので、IEだけは、外部jsスクリプトを用意しないといけませんでした。その不完全さが好きになれなかったので、ppBlogではこれとは違うアプローチ(setTimeoutを利用するやり方)を取ってたんですが、このsetTimeoutがらみの手法は、PCの性能などにも大きく左右されるし、どうも不安定さがあるんですよね。角丸コーナースクリプトが上手く作動しなかったり。

　そんな折、先月にこれでほぼ100%解決と思われるやり方がEdwardsを含めたJavaScriptマスターたちによって「発見」されました。→http://dean.edwards.name/weblog/2006/06/again/

　この新しい方法では、IEでも外部スクリプトを別に用意する必要がなく、またSafariなどでも問題なく動くものです。いやぁ、みんな頭良いよなぁ。自分でも個人的に、IE向けにはdocument.readyStateを利用した方法を試したりしたんですが、IEの返すdocument.readyStateが、またいい加減なシロモノでしてあえなく挫折。しかも、DOMContentLoadedに関しては、Operaの最新バージョンであるOpera9でサポートされたりしたんで、自分もこの潮流に乗っかることにしました。そのうちSafariでもDOMContentLoadedはサポートされそうな予感。そういえば、Opera9では、とうとうdocument.designModeがサポート されましたね。以前、document.designMode^Gを利用して、ppBlog組み込みの本格的なエディターを作ろうとしたことがあったのですが、IEの吐き出すHTMLソースがあまりに後進的だったので放置したままになっていますねぇ。IE7βでどうかはまだ試していないです(期待してないけど)。

　少し逸れましたが、とにかくppBlogでもwindow.onloadに替わる新しいやり方を実装してみました。詳しい話はエドワーズのブロッグを読んでいただくとして、ppBlogでは現時点で、次のような感じにまとめています。

DOM = { /* window.onload alternative */
 complete : function(){
  if(arguments.callee.done) return;
  arguments.callee.done = true;
  if(typeof _timer != 'undefined'){
   clearInterval(_timer);
   _timer = null;
  }
  DOM.onload();
 },
 check : function(){
  if(d.addEventListener){ // Mozilla/Opera9向け
   d.addEventListener("DOMContentLoaded", DOM.complete, false);
  }
  if(navigator.userAgent.match(/webkit|safari|khtml/i)){// Safari向け
   var _timer = setInterval(function(){
    if(d.readyState.match(/loaded|complete/)){
     DOM.complete();
    }
   }, 50);
  }
   /*@cc_on @*/
   /*@if (@_win32)// IE向け
    d.write('<script id="_decoy_" defer src="javascript:void 0"><¥/script>');
    d.getElementById("_decoy_").onreadystatechange = function(){
     if(this.readyState=='complete'){
      DOM.complete();
     }
    };
   /*@end @*/
  addEvent(window, "load", DOM.complete);//その他
 },
 onload : function(){}
}

　ポイントは、DOMContentLoadedをサポートしているならそれを使い、Safari系ではdocument.readyStateを利用し（IEと違って信用できる値を返すようである）、IEではスクリプト属性のdeferを利用することです。このdeferは文字通り、(外部読み込み)スクリプトの実行を遅延させる属性でIEのみがサポートしています。このdeferは、document.readyStateよりずっと堅実です。ついでに言うと、ここで使われているdefer指定の外部スクリプト指定は、もはや単なる「飾り」になっています(それがIE7正式版でどういう扱いになるか一抹の不安が残りますが)。詳しくは、このトリッキーな手法を発見したMatthias Miller 氏のブログ(エントリー )をどうぞ。

　ちょっと話題がずれますが、IE7βは先日ベータの最新版かつベータ最終版が出ましたね。それに少し関連したErik氏の面白いエントリーがあったので紹介しておきます（まぁ、期待外れ感が漂う、ちょっとしたジョークなんでしょう）。

　→IE 7 DOM and JS Changelog

　Erik氏は、昨日のエントリーにも出てきたWebFXの主宰者の一人で、彼もまたJavaScriptマスターです。このエントリーは時期的にIE7ベータ1-2についてのものかな。思わず笑ってしまいました

JavaScript  

　ワールドカップの準決勝ポルトガル-フランスのせいで寝むれないmartinです。

以前のエントリで「Firefoxでの擬似window.event 」として、

function windowEvent(){
 if(window.event) return window.event;
 var caller = arguments.callee.caller;
 while(caller){
  var ob = caller.arguments[0];
  if(ob && ob.constructor == MouseEvent) return ob;
  caller = caller.caller;
 }
 return null;
}

というのを載せていましたが、どうせなら、Firefox(および、その他のモダンなブラウザ)にも、window.eventを認識させたいです。window.eventは使い勝手が良いので。で、このwindow.eventを簡単に認識させる方法があったので、今はこれを使っています。もともとのソースは、JavaScript使いなら誰でも知っている、昔からの有名サイトWebFX 内にある「Classic Event Handlers - IE Emu 」で紹介してあった方法です。リンク先を見れば分かりますが、これ以上ないくらいシンプルでスマートなやり方ですねぇ。最初は、__defineGetter__あたりを使ってエミュレートしようとしていたのですが。いやはや。

　js/lib.jsでは、次のようにしています。

if(w3c){ // IE以外のモダンなブラウザなら.
 (function(){
  for (var property in Event.prototype){
   if(property.match(/MOUSE|CLICK/)){
    window.addEventListener(property.toLowerCase(), function(e){
     window.event = e;
    }, true);
   }
  }
 }());
};

　イベントリスナーに逐一マウスイベントを列挙して登録しても良いのですが、Eventオブジェクトにある組み込み定数を利用してみました。マウスイベントを列挙するなら、次のような感じになると思います。

if(w3c){ // IE以外のモダンなブラウザなら.
 (function(){
  var events = ["mousedown", "mouseover", "mouseout", "mousemove",
                "mousedrag", "click", "dblclick"];  
  for (var i = 0; i < events.length; i++){
   window.addEventListener(events[i], function(e){
    window.event = e;
   }, true);
  }
 }());
};

　まぁ、こちらの方が記述も短めでオーソドックスなやり方ですが、イベントを列挙するのがメンドかったので、別のアプローチを取ってみました。お好きな方でよいと思います。

　こうすると何が嬉しいかって、例えば、次のようなスクリプトにおいて、

document.onclick = function(e){
 alert("Event X:"+e.clientX + ", Event Y:"+e.clientY);
}

この引数のeは、Mozilla系のブラウザでは必須のもので省略は出来ません。こういうシンプルな例ならいいのですが、引数がいくつかあるような関数で、いちいちこのeを付けて回るのはメンドいものです。こういうときに、上記のエミュレーションを用いれば、

document.onclick = function(){ //eが不要
 alert("Event X:"+event.clientX+", Event Y:"+event.clientY);
}

みたいに書けるわけです

JavaScript   Firefox  

　こんばんは。何だか、地球特捜隊ダイバスター^Gみたいなタイトルになってしまいました。近頃は、もっぱらFirefoxで記事を書いていますが、この際に、ひとつ「何じゃ」と思っていたことがあります。記事作成画面で記事をしこしこ書いていて、時々、文字を強調したり文の整形のために、ppBlogツールバーから選んでタグを反映させますが、その際にFirefoxだと、テキストエリアにフォーカスを合わせると、マウスカーソルがテキストエリアの先頭に移動しちゃうんですよね。なので、その都度、また修正を加えた場所までスクロールさせないといけません。文章が長くなってくると、スクロール量も増えて大変。で、ブロッグは書いてなんぼ、こういう所でストレスを感じさせるようではイケナイ。というわけで、webを検索したらちゃんと便利な属性がありました。ちなみにIEエンジンならマウスカーソルは、修正を加えた箇所にとどまってくれるので問題ないです。

　テキストエリア内で垂直方向にスクロールした距離は、次のプロパティーで読み書き可能です。

object.scrollTop

なので、予め、この値を取得しておき、内容に修正を加えた後で、再度この値に設定すれば良いです。具体的には、ppBlogのlib.jsで言えば、

var s = ed.selectionStart;
var scrollTop = ed.scrollTop;
ed.value = ed.value.slice(0,s)+ed.value.slice(s).replace(caretSelection, string);
ed.setSelectionRange(eval(s+string.length), eval(s+string.length));
ed.scrollTop = scrollTop;
ed.focus();

とすれば良い。ホットピンクの部分が変更した箇所です。これで、Firefoxでもストレスなく記事が書けます。

　余談ですが、Firefoxの最新版は、1.5.0.4で6月2日にバージョンアップしています。最近のFirefoxは、アップデートもほぼ全自動ですし、良い感じですね。最近、見つけたTipsは、「スムーズスクロールを使用する」です。自分がIEエンジンから、なかなかFirefoxに乗り換えることが出来なかった最大要因が、何か皮を一枚被ったような「もっさり」感でした。どことなくスムーズでない。で、よくよく注意してみると、どうもスクロール時のぎこちなさが原因じゃないかと思いました。そういえば、設定項目にスクロールの項目があったような、と、「ツール」→「オプション」→「詳細」→「一般」の「ブラウズ」という項目にありました。デフォルトではオフになってるんですね(自分が以前に弄ったのかも知れないけど)。で、これをオンにすると、マウスホイールでのスクローリングのスムーズなこと！おぉー、これこれ、って感じでした　皆さんも一度、試されては■

Follow-Up 2006-7-6

　Firefoxでもwindow.eventを有効にするやり方のエントリーはこちら 　

　Gecko系のブラウザでは、これはNetscape4.x時代からずっとそうなんだけど、イベントは、イベントハンドラーにargumentとして渡されるので、この手の記述には必ず引数(ひきすう)を書く必要がある。一方、IEでは(Operaもか？)、イベントモデルには、最後に生じたイベントをキャプチャーするwindow.eventという属性があり、これはどこからでも自由にアクセスすることが出来る。以上のことをまとめると、イベントに関してクロスブラウザーな記述をしようと思えば、例えば以下のような感じになる。

function getEventType(e){
 var e = e || window.event;
 alert("Event Type is:" + e.type);
}

　で、ここで引数に使用している"e" であるが、これはGecko系のためだけに必須である。window.event であれば、この引数は不要だ。で、自分は常々、この"e"を追放できないかなと思っていた。何しろ、イベントを絡ませるような関数に必ずついて回るからだ。スクリプトの記述はシンプルなのが良いのに、この"e" のために余計に引数が増えてしまう。

　ppBlogでは数箇所に、この"e" が出てくるので、こいつを追放してやろうと決心した。そして色々弄った結果、これならOKかなというのを見つけたのでメモしておく。もちろん、ppBlogにも反映される。

　まず、最初にやったことは、ppBlogのjs/lib.jsに記述してある、ページ内でのマウスイベントX座標をゲットする以下の関数において、Firefoxでイベントがどんな風に呼び出されるのかだ。

function getEventPageX(e){
 var e = e ||window.event;
 if(e.pageX){
  return e.pageX;
 } else if(e.clientX){
  if(d.documentElement && typeof d.documentElement.scrollLeft != "undefined"){
   return d.documentElement.scrollLeft + e.clientX;
  } else if(d.body && typeof d.body.scrollLeft != "undefined"){
   return d.body.scrollLeft + e.clientX;
  }
 }
 return 0;
}

　実行している関数自身は、arguments.calleeで参照出来る。そして、この関数が何によって呼び出されているかは、callerプロパティーを参照すればいい。これらを使って、上の関数に、

 alert(arguments.callee.caller);

を付け足してみると、Firefoxでは、

function onclick(event){
  getEventPageX(event);
}

というのが返ってくる。→デモ１。 ほほう。ちなみにIEでは

function anonymous()
{
  getEventPageX(event);
}

という匿名関数が返ってくる。Firefoxでは、引数のeventがonclick関数によってキャプチャーされていることが分かる。じゃ、このonclick関数のeventって何だろう。これは次のようにして調べることが出来る。

 alert(arguments.callee.caller.arguments[0]);

すると次の答えが返ってくる。→デモ２

[object MouseEvent]

ほうほう。イベントは、マウスイベントオブジェクトとしてonclick関数に組み込まれているらしい。ならば、これを呼び出して、"e" に渡してやれば、"e" の束縛から逃れられるのではと推察する。なので次のようにして、"e" なしのやつを走らせてみる。→デモ３

function getEventPageX(){
 var e = arguments.callee.caller.arguments[0] || window.event;
 if(e.pageX){
  return e.pageX;
 } else if(e.clientX){
  if(d.documentElement && typeof d.documentElement.scrollLeft != "undefined"){
   return d.documentElement.scrollLeft + e.clientX;
  } else if(d.body && typeof d.body.scrollLeft != "undefined"){
   return d.body.scrollLeft + e.clientX;
  }
 }
 return 0;
}

　おおぉー、上手く行った　3つ目のデモでは、もはや引数のeは必要なく、getEventPageX()だけで座標を取得していることに着目。

　こりゃいいやと、js/lib.jsやjs/editor.jsに出てくる引数"e"をとりあえず、全部なしにしてブロッグを見てみると、意図したように動かない。何でかなと、デバッグダイアログを見てみると、これまでのデモでは、マウスクリックによって直接getEventPageX()を呼び出していたのに対して、実際のスクリプトでは、getEventPageX()などは、別の関数の中で呼び出されている。なので、

arguments.callee.caller.arguments[0]

だと、getEventPageX()を含んだ関数の第一引数を返してしまうのである。初歩的ミス。。それならば、

arguments.callee.caller

を次々に呼び出していけば、そのうち、マウスイベントオブジェクトに到達するはずである。イメージ的には、sourceに向かって遡っていくイベントバブリングですね。これは次のような記述でいい。

var caller = arguments.callee.caller;
while(caller){
 var ob = caller.arguments[0];
 if(ob == '[object MouseEvent]') return ob;
 caller = caller.caller; // 次の呼び出し元にセット
}

ただ、ob == "[object MouseEvent]"　というのは何となく「カッコ悪い」。この部分はコンストラクタを用いて次のようにも書ける。

ob.constructor == MouseEvent

　以上をまとめて、IEでも使えるようなクロスな記述にすると以下のような感じ。

function windowEvent(){
 if(window.event) return window.event;
 var caller = arguments.callee.caller;
 while(caller){
  var ob = caller.arguments[0];
  if(ob && ob.constructor == MouseEvent) return ob;
  caller = caller.caller;
 }
 return null;
}

　windowEvent()がそのままIEのwindow.eventに相当する。これを用いればイベント関連の記述に必須であったeからめでたく解放される訳である。最初に出てきたgetEventPageX()関数は、最終的には次のように記述できる。

function getEventPageX(){
 var e = windowEvent();
 if(e.pageX){
  return e.pageX;
 } else if(e.clientX){
  if(d.documentElement && typeof d.documentElement.scrollLeft != "undefined"){
   return d.documentElement.scrollLeft + e.clientX;
  } else if(d.body && typeof d.body.scrollLeft != "undefined"){
   return d.body.scrollLeft + e.clientX;
  }
 }
 return 0;
}

　もはやイベントのキャプチャーのためだけに引数は必要ない。最終的なデモをあげておきます。　→http://p2b.jp/demos/windowEvent.html 　なお、イベント座標取得関数とは別に、イベントが起こった要素の座標を返す、getElementPosition()という関数も新たに定義しています。これは、JavaScriptマスターであるppk氏 のサイトにある"Find Position " という記事に紹介されている関数をmodifyしたやつです。こんなやつ。

function getElementPosition(){
 var _x = _y = 0;
 var ob = windowEvent().target || windowEvent().srcElement;
 if(ob.offsetParent){
  while (ob.offsetParent){
   _x += ob.offsetLeft; _y += ob.offsetTop;
   ob = ob.offsetParent;
  }
 }
 return [_x, _y];
}

　とりあえず