SQLの窓

2014年06月29日


IE の占める割合の変遷と IE8 でないと動かないシステムの現実

元記事から3年弱経過しています。以下は最新ですが、IE の中ではいまだ IE8 が強いのが解ります。

以下は 2014/5 と 2014/6 の記事です。

双日システムズ、IE6互換ブラウザ「thinforie」がIE8にも対応
中京銀行、IE6互換ブラウザとThinAppを利用しWindows XPからの移行を実現

世の中の現実は、さすがに IE6 からは脱却はできそうな気がしますが、IE8 からの脱却はまだまだ先なのは間違い無いと思います。

2014/06
以下 2011/02 の記事
主に技術情報なので、一般のサイトとはそれぞれのブラウザの重みが違います。ただ、IE9 は 現実的には Windows7 用となるので、あまり伸びて来ないと思います。それで無くても IE6 と IE7 がこれだけ占有しているわけですし。

結局、アプリケーション作る立場からすると、また一つブラウザが増えただけの事で、IE6、IE7 の対応はしなくていいと思いますが、IE9 による動作確認は今後大きな課題となるような気がします。



posted by lightbox at 2014-06-29 11:45 | WEBブラウザ | このブログの読者になる | 更新情報をチェックする

2014年06月28日


Google Chrome : デベロッパーツールの table コマンドで、オプジェクトのプロパティをテーブル表示して Excel に貼り付ける

デベロッパーツールのコンソールだけで動く Command Line API というものがあります。

※ table コマンドは、console.table メソッドとしても利用できるので、ページ内からも実行できます
※ ここで使用する処理は、Firebug では動作しました。


(注意) ページに同名のメソッドがあると、そちらが優先されます。jQuery があると、$ は使用できないので注意して下さい。( 逆にその場合は jQuery を使えばいいのですが )

$0 - $4 は、Elemnts タブで選択したオブジェクトを履歴として記憶しています。( $0 が最新 )
$_ は、直前の処理結果の内容が記憶されています。
  1. $_
  2. $0 - $4
  3. $(selector)
  4. $$(selector)
  5. $x(path)
  6. clear()
  7. copy(object)
  8. debug(function)
  9. dir(object)
  10. dirxml(object)
  11. inspect(object/function)
  12. getEventListeners(object)
  13. keys(object)
  14. monitor(function)
  15. monitorEvents(object[, events])
  16. profile([name])
  17. profileEnd([name])
  18. table(data[, columns])
  19. undebug(function)
  20. unmonitor(function)
  21. unmonitorEvents(object[, events])
  22. values(object)
このコマンドは、オブジェクトのプロパティの一覧を縦の左端に置いて、列の内容は全てのプロバティにある全てのプロパティになるので、名前が同じプロバティは同じ列に表示されますが、無い部分は未定義として表示されるため、表示前に適当な構造にしておく必要があります。

▼ 単にオブジェクトのコレクションだと収拾がつかない



そこで、以下のようにコマンドラインで実行すると、意図した一覧を取得する事ができます。
var a = {};var b = $$("img"); for( i=0; i< b.length; i++ ){ a[i] = {}; a[i]["src"] = b[i].src; };table(a)
このコマンドをフリーの画像素材を提供している『足成』で実行してみました。



この結果をブラウザでドラッグして選択してコピーして Excel にテーブル形式で貼り付ける事ができます。



※ 列は、必要に応じて増やす事が可能です。



一行で記述しなくても、普通に以下のように記述して貼り付けて実行する事もできます。
var a = {};
var b = $$("img");
for( i=0; i< b.length; i++ ){
	a[i] = {};
	a[i]["src"] = b[i].src;
	a[i]["幅"] = b[i].width;
}
table(a)

$$ は、document.querySelectorAll() と同じであり、jQuery にも無いので使用しています。for の 一般的なループを使用しているのは、for in だとプロパティの一覧になる為、length 等のコレクションそのもののプロパティも対象になるので使用していません。

jQuery が使えるのであれば、以下のようにも記述できます
var a = {};
$("img").each( function(idx){
	a[idx] = {};
	a[idx]["src"] = this.src;
	a[idx]["幅"] = this.width;
});
table(a);

コンソール側では無く、デバッグの為にページのスクリプトとして記述する場合は以下のようになります。
(画像の場合は全て読み込まれていない場合は正しいサイズは取得できていない場合があります)
var a = {};
var b = document.querySelectorAll("img");
for( i=0; i< b.length; i++ ){
	a[i] = {};
	a[i]["src"] = b[i].src;
	a[i]["幅"] = b[i].width;
	a[i]["高さ"] = b[i].height;
}
console.table(a)




posted by lightbox at 2014-06-28 13:44 | Google Chrome | このブログの読者になる | 更新情報をチェックする

2014年06月27日


jQuery/JavaScript : 暗転ボタン

WEB ページ全体を暗い DIV で覆って操作できないようにして、その上に DIV を乗せてコンテンツを表示します。確実に DIV でページを覆うために、サイズは2倍にしていますが、iPhone 等のスマホで向きを変える場合など、イベント対応しない場合に有効です。

※ 暗転後のコンテンツの位置は、暗転を行うコントロールを基準に表示するようにしています。

IE 用の処理の中で、jQuery を使っていない部分がありますが、元々 DOM でテスト済みなのを jQuery でテストする意味もあまりなかった(古いIE用なので)のでそのままにしています。

<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>
<script>
// *********************************************************
// 暗転時に操作するウインドウの作成
// *********************************************************
$(function(){

	$("#win_base")
		.hide()
		.css({
			position: "absolute",
			color: "#000000",
			backgroundColor: "#E0E0E0",
			borderStyle: "solid",
			borderColor: "#303030",
			borderWidth: "1px",
			width: "0px",
			height: "0px",
			borderRadius: "6px",
			zIndex: 0x7fffffff
		});


	$("#win_base input")
		.attr("type", "image")
		.prop("src", "http://winofsql.jp/image/mcancel.png")
		.css("float", "right")
		.click(function(){
			$(this.parentNode).hide();
			$(window["dark_modal"]).remove();
		});
});

// *********************************************************
// 暗転時に操作するウインドウを target 基準の指定位置に表示
// *********************************************************
function setDark(target,x,y,w,h) {

	setDarkModal();

	var numY = target.offsetTop;
	var numX = target.offsetLeft;
	var obj = target;
	while( obj = obj.offsetParent ) {
		numY += obj.offsetTop;
		numX += obj.offsetLeft;
		if ( obj.tagName.toUpperCase() == 'BODY' ) {
			break;
		}
	}
	$("#win_base").css( "top", (numY+y) + "px" );
	$("#win_base").css( "left", (numX+x) + "px" );
	$("#win_base").css( "width", w + "px" );
	$("#win_base").css( "height", h + "px" );
	$("#win_base").show();
}

// *********************************************************
// 暗転用の DIV を作成
// *********************************************************
function setDarkModal(){
	var dark_modal = document.createElement('div');
	$(dark_modal)
		.attr('id','dark_modal')
		.css( {
			position: "absolute",
			width: Math.max(document.documentElement.scrollWidth,document.body.scrollWidth)*2+'px',
			height: Math.max(document.documentElement.scrollHeight,document.body.scrollHeight)*2+'px',
			left: "0px",
			top:  "0px"
		});
	var userAgent = window.navigator.userAgent.toLowerCase();
	if (userAgent.indexOf("msie") > -1) {
		$(dark_modal).hide();
		var appVersion = window.navigator.appVersion.toLowerCase();
		if (appVersion.indexOf("msie 10.0") > -1) {
			$(dark_modal).css({
				backgroundColor: "#000000",
				opacity: 0.5
			});
		}
		else {
			dark_modal.style.backgroundColor = '#000000';
			dark_modal.style.filter='alpha(opacity=50)';
		}
	}
	else {
		$(dark_modal).css({
			backgroundColor: "#000000",
			opacity: 0.5
		});
	}

	$("body").append(dark_modal);
	if (userAgent.indexOf("msie") > -1) {
		dark_modal.style.display = '';
	}

	window["dark_modal"] = dark_modal;
}
</script>

<input type="button" value="暗転ボタン" onclick='setDark(this,100,0,200,50);'>

<div id="win_base" style='display:none'><input>
<div id=win_box style='padding:2px;'>ここにコンテンツ</div>
</div>
関連する記事

JavaScript : zIndex の最大値と思われる 0x7FFFFFFF を各ブラウザでテストしました
JavaScript : クリックした要素の位置を計算して、近くにウインドウを開く
JavaScript : ブラウザの表示を半透明で暗くする方法( scrollHeight で高さ決定 )



タグ:javascript jquery
posted by lightbox at 2014-06-27 10:19 | 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 終わり