SQLの窓

2014年09月25日


prototype.js (1.7.2) : Browser プロパティ

ソースコードの先頭にあります。

IE11 では、IE プロパティは false になります

ですが、IE11 になって、他の仕様も他のブラウザと同等になりつつあるので、IE10 以前の特殊な処理を対象とするならば、このプロパティは役にたつでしょう。
  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)
    }
  })()


posted by lightbox at 2014-09-25 15:18 | prototype.js | このブログの読者になる | 更新情報をチェックする

2013年02月20日


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

2011年01月24日


prototype.js で使っていたのをさらに短縮した IE かどうかの判断。

prototype.js が内部で使っているブラウザの判定は、
Prototype.Browser プロパティで行いますが、個別のブラウザで判断せずに
仕様別で判断しています。( 内部で使う為ですし )

ですが、もちろん外部からも使えるわけです。ただ実装がちょっと変わっていて、
Prototype.Browser という プロパティに 無名 function の 戻り値をセット
していて、しかもその戻り値がオブジェクトになっているので、IE かどうかは、

if ( Prototype.Browser.IE ) {
	// IE の処理
}

というふうに判定します。
その他の種別として、Opera、WebKit、Gecko、MobileSafari となります。

その中の IE の判定が結構重要なので、prototype.js が無くても使えるように
考えてみたのが以下の記述です。
!!window.attachEvent && !window.opera


posted by lightbox at 2011-01-24 17:31 | prototype.js | このブログの読者になる | 更新情報をチェックする

2010年06月15日


Google の prototype.js を使う

ホスティングについてはGoogle Hosted Librariesから確認します
1.6.1.0
<script	type="text/javascript" src="http://www.google.com/jsapi" 
 charset="utf-8"></script>
<script	type="text/javascript">
google.load("prototype", "1.6.1.0");
</script>

1.7.0.0
<script	type="text/javascript" src="http://www.google.com/jsapi" 
 charset="utf-8"></script>
<script	type="text/javascript">
google.load("prototype", "1.7.0.0");
</script>



タグ:prototype.js
posted by lightbox at 2010-06-15 23:45 | prototype.js | このブログの読者になる | 更新情報をチェックする

prototype.js 内の getElementsByName の代わりになるメソッド

そもそも、getElementsByName 無いので、無いと思っていたのですが、
Form 単位で input 要素限定でもっといろいろ使えますが、id に name
 をセットして $ で直接参照したほうが早いとは思います。

関連する記事

prototype.js で、$(id) 関数が name 属性のみの場合 IE 以外で使えるようにする
<FORM
	id="frm"
	name="frm"
	method="POST"
>
	<INPUT
		type="submit"
		name="send"
		value="送信"
	>
	<INPUT
		type="text"
		name="fld1"
	>
	<INPUT
		type="button"
		name="js"
		value="check"
		onClick='
			alert( Form.getInputs("frm","","fld1")[0].value )

			var frm = $("frm");
			alert( frm.getInputs("","fld1")[0].value );
		'
	>
</FORM>

フォーム経由の参照なので、画面内の構成が明示されるのはいいと思いますが、
フォームそのものには結局 id が必要になりますから、通常の WEB アプリで
さほど便利だとは思えません。

空文字の引数は、type="タイプ" の文字列を指定するので、 getElementsByName
 の使用目的からすれば必要は無く、単に name で参照できると言う他は差はあり
ません。やはり、

($$("INPUT")).each(function(Element){Element.setAttribute("id",Element.name)}); 

するほうがいいと思います


タグ:prototype.js
posted by lightbox at 2010-06-15 23:35 | prototype.js | このブログの読者になる | 更新情報をチェックする

2010年06月12日


prototype.js : $ 関数

引数が複数の場合は、全ての引数に対して $ 関数を実行して結果を配列にセット
して、配列自身を戻します。引数が一つの場合、文字列の場合のみ、getElementById
でオブジェクト化した上で、prototype.js の Element クラスのインスタンスとして
拡張します。元々getElementById 等で取得されていたオブジェクトの場合も同様に
拡張され、prototype.js の Element クラスのインスタンスが引数の場合のみ何も
しません。

( If the element instance was already extended, this is a no-op )
function $(element) {
  if (arguments.length > 1) {
    for (var i = 0, elements = [], length = arguments.length; i < length; i++)
      elements.push($(arguments[i]));
    return elements;
  }
  if (Object.isString(element))
    element = document.getElementById(element);
  return Element.extend(element);
}



タグ:prototype.js
posted by lightbox at 2010-06-12 22:16 | prototype.js | このブログの読者になる | 更新情報をチェックする

prototype.js : 1.6.1と1.7_rc2 の evalJSON の違い

厳密に何が変わったのかは知りませんが、かなり XSS に神経質になっているのかもしれませんね。

Always set the sanitize parameter to true for data coming from
 externals sources to prevent XSS attacks.

元々、常に、str.evalJSON(true) という呼び出しして下さいって事になっていますが、それは常に入力値に対して無防備な文字列を通す場合です。ですが、true にしていて何も悪い事は無いのでしたほうがいいですね

ただ、1.7_rc2 では相当何かテコ入れしているようなのですが・・・イマイチマニュアルには書かれていないようなのです。( 当たり前と言えば当たり前ですが )

何なんでしょう。
1.6.1
  function evalJSON(sanitize) {
    var json = this.unfilterJSON();
    try {
      if (!sanitize || json.isJSON()) return eval('(' + json + ')');
    } catch (e) { }
    throw new SyntaxError('Badly formed JSON string: ' + this.inspect());
  }

1.7_rc2
  function evalJSON(sanitize) {
    var json = this.unfilterJSON(),
        cx = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g;
    if (cx.test(json)) {
      json = json.replace(cx, function (a) {
        return '\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
      });
    }
    try {
      if (!sanitize || json.isJSON()) return eval('(' + json + ')');
    } catch (e) { }
    throw new SyntaxError('Badly formed JSON string: ' + this.inspect());
  }



タグ:prototype.js
posted by lightbox at 2010-06-12 21:43 | prototype.js | このブログの読者になる | 更新情報をチェックする

2010年02月28日


JavaScript : prototype.js(1.6.1) の Try.these と XMLHttpRequest

var Try = {
	these: function() {
		var returnValue;

		for (var i = 0, length = arguments.length; i < length; i++) {
			var lambda = arguments[i];
			try {
				returnValue = lambda();
				break;
			} catch (e) { }
		}

		return returnValue;
	}
};

XML の HTTP 通信を行う為のオブジェクトを取得する為のメソッドとしてしか
使用していないようなのですが、使い方としては引数に無名関数を並べて、
その中でオブジェクトを新規作成するコードを書いて return させています。
その結果、最初に存在するオブジェクトを返すという処理になります。

実際は以下のように使われています
var Ajax = {
	getTransport: function() {
		return Try.these(
			function() {return new XMLHttpRequest()},
			function() {return new ActiveXObject('Msxml2.XMLHTTP')},
			function() {return new ActiveXObject('Microsoft.XMLHTTP')}
		) || false;
	},

	activeRequestCount: 0
};

一つ目は、Mozilla 系のブラウザ用で、二つ目が IE 用。
三つ目は相当古い Windpos 用でほぼ使われないはずです。
ですから、自分で XML の HTTP 通信のオブジェクトを取得
したい場合は、IE かそうでないかで普通に取得すればいいと思います


posted by lightbox at 2010-02-28 18:34 | prototype.js | このブログの読者になる | 更新情報をチェックする

2009年09月03日


prototype.js の Object.extend でプロパティを追加する

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">

// String オブジェクトにメソッドを追加
Object.extend(String.prototype, {
	myFunc1: function(url) {
		alert("<a href=\""+url+"\">"+this.valueOf()+"</a>");
	},
	myFunc2: function( str ) {
		alert("|"+this.valueOf()+"|");
	},
	blank: function( ) {
		return /^[\s_]*$/.test(this);
	}
} );

</script>
<INPUT type=button value="実行1" onClick='"SQLの窓".myFunc1("http://winofsql.jp");'>
<INPUT type=button value="実行2" onClick='(location.toString()).myFunc2();'>
<INPUT type=button value="実行3" onClick='alert(" _ ".blank());'>

String.prototype に追加しているので、文字列では常に利用可能になります。
prototype.js では、既にこの方法で追加済みで、ここではそのうちの blank を
上書きしています。この場合は、_ も空白扱いになります。


関連する記事
JavaScript : オブジェクトとインスタンスとプロパティの継承


posted by lightbox at 2009-09-03 17:32 | prototype.js | このブログの読者になる | 更新情報をチェックする

prototype.js で、$(id) 関数が name 属性のみの場合 IE 以外で使え無いのをとりあえず使えるようにする


// *********************************************************
// 関数
// *********************************************************
function doAction( strValue ) {

	($$("INPUT")).each(function(Element){Element.setAttribute("id",Element.name)});
	($$("TEXTAREA")).each(function(Element){Element.setAttribute("id",Element.name)});

	var str = "";
	for (variable in window) {
		str += ( variable + "\n");
	}

	alert( isDate($("inField").value) )
	$("inText").value = str;

	return true;
}

9/1 で、prototype.js が、1.6.1 になっていますが、この部分は変わらないようです。

IE では、name 属性の記述のみでも、id 属性は自動的に作成されて( 逆も同じ )常に $(id) 関数は使えるのですが、Mozilla ではそうはいかないので、とりあえず、全ての入力関係の name を id にセットします。( 実際は、select 要素も必要ですが )

とは言うものの、殆ど使う場面は無いと思いますが、いろいろテストする時に、少しは楽になると思います。


タグ:prototype.js
posted by lightbox at 2009-09-03 00:58 | 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 ドロップシャドウの参考デモ
PHP正規表現チェッカー
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり