ppBlog official

[ カテゴリー » 開発日誌 ]

エントリー 112 件中 -19--15 件を ボックス表示 ⇔ リスト表示

window.onloadの代替スクリプト

2006/7/7

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

— posted by martin at 04:40 am Comment [0] TrackBack [3]

Firefoxでのwindow.event

2006/7/6

カテゴリー » 開発日誌 » 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

— posted by martin at 05:34 am Comment [1] TrackBack [1]

リスト表示ならAjaxで読み込み

カテゴリー » 開発日誌

　リスト表示のときは、Ajax経由で記事を読み込んで表示させるという感じにしてみました。細かいところの詰めなどあると思いますが、雰囲気は味わえると思います。やっぱり、Ajaxを使うと記事のデータだけをダウンロードするので、ページ全体を読み込むのに比べて表示が速いですね。

　このギミックについて何かアイデアなり、希望などがあればコメントお願いします。

Ajax

— posted by martin at 02:36 am Comment [19] TrackBack [0]

Ajaxによる自動投稿スクリプト

2006/6/28

カテゴリー » 開発日誌

　フォーラムで，一旦投稿した後に，引き続き編集作業を継続できないかという問い合わせがありました。ppBlogでは，公開される通常の投稿であれ非公開のドラフト投稿であれ，ポストした後は一旦トップページを表示するような流れになっている訳ですが，確かに，そんなのもありだなぁと思った次第。編集画面から投稿後のトップページへの切り替えはJavaScriptを使っていて，とりあえずは，この行き先を変更すれば，投稿後に編集画面に戻ることが出来ます。これはnaoKさんが解決法をフォーラムの方に書いてくれてます。　→http://forum.p2b.jp/index.php?mode=box&UID=2870&display=all

　で，ppBlogはAJAXWの技術をコメント表示などに用いており，またログイン認証ではAJAXでポストということもしています。なので，記事の投稿もAJAX経由でいけば，編集画面から離れることなく，バックグラウンドでのドラフト投稿が出来そうだと思い，スクリプトを書いてみました。

　まずは，AJAX経由でポストするので，そのための準備をします。POST送信で送るパラメータは Array.push() メソッドを用いて，どんどん追加していって，最後に Array.join('&') で連結すればOKです。これをppBlogに組み込まれているAjax.post()メソッドを使ってPOST送信すれば良いです。これは以下のような感じになります（細かな条件振りなどは省略して書いています）。

function AjaxAutoPost(){
 var posts = [];

 posts.push('mode=update');
 posts.push('UID='+o('UID').value);
 posts.push('draft=1');
 posts.push('type=autopost');
 posts.push('category='+o('category').value);
 posts.push('title='+encodeURIComponent(o('_title').value));
 posts.push('author='+encodeURIComponent(o('author').value));
 posts.push('com='+encodeURIComponent(o('Page1').value));
 
 posts = posts.join('&'); // posts配列を&で連結

 Ajax.post("admin.php", posts, function(data){ // AJAXでPOST送信
  [data processing]
 });
}

　これをバックグラウンドで，自動的に一定時間ごとに行いたいので，setTimeoutを用いて，この関数を繰り返し呼び出せばOKです。

　次にサーバーサイドですが，こちらはPHPでの処理となります。日本語をJavaScriptでエンコードすると，もとの文字コードが何であれ，必ずUTF-8化して送出してくれます。なので，ppBlogで扱う文字コードがUTF-8以外の場合は(例えばデフォルトでのEUC-JP)，その文字コードに変換してからログに記録するようにします。

新規作成画面での初期状態。

オートポスト起動中はアイコンが変わっています。

　このオートポスト機能を追加したppBlogでの記事作成画面のスクリーンショットを載せておきます。図にあるように，自動ポスト開始ボタンがあって，それをクリックすることによって，一定時間毎でのオートポストが開始されます。始動中は，ボタンが「一時停止」のボタンに変化していて，もう一度ボタンを押すと，オートポストを中断します。ボタンの隣のテキストボックスには，最後に自動ポストした時刻が表示されます。ボタンで自動投稿オンオフの切り替えが可能です。

　この機能を取り入れることの利点は，バックアップも兼ねる点でしょうか。記事をシコシコ書いて，いざ送信！って送信するとサーバーのレスポンスが悪かったりして，折角したためた記事がパーになってしまった経験が，自分は少なくとも3回あります。この自動ポストを使って，初めのうちからドラフト投稿しておけば，こういう痛い状況は極力減ると思います。

　当初は，記事をブラウザのクッキーに保存するオートセーブ機能みたいなやつも念頭にあったんですが，クッキーにはせいぜい４キロバイトぐらいが限度で（参照：クッキーの最大サイズ制限について），この容量ではとても長文には耐えられませんし，そもそもクッキーの用途とはずれている気もしますし，ここはppBlogで比較的簡単に実装できるAjaxを使うアプローチを取ってみました。

　まだ細かいところまでチェックしたわけではないんですが，試しに使ってみたいという方はどうぞ。簡単な説明文も一緒にZIPしておきます。ちなみに，editor.jsのお尻の方に今回のスクリプトを追記していますが，そこにでてくる60000という数字が，自動投稿の間隔を表しています。この場合は，60000ミリ秒すなはち1分おきにオートポストするということです。ここの数字を変えることでお好きな間隔に設定できます

Ajax

— posted by martin at 09:35 pm Comment [15] TrackBack [0]

タグ機能を使ったテクノラティへの検索リンク

2006/6/9

カテゴリー » 開発日誌

　ppBlogの最新版には、タグ機能が付いています。「タグ」と「カテゴリー」は使い方が同じように感じるかもしれませんが、やっぱり違いますね。タグは「キーワード」とほぼ同等と個人的には思っています。ある記事があって、その内容と繋がりを持ったキーワードというものがある。そして、そのキーワードは記事を分類するカテゴリーとは別の要素です。だぶっても良いと思いますが。

　てなわけで、ppBlogにシンプルなタグ機能を付けてみました。このタグ機能は、ppBlogの中で完結するものですが、折角なので、Technorati JAPAN にリンクするタグも出力できるようにしてます。テクノラティジャパンのタグ検索機能は、2005年12月29日にベータ版のサービスが提供されていて、未だにベータ版ですが、まぁこれはグーグルのGmailがそうであるようにずっとβ版ということかもしれません。ちょっとサイトが重いんじゃないかと感じますが、これからの改善に期待してます。

　テクノラティでは、記事の更新PINGも受け付けており、ppBlogの管理画面で、テクノラティの更新PINGを登録すれば、より効果的にタグを活用できるのではないでしょうか。

　ppBlog自体のタグ機能について、簡単に述べておくと、タグは、記事の新規作成時や編集時に自由に追加や削除が可能になっています。そして、大体、どのブログでもそうであるように、エントリー数の多いタグほど文字サイズが大きいです。カテゴリー毎のソートが出来るように、タグによるソートも可能です。

　とりあえず、これぐらいの機能でよいかなぁと。

ppBlog

— posted by martin at 09:27 pm Comment [41] TrackBack [0]