‘JavaScript’ カテゴリーのアーカイブ

prototype.jsのAjax.requestで&_=が付加される件

JSON文字列をキーなしで送りたいのに、POSTしたデータに_=とか余分なデータが付いてしまうので、サーバサイドが正しくJSONをパースできない現象があった。

var testAjax = new Ajax.Request(
    url,
    {
        method: 'post',
        parameters: jsonstr,
        asynchronous: true,
        onComplete: showResponse
});

prototype.jsのソースを見ると一目瞭然で、わざわざ付加している模様。

1.4.0

var parameters = this.options.parameters || '';
if (parameters.length > 0) parameters += '&_=';

1.5.0

params = Hash.toQueryString(params);
if (params && /Konqueror|Safari|KHTML/.test(navigator.userAgent)) params += '&_='

なるほど?Safariとかで必要なワケか。

とりあえず、QooxdooのRPCクラスと互換性のあるものをprototype.jsで、デバッグのために使いたかっただけなので、さっくり該当行削除して終了。
このパラメータがないとSafariではどうなるんだろう…自分で調べてみたりする気は全然起きないのですが。


qx.renderer.border.BorderPresets

毎回忘れるのでQooxdooのBorderのプリセットをメモしておく。
APIマニュアルにも載ってないので。
frontend/framework/source/class/qx/renderer/border/BorderPresets.jsのコードをもとに整形しただけ。

black

width: 1px
style: "solid"
color: "black"

white

width: 1px
style: "solid"
color: "white"

none

width: 0px
style: "none"

inset

width: 2px
style: "inset"

outset

width: 2px
style: "outset"

groove

width: 2px
style: "groove"

ridge

width: 2px
style: "ridge"

thinInset

width: 1px
style: "inset"

thinOutset

width: 1px
style: "outset"

verticalDivider

width: 1px
left-width: 0px
right-width: 0px
style: "inset"

horizontalDivider

width: 1px
top-width: 0px
bottom-width: 0px
style: "inset"

shadow

width: 1px
style: "solid"
color: "threedshadow"

lightShadow

width: 1px
style: "solid"
color: "threedlightshadow"

info

width: 1px
style: "solid"
color: "infotext"


Delphi for PHP

かつてBorland派だった身としては期待したい一品。
まぁBorland派と言ってもTurboC/TurboC++/C++Builderを愛用していただけでDelphi使いではなかったけど。

しかも

VCL for PHP はオープンソースライブラリとして公開されているもので、 Qooxdoo、Adodb、DynAPI、Smarty、Xajax、JSCalenda などのオープンソース PHP スクリプトやライブラリをベースとしており、コンポーネントアーキテクチャは100% PHP 5 で記述されている。

大好きなQooxdooまで。
買うしか。

ところでVCL for PHPのプロジェクトページって何もないのね。
ってか、まだ登録されたばっかり(Registered : 2007-02-16 02:05)か。



QooxdooのオブジェクトをJsonに変換する関数がイカす件

qx.io.Json
stringify (var v, Boolean beautify?)

Stringify a JavaScript value, producing a JSON text.
Parameters:
 v the object to serialize.
 beautify (default: false) whether to beautify the serialized string by adding some white space that indents objects and arrays.
Returns:
 the serialized object.

第一引数にはオブジェクト指定します。
第二引数に「美しくするかどうか」を指定できます。

とりあえず簡単にデモ。
Qooxdooのデモページを開いて、Bookmarklet的にアドレスにスクリプト書いて実行。

美しくしない(デフォルト) 

javascript:alert(qx.io.Json.stringify({hoge:1,uge:2,page:[1,2,3,4,5]},false));

json_stringify_false.png

美しくする

javascript:alert(qx.io.Json.stringify({hoge:1,uge:2,page:[1,2,3,4,5]},true));

json_stringify_true.png
おー。
見やすくて便利だ。



全画面系Flashの閉じるボタン

いわゆるフローティングレイヤーにFlash載せて、ブラウザ上を動く何かとか作ったりするわけですが、Flash上の閉じるボタンを押した瞬間にFireFoxが音もなく落ちる現象発生。

FlashからはJavaScriptの関数を呼び出して、その関数が当該レイヤーと子であるFlash本体を消していて、とりあえずJS的にはこんなコード。

closeFlash: function() {
  Element.hide('test_div');
  Element.remove('test_swf');
 
  var so = new SWFObject("/swf/test.swf", "test_swf", "100%", "800px", "8", "#000000");
  with (so) {
    addParam("wmode", "transparent");
    addParam("allowScriptAccess", "always");
    write("test_div");
  }
}

あ、閉じたあと、またすぐ復旧できるようにFlashのオブジェクトを再作成しています。

Flash側でExternalInterfaceを使ってJSの関数を読んでいるのですが、どうやらその辺がくさい。
ExternalInterfaceは、戻り値を取るので、JS側の処理が終わると、Flashに制御が戻る。
しかしその時点でFlashのオブジェクトはすでに消されているので、行き場所がなくてブラウザが落ちる、ということでしょう。
IEは落ちないんですけどね。プラグインのアクセス方法とメモリの制御に関する違いか。

とりあえず、解決策として戻り値だけ先に返すようにした。
実際にオブジェクトを消去するのは、タイマーで少し遅延させてから。

closeFlash: function() {
  this.closeFlash2.callTimeout(200, this);
  return true;
},

closeFlash2: function() {
  Element.hide('test_div');
  Element.remove('test_swf');
 
  var so = new SWFObject("/swf/test.swf", "test_swf", "100%", "800px", "8", "#000000");
  with (so) {
    addParam("wmode", "transparent");
    addParam("allowScriptAccess", "always");
    write("test_div");
  }
}

prototype的な書き方で遅延処理を実行するために今回使ってみたのは以下。

便利だ。


javascriptのカラーパレット

カラーパレットが必要になって少し探してみた。
prototypeとか使って、最近の流行りっぽく作ってるものを主に調査。

最近話題のDojo。しかしこれはちょっと…
見た目がイマイチ…

というワケで、見つけたのがこちら。

イケてる。
しかもクリエイティブコモンズライセンス。

簡単に組み込めるし超便利。

あー、そっか。背景を一色に塗りつぶして、PNGのアルファブレンディングで合成すれば明度・彩度のカラーチャートが作れるのね。
IE6、FF2.0、Opera9で正しく表示されることも確認。
色減らしたい場合も改造簡単そうだし。
これはJS上のグラフィックステクニックとして色々使えそう。


Array.prototype.findByTagName

prototype.jsをちょっと拡張。

Array.prototype.findByTagName = function(tagName) {
  return this.find(function(value, index) {
    return (value.tagName && value.tagName.toUpperCase() == tagName.toUpperCase());
  });
};

ノードリストから、特定のタグの最初の要素を返す。
直下の子ノードの中からある要素を探したりするのに使う。
こんな感じで。

var elem = $A(node.childNodes).findByTagName("DIV");

getElementsByTagNameだとツリー以下を全部検索してしまうのでね…


qooxdoo 0.6.3 リリース

リリース早いなー。

今回はクラス名の変更とかイベントハンドラ関係が変わったらしい。
あと、自動以降サポートツールが提供されてます。

Pythonで記述されたスクリプトで、jsファイルを0.6.2から0.6.3に対応するように変更してくれるようです。
ちょっとまだ未実験。