Script雑感 http://zombiebook.seesaa.net/ 長い間スクリプト使い続けてきて今更ながら覚え書きをしようと一念発起。まー。節操もなく色々手を出しています。これからも。JavaScript / CGI(Perl) / PHP が主なところかな？ ja Javascript：DOMオブジェクトかECMAオブジェクトかを判定する。 http://zombiebook.seesaa.net/article/44919023.html ドキュメントオブジェクトなのかスクリプトのオブジェクトなのか判定したい時って通常どうするのでしょう？ typeof() ではどちらも "object" なのですが、実際のところ別物ですよね。(※１）ということで、幾つか判定用関数を作成してみました。・ Element かどうかの判定要は、div とか span とかいったタグ物かどうか？です。・ DOM Node かどうかの判定attribute (id や value)、テキストは Element ではないんですが DOM ... JavaScript雑感 HiFa 2007-06-15T14:08:23+09:00 (※１）

ということで、幾つか判定用関数を作成してみました。

・ Element かどうかの判定
要は、div とか span とかいったタグ物かどうか？です。

・ DOM Node かどうかの判定
attribute (id や value)、テキストは Element ではないんですが DOM Node を受け継ぐオブジェクトです。

・ ECMA object かどうかの判定
v = {apple : 'りんご'};
なんぞのオブジェクトを判定します。
ちなみにアトミックなもの。数値や文字列もオブジェクトである場合があります。そのような場合も真として検出します。

・ イベント object かどうかの判定

（※１） opera はかなり特殊です。Element をオブジェクトとして他のブラウザ以上に統一的に扱おうとしているようです。

■ 確認環境
ie 6.0, 7.0
ff 1.5
ns 7.1
op 8.53

]]> Web:技術者の陥りやすい(？)商品力の評価ミス。 http://zombiebook.seesaa.net/article/43333447.html 自身が技術屋なんで、ハマリまくっている事に気付くんですが、仕様的に的確にマッチしている商品やサービスであっても商品力としては片手落ちって事は多いですね。「よし、コレを紹介するサービスを立ち上げて、対象業種に提供していこう。」なんて事になると、技術屋な自分は、商品やサービスの機能にしか目が向いていなかったりする。アクセシビリティはどうだとか、ユーザビリティはどうだとか。目新しいとか、差別化だとか・・・。ニーズだとかウォンツだとか。ありがちだよなぁ。でもそんなもんは実際のところ二... よもやま HiFa 2007-05-30T11:53:49+09:00
「よし、コレを紹介するサービスを立ち上げて、対象業種に提供していこう。」なんて事になると、技術屋な自分は、商品やサービスの機能にしか目が向いていなかったりする。

アクセシビリティはどうだとか、ユーザビリティはどうだとか。目新しいとか、差別化だとか・・・。ニーズだとかウォンツだとか。ありがちだよなぁ。
でもそんなもんは実際のところ二の次だったりする。

コケる要因の一つに、提供先が使いこなせないってのがある。
で、考えるのは提供先サイドのユーザビリティの見直しとか、そんな事をやりだす。が、それ自体が根本的な間違いだったりする。
確かにそれも必要だけども、そこは根幹じゃない。

]]> Javascript：replace へ関数を渡すと非常に遅くなる事がある http://zombiebook.seesaa.net/article/42220697.html replace へ関数を渡すと非常に遅くなる事がある JavaScript雑感 HiFa 2007-05-19T11:08:15+09:00 該当場所を見つける度に関数のオーバーヘッドが掛かる訳ですから、テスト文字列によってパフォーマンスが著しく変わるハズではないかと。

以下参考に致しました。
「escapeHTML の実装 3 パターン (ベンチマーク付き)」
http://d.hatena.ne.jp/reinyannyan/20060711/
「激しく誤差の範囲内の予感」
http://d.hatena.ne.jp/f99aq/20060714/

ということでやってみた結果、それほど置換数が多くなくても ie に限ると１０倍以上の差がでるようです。ff と op は有意義な差が無いです。

告白すると、replace で正規表現使ったり、関数を渡したりする事ができるなんて・・・。知りませんでした。

おいおい大丈夫かよってなもんで。
「問題なければすべて良し」的な対応をしてきた自分に激しく反省。これからもポロポロ垢が出てくるんだろーなぁ。

以下。テスト内容

]]> Javascript：エレメントの位置をコロコロと変える。 http://zombiebook.seesaa.net/article/42061419.html DOM element をスワップさせたり、最前部や最後部に移動させたりする関数群です。ま、簡単に出来ますし、大したコードでもないのですが、微妙に面白いｗ・ 一つずつ上に移動・ 一つずつ下に移動・ 指定要素の最前部に移動・ 指定要素の最後部に移動・ 要素の入れ替えのそれぞれの関数があります。■ 確認環境ie 6.0, 7.0ff 1.5ns 7.1op 8.53メイン環境じゃ無いので少ない・・・。 JavaScript雑感 HiFa 2007-05-17T15:41:39+09:00
・ 一つずつ上に移動
・ 一つずつ下に移動
・ 指定要素の最前部に移動
・ 指定要素の最後部に移動
・ 要素の入れ替え

のそれぞれの関数があります。

■ 確認環境
ie 6.0, 7.0
ff 1.5
ns 7.1
op 8.53
メイン環境じゃ無いので少ない・・・。

]]> javascript:厳密なイコール http://zombiebook.seesaa.net/article/40508191.html ぜんっぜん、知らなかったんですが「===」が、ECMA では規定されています。=== と == に関してちょこちょこっと。今更何を言っとるんだ状態ですが、javascript === 曖昧 （笑）という図式が私ん中で出来上がっちゃってまして「そんなものはない」と信じ込んでたんですね。Javascript を扱ってるサイトでも見かけませんよね。（というか気付かなかった）正直、ECMAscript, DOM, javascript って何が何やら境界がよく分からん。Javascr... JavaScript雑感 HiFa 2007-05-01T13:53:47+09:00 === と == に関してちょこちょこっと。

今更何を言っとるんだ状態ですが、javascript === 曖昧 （笑）という図式が私ん中で出来上がっちゃってまして「そんなものはない」と信じ込んでたんですね。
Javascript を扱ってるサイトでも見かけませんよね。（というか気付かなかった）

正直、ECMAscript, DOM, javascript って何が何やら境界がよく分からん。Javascript や action script などが ECMAScript 準拠って事ぐらい。
ま、プロジェクト管理者の中ですら Ajax = javascript なんて人も居るんで、ま、分かり辛いって事で締めとくか。

以下、意外だった人には意外な事ｗ

]]> Ajax：画像を取得して表示する（Firefox） http://zombiebook.seesaa.net/article/34873787.html k12u さんのこのスクリプトを使って画像を取得・表示してみました。 JavaScript雑感 HiFa 2007-02-28T02:44:08+09:00 JavaScriptでバイナリを扱う &
　XPCOMを使ってローカルのデータベースにアクセス with Firefox
の記事を読んでいて、そういや Ajax ではどうなん？と思ってやってみた。

■ 他に参考にしたのは以下の記事。
[comp]JavaScriptでバイナリファイルの中身にアクセスできた

■ base64 エンコードには下記のコードを使いました。
JavaScript で Base64 の符号化と復号化 ]]> Javascript：if などの制御構文を使わない分岐 http://zombiebook.seesaa.net/article/34714220.html if などの制御構文を使わなくても分岐ができます。実際、当たり前の話なんですが、意図的に行うかどうかという、ただそれだけの違いです。 JavaScript雑感 HiFa 2007-02-26T13:06:34+09:00 意図的に行うかどうかという、ただそれだけの違いです。

]]> Javascript：for のちょっと変わった使い方 http://zombiebook.seesaa.net/article/34607608.html for(var i = 0; i &lt; 10; i++){処理・・・}for(var i in object){処理・・・}なんてのは、よく目にしますが・・・。for(var i = ['あ', 'い', 'う']; i[0]; i.shift()){ alert(i[0]); }これでも。i に配列を代入して、i[0] が false を返すようなものではない間、shift で i に代入された配列を削っていきます。ということで、この場合は、あ、い、う、と表示される。当... JavaScript雑感 HiFa 2007-02-25T03:01:53+09:00 for(var i = 0; i < 10; i++){処理・・・}
for(var i in object){処理・・・}
なんてのは、よく目にしますが・・・。

for(var i = ['あ', 'い', 'う']; i[0]; i.shift()){ alert(i[0]); }
これでも。i に配列を代入して、i[0] が false を返すようなものではない間、shift で i に代入された配列を削っていきます。ということで、この場合は、あ、い、う、と表示される。

当然。もっと自由に考えれば。
var o = {
  v : 2,
  fn : function (){this.v = this.v * 2},
  en : function (){
    if(this.v < 10) return true;
    alert(this.v);
  }
};
for(; o.en(); o.fn()){}
なんてのも。
わざわざこんな処理に冗長な例ですが・・・。for 内の処理や条件を外部で、作成・変更できたりと、結構自由に使えます。ただ。やり過ぎると、深刻な混乱を招いたりするので、誰が見ても分かりやすい物にした方が無難かも。

私は遊びで使ったりします。ひょっとしたら嫌う人もいるかもしれない。 ]]> Javascript：Array オブジェクトの継承では length が予期しない値を返す http://zombiebook.seesaa.net/article/34320363.html Array の場合、継承というにはマズくないでしょうか？なにか勘違いしているかも知れませんが、トラックバックしました。 JavaScript雑感 HiFa 2007-02-21T16:02:17+09:00 02/22 後尾に追記

アルファブロガー達※１が、一時取り上げていた３行の継承に関してですが、これで Array オブジェクトを複製しても組み込み済みのメソッドは、継承元でしか動作しないですね。

■ 試した関数
404 Blog Not Found さんより
javascript - プロトタイプ的継承

function object(o){
  function F(){}
 F.prototype = o;
 return new F();
}

※１　私だけの認識じゃないと思う。

]]> Javascript：setTimeout による呼び出しは関数終了時ではない？ http://zombiebook.seesaa.net/article/33873896.html 予定された時間になり、その時実行中の関数が終了すれば setTimeout／setInterval での呼び出しが実行されるという訳じゃないんですよね。ネットでたまに見かけるのは、「function fn(){setTimeout(cb, 20); ・・・;} の場合、・・・の処理が終わって fn(); が終了していないと、20msec 経過しても cb は呼び出されない」などの内容で完結していることがありますが、実際は fn(); が終了していても呼び出されないことがありま... JavaScript雑感 HiFa 2007-02-17T09:35:16+09:00
ネットでたまに見かけるのは、「function fn(){setTimeout(cb, 20); ・・・;} の場合、・・・の処理が終わって fn(); が終了していないと、20msec 経過しても cb は呼び出されない」などの内容で完結していることがありますが、実際は fn(); が終了していても呼び出されないことがあります。

ま。とある記事読んでいて、あれれ？と思ったので・・・。というか、自分自身も意識しないとそう言ってる。

]]> Javascipt:関数ごとに終了状態をトレースしてゆく関数 http://zombiebook.seesaa.net/article/33718800.html 関数の状態をトレースする関数を作ってみました。変数の状態や arguments などを蓄積します。関数内の変数は簡易的にスキャンして、一括取得できるようになっています。 JavaScript雑感 HiFa 2007-02-15T10:59:01+09:00 前回の「Javascipt:関数が終了した後でもそのローカル変数が参照できる」を発展させて、関数に eval(getChain()); と記述するだけで、トレース出来るようにしたものです。

機能は以下になります。
  • arguments, caller, callee を保存
  • 終了時の変数の値を個別・一括で取得
  • 複数の関数の終了時の状態を起動順序ごとに配列へ蓄積
■ 確認環境
ie 5.0, 5.5, 6.0, 7.0
ff 1.0, 1.5, 2.0
ns 7.1
※ opera は caller が無いため動作しません。
参考：http://www.opera.com/docs/specs/js/ecma/

■ 注意点
対象とする関数が起動されるたびに延々と蓄積し続けます。
Array.shift() などを使って配列を詰めてもいいかも知れません。

]]> Javascipt:関数が終了した後でもそのローカル変数が参照できる http://zombiebook.seesaa.net/article/33338956.html 関数終了後でもローカル変数を参照出来るんですが、さらにそれを汎用にしてしまったものです。callerも一応は、記録出来るんじゃないかと。こういう問題じゃないかもしれないけど。 JavaScript雑感 HiFa 2007-02-10T11:19:03+09:00 2/15 追記：関数化はこちら「Javascipt:関数の状態をトレースする関数」

例えば、fn(){var v=1;}を起動・終了後に v が参照出来るんですが、さらにそれを汎用にしてしまったものです。元ネタは以下リンクですが、caller（呼出し元）も一応は記録しておくことが出来るんじゃないかと。

JavaScriptでDebugScreen、その2（最速インターフェース研究会さん）

１年前の古い記事です。つい今しがた見つけてｗ衝撃を受けましたんで色々イジってみる。いつも参考にさせてもらってます。m(_ _)m

]]> Javascript：appendChild のタイミングで処理速度が変わる http://zombiebook.seesaa.net/article/33247314.html createElemement や createTextNode で要素を生成して、すでに描画？されているオブジェクトに入れ込む場合、入れ込むタイミングによって処理速度が変わるようです。１．生成した div 要素を、先に body へ appendChild してしまってから、div へテキストノードを入れ込む場合（bf とします）01&nbsp;&nbsp;&nbsp;obj = document.createElement('div');02&nbsp;&nbsp;&nb... JavaScript雑感 HiFa 2007-02-09T00:35:10+09:00
１．生成した div 要素を、先に body へ appendChild してしまってから、div へテキストノードを入れ込む場合（bf とします）
01   obj = document.createElement('div');
02   document.body.appendChild(obj);
03   obj.appendChild(document.createTextNode('string'));


２．生成した div 要素をにテキストノードを入れ込んだ後に、body へ appendChild する場合（af とします）
01   obj = document.createElement('div');
02   obj.appendChild(document.createTextNode('string'));
03   document.body.appendChild(obj);

感覚的には、２の方が速いだろうと思うのですが・・・。
ちなみに div 要素ではなく createDocumentFragment の方が良いかも知れませんが、微妙に遅い感じです。ほとんど、誤差範囲内ではありますがｗ

]]> php:バイト数の取得（strlen は mb_strlen にオーバーロードされる） http://zombiebook.seesaa.net/article/33192046.html strlen が mb_strlen にオーバーロード(置換)されてしまっている場合でも支障なくデータのバイト数を取得する方法です。環境によっては strlen は ms_strlen にオーバーロードされているんですが（マニュアル：XCIV. マルチバイト文字列関数）、そんな場合、データのバイト数を取得するのに通常はどうするのでしょう？$volm = strlen(bin2hex($data)) / 2;$data：バイト数を取得したいデータ$volm：データ長（byte）... ときどきPHP HiFa 2007-02-08T11:54:29+09:00
環境によっては strlen は ms_strlen にオーバーロードされているんですが（マニュアル：XCIV. マルチバイト文字列関数）、そんな場合、データのバイト数を取得するのに通常はどうするのでしょう？

$volm = strlen(bin2hex($data)) / 2;

$data：バイト数を取得したいデータ
$volm：データ長（byte）

これでマルチバイトのテキストでも画像でも、バイト数を取得できます。当たり前ですが。
ちなみに関数のオーバーロードに関する設定（mbstring.func_overload）は、ユーザスクリプトからはできません。php.ini か .htaccess、httpd.conf で設定可能です。

ずっとこれで通してきてます。
んが。実は、一般的な手法を知りたかったんですが、調べてもちょっと見つからなかったので、私なりのやり方です。
うーん。普通にコア関数があるのだろうか、見落としてるハズないんだけどなぁ。
]]> インラインフレームの読み込みに失敗することがある http://zombiebook.seesaa.net/article/32406673.html HTML の a 要素で、onmousedown を使ってインラインフレームを読み込むと、読み込みに失敗することがあります。イベントが発生するタイミングが問題なのだろうと思いますが、href に何を入れるかによっても異なります。とりあえず、a タグでインラインフレームを書き換える場合、簡単に４つ試しました。&lt;a href="javascript:void(0);" onmousedown="func();"&gt;&lt;a href="javascript:void(... JavaScript雑感 HiFa 2007-01-30T13:19:18+09:00 フレームを読み込むと、読み込みに失敗することがあります。イベントが発生するタイミングが問題なのだろうと思いますが、href に何を入れるかによっても異なります。

とりあえず、a タグでインラインフレームを書き換える場合、簡単に４つ試しました。
<a href="javascript:void(0);" onmousedown="func();">
<a href="javascript:void(0);" onclick="func();">
<a href="#" onmousedown="func();">
<a href="#" onclick="func();">

結局のところ、onclick を使えばいいのですが、世の中にはやっかいなプラグインがありまして・・・。全く関係の無い a タグを onclick してもページ遷移と誤解するのか、勝手に終了しちゃう奴があったりします。

]]>