Tags

Recent Entries

Recent Comments

Recent Trackback

Feeds

More Links


タグ:「javascript」の記事一覧

リスト内の上下のLI要素をそっくり入れ替え

[Permalink] [Post to del.icio.us] [Post to hatena] [Post to livedoorClip]
します。
JavascriptのDOM関係のメソッドでまんまのがあるかと思って調べたんですがどうもなさそうなのでメモ。

/*
* @引数 li 移動させるリスト要素
* @引数 d 移動方向(up / down)
*/
function moveTo(li, d) {
d = (d=='down') ? 1 : -1;
var ul = li.parentNode;
var lis = ul.getElementsByTagName('li');
for(var i=0,l=lis.length; l>i; i++)
if(lis[i]==li){ var c = i; break; }
if(c+d<0||c+d==l) return true;
var a = [lis[c].cloneNode(true), lis[c+d].cloneNode(true)];
ul.replaceChild(a[1], lis[c]);
ul.replaceChild(a[0], lis[c+d]);
}


<ul>
<li>
リスト1
<input type="button" onclick="moveTo(this.parentNode, 'up');" value="上へ" />
<input type="button" onclick="moveTo(this.parentNode, 'down');" value="下へ" />
</li>
<li>
リスト2
<input type="button" onclick="moveTo(this.parentNode, 'up');" value="上へ" />
<input type="button" onclick="moveTo(this.parentNode, 'down');" value="下へ" />
</li>
<li>
リスト3
<input type="button" onclick="moveTo(this.parentNode, 'up');" value="上へ" />
<input type="button" onclick="moveTo(this.parentNode, 'down');" value="下へ" />
</li>
</ul>

みたいな感じで使えます。
Posted by: simpraight at 2007/02/14 10:51:20 | Tags: [javascript] | Comments:768 | Trackbacks:0

cumulativeOffsetって

[Permalink] [Post to del.icio.us] [Post to hatena] [Post to livedoorClip]
prototype.jsの「Position.cumulativeOffset」って引数は要素オブジェクト限定なのね。要素IDじゃだめ。
Posted by: simpraight at 2006/12/25 10:07:41 | Tags: [javascript] [嵌る] | Comments:1 | Trackbacks:0

改行コードで嵌る。

[Permalink] [Post to del.icio.us] [Post to hatena] [Post to livedoorClip]
textareaにinnerHTMLで放り込んだときの改行コードの扱いで嵌った。どうやってもIEで改行してくれない。
ていうかFAQですかコレは。

下記ページで解決。こういった風に簡潔にまとめてくれている人がいると非常に助かります。
Collection & Copy - 改行コード、pre、textarea
pre要素内の文字を変更する際、改行コードの扱いが各ブラウザで異なるようなので以下コードで調べました。
Posted by: simpraight at 2006/12/04 19:53:44 | Tags: [javascript] [嵌る] | Comments:32 | Trackbacks:0

複数のJavascriptファイルを圧縮して出力するSmartyプラグイン

[Permalink] [Post to del.icio.us] [Post to hatena] [Post to livedoorClip]
つくりました。

とりあえずプラグインのソース。
<?php
/*
* Smaryプラグイン # JavaScriptファイルを圧縮してファイルを生成しファイルを出力
*
* @params array $params パラメータ
* @params object $smarty 親Smartyオブジェクト
* @return string scriptタグ
*/
function smarty_function_build_javascript($params, &$smarty)
{
if(!is_array(($smarty->_file_js))) return "<!-- No input files. -->";
$output = '';
foreach($smarty->_file_js as $js){ $output .= "\n".file_get_contents($js); }
$outfile = "script/build/".md5($output).".js";
if($params['output']=='file' && is_file($outfile))
return "<script type='text/javascript' src='{$outfile}'></script>";
// compress
$p = array(
"/[\r\n]+/", "/^[\s\t]*\/\/.+$/m", "/\/\*.+?\*\//s",
"/([\{\(\[,;=\?:\-\+\/\*])\n+/", "/[\s\t]*([\{\(\[,;=\+\*-<>\|\&\?\:!])[\s\t]*/", "/\n\}/","/(\})\n(return)/",
"/^[\s\t]+/m", "/[\s\t]+$/m", "/[\s\t]{2,}/",
);
$r = array (
"\n", "", "",
"$1", "$1", "}","$1$2",
"", "", "",
);
do{$output=preg_replace($p,$r,$output);}while($output!=preg_replace($p,$r,$output));
if($params['output']=='file') {
$fp = @fopen($outfile, "w+");
if(!$fp || !fwrite($fp, $output)) return "<!-- Error -->";
fclose($fp);
return "<script type='text/javascript' src='{$outfile}'></script>";
} else{
return "<script type='text/javascript'>".$output."</script>";
}
}

使い方は以下のような感じでSmartyのクラスを作成した上で、
<?php
class extSmarty extends Smarty{
var $_file_js;
function extSmarty (){
$this->_file_js = array();
// 以下は環境設定。説明は省略
$this->template_dir = SMARTY_TEMPLATE_DIR;
$this->config_dir = SMARTY_CONFIG_DIR;
$this->compile_dir = SMARTY_COMPILE_DIR;
$this->cache_dir = SMARTY_CACHE_DIR;
$this->left_delimiter = SMARTY_LEFT_DELIM;
$this->right_delimiter = SMARTY_RIGHT_DELIM;
// プラグインを登録
$this->register_function('build_javascript' ,'smarty_function_build_javascript');
}
/**
* Javascriptファイルを追加
*
* @param string $script SCRIPTファイル名
*/
function addJs($js){
if(is_array($js)) foreach($js as $v) $this->addJs($v);
if(is_file($js)) $this->_file_js[] = $js;
}
}

メインプログラムからは以下のように記述し、
<?php
$tpl = new extSmarty();
$tpl->addJs('script/prototype.js');
$tpl->addJs('script/moo.fx.js');

$tpl->display('example.tpl');

テンプレートファイルに以下のように書けばおk。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-script-type" content="text/javascript; charset=UTF-8" />
<meta http-equiv="content-style-type" content="text/css; charset=UTF-8" />
<base href="http://.../" />・・・①
<title>example</title>
<{build_javascript output=file}>・・・②
</head>
<body>
...
</body>
</html>

①・・・「<base href="~">」を設定しておいた方が階層深くなっても対応できて無難です。
②・・・Smartyのデリミタは基本的に「<{~}>」に設定して使っています。「output=file」をのけるとファイルを生成せずに<script>~</script>に出力します。


とりあえず取得した内容のmd5を取り、変更がある場合だけファイルを再生成するようにしています。
この方法だと、「script/build」内に古いファイルがどんどん溜まっていくわけですが・・・なんとかなりませんかね。
Posted by: simpraight at 2006/12/04 12:36:13 | Tags: [php] [javascript] [tips] | Comments:17 | Trackbacks:0

PHPでJavascriptを圧縮する

[Permalink] [Post to del.icio.us] [Post to hatena] [Post to livedoorClip]
簡単な関数でJavascriptの圧縮をします。
ネットワーク負荷の気になる環境下では基本的にmod_deflate使ってる場合が多いのでgzip圧縮は既に導入済み。であれば、あとは正規表現使って不要な改行や空白などを除去し少しでも元のスクリプトファイルを軽量化するくらいのものです。

軽量化したものは同時に難読化されてしまうので開発環境下では元のファイルを使用して、本番環境では圧縮したファイルを使えるようにSmartyプラグインを作成しておくと結構嬉しいです。(あとで作る)

サンプル→PHPでJavascriptを圧縮する

function jsCompresser($js){
$p = array(
"/[\r\n]+/",
"/^[\s\t]*\/\/.+$/m",
"/\/\*.+?\*\//s",
"/([\{\(\[,;=])\n+/",
"/[\s\t]*([\{\(\[,;=\+\*-<>\|\&\?\:!])[\s\t]*/",
"/\n\}/",
"/^[\s\t]+/m",
"/[\s\t]+$/m",
"/[\s\t]{2,}/",
);
$r = array (
"\n",
"",
"",
"$1",
"$1",
"}",
"",
"",
"",
);
do{$js=preg_replace($p,$r,$js);}while($js!=preg_replace($p,$r,$js));
return $js;
}
Posted by: simpraight at 2006/12/02 17:16:36 | Tags: [php] [javascript] [tips] | Comments:1,162 | Trackbacks:1

Content-typeで嵌る。

[Permalink] [Post to del.icio.us] [Post to hatena] [Post to livedoorClip]
× Content-type: text/javascript; charset=utf8

○ Content-type: text/javascript; charset=utf-8

IEに対してJSON返す場合に上のようなスペルミスではresponseText出来なくなる。1時間嵌った。

参考:JSONとContent-Type
Posted by: simpraight at 2006/11/22 14:38:59 | Tags: [javascript] [嵌る] | Comments:3 | Trackbacks:0

Javascriptで入力規制

[Permalink] [Post to del.icio.us] [Post to hatena] [Post to livedoorClip]
何となく入力規制が出来るように作ってみました。
フォームに入力される内容をある程度規制する為に何となく使えます(要prototype.js)
<script type="text/javascript">
var InputControl = Class.create();
InputControl.prototype = {
initialize: function(){
this._els = []; this._rls = {}; this._stk = {};
Event.observe(window, 'load', this.setEvent.bind(this));
},
setEvent: function(){
var e = this._els;
var l = e.length;
for(var i=0;l>i;i++) {
this._stk[e[i]] = $(e[i]).value;
Event.observe(e[i], 'keyup', this.checkValue.bindAsEventListener(this));
}
},
addRule: function(el, rule){
el = (typeof(el)=='string') ? el : el.id;
if(el){
this._els.push(el);
this._rls[el] = rule;
}
},
checkValue: function(e){
var e = e || window.event;
var el = e.target || e.srcElement;
if(!el.value.match(this._rls[el.id])) el.value = this._stk[el.id];
else this._stk[el.id] = el.value;
}
}
</script>

使い方は簡単で、例えば以下みたいなフォームを用意して
月:<input type="text" id="month" name="month" /><br />
日:<input type="text" id="date" name="date" /><br />
ユーザID:<input type="text" id="userid" name="userid" /><br />
パスワード:<input type="password" id="userpass" name="userpass" />(8文字以内)

<script...>~</script>内に以下みたいな感じで記述すると、
var con = new InputControl();
con.addRule('month', /^([1-9]|1[0-2])?$/);
con.addRule('date', /^([1-9]|[1-2][0-9]|3[01])?$/);
con.addRule('userid', /^[0-9a-zA-Z]*$/);
con.addRule('userpass', /^[0-9a-zA-Z]{0,8}$/);

addRuleの正規表現で指定した内容以外の入力が無効になります。

 →sample

ある程度汎用性を持たせた感じで正規表現を記述する必要があるので細かい判定には向いておらず、結局最終的なチェックはサーバサイド行う必要はありますが、入力ミスなどによるエラーはある程度防止出来るような気がします。
Posted by: simpraight at 2006/11/20 11:53:13 | Tags: [javascript] [tips] | Comments:291 | Trackbacks:0

GoogleMapsの経路表示用スクリプト

[Permalink] [Post to del.icio.us] [Post to hatena] [Post to livedoorClip]
ちょっと仕事で使いそうだったので作りました。

GoogleMapsAPIで経路作成

クリックで経路の座標を選択していって、「create」で経路が表示されます。
ついでに再利用可能なように経路表示用のスクリプトを生成するようにしています。

この辺とか
Encoded Polylines
この辺とか
Encoded Polyline Algorithm Format
見た感じ、Encoded_Polylines使ってやる方がどうもオシャレな感じがします。

●参考
GPolyline.fromEncoded(hPod)
Encoding polylines for Google Maps
Posted by: simpraight at 2006/11/16 16:49:35 | Tags: [javascript] [api] | Comments:2 | Trackbacks:0