SQLの窓

2014年08月26日


IE8 までは、ブロック要素でなくても『page-break-after』は動作してました。というか、正式ドキュメントにそう書いてあります。

page-break-after

上のリンク先は、IE4 の時から存在するドキュメントですが、いまだにこう書いてあります。



記録として残そうと思って、画像にしました。

IEを使った業務アプリではたぶんこれを元に利用されていたと思いますが、IE11 の IE8 のエミュレートで動作しないので注意して下さい。ブロック要素でもどうせ改行するので、BR を変更するだけでいいと思います。(終了タグも必要になりますが)

最初のドキュメントよりちょっと新しい IE9 用の英文ドキュメントでは、BR と HR 以外の全ての要素で使えると書いてありますが、IE11 では使えていません。



タグ:IE トラブル
posted by lightbox at 2014-08-26 20:49 | IE | このブログの読者になる | 更新情報をチェックする

2013年12月01日


IE11 : 画像のフルスクリーン API

全画面 API

msRequestFullscreen method

ブラウザによって、フルスクリーン API の実装方法が違うようです。 IE11 では、画像に対して実行すると画像のサイズが引き延ばされます。外側に DIV を置いて DIV をフルスクリーンすると、画像サイズはそのままです。

Google Chrome では、画像に指定しても中央に表示されるだけで、Firefox は img 要素での実装はされていないようです。


<script type="text/javascript">
function imgFullScreen(obj) {
	if (obj.msRequestFullscreen) {
		obj.msRequestFullscreen();
	}
	else if (obj.mozRequestFullscreen) {
		obj.mozRequestFullscreen();
	}
	else if (obj.webkitRequestFullscreen) {
		obj.webkitRequestFullscreen();
	}
	else {
		alert("画像のフルスクリーンは実装されていません")
	}
}

</script>
<input type="button" value="FullScreen" onclick='imgFullScreen(document.getElementById("fs"));'><br>
<img id="fs"  src="https://lh4.googleusercontent.com/-1hrl6J4BkAI/UmfOlBCk8VI/AAAAAAAAQ08/2QbL_BEtAjA/s600/UrbanFuture3_1.jpg" style="border: solid 0px #000000" />



posted by lightbox at 2013-12-01 20:33 | IE | このブログの読者になる | 更新情報をチェックする

2013年11月22日


Windows7 用の IE11 がリリースされて、めでたく『WebGL』が使えるようになりました。

Windows7 用 IE11

Google Chrome と比べて完全というわけには行きませんでしたが、ほぼ Three.js のサンプルはなんとか動くようではあります。

リンク先は、少し大きめの幅で動かしています


以下は IFRAME です。テクスチャ画像を自サイトに置く都合でこのようになっています。
<script type="text/javascript" src="http://lightbox.in.coocan.jp/three/three.min57.js"></script>
<script type="text/javascript" src="http://lightbox.in.coocan.jp/three/OrbitControls.js"></script>
<script type="text/javascript" src="http://lightbox.in.coocan.jp/three/user_three.js"></script><div id="three_area" style='width:600px;height:400px;border: solid #000000 1px;'></div>

<script>

	var cameraCube, sceneCube;

	var w = 600;
	var h = 400;

	try {	

	// カメラ作成
	USER.camera = new THREE.PerspectiveCamera( 70, w / h, 1, 10000 );
	USER.camera.position.set( 0, 0, 1 );

	USER.camera2 = new THREE.PerspectiveCamera( 50, w / h, 1, 500 );
	USER.camera2.position.z = 0;

	// シーン作成
	USER.scene = new THREE.Scene();
	USER.scene2 = new THREE.Scene();

	// テクスチャの準備
	var path = "../threeimg/SwedishRoyalCastle/";
	var format = '.jpg';
	var urls = [
			path + 'px' + format, path + 'nx' + format,
			path + 'py' + format, path + 'ny' + format,
			path + 'pz' + format, path + 'nz' + format
		];

	// テクスチャの実装
	mesh = USER.meshPanorama(urls);
	USER.scene2.add( mesh );

	// レンダラー作成
	USER.renderer = new THREE.WebGLRenderer();
	USER.renderer.setSize( w, h );

	// 表示エリア設定
	document.getElementById("three_area").appendChild( USER.renderer.domElement );

	// コントロール作成
	USER.orbit();
	USER.controls.autoRotate = true;
	USER.controls.autoRotateSpeed = 0.5; //default 2.0

	// アニメーション開始
	USER.animate();

	}
	catch(e) {
		document.getElementById("three_area").innerHTML = "WebGL が使用できません";
		document.getElementById("three_area").style.height = "80px";
	}

// オーバーライド
USER.animate = function () {

	requestAnimationFrame( USER.animate );

	USER.camera2.rotation.copy( USER.camera.rotation );
	USER.camera2.position.copy( USER.camera.position );
	USER.controls.update();
	USER.renderer.render( USER.scene2, USER.camera2 );

}


</script>


やっとこれで、Three.js のコンテンツを作成する事ができます。( IE11 への移行はまだまだでしょうけれど )



インストールでは再起動が必要になります









F12 の開発者ツールの UI が大きく変わっています



特に、IE のバージョン違いの動作確認をする場所は画像の位置となります


関連する他のデモページ

Three.js : WebGL Cube テクスチャパノラマ背景の画像配置が解る表示

Three.js : Creative Commons の equirectangular パノラマ画像( WebGL )

Three.js : webgl_materials_cubemap_dynamic2(球テクスチャでパノラマ背景) の簡易化




posted by lightbox at 2013-11-22 17:18 | IE | このブログの読者になる | 更新情報をチェックする

2011年08月09日


HTTP ヘッダや META 要素に指定する、X-UA-Compatible による IEのドキュメントモードの変更

実際に遭遇して対処した事がありますが、

IE9 では動かない WEBアプリケーションの為に、IE8 のドキュメントモードで強制的に動かす為の META 記述

その時、Microsoft の正式文書をリンクするのを忘れていたので。

Defining Document Compatibility

さらに、可能な最高バージョンで表示する書き方として、以下のような書き方も紹介されていました

<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=5" >

同ページで、JavaScript でドキュメントモードを知る方法も書かれています
<script type="text/javascript">
engine = null;
if (window.navigator.appName == "Microsoft Internet Explorer")
{
   // This is an IE browser. What mode is the engine in?
   if (document.documentMode) // IE8 or later
      engine = document.documentMode;
   else // IE 5-7
   {
      engine = 5; // Assume quirks mode unless proven otherwise
      if (document.compatMode)
      {
         if (document.compatMode == "CSS1Compat")
            engine = 7; // standards mode
      }
      // There is no test for IE6 standards mode because that mode  
      // was replaced by IE7 standards mode; there is no emulation.
   }
   // the engine variable now contains the document compatibility mode.
}
alert(engine);
</script>


Document.compatMode




タグ:IE
posted by lightbox at 2011-08-09 14:53 | IE | このブログの読者になる | 更新情報をチェックする

2011年06月26日


IE 専用 : 「信頼済みサイト」でのみ行う、InternetExplorer.Application オブジェクト

通常の「インターネット」では行いません。「イントラネット」または、「信頼済みサイト」でのみ ActiveX を実行可能にして、WEB ページのデータを Excel のブックに転送して保存します。

業務アプリケーションとして、「運用ルール」がきちんと決められ、システム管理者が居られるとい前提で通常は利用されます。

▼ 以下、前提となる設定( 通常アプリケーションで設定します )




画像では、「localhost」ですが、イントラネットですと、単純にサーバー名になります
<?
header( "Content-Type: text/html; Charset=utf-8" );
header( "pragma: no-cache" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
header( "Cache-control: no-cache" )


?>
<!DOCTYPE html>
<html>
<head>
<neta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript">

var ie

window.onunload = quitIe;

function openIe() {

	if ( !ie ) {
		ie = new ActiveXObject("InternetExplorer.Application");
		ie.Width = 800;
		ie.Height = 600;
		ie.Left = 100;
		ie.Top = 100;
		ie.Visible = true;
	}

}
function quitIe() {

	if ( ie ) {
		ie.Quit();
		ie = null;
	}
}

function naviIe( str ) {

	if ( ie ) {
		ie.Navigate( str )
	}

}

function checkIe( ) {

	var result;

	if ( ie ) {
		result = ie.Document.getElementsByTagName("img")(0).src
		alert(result)
	}

}


</script>
</head>
<body>
<pre>
<input type="button" value="IEを開始する" onclick='openIe()'>
<input type="button" value="IEを終了する" onclick='quitIe()'>
<input type="button" value="SQLの窓へ" onclick='naviIe("http://winofsql.jp/")'>
<input type="button" value="処理" onclick='checkIe()'>

</pre>
</body>
</html>


Excel の操作とは違い、呼び出したページの操作を行うので、都合のよい JavaScript でオブジェクト操作を行っています。Navigate2 という POST できるメソッドがあるのでプログラムからの投稿も一応は可能だと思います



posted by lightbox at 2011-06-26 13:52 | IE | このブログの読者になる | 更新情報をチェックする

2011年06月06日


IE9 では動かない WEBアプリケーションの為に、IE8 のドキュメントモードで強制的に動かす為の META 記述

実際問題としては、Google の visualization API を使ったグラフ処理で起こったのですが、おそらく SVG の実装判断部分を Google が対応しなかったのでしょう。海外の Google 関連のフォーラムでしか目にできませんでしたが、たぶん使え無いような気がします。
<meta http-equiv="X-UA-Compatible" content="IE=8">

ですが、IE8 なら動くのです。

こちらがそのページ



タグ:トラブル IE8 IE9
posted by lightbox at 2011-06-06 22:18 | IE | このブログの読者になる | 更新情報をチェックする
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 ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり