タグ: JavaScript

Ext JSはオワコン？RIA開発に使えるJavaScriptライブラリSmartClient

タイトルは半分冗談です。 続きを読む Ext JSはオワコン？RIA開発に使えるJavaScriptライブラリSmartClient

ExtJS GridPanel の cellclick イベントを使う

マニュアルどおりでうまくいかなかったのでメモ。
ExtJS 3.1 で動作確認。

var grid = new Ext.grid.GridPanel({
  // 中略
  listeners: {
      cellclick: function( grid, rowIndex, columnIndex, e) {
        var record = grid.getStore().getAt(rowIndex); // rowIndex番目のレコード取得
        var fieldName = grid.getColumnModel().getColumnId(columnIndex); // columnIndex番目のフィールド名取得
        var data = record.get(fieldName); // 指定座標のセルの内容を取得。
        alert(data); // 表示。
      }
  }
});

参考:
– ExtJS GridPanel

Processing – 絵をプログラムする言語

Processing(本家 Java 版. ライセンスは LGPL)
 
Processing.js(jQuery作者による JavaScript 実装版。IEでは要 ExCanvas.js. MIT ライセンス)
 
Java 言語に似た平易なプログラミング言語で、画像処理に優れている。
ユーザの入力を受け付けたり動的な処理もできるので、ゲームなどインタラクティブなプログラムも制作可能です。
 
参考:
– 絵をプログラムする言語「Processing 1.0」が正式リリース(マイコミジャーナル)
– ブラウザでお絵描きプログラミング！ Processing.js 登場！(IT戦記)

MJL – Web 制作会社が汎用 JavaScript ライブラリを公開

MJL
 
JavaScript の知識なしで使える汎用JavaScriptライブラリ。

    * 画像のロールオーバー
    * Adobe Flashオブジェクト埋め込みの機能拡張
    * 新規ウインドウの作成
    * スタイルスイッチャの実装
    * タブインターフェイスの実装
    * 要素の高さ揃え

のような機能があります。
JavaScript ライブラリといっても利用にあたって JavaScript を触る必要が一切ありません。

<script src=”mjl.js”>
<script src=”run.js”>

の二つを参照するだけで, あとは既存の HTML タグに class=”〜” を追加指定すれば、クラス名に応じて上記のようなさまざまな動作をしてくれるようになります。
 
ライセンスは GPL3 なので商用利用も可能です。
jQuery や Prototype.js などの既存のライブラリと衝突しないように作られているため、既存の環境への組み込みがしやすいのもいいですね。
 
参考:
Web制作会社が作った！超使えるJavaScriptライブラリ(ASCII.jp)

ブラウザで見ているページを編集可能にする

javascript:document.body.contentEditable=’true’; document.designMode=’on’; void 0

をアドレスバーで実行すれば、ブラウザで開いているページの画像やテキストを自由に書き換えることができます(IE6, Firefox3 で確認)。
 
編集をやめたいときは↓の一行を実行します。

javascript:document.body.contentEditable=’false’; document.designMode=’off’; void 0

 
参考:
Cut and paste one line of code to make any website editable

JavaSctript で信頼できる数値の範囲

JavaScript’s Defects on Numbers
 
Eclipse の Java2Script Pacemaker プラグイン開発者のブログより、
0×20000000000000 (54ビット)を超える値は信用できないよ、という記事。
以下ほぼ原文訳。

テストスクリプト:

javascript:alert (0x1ffffffffffffe);
javascript:alert (0x1fffffffffffff);
javascript:alert (0x20000000000000);
javascript:alert (0x20000000000001);

上記のテストスクリプトを実行すると、最後の二つの値が全く同等になることが確認できます(Firefox 2.0, IE 6.0 で確認)。
 
結論として、安全な数値範囲は -0x1fffffffffffff(-9007199254740991) から 0x1fffffffffffff(9007199254740991)までの範囲(正負それぞれ53ビット)です。Java から JavaScript への変換で、Java の long 値を JavaScript の数値に変換する時は演算結果が正しくなくなることがあります。
 

上の記事では J2S についてのみ書かれてるのだと思いますが、GWT でも該当するかもしれません。

DHTML ページのアクティブな HTML ソースを表示する

Ajax を使っているページをブラウザでソース表示すると、スクリプト実行が反映されない HTML ソースしか取得できません。
そこで、JavaScript 実行結果が反映された現在の BODY の中身を表示する “javascript:” スキームを使ったスクリプトを書いてみました。
 

javascript:open(“about:blank”).document.write(“<PLAINTEXT>”+document.body.innerHTML);

ソースを表示したいページのアドレスバーの URL 入力欄にコピペして実行すると、新しいウィンドウでソースを表示します。
※ポップアップがブロックがされる場合、一旦解除して、アクセスしなおしてください。
  
選択コピー可能なように新しいウィンドウを立ち上げているところがミソです(alert だとコピー不可)。
 
Windows IE6, Firefox2.0 で動作確認済です。

IE – innerHTML で OBJECT タグを正しく取得できない

SWFObject.js を使っていて気が付いたのですが,
IE では 以下のような処理で、(element).innerHTML がどうもうさんくさい動作をします。
(検証バージョン: Internet Explorer Version 6.0)

<span id=”exp_object_tag”>
    <object id=”foo” classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ width=”100%” height=”100%”>
      <param name=”movie” value=”foo.swf” />
      <param name=”bgcolor” value=”#CCCCFF” />
      <param name=”quality” value=”high” />
      <param name=”scale” value=”noscale” />
      <param name=”flashvars” value=”message=hello” />
    </object>
</span>
<script type=”text/javascript”>
//<![CDATA[
    alert(document.getElementById(“exp_object_tag”).innerHTML);
//]]></script>

このコードを含むHTMLの表示結果は、単純にソースのまま表示されるという一般的な期待に反して次のようになります。

(注:実際は改行はありませんが、見やすさのため改行をいれてあります)
<OBJECT id=sotester height=”100%” width=”100%” classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000>
<PARAM NAME=”_cx” VALUE=”5080″>
<PARAM NAME=”_cy” VALUE=”5080″>
<PARAM NAME=”FlashVars” VALUE=””>
<PARAM NAME=”Movie” VALUE=”so_tester.swf”>
<PARAM NAME=”Src” VALUE=”so_tester.swf”>
<PARAM NAME=”WMode” VALUE=”Window”>
<PARAM NAME=”Play” VALUE=”-1″>
<PARAM NAME=”Loop” VALUE=”-1″>
<PARAM NAME=”Quality” VALUE=”High”>
<PARAM NAME=”SAlign” VALUE=””>
<PARAM NAME=”Menu” VALUE=”-1″>
<PARAM NAME=”Base” VALUE=””>
<PARAM NAME=”AllowScriptAccess” VALUE=””>
<PARAM NAME=”Scale” VALUE=”NoScale”>
<PARAM NAME=”DeviceFont” VALUE=”0″>
<PARAM NAME=”EmbedMovie” VALUE=”0″>
<PARAM NAME=”BGColor” VALUE=”FF66FF”>
<PARAM NAME=”SWRemote” VALUE=””>
<PARAM NAME=”MovieData” VALUE=””>
<PARAM NAME=”SeamlessTabbing” VALUE=”1″>
<PARAM NAME=”Profile” VALUE=”0″>
<PARAM NAME=”ProfileAddress” VALUE=””>
<PARAM NAME=”ProfilePort” VALUE=”0″>
<PARAM NAME=”AllowNetworking” VALUE=”all”>
<PARAM NAME=”AllowFullScreen” VALUE=”false”>
</OBJECT>

時動的にパラメータを追加するのはともかく、

<PARAM NAME=”FlashVars” VALUE=””>

とされてしまうのはいただけません。
 
なお、 += オペレータでも同様の現象が発生するため、次のようにすると FlashVars でパラメータが渡せなくなってしまい、不具合の原因になります。

document.getElementById(“exp_option_tag”).innerHTML += “Break it!!”;

 
参考:
– innerHTML Property (MSDN)
– Can’t pass innerHTML to Internet Explorer containing <param ../>(mootools forums)