memo.xight.org

2006-01-31 Tue

Rico - JavaScript for Rich Internet Applications

カテゴリ: [JavaScript][Stub]

2006-01-31 Tue

hotkey.js - キー割り当て用ライブラリ

- Summary
kb.add("キー入力",実行する関数);
でキー割り当てを追加．
キー入力に配列を渡すことで，複数キー割り当ても可能．

- Source

var kb = new HotKey;
kb.add(["j","2","down"], function(){rollto(c_pos + 1)});
kb.add(["k","8","up"]  , function(){rollto(c_pos - 1)});
kb.add(["H","home"],     function(){rollto(0)});
kb.add("pageup",         function(){rollto(c_pos-3)});
kb.add("pagedown",       function(){rollto(c_pos+3)});

- Reference
最速インターフェース研究会 - 2005-11-04 - キー割り当て用ライブラリを作った
http://la.ma.la/blog/diary_200511041713.htm

カテゴリ: [JavaScript]

[ 固定リンク ]

2006-01-31 Tue

Behaviour - Using CSS selectors to apply Javascript behaviours

- Summary
onclick などのイベントで HTML を汚さずに記述する方法を提供．
CSS selectorを利用して，振る舞いを定義する．

- Before

<li>
	<a onclick="this.parentNode.removeChild(this)" href="#">
		Click me to delete me
	</a>
</li>

- After

<li>
<ul id="example">
	<li>
		<a href="/someurl">Click me to delete me</a>
	</li>
</ul>

var myrules = {
	'#example li' : function(el){
		el.onclick = function(){
			this.parentNode.removeChild(this);
		}
	}
};
 
Behaviour.register(myrules);

- Reference
Behaviour : Using CSS selectors to apply Javascript behaviours
http://bennolan.com/behaviour/
Prototype JavaScript Framework: Class-style OO, Ajax, and more
http://prototype.conio.net/

カテゴリ: [JavaScript]

[ 固定リンク ]

- Summary
PHP5上でJavaScriptを動かすライブラリ．
- Reference
J4P5: Javascript For PHP 5
http://j4p5.sourceforge.net/
- via
phpsopt開発日誌 - PHP5上でJavascriptを動かす: J4P5:phpspot
http://phpspot.org/blog/archives/2006/01/php5javascript.html

カテゴリ: [JavaScript][PHP]

[ 固定リンク ]

2006-01-19 Thu

JavaScript Fading Tooltips

- Summary
あれこれポップアップ[2003-11-05-7]のようなTooltipを表示する．
- Reference
JavaScript Fading Tooltips
http://www.dustindiaz.com/sweet-titles/

カテゴリ: [JavaScript]

[ 固定リンク ]

2006-01-19 Thu

JavaScript::DebugScreen - JavaScriptのエラーをド派手に表示するライブラリ

- Summary
JavaScriptのド派手なDebugScreen．
これは一度使ったら手放せない予感．

- 使用法
以下をHTML内に記述．

<script type="text/javascript" src="debug.js"></script>
<link rel="stylesheet" href="debug.css">

- Reference
JavaScript::DebugScreen
http://la.ma.la/misc/js/debugscreen/

最速インターフェース研究会 :: JavaScriptでDebugScreenを表示する
http://la.ma.la/blog/diary_200601150700.htm

最速インターフェース研究会 :: JavaScriptでDebugScreen、その2
http://la.ma.la/blog/diary_200601161315.htm

カテゴリ: [JavaScript]

[ 固定リンク ]

2006-01-19 Thu

POBS - PHPやJavaScriptのソースの難読化

- Reference
POBS - PHP Obfuscator
http://pobs.mywalhalla.net/start.htm
- via
cl.pocari.org - PHP や JavaScript のソースを読みにくくする POBS
http://cl.pocari.org/2006-01-12-1.html/

カテゴリ: [PHP][JavaScript]

[ 固定リンク ]

2006-01-19 Thu

Venkman 早わかり

- Summary
Firefoxのエクステンション，Venkman[2006-01-04-7]の解説．
- Reference
Venkman 早わかり(Walkthrough)
http://www.mozilla-japan.org/projects/venkman/venkman-walkthrough.html

カテゴリ: [JavaScript][Firefox]

[ 固定リンク ]

2006-01-19 Thu

X Library のリファレンス

- Summary
X Library[2005-12-27-2]のリファレンス．
メソッドの一覧．
- Reference
Collection & Copy - X Library(クロスブラウザJavaScriptライブラリ)メソッド一覧
http://d.hatena.ne.jp/brazil/20060111/1136987311

カテゴリ: [JavaScript]

[ 固定リンク ]

2006-01-19 Thu

prototype.jsのObject汚染を回避する方法

- Reference
最速インターフェース研究会 :: prototype.jsのObject汚染を回避する方法
http://la.ma.la/blog/diary_200507101154.htm
nazonoDiary - Object オブジェクトの prototype に便利メソッドを放り込むのはやめて頂きたい
http://d.hatena.ne.jp/nazoking/20050425/1114374966

カテゴリ: [JavaScript][prototype.js]

[ 固定リンク ]

2006-01-19 Thu

JavaScript 超高速化スクリプト

- Summary
IT戦記で公開されているスクリプトをすべてのスクリプトよりも前の段階で読み込む．

ライセンスは「寂しがり屋ライセンス」．
IT戦記のエントリにコメントを書くことで使用可能．

- Reference
IT戦記 - 複雑で重くなった JavaScript を超高速化する方法。
http://d.hatena.ne.jp/amachang/20060104/1136344836
IT戦記 - 複雑で重くなった JavaScript を超超ちょ〜〜〜高速化する方法。
http://d.hatena.ne.jp/amachang/20060114/1137243389

カテゴリ: [JavaScript]

[ 固定リンク ]

2006-01-16 Mon

validate.js と setInterval を利用したフォームの入力チェック

- Summary
validate.js[2006-01-06-4] を利用してみた．
オートコンプリートからマウスで選択した直後に，validate結果が更新されない．

インフォアクシアのお問い合わせでは setInterval(func,ms) を利用して
定期的に入力フォームのチェックを行っている．

validate.jsでvalidate結果表示を更新するには，Behaviour.apply() を呼び出せばよい．

- Source
以下の記述で500ms毎にvalidate結果を更新する．

<body onload="setInterval('Behaviour.apply();',500">
...
</body>

- 注意
無差別に全フォームのチェックを行ったり，極端にインターバルの時間を短くしたりすると，処理が重くなる．

インフォアクシアのお問い合わせでは，入力内容が変更された時のみ，
入力チェックを呼び出すようにしている．

- 処理の軽量化
prototype.js を利用しているため $F('elemId') でフォームの内容を呼び出している．

var nameTmp  = '';
var mailTmp  = '';
 
function isChangeForm(){
	var ret = false;
	if (nameTmp != $F('name') || mailTmp != $F('mail')){
		nameTmp = $F('name');
		mailTmp = $F('mail');
		ret = true;
	}
	return ret;
}
 
function updateForm(){
	if (isChangeForm()){
		Behaviour.apply();
	}
	return;
}

<body onload="setInterval('updateForm();',500">
...
</body>

- Reference
インフォアクシア - お問い合わせ
https://www.infoaxia.co.jp/forms/com/contact/

カテゴリ: [JavaScript]

[ 固定リンク ]

2006-01-10 Tue

JavaScriptでfaviconエディタ

- Summary
Firefox限定．
- Reference
JavaScriptでfaviconエディタ(Firefox) | weblog | 東京嫉妬
http://tokyoenvious.xrea.jp/b/b/javascript/favicon_editor.html
- via
最速インターフェース研究会 :: Firefoxでテキストをクリップボードにコピーする方法
http://la.ma.la/blog/diary_200601100445.htm

カテゴリ: [JavaScript][Stub]

[ 固定リンク ]

2006-01-10 Tue

DrawingCanvas.js - クロスブラウザなベクタグラフィック描画ライブラリ

- サンプル
http://jsgt.org/lib/vector/graph/sliderbar.htm

- Reference
Days on the Moon - 2006-09-27 - ブラウザ上でお絵かき
http://nanto.asablo.jp/blog/2005/09/27/89628

DrawingCanvas.js
http://www.ne.jp/asahi/nanto/moon/2005/09/27/DrawingCanvas.js

カテゴリ: [JavaScript][Stub]

内部リンク: [2006-08-16-2] [2006-07-03-9]

[ 固定リンク ]

2006-01-10 Tue

YAML JavaScript

- Reference
SourceForge.net: YAML JavaScript
http://sourceforge.net/projects/yaml-javascript
- via
cl.pocari.org - JavaScript による YAML parser
http://cl.pocari.org/2005-12-27-13.html

カテゴリ: [JavaScript][YAML][Stub]

[ 固定リンク ]

2006-01-06 Fri

Realtime validation - 入力値を動的にチェックするライブラリ

- Screen shot
左から未入力時, 異常値入力時, 正常値入力時．

- Usage
prototype.js とvalidate.js を自分のHTMLに読み込んで
下記の様に正規表現で表示するメッセージを指定するだけで利用可能．

- Source - JavaScript

Validator.register({
	"#mail" : {
	"/^([^@\\s]+)@((?:[-a-z0-9]+\\.)+[a-z]{2,})$/": "OK",
	"/^$/": "必ず入力してください",
	"/.*/": "正しいメールアドレスを入力してください" 
	}
});

- Source - HTML

<input name="mail" id="mail"/><span id="mail_msg"></span>

- Reference
masuidrive - Realtime validation using Ajax
http://masuidrive.jp/validation/
- via
masuidrive - 2006-01-05 - Realtime validation using Ajax
http://blog.masuidrive.jp/articles/2006/01/05/validation

カテゴリ: [JavaScript][Ajax]

内部リンク: [2006-01-16-1]

[ 固定リンク ]

2006-01-06 Fri

Effect.Transitions - script.aculo.usのEffectの変化曲線を変更する

- Summary
effect.jsに以下の記述がある．
これはEffectの変化曲線を設定している．
デフォルトの変化曲線はsinカーブと同じ．

Effect.Transitions.sinoidal = function(pos) {
	return (-Math.cos(pos * Math.PI) / 2) + 0.5;
}

Effectのコンストラクタでオプションにtransitionをセットすることで，
変化曲線を変更可能．

new Effect.Move( 'elementId', {
		x: 100,
		y: 100,
		transition : function ( pos ) {
		return Math.pow( pos, 2 );
	}
});

- Sample
Sample

- Reference
d.aql - scriptaculousのトランジション
http://d.hatena.ne.jp/aql/20051123/1132725850

カテゴリ: [JavaScript][script.aculo.us]

[ 固定リンク ]

2006-01-06 Fri

Lightbox JS - Web2.0ライクな画像サムネイル生成

- Summary
百聞は一見にしかず!
このメモと情報視覚化のページでさっそく利用してみた．

- How to use
1. lightbox.js を <head>内に記述．

<script type="text/javascript" src="lightbox.js"></script>

2. <a>タグに rel="lightbox" をつける．

<a href="path/to/image.jpg" rel="lightbox">
  <img src="path/to/image-thumbnail.jpg" />
</a>

- Reference
Lightbox JS
http://www.huddletogether.com/projects/lightbox/
- via
OpenStratus Archive - 2006-01-02
http://openstratus.com/article/52/lightboxjs-web20/

カテゴリ: [JavaScript]

[ 固定リンク ]

2006-01-04 Wed

JavaScriptのデバッグ方法

- Venkman JavaScript Debugger
FirefoxのExtention．

- JSUnit

メソッド	内容
assert([コメント], booleanValue)	assertTrueと同じ
assertTrue([コメント], booleanValue)	booleanValueがtrueか
assertFalse([コメント], booleanValue)	booleanValueがfalseか
assertEquals([コメント], value1, value2)	value1 == value2か
assertNotEquals([コメント], value1, value2)	value1 != value2か
assertNull([コメント], value)	value == nullか
assertNotNull([コメント], value)	value != nullか
assertUndefined([コメント], value)	value == undefinedか
assertNotUndefined([コメント], value)	value != undefinedか
assertNaN([コメント], value)	value == NaNか
assertNotNaN([コメント], value)	value != NaNか
fail(コメント)	必ずエラーにする

特殊なメソッド

setUp()	各テストケースメソッドが実行される前に呼び出される．各テストケースで毎回実行する初期化処理等を記述する．
tearDown()	各テストケースメソッドが実行された後に呼び出される．各テストケースで毎回実行する終了処理等を記述する．

- JavaScript Shell と Web Development Bookmarklets
FirefoxならBookmarkletから起動可能!
ものすごい大量にあるので一部紹介．
CSSを動的に切り替えるBookmarkletもある．

Built-in function (抜粋)

print(str)	strを表示
clear()	画面を消去

  - JavaScript Shell (Bookmarklet)

  - JavaScript Development Environment (Bookmarklet)

- JavaScript Code Improver
コード整形ツール．

  - 使用前

var i=0,s="",k=0;function foo(){for(j=0;j<10;j++){for(i=0;i<10;i++){s="string1";
k=Math.floor(Math.random()*10);}for(i=20;i>9;i--){s="string2";k=i;}}}

- 使用後

var i=0,s="",k=0;
function foo()
{
	for(j=0;j<10;j++)
	{
		for(i=0;i<10;i++)
		{
			s="string1";
			k=Math.floor(Math.random()*10);
		}
		for(i=20;i>9;i--)
		{
			s="string2";
			k=i;
		}
	}
}

- JavaScriptUnit
functionテストに．

ファイル名	説明
common.js	Cookie，XMLHttpRequest，ブラウザ判定関連
commontest.html	テスト用HTML
JavaScriptUnit.js	JavaScriptUnitの本体

メソッド名	説明
initTest()	テスト開始
showResult()	テスト終了，結果表示
assertEquals(テスト名,値1,値2)	等しいかどうかのテスト
assertTrue(テスト名,値)	Trueを返すかどうかのテスト
assertFalse(テスト名,値)	Falseを返すかどうかのテスト
fail(テスト名)	テスト失敗する
debug(メッセージ)	デバッグメッセージを記録(テスト失敗時のみ赤字で表示される)

- Web Developer
実行環境のコントロールに．

- objectdump
オブジェクトを見やすい形に表示する．

<div id="dumparea"></div>
<script src="objectdump.js"></script>
<script>
objectdump( window, document.getElementById( 'dumparea' ) );
</script>

- FireBug
Firefox で JavaScript を Debug するためのエクステンション

- DebugWindow

- print_r(obj)
ウノウラボより．

function print_r(obj) {
    var count_obj = 0;
    function _output(str) {
        document.writeln(str + "<br/>");
    }
    
    function _print_r(obj, name, level) {
        var s = "";
        if (obj == undefined || level > 4) return;
        for (var i = 0; i < level; i++) { s += " | "; }
        s += " - " + name + ":" + typeof(obj) + "=" + obj;
        _output(s);
        if (name == "document" || typeof(obj) != "object") return;
        for ( key in obj ) {
           if (count_obj++ > 150) return;
           _print_r(obj[key], key, level + 1);
        }
    }
    _print_r(obj, "*", 0);
}

- Reference
Venkman JavaScript Debugger - Development Page
http://www.hacksrus.com/~ginda/venkman/
Getahead - Venkman for Firefox 1.5
http://getahead.ltd.uk/ajax/venkman

JsUnit
http://www.edwardh.com/jsunit/introduction.html
SourceForge - JsUnit
http://sourceforge.net/projects/jsunit/

JavaScript Shell
http://www.squarefree.com/shell/

Web Development Bookmarklets
http://www.squarefree.com/bookmarklets/webdevel.html

JavaScript Code Improver
http://www.jcay.com/javascript-code-improver.html

侍ズム: JavaScript のテストのコツ
http://yusuke.homeip.net/diary/archives/000175.html

Firefox Extensions - Web Developer
https://addons.mozilla.org/extensions/moreinfo.php?id=60

nazoking - nazono.objectdump
http://nazo.yi.org/nazonojs/?name=objectdump
nazoking - nazono.objectdump - Overview
http://nazo.yi.org/nazonojs/js_docs_out/overview-summary-objectdump.js

JoeHewitt.com - FireBug
http://www.joehewitt.com/software/firebug/
Mozilla Update :: Extensions -- More Info:FireBug - All Releases
https://addons.mozilla.org/extensions/moreinfo.php?id=1843&application=firefox

eto.com/d - 0503 - DebugWindow
http://eto.com/d/0503.html#DebugWindow

- Reference 追記[2006-11-24]
ウノウラボ Unoh Labs: JavaScriptのバグを退治する3つの手法
http://labs.unoh.net/2006/11/javascript.html

- via
はてな - JavaScriptプログラマの方にお聞きします…
http://www.hatena.ne.jp/1123227040

nothing but trouble - JavaScript開発のお供に。
http://d.hatena.ne.jp/send/20060120/p2

- via 追記 [2006-08-24]
phpspot開発日誌 - 2006-08-24 - JavaScriptデバッグツール集
http://phpspot.org/blog/archives/2006/08/javascript_24.html

カテゴリ: [JavaScript][Stub]

内部リンク: [2006-01-19-10]

[ 固定リンク ]

2005-12-31 Sat

JSDoc - JavaScriptでJavaDoc風ドキュメントを

- Summary
JavaScriptのJavaDoc風ドキュメント生成ソフトウェア．
PerlとHTML::Templateが必要．
出力形式は，HTML,XML,XMI(UMLのXML形式)．

- Reference
JSDoc Homepage - JavaScript Documentation Tool
http://jsdoc.sourceforge.net/

HTML::Template

- via
MOONGIFT - JSDoc
http://oss.moongift.jp/intro/i-935.html

MOONGIFT - JSDoc レビュー - オープンソースによるIT戦略支援 -
http://oss.moongift.jp/review/i-960.html

カテゴリ: [Software][JavaScript]

[ 固定リンク ]

Color Reference

カテゴリ

最近の話題

リンク

過去ログ

QR Code