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 メソッド | このブログの読者になる | 更新情報をチェックする

2013年02月20日


SQLExpress 内に存在する表の CREATE 文を取得する

SQL-DMO を使って VBScript で簡単に取得する事ができます。但し、SQL-DMO は最新の環境からは削除されています。
SQL Server データベース管理オブジェクト (SQL-DMO) は、SQL Server 2008 R2 Express および SQL Server 2008 R2 Feature Pack から削除されました
ですが、個別にインストールしてサポートできるようになっています。
Microsoft SQL Server 2005 の旧バージョンとの互換性コンポーネントSQL Server 下位互換パッケージには、最新バージョンの DTS (データ変換サービス) 2000 ランタイム、SQL 分散管理オブジェクト (SQL-DMO)、意思決定支援オブジェクト (DSO)、SQL 仮想デバイス インターフェイス (SQLVDI) が含まれています。これらのバージョンは SQL Server 2005 および SQL Server 2008 との互換性を維持するために更新されたもので、SQL Server 2000 Service Pack 4 (SP4) と SQL Server 2005 SP2 で配布されたすべての修正が含まれています。

対象: カスタマー、パートナー、開発者

X86 パッケージ (SQLServer2005_BC.msi)
X64 パッケージ (SQLServer2005_BC.msi)
IA64 パッケージ (SQLServer2005_BC.msi)
インストール時の選択 インストールするとすぐ利用可能になるので、以下のスクリプトを利用可能です。
' **********************************************************
' 変数定義
' **********************************************************
Dim Server : Server = "サーバ"
Dim Db : Db = "データベース"
Dim User : User = "sa"
Dim Pass : Pass = "パスワード"
Dim ListTable : ListTable = "TR_出席,TR_成績2,TR_成績3"
Dim List : List = Split( ListTable, "," )

Dim objServer,objDatabase,objTable,Fso,TargetFile

Set Fso = CreateObject( "Scripting.FileSystemObject" )

' **********************************************************
' オブジェクト作成
' **********************************************************
on error resume next
Set objServer = CreateObject("SQLDMO.SQLServer")
if Err.Number <> 0 then
	Wscript.Echo "SQL-DMO はインストールされていません"
	Wscript.Quit
end if
on error goto 0

' **********************************************************
' 接続
' **********************************************************
on error resume next
Call objServer.Connect( Server, User, Pass )
if Err.Number <> 0 then
	Wscript.Echo "接続に失敗しました [" & Err.Description & "]"
	Wscript.Quit
end if
on error goto 0

' **********************************************************
' データーベースオブジェクト取得
' **********************************************************
on error resume next
Set objDatabase = objServer.Databases(Db)
if Err.Number <> 0 then
	Wscript.Echo Err.Description
	Wscript.Quit
end if
on error goto 0

' **********************************************************
' テーブルオブジェクト
' **********************************************************
Set TargetFile = Fso.OpenTextFile( "定義ファイル.sql", 2, True )
on error resume next
For i = 0 to Ubound( List )
	Set objTable = objDatabase.Tables(List(i))
	if Err.Number <> 0 then
		Wscript.Echo Err.Description
		Wscript.Quit
	end if

	' 定義を一つ出力
	TargetFile.WriteLine objTable.Script()
Next
on error goto 0
TargetFile.Close()

' **********************************************************
' 切断
' **********************************************************
Call objServer.DisConnect()


CREATE 文は システムが出力しているので、作成した時と違った厳密な記述がされているので注意して下さい。

作成時

CREATE TABLE TR_成績3 (
	コード int,
	行1 varchar (20),
	行2 varchar (20),
	行3 varchar (20),
	行4 varchar (20),
	行5 varchar (20),
	行6 varchar (20),
	行7 varchar (20),
	行8 varchar (20),
	備考 varchar (1024),
	PRIMARY KEY (コード)
)
システムからの出力
CREATE TABLE [TR_成績3] (
	[コード] [int] NOT NULL ,
	[行1] [varchar] (20) COLLATE Japanese_CI_AS NULL ,
	[行2] [varchar] (20) COLLATE Japanese_CI_AS NULL ,
	[行3] [varchar] (20) COLLATE Japanese_CI_AS NULL ,
	[行4] [varchar] (20) COLLATE Japanese_CI_AS NULL ,
	[行5] [varchar] (20) COLLATE Japanese_CI_AS NULL ,
	[行6] [varchar] (20) COLLATE Japanese_CI_AS NULL ,
	[行7] [varchar] (20) COLLATE Japanese_CI_AS NULL ,
	[行8] [varchar] (20) COLLATE Japanese_CI_AS NULL ,
	[備考] [varchar] (1024) COLLATE Japanese_CI_AS NULL ,
	 PRIMARY KEY  CLUSTERED 
	(
		[コード]
	)  ON [PRIMARY] 
) ON [PRIMARY]
GO
タグ:SQL VBScript
posted by lightbox at 2013-02-20 15:00 | SQLExpress | このブログの読者になる | 更新情報をチェックする

prototype.js でブラウザの種類を知る為の簡単な拡張。

prototype.js の実装は、Google の 『Google Hosted Libraries』を使うのが簡単です。

Prototype.Browser のプロパティには、それぞれブラウザを示す名前が定義されていて、現在のブラウザには true がセットされているので、以下のようにすると文字列で『現在のブラウザ』を取得する事ができます。
<script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
<script type="text/javascript">
Prototype.Browser.current = (function() {
	for( var bt in Prototype.Browser ) {
		if ( Prototype.Browser[bt] ) {
			return bt;
		}
	}
	return "unknown";
})();

console.log(Prototype.Browser.current)

</script>
実際問題このような拡張をする必要は無いのですが、JavaScript のオブジェクトを知る上では簡単なサンプルです。このような考え方で、他のライブラリも拡張や変更できる場合がありますブラウザ判定だけが欲しい場合

以下は、prototype.js のオリジナルの 『Browserプロパティ』の内容ですが、prototype.js を使わなくてもブラウザ判定の処理が欲しい場合はこの部分だけをそのまま持って来ればいいと思います。
Browser: (function(){
    var ua = navigator.userAgent;
    var isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]';
    return {
      IE:             !!window.attachEvent && !isOpera,
      Opera:          isOpera,
      WebKit:         ua.indexOf('AppleWebKit/') > -1,
      Gecko:          ua.indexOf('Gecko') > -1 && ua.indexOf('KHTML') === -1,
      MobileSafari:   /Apple.*Mobile/.test(ua)
    }
  })()

▲ JavaScript文法としては、ソースコードからそのまま取って来たので多少の修正は必要です。


posted by lightbox at 2013-02-20 10:12 | prototype.js | このブログの読者になる | 更新情報をチェックする

2013年02月19日


jQuery ajax の JSON としての処理と SELECT エレメントの動的作成

jQuery を使った ajax の処理で、サーバー側からコンボボックスの内容を JSON として読みだして、SELECT 要素の中に動的に OPTION 要素を作成します。

dataType : "json"

もどされるデータがそのまま JSON オブジェクトとして jQuery 側で作成してくれていますので、グローバルな変数として window.mydata = result; を実行して再利用可能にしています。

まず、エレメントを作成してから jQuery のオブジェクトに変換して処理しています。

▼ op は DOM のエレメント
op = document.createElement("option");

▼ $(op) は、jQuery のオブジェクト
$(op).attr("value", i+1);

▼ OPTION要素にテキストノードを追加
$(op).append(window.mydata.ken[i]);

▼ SELECT 要素に DOM エレメントを追加
$("#target1").append(op);

最後に、jQuery を使って、コンボボックスの任意のデータを選択状態にしています。これは、一般的な記述で書くと、documnet.getElementById("target1").selectedIndex = 27 になります。

もうひとつのコンボボックス

比較の為に、県のデータを JavaScript の変数として直接定義して処理しています。

<style type="text/css">
#target1 {
	width: 200px;
	border-radius: 6px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {

	$.ajax({
	// javascript の実行分を書いたテキストを呼び出す
		url: "http://lightbox.on.coocan.jp/ken.php",
		cache: false,
		dataType: "json"
	}).done( function( result, textStatus, jqXHR ) {
		// result がそのまま JSON オブジェクトです
		window.mydata = result;
		var op = null;
		// 空のオプション( 文字列を使用 )
		$("#target1").append("<option value='0'></option>");
		for( var i = 0; i < window.mydata.ken.length; i++ ) {
			op = document.createElement("option");
			$(op).attr("value", i+1);
			$(op).append(window.mydata.ken[i]);
			$("#target1").append(op);
		}

		// JavaScript 用プロパティなので、attr で実行するとエラー 
		$("#target1").prop("selectedIndex",27);
		// $("#target1").get(0).selectedIndex = 27; // DOM を使う場合

	});
});

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

$( function() {
	var op = null;
	// 空のオプション( 文字列を使用 )
	$("#target2").append("<option value='0'></option>");
	for( var i = 0; i < window.myData2.ken.length; i++ ) {
		op = document.createElement("option");
		$(op).attr("value", i+1);
		$(op).append(window.myData2.ken[i]);
		$("#target2").append(op);
	}

	// JavaScript 用プロパティなので、attr で実行するとエラー 
	$("#target2").prop("selectedIndex",1);
	// $("#target2").get(0).selectedIndex = 1; // DOM を使う場合

});


</script>
<select id="target1">
</select>
<hr />
<select id="target2">
</select>
jsdo.it での実行
jsdo.it でのソースコード

以下はコンボボックス用のデータをクロスドメインで呼び出す事を想定しているコードです。このコードを使うには、IE は IE10 である必要があります。
<?
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" : ["北海道","青森県","岩手県","宮城県","秋田県","山形県","福島県","茨城県","栃木県","群馬県","埼玉県","千葉県","東京都","神奈川県","新潟県","富山県","石川県","福井県","山梨県","長野県","岐阜県","静岡県","愛知県","三重県","滋賀県","京都府","大阪府","兵庫県","奈良県","和歌山県","鳥取県","島根県","岡山県","広島県","山口県","徳島県","香川県","愛媛県","高知県","福岡県","佐賀県","長崎県","熊本県","大分県","宮崎県","鹿児島県","沖縄県"]}';

?>

Access-Control-Allow-Origin: * によってクロスドメインが可能になりますが、XMLHttpRequest で処理するには IE は IE10 である必要があります。IE9(IE8) でクロスドメインの呼び出しは、XDomainRequest を使用する必要があります。

IE9(IE8) は、インターネットの設定(「ドメイン間でのデータソースのアクセス」を有効)を行うと、無条件にクロスドメインの処理ができるようになります。但し、その場合でも jQuery を使う場合は $.ajax を実行する前に $.support.cors = true を実行する必要があります。
関連する記事 prototype.js でクロスドメインの Ajax の読み込みテスト
タグ:jquery AJAX
posted by lightbox at 2013-02-19 14:31 | jQuery + Ajax | このブログの読者になる | 更新情報をチェックする

2013年02月18日


prototype.js でクロスドメインの Ajax の読み込みテスト

Opera が動くようになっていたので更新しました

表示は、console.log で行っています。各ブラウザの開発者ツールを開いた状態でボタンをクリックして下さい。
IE : F12 => スクリプトタブ ( その後ページをリロード )
Firefox : Firebug のコンソール
Chrome : F12( または CTRL + SHIFT + I )からコンソール
Safari : CTRL + ALT + I からコンソール
Opera : CTRL + SHIFT + I からコンソール
結局 IE8 用に prototype.js を改造するはめになりました。テストした URL は、「Access-Control-Allow-Origin: *」 を返すようにしていますが、prototype.js 内で、ヘッダーを変更している為、セキュリティ回避の為、そのままでは エラーになるのでsetRequestHeaders を無効にしています。( 偽装を拒否する為のようです )
IE8 の場合、インターネットオプションで、「ドメイン間でのデータソースのアクセス」を有効にしてやると、Access-Control-Allow-Origin が無くても XMLHttpRequest でアクセスできるようになります。Access-Control-Allow-Originの有無で制御したい場合は、XDomainRequest を使用する必要があります

但し、XDomainRequest は、XMLHttpRequestとでは、イベントに互換性が無いようなのでこのような変更が必要になります。
<script type="text/javascript" src="http://lightbox.on.coocan.jp/prototype_x.js"></script>
<script type="text/javascript">
Ajax.Request.prototype.setRequestHeaders = function() {}
function testCall() {
new Ajax.Request('http://lightbox.on.coocan.jp/ver.php', {
	method: "get",
	asynchronous: true,
	onComplete: function(response) {
		console.log(response.responseText);
	}
});
}

</script>
<input type="button" value="実行" onclick='testCall();'>

以下は変更部分です
var Ajax = {
  getTransport: function() {
    return Try.these(
      function() {return new window.XDomainRequest()},
      function() {return new XMLHttpRequest()},
      function() {return new ActiveXObject('Msxml2.XMLHTTP')},
      function() {return new ActiveXObject('Microsoft.XMLHTTP')}
    ) || false;
  },

  activeRequestCount: 0
};
--------------------------------------------
      if ( Prototype.Browser.IE ) {
          var ieparam1 = this.options.onComplete;
          var ieparam2 = this.transport;
          this.transport.onload = function() { ieparam1(ieparam2) };
      }
      else {
          this.transport.onreadystatechange = this.onStateChange.bind(this);
      }

関連する記事

prototype.js を クロスドメイン対応にするパッチ
Google の prototype.js を使う

▼ クロスドメインで呼び出されるコード
<?
header( "Access-Control-Allow-Origin: *" );
header( "Content-Type: text/javascript; Charset=shift_jis" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );

$ver = phpversion();
print "document.write( '$ver' );";

?>

旧更新日付 : 2011-04-16



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

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

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

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

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


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

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

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

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

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


Windows
container 終わり

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

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり