ブログで jQuery を使用するのに、全ての記事で使うわけでは無いので、記事毎でロードする

Google では、有名な JavaScript ライブラリは、バージョン別にホスティングされています。当然、jQuery もあるので普通に使っています。

<script>
if ( !window.jQuery ) {
	if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
		if ( window.addEventListener ) {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js';
		}
		else {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
		}
	}
	document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>");
}
</script>

普通のページでは、ページのヘッダに jQuery の読込みは終わっているという事を想定し、その場合はそちらを使うようになっています。もし、そのページで、その記事より前に jQuery が読み込まれていない場合のみ、この処理が実行されます。

その場合も、IE の環境では、バージョンによってうまく動かない事があったので、window.addEventListener があるか無いかで対象バージョンを分けています。その際の URL も、window[window.location.hostname+'.loadjQuery'] の内容を使っているので、この記事より前に意図的に URL を変更する事によって、そのバージョンの jQuery を使用できるようにしています。( 特定のバージョンで処理した場合を想定しています )

JavaScript による２会話アプリケーションのコントロール(2)

▼ pass1 開始 ボタンと pass2 開始 ボタンをクリックして下さい。

 
------------------------------




001
002

class 属性を使用して、会話グループ単位に使用可能にしたり使用不能にしたりします

<script type="text/javascript">
function passControl(idstr,pass,enable) {
	var x = window[idstr];
	for( var i = 0; i < x.length; i++ ) {
		if ( x[i].className == pass ) {
			if ( (x[i].tagName).toUpperCase() == 'INPUT' ) {
				if ( (x[i].type).toUpperCase() == 'TEXT' ) {
					if ( enable ) {
						x[i].readOnly = false;
						x[i].style.backgroundColor = "#DCF2F5";
					}
					else {
						x[i].readOnly = true;
						x[i].style.backgroundColor = "#ccc";
					}
				}
				if ( (x[i].type).toUpperCase() == 'BUTTON' ) {
					if ( enable ) {
						x[i].disabled = false;
					}
					else {
						x[i].disabled = true;
					}
				}
			}
			if ( (x[i].tagName).toUpperCase() == 'TEXTAREA' ) {
				if ( enable ) {
					x[i].readOnly = false;
					x[i].style.backgroundColor = "#DCF2F5";
				}
				else {
					x[i].readOnly = true;
					x[i].style.backgroundColor = "#ccc";
				}
			}
			if ( (x[i].tagName).toUpperCase() == 'SELECT' ) {
				if ( enable ) {
					x[i].disabled = false;
				}
				else {
					x[i].disabled = true;
				}
			}
		}
	}
}
function getFormEntry(idstr) {

	// 親要素
	var js_form = document.getElementById(idstr);

	// 配列
	var arr = new Array();

	// input
	var wk = js_form.getElementsByTagName("input");
	for( i = 0; i < wk.length; i++ ) {
		arr.push( wk[i] );
	}

	// textarea
	var wk = js_form.getElementsByTagName("textarea");
	for( i = 0; i < wk.length; i++ ) {
		arr.push( wk[i] );
	}

	// select
	var wk = js_form.getElementsByTagName("select");
	for( i = 0; i < wk.length; i++ ) {
		arr.push( wk[i] );
	}

	window[idstr] = arr;
	console.dir( window[idstr] );

}
</script>
<style type="text/css">
#js_form2 {
	width: 400px;
	padding: 20px;
	border: 1px solid #888;
	border-radius: 10px;
}
</style>
<input type="button" value="pass1 開始" onclick='passControl("js_form2","pass1",true);passControl("js_form2","pass2",false)'>
<input type="button" value="pass2 開始" onclick='passControl("js_form2","pass1",false);passControl("js_form2","pass2",true)'>
<br><br>
<pre id="js_form2">
<input type="text" id="in01" class="pass1"> <input type="button" id="bt01" value="第１会話ボタン" class="pass1">
------------------------------
<input type="text" id="in02" class="pass2">
<input type="text" id="in03" class="pass2">
<textarea id="tx01" class="pass2"></textarea>
<select id="cb01" class="pass2">
<option value="001">001</option>
<option value="002">002</option>
</select>

<input type="button" id="bt02" value="第２会話ボタン" class="pass2">
</pre>
<script type="text/javascript">
getFormEntry("js_form2");
</script>

関連する記事

JavaScript による２会話アプリケーションのコントロール(1)

JavaScript による２会話アプリケーションのコントロール(1)

以下のような画面から、まず対象となるコントロールとして、INPUT、TEXTAREA、SELECT の一覧を配列として取得します

 
------------------------------




001
002

getFormEntry("js_form"); で取得した配列は、window.js_form として参照可能です。( つまり、js_form というグローバルスコープの変数になります )

<script type="text/javascript">
function getFormEntry(idstr) {

	// 親要素
	var js_form = document.getElementById(idstr);

	// 配列
	var arr = new Array();

	// input
	var wk = js_form.getElementsByTagName("input");
	for( i = 0; i < wk.length; i++ ) {
		arr.push( wk[i] );
	}

	// textarea
	wk = js_form.getElementsByTagName("textarea");
	for( i = 0; i < wk.length; i++ ) {
		arr.push( wk[i] );
	}

	// select
	wk = js_form.getElementsByTagName("select");
	for( i = 0; i < wk.length; i++ ) {
		arr.push( wk[i] );
	}

	window[idstr] = arr;
	console.dir( window[idstr] );

}
</script>
<style type="text/css">
#js_form {
	width: 400px;
	padding: 20px;
	border: 1px solid #888;
	border-radius: 10px;
}
</style>
<pre id="js_form">
<input type="text" id="in01" class="pass1"> <input type="button" id="bt01" value="第１会話ボタン" class="pass1">
------------------------------
<input type="text" id="in02" class="pass2">
<input type="text" id="in03" class="pass2">
<textarea id="tx01" class="pass2"></textarea>
<select id="cb01" class="pass2">
<option value="001">001</option>
<option value="002">002</option>
</select>

<input type="button" id="bt02" value="第２会話ボタン" class="pass2">
</pre>
<script type="text/javascript">
getFormEntry("js_form");
</script>

関連する記事

JavaScript による２会話アプリケーションのコントロール(2)

JavaScript : Global な undefined 変数に絡むいろいろ

undefined プロパティ

上のリンクは、Microsoft のドキュメントですが、undefined という変数が最初から定義されていて、undefined という特殊な値が入っている事を意味します。

但し、この変数は内容を変更できてしまいますので、確実な値は void( 0 ) を使います。また、ブラウザでは Global オブジェクトと window オブジェクトは同じものであるという事も以下の例で確かめる事ができます。

さらに、定義済の変数は、直接 undefined という値で比較できまかすが、未定義の値は typeof(未定義変数) == 'undefined' という比較方法になります。

<script type="text/javascript">
// テスト用の alert
function alertx(message) {
	console.log(message);
//	alert(message);
}

try {
	// 定義済なので実行可能です
	alertx("定義した未設定の変数の中身 = " + undefined);
	// 未定義なのでエラーになります
	alertx(un_defined);
}catch(e){alertx("未定義変数の参照エラー = "+e.message)}

(function(){
	// 中身を書き換える事ができます
	// ※ ローカルからグローバルにアクセスしています
	window.undefined = "undefined 変数の書き換え";
	// un_defined を定義して、undefined 値をセット
	window.un_defined = void(0);
})();

// ローカルからセットした値が有効です
alertx("undefined の内容 = "+undefined);
alertx("un_defined の内容 = "+un_defined);

var x;
if ( x === un_defined ) {
	alertx("未設定の変数の中身は、void(0)の結果と同じ(定義済の変数とは比較可能)");
}

try {
	if ( y === un_defined ) {
		alertx("if で 未定義の y を参照してエラーになり、ここは実行されません");
	}
}catch(e){alertx("未定義変数の参照エラー = "+e.message)}

if ( typeof(y) == 'undefined' ) {
	alertx("未定義変数かどうかのチェックです");
}




</script>

簡易縦書き変換

縦書きに向かない文字をいくつか違う記号に変換します。
(Yahoo! ニュースを変換してテストしていました。)

一行の文字数
句点で改行を入れる
改行数
改行は自分で入れる

( 縦書き変換後の文字列を貼り付けて、改行を一つ入れると投稿可能になります )

し電　　る時り▲ィ前　　ると話晦ルモ電
て話そ　と間にや｜後各　べかが日コ、気
いのの　しにく▼チか社　くらつかムＫ通
る利た　てわくおャらに　控、なら、Ｄ信
。用め　いたなめ｜約よ　え▼が元イＤ事
　を、　るりるでフ３れ　るおり日｜Ｉ業
　一場　。配ことォ０ば　よめにに・、者
　時合　　信とうン分、　うでくかアソ協
　的に　　遅がメに間大　アとくけクフ会
　によ　　延予｜よは晦　ナうなてセト▼
　制っ　　が想ルる、日　ウコるのスバＴ
　限て　　発さ▲▼スか　ン｜こ約はンＣ
　すは　　生れがおマら　スルと２１クＡ
　るユ　　す、集め｜元　し・が時２モ▲
　こ｜　　るメ中でト日　たメ予間月バ、
　とザ　　可｜しとフの　。｜想は２イＮ
　も｜　　能ル、うォ午　　ルさ、５ルＴ
　あの　　性もつコン前　　▲れ携日、Ｔ
　る携　　が約な｜や０　　をる帯、ウド
　と帯　　あ２がルフ時　　なこ電大ィコ

http://headlines.yahoo.co.jp/hl?a=20131225-35041886-cnetj-sci

	text = text.replace(/[”“]/g, "●");
	text = text.replace(/[（【［｛『《≪]/g, "▼");
	text = text.replace(/[）】］｝』》≫]/g, "▲");
	text = text.replace(/「/g, "▼");
	text = text.replace(/」/g, "▲");
	text = text.replace(/…/g, "：");
	text = text.replace(/[ー〜]/g, "｜");

関連する記事

Twitter 縦書き intent

ブラウザの WebGL チェック : jQuery 名前空間へ変数($.is_webgl)追加

以下のチェック部分のコードは、実際に Three.js のデモで使われていたものです。再度検証していますが正しく動いています。しかし、将来的に正しく動作するかどうかは解らないので、document.implementation.hasFeature("webgl","") でチェックする方法もいずれは考慮する必要があるかもしれません。

document.implementation.hasFeature("webgl","") は、IE を含めた主要なブラウザで動作する事を確認はしていますが、Opera NEXT のみ実装と hasFeature が一致しない可能性があります。

<script>
if ( window[window.location.hostname+'.loadjQuery'] !== true ) {
	window[window.location.hostname+'.loadjQuery'] = true;
	if ( !window.jQuery ) {
		document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
	}
}
</script>
<script>
$.extend({
	is_webgl: (function() {
		try {
			return !! window.WebGLRenderingContext && !! document.createElement( 'canvas' ).getContext( 'experimental-webgl' ); 
		}
		catch( e ) {
			return false;
		}
	})()
});

console.log( $.is_webgl );
</script>