memo.xight.org

JavaScript

2006-02-16 Thu

Canvas Graph library - canvas を使った JavaScript によるグラフ描画ライブラリ

- Reference
Announcement: new Javascript/Canvas Graph library
http://aslakhellesoy.com/articles/2006/02/09/announcement-new-javascript-canvas-graph-library
OpenSpace - HTMLタグリファレンス - <canvas>タグ
http://www.openspc2.org/HTML/appendix/canvas_param/title.html
- via
[戯] canvas を使った JavaScript によるグラフ描画ライブラリ
http://cl.pocari.org/2006-02-13-1.html

2006-02-07 Tue

Firefox 検索 Plug-in を追加する JavaScript

- Summary
クリックすると，Firefox に検索プラグインを追加するダイヤログが表示される．
Qooqle で発見した．
http://qooqle.jp/javascripts/firefox_plugin.js
- Source

function addEngine() {
	if ((typeof window.sidebar == "object") && (typeof window.sidebar.addSearchEngine == "function")) {
	window.sidebar.addSearchEngine(
		"http://xight.org/misc/firefox/searchplugins/xight.src",  /* engine URL */
		"http://xight.org/misc/firefox/searchplugins/xight.png",  /* icon URL */
		"memo.xight.org",                          /* engine name */
		"Web検索");                                /* category name */
	} else {
		alert("検索プラグインを使用するには Mozilla Firefox、Mozilla、または Netscape 6 以上が必要です。");
	}
}


<a href="javascript:addEngine();">Firefox に検索プラグインを追加</a>


- Sample
Firefox に検索プラグインを追加

- Reference
Qooqle
http://qooqle.jp/

2006-02-06 Mon

FCKEditor - WYSIWYG な HTML 編集ライブラリ

- Summary

<?php
	include "fckeditor.php";
	$fckObject = new FCKeditor( "edit_name") ;
	$fckObject->BasePath = "./";
	$fckEditorHtml = $fckObject->CreateHtml();
?>
<form method="post">
	<?= $fckEditorHtml ?>
	<input type="submit" value="send" />
</form>
<?= $_REQUEST['edit_name'] ?>


- イメージマネージャを利用する
fckconfig.js を編集
// var _FileBrowserLanguage    = 'asp' ;   // asp | aspx | cfm | lasso | perl | php | py
var _FileBrowserLanguage    = 'php' ;   // asp | aspx | cfm | lasso | perl | php | py
// var _QuickUploadLanguage    = 'asp' ;   // asp | aspx | cfm | lasso | php
var _QuickUploadLanguage    = 'php' ;   // asp | aspx | cfm | lasso | php


editor/filemanager/browser/default/connectors/php/config.php を編集
// SECURITY: You must explicitelly enable this "connector". (Set it to "true").
// $Config['Enabled'] = false;
$Config['Enabled'] = true;
 
// Path to user files relative to the document root.
// $Config['UserFilesPath'] = '/UserFiles/' ;
$Config['UserFilesPath'] = '/FCKeditor/UserFiles/' ;


% mkdir /var/www/FCKeditor/UserFiles


- XOOPSに組み込む
FCKeditor - xoopsに組み込む
http://www.geocities.jp/fckeditor/xoops.html



- FCKEditorクラスのメソッド
メソッド名 用途
FCKeditor コンストラクタ
Create FCKEditorを実行するHTMLを出力する
CreateHtml FCKEditorを実行するHTMLを返す
IsCompatible FCKEditorが使用できるかどうか調べる
GetConfigFieldString ConfigプロパティをFCKEditorに渡すパラメータ文字列に変換する（private的関数）

- FCKEditorクラスのプロパティ
プロパティ名 用途
$InstanceName インスタンスするフォーム要素名を指定する
$BasicPath FCKEditor本体のURLパスを指定する
$Width 表示するFCKEditorの幅をピクセル単位で指定する
$Height 表示するFCKEditorの高さをピクセル単位で指定する
$ToolbarSet 使用するツールバーの種類を指定する．デフォルトでは「default」と「Basic」がある
$Value FCKEditorのデフォルト文字列
$Config その他のFCKEditorの設定を配列で指定

- Reference
FCKeditor - The text editor for Internet
http://www.fckeditor.net/
- via
Writing/kiwameru_php_vol.1/wysiwyg-editor - よくきた wiki
http://wiki.poyo.jp/read/Writing/kiwameru_php_vol.1/wysiwyg-editor
cl.pocari.org - PHP で WYSIWYG な編集ライブラリ FCKEditor
http://cl.pocari.org/2006-01-23-2.html

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

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/

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

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

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/

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