SQLの窓

2013年02月28日


IE のドメイン毎のクッキー削除


IE8もIE9 も開発者ツールの『キャッシュ』メニューより削除できます



ブラウザ全体の削除

CTRL + SHIFT + DEL で以下のダイアログを表示させて、クッキーのみをチェックして削除します。このチェック状態は保存されるので、次回の関連処理では再びチェックしなおす注意が必要です。



他のブラウザでのクッキーの削除

※ 個別の削除は結構皆面倒なので注意して下さい

■ Google Chrome
設定 => 詳細設定 => プライバシー => コンテンツの設定 => 全ての Cookieと サイトデータ => サイトを選択して右端の x をクリック

■ Firefox
オプション => プライバシー => Cookieを個別に削除 => サイトを選択して削除

■ Opera
設定 => 詳細設定 => Cookie => Cookie設定 => サイトを選択して削除

■ Safari
設定 => プライバシー => 詳細ボタン => サイト(クッキー)を確認して削除

関連する記事

IE、Firefox、Chrome、Opera、Safari のキャッシュ削除のショートカット
ブラウザ毎の「開発者ツール」の起動
IE、Firefox、Chrome、Opera、Safari で JavaScript を無効にする
ブラウザ別『Java 無効』



posted by lightbox at 2013-02-28 10:00 | IE開発者ツール | このブログの読者になる | 更新情報をチェックする

2013年02月27日


jQuery でかなり実用的かもしれない入力制限( 入力値復帰型 )

実用的と言っても以下の二つに比べての話で、見た目はいったん入力したものがフォーカス移動時に元にもどったり、キーで入力したものがいったん表示されて消えるといった見た目はあまり良いものではありません。

jQuery で、指定文字集合のみ入力可能なプラグイン
jQuery の簡単なプラグインを $.fn.extend で作成( 0〜9のみ入力可能なフィールド )

しかし、JavaScript ではここらへんが限界のような気もします。いずれにしても、『処理』として参考にするようなコードである事は間違い無いと思います。

要点

ここで最も重要なのは、『いつ入力前のデータを保存するか』です。ここでは、onfocus と、onkeydown と、onkeyup の3か所で保存しています。但し、それぞれ意味が違います。

❶ onfocus では、最初からフィールドに入っていたものを取得するのが目的で、フォーカスが移動すれば、再度フォーカスを得る直前にまた保存されます。

❷ onkeydown では、何かキーを押す直前の保存なので、一文字づつのチェックの為に使います。しかし、クリップボートから転送される場合には、ここは意味が無いので onfocus で取得済の文字列を使います

❸ onkeyup では、実際の入力文字が該当しない場合に拒否して、❷ で保存したものに戻しますが、うまく行った場合は、保存します。こうする事で、フォーカス移動の無い状態で入力の途中でクリップボードの貼り付けが使用された場合に、戻す文字列量を最小限にします。

データの保存

保存データは、.data を使って、jQuery 内部に保存します。attr を使うと、INPUT 要素に保存できるので、開発者ツールでデバッグがしやすくなるメリットはありますが、.data を使うと、オブジェクトとして保存できるので、拡張が容易になります。
<input class="numField" type="text" />
<input class="numField" type="text" />
<input class="numField" type="text" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">

$.fn.extend({ 
	allowField: function(str){
		// 対象文字集合を登録しておく
		$(this).data( "allowstr", str );
		$(this).bind('keyup', function() {
			var allowstr = $(this).data( "allowstr" );
			var cur = $(this).data( "cur" );
			var change = $(this).val();
			var char = null;
			for( var i = 0; i < change.length; i++ ) {
				char = change.substr( i, 1 );
				if ( allowstr.indexOf(char) == -1 ) {
					$(this).val(cur);
					return;
				}
			}
			$(this).data( "focus", $(this).val() );

		}).bind('change', function() {
			// ここの処理は、フォーカスがなくなった時にその中に1文字でも対象外
			// の文字が含まれていたら、直前の保存の状態に戻すので、極端な場合は
			// 全く空白になる事があり得ますので注意が必要です
			var allowstr = $(this).data( "allowstr" );
			var focus = $(this).data( "focus" );
			var change = $(this).val();
			var char = null;
			for( var i = 0; i < change.length; i++ ) {
				char = change.substr( i, 1 );
				if ( allowstr.indexOf(char) == -1 ) {
					$(this).val(focus);
					return;
				}
			}
		}).bind('keydown', function() {
			// 現在のデータを保存
			$(this).data( "cur", $(this).val() );
		}).bind('focus', function() {
			// 現在のデータを保存
			$(this).data( "focus", $(this).val() );
		});
		return this;
	}  
});

// プラグインの実行
$(".numField").allowField("1234567890ABCDEFabcdef-")
 .css("background-color", "#e0e0ff")
 .css("width","70px")
 .attr("maxlength",6);

</script>



タグ:jquery javascript
posted by lightbox at 2013-02-27 10:00 | プラグイン作成(jQuery) | このブログの読者になる | 更新情報をチェックする

2013年02月26日


jQuery で、指定文字集合のみ入力可能なプラグイン

プラグインのサンプルとして、keydown イベントのみを使って作成した以下のプラグインと基本的に行っている事は変わりません。

jQuery の簡単なプラグインを $.fn.extend で作成( 0〜9のみ入力可能なフィールド )

▲ と同様実用になるものではありませんが、簡易的な入力制限であれば今回の方法は効果的です。

keydown イベント

このイベントの主体はキーボードに並んでいるキーなので、ほぼ全てのキーが網羅されています。しかし、テンキーと本体での数字キーは別の個体なので、違ったキーが割リ当てられます。また、キー操作を伴うキーを判別できるので、厳密なコントロールができる反面、制御するコード量が多くなるわりに、日本語等を完全にコントロールできないのでメリットがあまりないかもしれません。

keypress イベント

このイベントの主体は、アプリケーションに送られる文字コードが主体です。この場合テンキーから送られる『1』と本体から送られる『1』は同じ『1』を表す数値なので、管理が容易です。しかし、日本語を入力する為に『漢字』キーを少しでもコントロールしようとすると、keydown イベントが必要になるので付加しています。

ですが、結局完全にコントロールはできずに、現実にはブラウザによって挙動が違います。

this について

allowField 内の this は、jQuery のオブジェクトですが、イベント内の this は DOM なので、常に jQuery の処理として見通しを良くする為に、いずれにも $(this) という表現を行っています。

入力可能文字について

この文字集合は、入力フィールド毎に設定されるものなので、attr で要素の属性としてプラグイン作成時に設定し、イベント発生時には DOM より jQuery オブジェクトを作成して attr で取得して対象文字かどうかを判断するようにしています。
<input class="numField" type="text" />
<input class="numField" type="text" />
<input class="numField" type="text" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">

$.fn.extend({ 
	allowField: function(str){
		// 対象文字集合を登録しておく
		$(this).attr("allowstr",str);
		$(this).bind('keypress', function(evt) {
			// なんらかの文字が割り当てられたキーを押した
			if ( evt.charCode != 0 ) {
				// 保存しておいた、対象文字集合を取り出す
				var allowstr = $(this).attr("allowstr");
				// 押された文字コードから実際の文字を作成する
				var nowstr = String.fromCharCode( evt.charCode );
				// その文字が対象文字集合に含まれていたら、関数を抜ける
				if ( allowstr.indexOf(nowstr) >= 0 ) {
					return;
				}
			
				// 対象文字集合に含まれない場合は、デフォルトの処理をキャンセル
				if (navigator.userAgent.toLowerCase().indexOf("msie") > -1) {
					try{evt.returnValue = false;}catch(ex){}
				}
				try{evt.preventDefault();}catch(ex){}
			}
		}).bind('keydown', function(evt) {
			// 漢字
			// IE9 と Chrome と Safari は拒否できるが、Chrome は漢字モードにはなってしまうので
			// 漢字モードを抜けないと何も入力できなくなる
			if ( evt.keyCode == 229 ) {
				if (navigator.userAgent.toLowerCase().indexOf("msie") > -1) {
					try{evt.returnValue = false;}catch(ex){}
				}
				try{evt.preventDefault();}catch(ex){}
			}
		});
		return this;
	}  
});

// プラグインの実行
$(".numField").allowField("1234567890ABCDEFabcdef-")
 .css("background-color", "#e0e0ff")
 .css("width","70px")
 .attr("maxlength",6);

</script>



タグ:javascript jquery
posted by lightbox at 2013-02-26 10:00 | プラグイン作成(jQuery) | このブログの読者になる | 更新情報をチェックする

2013年02月24日


jQuery の fn.extend メソッドと extend メソッド の違いは $(セレクタ) のメソッドとして実行できるかどうか ( extend の仕様について )

厳密には、prototype の意味が重要になるんですが、それを知っていてもあまり実用とは関係無いので事実だけを考えます。
jQuery.extend = jQuery.fn.extend = function() {
実際にはこのようなコードなので、処理そのものは同じですが、存在する場所が違うので jQuery からの処理を同じようにする事はできません。 fn.extend は、$(セレクタ) のメソッドとなる いわゆる、$(セレクタ) で作成されるオブシェクトは『インスタンス』で、常に prototype を継承して実体が作成されると考えるとしっくり来ます。しかし、extend メソッドでは $.メソッドとして実行できるようになります。よって、同様の処理を行う為には以下のコードのように全く違った実装をする必要があります。
<div id="box1"></div>
<div id="box2"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">

$.extend({ test1:function(a){ this(a).text("test1"); return this(a);}  })

$.fn.extend({ test2:function(){ this.text("test2"); return this;}  })

var x = $("#box1");

x.test2().css("background-color","#c0c0ff");
$.test1("#box2").css("background-color","#c0c0c0");

console.dir(x)

</script>

extend メソッドの仕様

使い方としては、3種類あります。一つは extend(object1,object2) という形で、object1 に object2 をマージするのですが、同じ名前を持つものは置き換えられてしまいます。また、object1 を省略した形は元のオブジェクトに object2 をマージするようです。( これを fn.extend で行うのが一般的なプラグイン作成 )

二つ目の使い方は、extend(true,object1,object2) という使い方で、単純な置き換えをせずにデータが処理されます。具体的には、jQuery のドキュメントを読むか、実際に試すといいと思います。

三つ目は、object = $.extend({}, object1, object2) というような形で、object1 を置き換えずに object に object1 に対して object2 をマージしたオブジェクトを作成する事ができます。



タグ:jquery javascript
posted by lightbox at 2013-02-24 10:00 | プラグイン作成(jQuery) | このブログの読者になる | 更新情報をチェックする

2013年02月23日


jQuery plugin カラーピッカー : ExColor (V 1.2) とその『バグ』

バグは、URL に大文字が含まれると、強制的に小文字にするようなので、部品の画像の参照が失敗します。

特徴

JavaScript 内から CSS を書き出しているので、外部 CSS が必要ありません。しかし、表示されるカラーピッカーは常に一つだけで、表示されている場合は BODY の最後にその時だけ追加されるため、常時表示する事はできないようです。

jsdo.it で実行
jsdo.it のサンプル実行コード公開ページ



ダウンロードページで、少しづつ見栄えを変える為のオプションを選択して、そのコードを見る事ができます。単純なアプリケーションなので、jQuery には 他にも多くのカラーピッカーがありますが、これで十分です。(サイトが消失していました) 違うものとなると、形状の違いで Farbtastic Color Picker を選ぶといいと思います。




その他のプラグイン

https://github.com/vanderlee/colorpicker 
http://www.digitalmagicpro.com/jPicker/
http://recurser.com/articles/2007/12/18/jquery-simplecolor-color-picker/
http://www.eyecon.ro/colorpicker/
http://www.syronex.com/software/jquery-color-picker
http://www.laktek.com/2008/10/27/really-simple-color-picker-in-jquery/

複数のフィールド

想像通り、INPUT 要素に class を指定して jQuery からセレクタで一回実行するだけで、全てのフィールドが Color Picker になります。


<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
}
if ( window[window.location.hostname+'.loadModcoder'] !== true ) {
	window[window.location.hostname+'.loadModcoder'] = true;
	document.write("<"+"script src=\"http://homepage2.nifty.com/lightbox/modcoder_excolor/jquery.modcoder.excolor.js\"></"+"script>");
}
</script>
<style type="text/css">
.color_field {
	width: 80px;
}
</style>
<div style='height:200px;'>
<input class="color_field" type="text" name="color_code1" />
<input class="color_field" type="text" name="color_code2" />
<input class="color_field" type="text" name="color_code3" />
<input class="color_field" type="text" name="color_code4" />
</div>


<script type="text/javascript">
$(".color_field").modcoder_excolor();
</script>

イベントは、OK ボタンを押した時のみ用意されていますが、イベント内で this を参照すると、実行時に指定したオプションの一覧になりますが、使用しているフィールドの情報は無いようなので、直接取りに行く必要があります。ですから、class 指定した場合は少し面倒かもしれません
<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
}
if ( window[window.location.hostname+'.loadModcoder'] !== true ) {
	window[window.location.hostname+'.loadModcoder'] = true;
	document.write("<"+"script src=\"http://homepage2.nifty.com/lightbox/modcoder_excolor/jquery.modcoder.excolor.js\"></"+"script>");
}
</script>
<style type="text/css">
.color_field {
	width: 80px;
}
</style>
<input id="color_field" type="text" name="color_code" />
<script type="text/javascript">
$("#color_field").modcoder_excolor({
	color_box : false,
	callback_on_ok : function() {
		$("body").css("background-color",$("#color_field").val());
	}
});
</script>




タグ:jquery javascript
posted by lightbox at 2013-02-23 10:00 | プラグイン:jQuery | このブログの読者になる | 更新情報をチェックする

2013年02月21日


$.extend メソッドで jQuery の中に処理を書いて、その中で使ったデータをグローバルで使えるようにする

重要な事

$.extend( object, object ) で、前のオブジェクトに後のオブジェクトが追加されます。ですから、前のオブジェクトに $ を指定し、後のオブジェクトに { メソッド名 : function(引数) {処理} } を指定すればいい事になります。

グローバル変数に使う

また、この extend では、単純な変数としての JSON オブジェクトに利用して、window.mydata = {} として空のオブジェクトをグローバルに作っておいて、jQuery の内部で処理したデータを extend メソッドで追加させます。

そうすると、(ここでは)後から mydata.ken と mydata.hour と mydata.browser で参照できる事になります。



<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
window.mydata = {};

$.extend( $, { myfunc: function( url, target, item ) {
		$.ajax({
		// javascript の実行分を書いたテキストを呼び出す
			url: url,
			cache: false,
			dataType: "json"
		}).done( function( result, textStatus, jqXHR ) {
			// result がそのまま JSON オブジェクトです
			$.extend( window.mydata, result );
			var op = null;
			for( var i = 0; i < result[item].length; i++ ) {
				op = document.createElement("option");
				$(op).append(result[item][i]);
				$(target).append(op);
			}
		});
	}
} );

$(function () {

	$.myfunc("http://lightbox.on.coocan.jp/ken.php", "#target1", "ken" );
	$.myfunc("http://lightbox.on.coocan.jp/hour.php", "#target2", "hour" );
	$.myfunc("http://lightbox.on.coocan.jp/browser.php", "#target3", "browser" );

	console.dir(mydata);

});

</script>

<select id="target1">
</select>
<hr />
<select id="target2">
</select>
<hr />
<select id="target3">
</select>

文法的に重要なところ

result[item] は、最初の処理では result.ken と同じ内容を参照をします。JavaScript のオプジェクトのプロパティの参照方法は、識別子として参照する方法と、["文字列"] という連想配列(のようなもの)として参照する方法があります。

ですから、後者では動的(文字列変数を使って)に JSON の内部を参照可能になります
ken.php
<?
header( "Access-Control-Allow-Origin: *" );
header( "Content-Type: text/plain; Charset=utf-8" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );

print '{"ken" : ["北海道","青森県","岩手県","宮城県","秋田県","山形県","福島県","茨城県","栃木県","群馬県","埼玉県","千葉県","東京都","神奈川県","新潟県","富山県","石川県","福井県","山梨県","長野県","岐阜県","静岡県","愛知県","三重県","滋賀県","京都府","大阪府","兵庫県","奈良県","和歌山県","鳥取県","島根県","岡山県","広島県","山口県","徳島県","香川県","愛媛県","高知県","福岡県","佐賀県","長崎県","熊本県","大分県","宮崎県","鹿児島県","沖縄県"]}';

?>

hour.php
<?
header( "Access-Control-Allow-Origin: *" );
header( "Content-Type: text/plain; Charset=utf-8" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );

print '{"hour" : ["1時間","2時間","3時間","4時間","5時間","6時間","7時間","8時間","9時間","10時間","11時間","12時間","18時間","19時間","20時間","21時間","22時間","23時間","24時間"]}';

?>

browser.php
<?
header( "Access-Control-Allow-Origin: *" );
header( "Content-Type: text/plain; Charset=utf-8" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );

print '{"browser" : ["chrome","firefox","ie6","ie7","ie8","ie9","ie10","safari","opera"]}';

?>

php を使用しているのは、Access-Control-Allow-Origin: * を出力する為で、これによって、別ドメインからのデータの読み込みを JavaScript( クライアント ) から可能になります。

ですから、IE8 や IE9 以外( それより前は論外 ) ならば、このコードを普通に実行して、データがセットされたコンボボックスを作成する事が出来るはずです。





posted by lightbox at 2013-02-21 10:00 | メソッド:jQuery | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり