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