SQLの窓

2015年07月30日


IE11 の 互換表示機能に関するいくつかの問題

右上の歯車アイコンで開くメニューの中に、『互換表示設定』という項目がありますが、これは意図的にある条件にあてはまるページを IE7 互換で表示するものですが、その条件が大きく分けて2通りあります。

1) 登録したサイト
2) イントラネット

この 2) の条件は、IE11 が導入された当時チェックされていなかったと思います。先日久しぶりに IE11 にかかわるメンテをやっていたら、何故か IE7 互換になっていたので確認するとそうなっていました。他の PC も確認したので、これは Windows Update のどこかのタイミングで強制的にチェックが付いたと思われます。

▼ 他の方法で IE8 互換でテストしているのでチェックを外してあります


で、実はこのチェックをするかしないかで、サーバー側で受け取るユーザーエージェント文字列が違うという事実を確認しました。

X-UA-Compatible META要素 による設定



この設定は、HTML で指定する方法ですが、IE11 が IE8 コンパチブルにもかかわらず、サーバー側は IE11 扱いです。( POST しても同じ )
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=8">
</head>
<body>
<form>
<input type="submit" name="send" value="送信">
</form>
<img src="server.png" style='display:block;margin-top:10px;'>
<?php
print $_SERVER["HTTP_USER_AGENT"];
?>
<hr>
<img src="client.png" style='display:block'>
<script>
document.write(window.navigator.userAgent);
</script>
</body>
</html>

▲ デモページ

最初、こういう仕様なんだろうと思ったんですが、『互換表示設定』を行うと以下のようになります。



おそらく、IE11 移行時に想定していた対応策が、Microsoft 側で足並みが取れずにかつ後フォローもできていないとしか思え無いです。

結局、これ以外の方法は全てサーバー側では IE11 扱いになります。

X-UA-Compatible ヘッダーによる設定




F12 で手動変更




関連する Microsoft ドキュメント

F12 開発者ツール コンソール エラー メッセージ
X-UA-Compatible META タグをヘッダー内のできるだけ前の位置に移動します。"title" と charset の値の直後に配置することをお勧めします。
グループ ポリシーを使った Internet Explorer 11 の互換性の管理 ドキュメント互換性の定義 下の二つのドキュメントは、F12 で開く開発者ツールの『エミュレーション』タブのドキュメントモードの項目の右にある インフォメーションアイコンで開く英文ページから辿れる内容ですが、一つは英文でしか開かないという、適当対応が現状です。
タグ:IE トラブル
posted by lightbox at 2015-07-30 13:49 | IE | このブログの読者になる | 更新情報をチェックする

2015年07月29日


jQuery で、左右に並んだリストボックスの右側のデーターをダブルクリックしたら左へ転送してソートする処理

開発中です。旧システムの都合で、IE8 コンパチブルになっているので先頭の2行が必要になっていますが、最新の IEならば必要無いと思います( IE8 ではこれが無いと最初のダブルクリックが失敗する )

この後、左側のデータを全て送信する事になりますが、送信直前のイベント( onsubmit ) で、左のリストボックスを複数選択可に変更した後全て選択状態にします( PHP の場合は name="left[]" にしておきます )
<script>
// jQuery 初期処理
$(function() {

	// IE8 対応
	$("#right").focus();
	$("#right").prop("selectedIndex", 0);


	$("#right").on("dblclick", function(){

		var value = $(this).find(":selected").val();
		var text = $(this).find(":selected").text();

		$("#left").data("check",false);
		$("#left").find("option").each( function(){
			if ( $(this).val() == value ) {
				alert("既に登録されています");
				$("#left").data("check",true);
			}
		} );

		// 追加しない
		if ( $("#left").data("check" ) ) {
			return;
		}

		// ソートしない場合は、prependTo がベター
		$("<option>").val(value).text(text)
			.prependTo("#left");

		var selectList = $('#left option');

		selectList.sort(function(a,b){
			a = a.value;
			b = b.value;
			return a-b;
		});

		$('#left').html(selectList);
		
	});

});
</script>



タグ:jquery IE
posted by lightbox at 2015-07-29 17:23 | jQuery | このブログの読者になる | 更新情報をチェックする

2015年07月27日


スマホとPC で別の処理を記述できる jQuery のストリートビュープラグイン

スマホ対応をする為 userAgent の文字列を内部で使用していますが、StreetViewOnSh メソッドと StreetViewOnPc メソッドの引数としても再度渡しています。さらに、StreetView メソッドで作成した StreetViewPanorama クラスのインスタンスも引数として渡しているので、未実装の処理も追加で簡単に記述できます 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
$.fn.extend({
	StreetView : function(a,b){
		var pos = new google.maps.LatLng(a,b);
		// jQuery オブジェクトに StreetViewPanorama をセット(後で使用します)
		this
			.data( "pano", 
				new google.maps.StreetViewPanorama(
					this[0],
					{ position: pos }
				)
			);
		// プラグインの戻り値の無い処理の標準仕様として自分自身を返す
		return this;
	},
	// 向き	と 上下 の値をセットします
	StreetViewPov : function(a,b){
		var pov = {
			heading: a,  
			pitch: b 
		}
		// jQuery オブジェクトにセットした StreetViewPanorama を使用しています
		this.data( "pano" ).setPov(pov);
		// プラグインの戻り値の無い処理の標準仕様として自分自身を返す
		return this;
	}, 
	// 拡大率をセットします( 0 〜 5 / 小数以下あり )
	StreetViewZoom : function(a){
		// jQuery オブジェクトにセットした StreetViewPanorama を使用しています
		this.data( "pano" ).setZoom(a);
		// プラグインの戻り値の無い処理の標準仕様として自分自身を返す
		return this;
	},
	StreetViewOptions( a ) {
		// jQuery オブジェクトにセットした StreetViewPanorama を使用しています
		$( this ).data( "pano" ).setOptions(a);
		// プラグインの戻り値の無い処理の標準仕様として自分自身を返す
		return this;
	},
	StreetViewOnSh: function( callback ) {
		var ua = navigator.userAgent.toLowerCase();
		if ( ua.indexOf("iphone") > -1 || ua.indexOf("android") > -1 ) {
			(callback.bind(this,ua,this.data( "pano" )))();
		}
		return this;
	},
	StreetViewOnPc: function( callback ) {
		var ua = navigator.userAgent.toLowerCase();
		if ( ua.indexOf("iphone") <= -1 && ua.indexOf("android") <= -1 ) {
			(callback.bind(this,ua,this.data( "pano" )))();
		}
		return this;
	}
	

});

$(function(){
	$('#pano_40671578')
	.StreetView(40.671578,-73.962557)
	.StreetViewPov(-128,10)
	.StreetViewOnPc( function(userAgent,StreetViewPanorama){
		// PC の場合の処理
		this.css("width","600px");
		this.css("height","400px");

		// 追加のブラウザ判定に使用する
		console.log(userAgent);
		// 実装していない処理は、直接実行
		console.log(StreetViewPanorama.getPov())
	})
	.StreetViewOnSh( function(userAgent,StreetViewPanorama){
		// スマホ の場合の処理
		this.css("cssText","width:290px!important;height:290px!important");
		this.StreetViewZoom(2.5);

		// 追加のブラウザ判定に使用する
		console.log(userAgent);
		// 実装していない処理は、直接実行
		console.log(StreetViewPanorama.getZoom())
	})
	;

	// PC と スマホ 共通な場合
	$('#pano_40671578_b')
	.StreetView(40.671578,-73.962557)
	.StreetViewPov(-106.13,8.69)
	.StreetViewZoom(2.65)
	.StreetViewOptions({
		/* addressControl: false, */
		/* zoomControl: false, */
		/* panControl: false, */
		scrollwheel: false,
		disableDefaultUI: true
	})
	.css("width","600px")
	.css("height","480px")
	.css("margin-top","10px")
	;

});
</script>
<div id="pano_40671578"></div>
<div id="pano_40671578_b"></div>
スマホの処理として、表示サイズを強制的に変更する為に important を使用していますが、これは jQuery で important 設定する方法としてかなり前から公開されているもので、一度に全ての設定を行う必要があります。
	$('#pano_40671578')
	.StreetView(40.671578,-73.962557)
	.StreetViewPov(-128,10)
	.StreetViewOnPc( function(userAgent,StreetViewPanorama){
		// PC の場合の処理
		this.css("width","600px");
		this.css("height","400px");

		// 追加のブラウザ判定に使用する
		console.log(userAgent);
		// 実装していない処理は、直接実行
		console.log(StreetViewPanorama.getPov())
	})
	.StreetViewOnSh( function(userAgent,StreetViewPanorama){
		// スマホ の場合の処理
		this.css("cssText","width:290px!important;height:290px!important");
		this.StreetViewZoom(2.5);

		// 追加のブラウザ判定に使用する
		console.log(userAgent);
		// 実装していない処理は、直接実行
		console.log(StreetViewPanorama.getZoom())
	})
	;
実際問題スマホの環境では、さらに考慮すべき事項や、複雑なサイト環境によっては IFRAME を使わざるを得ない場合があり、簡単に行くとはかぎりませんが、場合を確実に分けて記述できるメリットはあると思います。


関連する記事
jQuery のプラグインとしてストリートビューを利用する

(callback.bind(this))(); で、無名 function で使用される this に this を引き継ぐ




posted by lightbox at 2015-07-27 15:08 | プラグイン作成(jQuery) | このブログの読者になる | 更新情報をチェックする

2015年07月23日


jQuery のプラグインとしてストリートビューを利用する

とにかく、ストリートビューは何かと面倒な事が多いので、jQuery の簡潔さでどの程度表現できるかやってみました。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
$.fn.extend({
	StreetView : function(a,b){
		var pos = new google.maps.LatLng(a,b);
		// jQuery オブジェクトに StreetViewPanorama をセット(後で使用します)
		$( this )
			.data( "pano", 
				new google.maps.StreetViewPanorama(
					$(this)[0],
					{ position: pos }
				)
			);
		// プラグインの戻り値の無い処理の標準仕様として自分自身を返す
		return this;
	},
	// 向き	と 上下 の値をセットします
	StreetViewPov : function(a,b){
		var pov = {
			heading: a,  
			pitch: b 
		}
		// jQuery オブジェクトにセットした StreetViewPanorama を使用しています
		$( this ).data( "pano" ).setPov(pov);
		// プラグインの戻り値の無い処理の標準仕様として自分自身を返す
		return this;
	}, 
	// 拡大率をセットします( 0 〜 5 / 小数以下あり )
	StreetViewZoom : function(a){
		// jQuery オブジェクトにセットした StreetViewPanorama を使用しています
		$( this ).data( "pano" ).setZoom(a);
		// プラグインの戻り値の無い処理の標準仕様として自分自身を返す
		return this;
	},
	StreetViewOptions( a ) {
		// jQuery オブジェクトにセットした StreetViewPanorama を使用しています
		$( this ).data( "pano" ).setOptions(a);
		// プラグインの戻り値の無い処理の標準仕様として自分自身を返す
		return this;
	}
});

$(function(){
	$('#pano1')
	.StreetView(40.671578,-73.962557)
	.StreetViewPov(-128,10)
	.css("width","600px")
	.css("height","400px")
	.css("margin-bottom","10px")

	$('#pano2')
	.StreetView(40.671578,-73.962557)
	.StreetViewPov(-106.13,8.69)
	.StreetViewZoom(2.65)
	.StreetViewOptions({
		/* addressControl: false, */
		/* zoomControl: false, */
		/* panControl: false, */
		scrollwheel: false,
		disableDefaultUI: true
	})
	.css("width","600px")
	.css("height","480px")
;

});
</script>
<div id="pano1"></div>
<div id="pano2"></div>
Google のサンプルはやたらと、オプションを一括で渡したがるので、とても解りにくいと思っていましたし、固定的で汎用性が無いかもしれませんが、これで十分なのでこのほうがいいかもしれません。
▼ ストリートビュー上のコントロールを排除して、マウスホイールによるズームを出来ないようにしています。
StreetViewOptions メソッドは、使用可能なオプションを後から設定しますが、ここで試しているようにいろいろな UI をキャンセルする場合に使用します。

heading と pitch と zoom は、こちらで動かしながら取得できます。画像だけで良い場合もこちらで URL を取得できます( 最後に設定変更ボタン )。




Google の API リファレンス

StreetViewPanorama class
Google Street View Image API
StreetViewPanoramaOptions



posted by lightbox at 2015-07-23 15:32 | プラグイン作成(jQuery) | このブログの読者になる | 更新情報をチェックする

2015年07月22日


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

プラグインとしては、一応 IE8、IE9、Chrome、Firefox、Opera、Safari で動作はしていますが、入力制限でうまく行かない場合があると洒落にならないので、実用としては考えていないコードです。

ただ、プラグインの考え方としては良く解りやすいと思います。対象となる入力フィールドに対して一括で jQuery で入力制限を行った上に、CSS で色とサイズと最大入力数も同時設定しています。

try 〜 catch が入って変な事になっているのは、IE8 に対応する為です。returnValue = false では、特にエラーになる事は無かったのですが(実際ではIEのみ実行にしたほうがよさそうです)、一応念のため。preventDefault は、IE8 以前ではエラーになるはずです。
<!-- 古いIE用に 1.9.1 を使用しています -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="numField" type="text">
<input class="numField" type="text">
<input class="numField" type="text">
<script>

// プラグインの作成( fn.extend )
$.fn.extend({ 
	numField: function(){
		$(this).on('keydown', function(evt) {
			// *********************************
			// 以下入力を受け付けるキーの処理
			// *********************************
			// 数字( 0〜9 )
			if ( 48 <= evt.keyCode && evt.keyCode <= 57 ) {
				return;
			}
			// テンキー( 0〜9 )
			if ( 96 <= evt.keyCode && evt.keyCode <= 105 ) {
				return;
			}
			// 矢印
			if ( 37 <= evt.keyCode && evt.keyCode <= 40 ) {
				return;
			}
			// DEL
			if ( evt.keyCode == 46 ) {
				return;
			}
			// タブ
			if ( evt.keyCode == 9 ) {
				return;
			}
			// バックスペース
			if ( evt.keyCode == 8 ) {
				return;
			}
			// *********************************
			// 以下入力を受け付けないキーの処理
			// *********************************
			// 古い IE 用
			if (navigator.userAgent.toLowerCase().indexOf("msie") > -1) {
				try{
					evt.returnValue = false;
				}catch(ex){}
			}
			try{
				// イベントがキャンセル可能である場合、
				// 上位ノードへのイベントの 伝播 (propagation) を止めずに、
				// そのイベントをキャンセルします。
				evt.preventDefault();
			}catch(ex){}
		});
		// プラグインの標準仕様として実行後は自分自身を返す
		return this;
	}  
});

// プラグインの実行
$(".numField").numField()
	.css({
		"background-color":"pink",
		"width":"70px"
	})
	.attr("maxlength",6);

</script>



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

2015年07月20日


jQuery でコンボボックスの選択されたオプションのテキストを取得する場合、optgroup を使っている場合は子孫選択でないと取得されないというお話 / find(子孫) と children(直近) の違い

要は、:selected Selector のお話です。

通常のコンボボックスですと、どちらでも正しく動きます。しかし、optgroup を使ってコンボボックス内に分類を作ってしまうと、option 要素の階層がが一つ深くなってしまうので選択した option 要素を取得できない事になります。

セレクタとして > を使う事はそもそもあまり無いですが、逆に必要な場合もあるので、メソッドの find(子孫) と children(直近) の違いとして覚えておくとイザという時に役に立つと思います

jQuery のコンボボックスの選択で調べると、たいていセレクタでのサンプルがヒットするのですが、.find で書いたほうが明確に意図を反映できると思うのです。(後々のメンテナンスの為に)

どうせ、onchange イベントでは $(this) から始まるので .find ですし 

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<select id="font" name="font">
	<option value="jiyunotsubasa">自由の翼フォント</option>
	<option value="kirieji" >切絵字1.0</option>

	<optgroup label="手書き">
		<option value="TanukiMagic" >たぬき油性マジック</option>
		<option value="setofont" >瀬戸フォント</option>
	</optgroup>

	<optgroup label="正統派">
		<option value="VL-PGothic-Regular" >VLゴシックフォントファミリ</option>
		<option value="ume-pgo4" >梅Pゴシック</option>
	</optgroup>

	<optgroup label="変化正統派">
		<option value="nukamiso_yamiyo_beta07" >ぬかみそ闇夜</option>
		<option value="kagamimoji-pgoth-v" >鏡文字Pゴシック-V</option>
	</optgroup>
</select>
<input type="button" value="子孫選択1" id="get_selected_text1">
<input type="button" value="子孫選択2" id="get_selected_text2">
<input type="button" value="チャイルド選択1" id="get_selected_text_child1">
<input type="button" value="チャイルド選択2" id="get_selected_text_child2">
<div id="result" style='padding:10px;border:1px solid #000;width:200px;'>
</div>
<div id="result2" style='padding:10px;border:1px solid #000;width:200px;'>
</div>
<script>
// 子孫選択( 正しい方法 )
$("#get_selected_text1").click(function(){
	alert( $("#font option:selected").text() )
});

$("#get_selected_text2").click(function(){
	alert( $("#font").find("option:selected").text() )
});

$("#font").change(function(){
	$("#result").text( $(this).find("option:selected").text() )
});

// チャイルド選択( ダメな方法 )
$("#get_selected_text_child1").click(function(){
	alert( $("#font > option:selected").text() )
});

$("#get_selected_text_child2").click(function(){
	alert( $("#font").children("option:selected").text() )
});

$("#font").change(function(){
	$("#result2").text( $(this).children("option:selected").text() )
});


</script>
表現方法で混乱します。子孫や Children とか、親子と parent とか言われるとごちゃごちゃになりそうです。ですから、この場合 find というメソッドがとても光って見えます
タグ:jquery select
posted by lightbox at 2015-07-20 13:54 | 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 終わり