画面系をやっていると見栄えのいいアイコンが欲しくなるのだがなんせ絵心が全く無い。
Web素材の検索をやってもリンクのページのたらい回しにあって全然辿りつかないし、
なんとか辿りついても趣味っぽい物ばかりでビジネス用途に使える物が無い。

そんな中で何とか見付けた実用的なフリーのアイコンセットを紹介します。

まずは、LED Icon Set。
16x16のアイコンが520個セットになってます。
アクリケーションで必要になりそうな物は一通り網羅されてます。

http://led24.de/iconset/


次が fatcow アイコンセット。
16x16と32x32のアイコンが合わせて1000個セットになってます。
こちらも必要な物はそろっていてさらに全てのアイコンが大小ペアになっているのが嬉しいです。

http://www.fatcow.com/free-icons/


ライセンスはどちらも Creative Commons です。

やっぱり、この手のアイコンを配置するだけで見栄えが全然違って来ますね。

他にもお勧めのアイコンセットがあれば教えて下さい。

テキストエディタで検索をやるべくSelectionを調べた。
JavaScriptでのSelectionの扱いは決っていないらしくIEとFirefoxで全然違う (;_;)

Firefox は極めてシンプル。
- textarea.selectionStart と textarea.selectionEnd プロパティに現在の選択位置が入る。
- textarea.setSelectionRange(s,e) で選択位置変更。
わっかりやすーい。

問題はIE、
- 選択範囲を持つクラス TextRange が有る。
- 現在の選択位置は document.selection.createRange() で取得。
- 選択位置の設定は TextRange.move() で移動させて TextRange.select() を呼ぶ。

問題なのは「textarea.value に対する絶対位置は取得／設定できない」仕様だと言うこと。
抽象化といえば聞こえは良いがめちゃくちゃ使いづらい。
検索に関しては TextRange.findText() 関数があるのでこれに任せる。

Firefoxにも問題があって選択位置を設定してもそこにスクロールしてくれない。
逆算して自前でスクロールさせる必要がある。


で、実際の検索関数がこんな感じ。ほとんど共通部分が無い...

	node.find = function(_this, direct) {


		var text = JSCP.getElementByClass(this, "JSCP_Editor_Text");


		var find = JSCP.getElementByClass(this, "JSCP_Editor_Find");





		if (text.createTextRange) { // for IE


			var range = this.getTextRange(text);


			if (range.text == find.value) {


				var position = (direct>0) ? "StartToEnd" : "EndToStart";


				range.setEndPoint(position, range);


			}


			var flag = 0x4;


				// 0x0=match partial words, 0x1=match backwards,


				// 0x2=match whole words only, 0x4=match case.


			var isFound = range.findText(find.value ,direct ,flag);


			if (isFound) range.select();


			return isFound;


		} else if (text.setSelectionRange) {


			if (direct > 0) {


				var pos = text.value.indexOf(find.value, text.selectionEnd);


				if (pos < 0) pos = text.value.indexOf(find.value, 0);


			} else {


				var pos = text.value.lastIndexOf(find.value, text.selectionStart-1);


				if (pos < 0) pos = text.value.lastIndexOf(find.value, text.value.length);


			}


			if (pos < 0) return false;





			text.setSelectionRange(pos, pos + find.value.length);


			var lineNum = text.value.substr(0,pos).split("\n").length;


			text.scrollTop = (lineNum-1) * this.LINE_HEIGHT;


			text.focus();


			return true;


		}


		return false;


	}


	node.getTextRange = function(text) { // for IE


		if (!text.textRange) text.textRange = text.createTextRange();


		return text.textRange;


	}

Subject: TEXTAREAで置換
Content-type: lovelog/text
Tags: JavaScript
Date: 2009/12/08
Public: yes

検索ができたら当然、置換もと言うことで調べた。

今度は逆にIEはめちゃくちゃ楽ちん。
TextRange.text に置換文字列を入れるだけ。

Firefox は textarea.value を２つに分けて置換文字列を挟んで書き戻す。
話はシンプルだがコードにするとなんか汚い。

で、関数にするとこんな感じ。やっぱり、ほとんど共通部分が無い..

	node.replace = function(_this, direct) {


		if (!this.find(_this, direct)) return false;


		var text = JSCP.getElementByClass(this, "JSCP_Editor_Text");


		var replace = JSCP.getElementByClass(this, "JSCP_Editor_Replace");





		if (text.createTextRange) { // for IE


			var range = this.getTextRange(text);


			range.text = replace.value;


		} else if (text.setSelectionRange) {


			var start = text.selectionStart;


			var part0 = text.value.substr(0, text.selectionStart);


			text.value = part0


				+ replace.value


				+ text.value.substr(text.selectionEnd);


			var lineNum = part0.split("\n").length;


			text.scrollTop = (lineNum-1) * 16; // line-height:16px;


			text.setSelectionRange(start, start+replace.value.length);


		}


		return true;


	}

Subject: TEXTAREAでTAB入力
Content-type: lovelog/text
Tags: JavaScript
Date: 2009/12/08
Public: yes

も一つ TEXTAREA で気に入らないのが TAB が入力できない事。
仕様的には TAB は表示も保証されないので仕方が無いけど現実問題として必要なんだよね。

ググってみたらやたらややこしいコードが出て来たんだけど自分で書いてみたら割とシンプルにできた。
やってる事は keydown イベントを拾って置換のテクでカーソル位置にTABを挿入するだけ。
但し、イベントの伝播を止め無いとフォーカスが移動しちゃんうんで注意。

関数はこんな感じ。

	// Ex. <textarea onkeydown="node.keydown(this, event)" >


	node.keydown = function(text, ev) {


		if (ev.keyCode != 9) return;  // TAB only.


		if (ev.preventDefault) {


			ev.preventDefault();


			ev.stopPropagation();


		}


		ev.returnValue = false;





		if (text.createTextRange) { // for IE


			var range = document.selection.createRange();


			range.text = "\t";


		} else if (text.setSelectionRange) {


			var top = text.scrollTop;


			var start = text.selectionStart;


			text.value = text.value.substr(0, text.selectionStart)


				+ "\t"	+ text.value.substr(text.selectionEnd);


			text.setSelectionRange(start+1,start+1);


			text.scrollTop = top;


		}


	}

今日のはまりです。
エクスプローラー風のファイル一覧表示を作ろうと思ってこんなコードを書いた。

<li>


  <nobr style="word-spacing:0px;" >


  <span onclick="JSCP.getJSCPNode(this).toggleDir(this,'<%= path%>')">


     <img src="images/led-icons/bullet_add_1.png"/>


     <img src="images/led-icons/bullet_del_2.png" style="display:none;"/>


  </span>


  <span onclick="dirTree.select('<%= path%>',this)"><%= names[i]%></span>


  </nobr>


  <span style="display:none;"></span></nobr>


</li>

処理関数はこんな感じでボタンが押されたら３つ目の<span>に<ul>～</ul>を埋め込んでネストさせる。

node.toggleDir = function(_this, path) {


	var tgt = JSCP.getChildren(_this.parentNode, "span")[2];


	var blet = JSCP.getChildren(_this, "img");


	if (tgt.style.display == "none") {


		tgt.style.display = "block";


		tgt.innerHTML = "<ul>"+thisMe({pathname: path}, tgt)+"</ul>";


		JSCP.activate(document.body);





		blet[0].style.display = "none";


		blet[1].style.display = "inline";


	} else {


		tgt.style.display = "none";


		tgt.removeChild(tgt.childNodes[0]);





		blet[0].style.display = "inline";


		blet[1].style.display = "none";


	}


}

で

tgt.innerHTML = "<ul>"+thisMe({pathname: path}, tgt)+"</ul>";

の所で「未知の実行時エラーです」が出た。
このエラーは大体
- 書き込み不可のタグに書き込み
- 代入HTMLの構文が間違っている
のどちらかなのだが今回はいくら調べてもどちらでも無い。

感でこうしてみたら動いた。

var ul = document.createElement("ul");


ul.innerHTML = thisMe({pathname: path}, ul);


tgt.appendChild(ul);

訳分からんけどまあいいやと思ったのだがこの記事を書くのにエラーを確認しようとしたら前のコードでも動く。
さらに訳分からん。

途中で修正したコードを思い出してしらべた所、<ul>を入れる<span>を<nobr>の外に出してあった。
ここのサイトでは<nobr>は書き込みOKになってるしそもそも書き込んでるのは<span>なんだよね。
http://www.drk7.jp/MT/archives/001314.html

まさに「未知のエラー」を踏んじゃったのか？



Subject: IEでULの下に空白行のできるバグ
Content-type: lovelog/text
Tags: JavaScript
Date: 2009/12/07
Public: yes

ファイル一覧で良く分からないバグが出てたんで記録。

<%


	var dir = ctx.pathname;


	if (dir == null) dir = eval(ctx.dirname);


	var names = Editor.getDirList(dir);


	if (names == null) names = [];


	var thisMe = arguments.callee;





	if (!node.toggleDir) {


		node.toggleDir = function(_this, path) {


			//var tgt = JSCP.getChildren(_this.parentNode.parentNode, "span")[0];


			var tgt = JSCP.getChildren(_this.parentNode, "span")[2];


			//var blet = JSCP.getChildren(_this, "img");


			if (tgt.style.display == "none") {


				_this.innerText = "-";


				tgt.style.display = "inline";


				var ul = document.createElement("ul");


				ul.innerHTML = thisMe({pathname: path}, ul);


				tgt.appendChild(ul);


				JSCP.activate(document.body);





				//blet[0].style.display = "none";


				//blet[1].style.display = "inline";


			} else {


				_this.innerText = "+";


				tgt.style.display = "none";


				if (tgt.childNodes.length>0) {


				tgt.removeChild(tgt.childNodes[0]);


				}


				//blet[0].style.display = "inline";


				//blet[1].style.display = "none";


			}


		}


	}


%>





<% for (var i=0; i<names.length; i++) { %>


<%     var path = dir+"/"+names[i]; %>


  <li><nobr>


    <span onclick="JSCP.getJSCPNode(this).toggleDir(this,'<%= path%>')">+</span>


    <span onclick="dirTree.select('<%= path%>',this)"><%= names[i]%></span>


    <span style="display:block;"></span>


  </nobr></li>


<% } %>

これでディレクトリを開くと１行分の空白ができる。



回避方法は

_this.innerText = "-"; を止める。

又は

３つ目の<span>をを display:inline; にする。

<span style="display:block;"></span>

又は

CSS で <li> に padding: 1px; を付ける。0pxではダメ。

.DirTree li {


	padding: 1px;


}

参考：http://css-bug.jp/win/ie/ver6/0161/

となる。

関連性が全く見出せない。
逆に言うとこの条件が揃わないと再現しないがはまったら簡単には抜け出せない。

Web用のテキストエディタを作成中なのだが１つはまっている。
IMGタグとINPUTタグを並べるとINPUTタグが下にずれる現象がFirefoxでのみ起こるのだ。

こんな感じ。


もちろん paddingやmargin、vertical-align 何かも試したが絶対ずれる。
IEはちゃんと横並びになる。



IEが正常でFirefoxがおかしいなんて滅多に無いのに～
普段使うのはFirefoxなんですっげー気になる。

誰か対処方知ってたら教えてー

自己、解決しました。
vertical-align の使い方を勘違いしていたみたいで親のDIVタグに設定してました。
INPUTタグに vertical-align:top を設定したらあっさり解決.. orz

なんかFireBugのコンソールに出ないエラーが有ってはまりまくった。

メニューバーのツール->エラーコンソールには出ているのにFireBugのコンソールに現れないエラーがある。
見掛け上はエラーも無いのにJavaScriptの実行が止まってしまうので訳が分からない。
はっと気づいてエラーコンソールを見てみたらJavaScriptのエラーだった。

当該位置で throw すればちゃんとFireBugの方にも出る。
単純にFireBugのバグだろうけどJavaScriptのデバッグはFireBugに頼りきっているのではまると抜けられない。

意味不明な挙動に当たったらエラーコンソールも確認する癖をつけとかないとまたはまりそう。

iframeを持つframeタグにbackとforwardのボタンを付けてみた。
普通に紹介されている方法は

frames[name].history.back();

だけどもWSJSの場合は無名のiframeなので

iframe.contentWindow.history.back();

とする必要が有った。
ま、大した話じゃ無いけど覚書。


Subject: Javaでのキャッシュ制御
Content-type: lovelog/text
Tags: java
Date: 2009/11/09
Public: yes

内部APIを決定するのにTODOにしてあったキャッシュ回りをやらなきゃいけない。
Javaはそもそもオブジェクトのサイズが分からないとかキャッシュ制御が難しい。
キャッシュにかかわるメモリの全体サイズが分からなかればキャッシュを破棄するタイミグすら掴めない。
今回はきちっとしたサイズを得るのは諦めてバッファ部分のみのサイズで処理するつもり。

せっかくなので自前のGDSFアルゴリズムでも作ってみる。
基本的なキャッシュ制御のパラメータは

- キャッシュヒット数
- キャッシュを保持するコスト(サイズ)
- リロードのコスト

ぐらいだけどHTTPの場合は 304応答があるのでチョットややこしい。
とりあえず方針としては

- 304でもキャッシュヒットとする。
- キャッシュのエントリのみを残しバッファは削除という状態を有りにする。
-- この状態でも304は返せる。
- それでもメモリが足りなければエントリも削除する。
-- よほど大量のコンテンツが無いとエントリの削除は意味が無いはず。

ぐらいかな。
で、大雑把な計算式。

- キャッシュヒット数 = アクセス数 / (現在時刻 - キャッシュ生成時刻);
- 保持コスト = バッファサイズ;
- リロードのコスト = Content-typeに依存;
- 基準スコア = キャッシュヒット数 / バッファサイズ;
- スコア = 基準スコア * リロードのコスト;

キャッシュヒット数は最近 n 時間の、とかもっとよさげだが今回はパス。

スコアでソートはコストが大きいので、スコアが平均値以下のキャッシュを破棄とする。
それを30%の空きができるまで繰り返す。普通なら１回で50%前後になる..のか？

...

この方向で実装してみた。何とかと動いているっぽいがテストとか性能確認とか大変そげ。