SQLの窓

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

2010年04月16日


IEのセキュリティゾーン関連のレジストリエントリ

肝心の部分が Microsoft のサイトで崩れてしまっているので、テーブルで整形しました。
1001ActiveX コントロールとプラグイン: 署名された ActiveX コントロールのダウンロード
1004ActiveX コントロールとプラグイン:未署名の ActiveX コントロールのダウンロード
1200ActiveX コントロールとプラグイン:ActiveX コントロールとプラグインの実行
1201ActiveX コントロールとプラグイン:スクリプトを実行しても安全だとマークされていない ActiveX コントロールの初期化とスクリプトの実行
1206その他:Internet Explorer WebBrowser コントロールのスクリプトの実行
1207予約済み番号 #
1208ActiveX コントロールとプラグイン:前回使用されなかった ActiveX コントロールを警告なしで実行するのを許可する
1209ActiveX コントロールとプラグイン:スクリプトレットの許可
120AActiveX コントロールとプラグイン:ActiveX コントロールとプラグイン:サイトごと (ドメインベース) の ActiveX 制限のオーバーライド
120BActiveX コントロールとプラグイン:サイトごと (ドメインベース) の ActiveX 制限のオーバーライド
1400スクリプトの実行:アクティブ スクリプト
1402スクリプトの実行:Java アプレットのスクリプト
1405ActiveX コントロールとプラグイン:スクリプトを実行しても安全だとマークされている ActiveX コントロールのスクリプトの実行
1406その他:ドメイン間でのデータ ソースのアクセス
1407スクリプトの実行:スクリプトによる貼り付け処理の許可
1408予約済み #
1601その他:暗号化されていないフォーム データの送信
1604ダウンロード:フォント ダウンロード
1605Java の実行 #
1606その他:UserData の常設 ^
1607その他:異なるドメイン間のサブフレームの移動
1608その他:ページの自動読み込み * ^
1609その他:混在したコンテンツを表示する *
160Aその他:サーバーにファイルをアップロードするときにローカル ディレクトリーのパスを含める
1800その他:デスクトップ項目のインストール
1802その他:ファイルのドラッグ/ドロップ、またはコピー/貼り付け
1803ダウンロード:ファイルのダウンロード
1804その他:IFRAME のプログラムとファイルの起動
1805WebView のプログラムとファイルの起動 #
1806その他:アプリケーションと安全でないファイルの起動
1807予約済み ** #
1808予約済み ** #
1809その他:ポップアップ ブロックの使用 ** ^
180A予約済み #
180B予約済み #
180C予約済み #
180D予約済み #
1A00ユーザー認証:ログオン
1A02コンピューターに保存されている永続的な Cookie の使用許可 #
1A03セッションごとの Cookie の使用許可 (保存なし) #
1A04その他:既存のクライアント証明書が 1 つ、または存在しない場合の証明書の選択 * ^
1A05サード パーティの永続的 Cookie の使用許可 *
1A06サード パーティのセッション Cookie の使用許可 *
1A10プライバシーの設定 *
1C00Java の権限 #
1E05その他:ソフトウェア チャンネルのアクセス許可
1F00予約済み ** #
2000ActiveX コントロールとプラグイン:バイナリ ビヘイビアーとスクリプト ビヘイビアー
2001.NET Framework 依存コンポーネント:Authenticode で署名したコンポーネントを実行する
2004.NET Framework 依存コンポーネント:Authenticode で署名しないコンポーネントを実行する
2100その他:拡張子ではなく、内容によってファイルを開く ** ^
2101その他:より権限の少ない Web コンテンツ ゾーンの Web サイトにこのゾーンへの移動を許可 **
2102その他:サイズや位置の制限なしにスクリプトでウィンドウを開くことを許可 ** ^
2103スクリプトの実行:スクリプトでのステータス バーの更新を許可する ^
2104その他:Web サイトがアドレス バーやステータス バーのないウィンドウを開くのを許可する ^
2105スクリプトの実行:スクリプト化されたウィンドウを使って情報の入力を求めることを Web サイトに許可する ^
2200ダウンロード:ファイルのダウンロード時に自動的にダイアログを表示 ** ^
2201ActiveX コントロールとプラグイン:ActiveX コントロールに対して自動的にダイアログを表示 ** ^
2300その他:Web ページが、制限されたプロトコルをアクティブ コンテンツに使用することを許可する **
2301その他:フィッシング詐欺検出機能を使う ^
2400.NET Framework:XAML ブラウザー アプリケーション
2401.NET Framework:XPS ドキュメント
2402.NET Framework:Loose XAML
2500保護モードを有効にする [Vista のみの設定] #
2600.NET Framework セットアップを有効にする ^


タグ:IE
posted by lightbox at 2010-04-16 16:08 | 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 終わり