SQLの窓

2011年04月04日


IE限定。信頼するサイトのページをボタンから印刷プレビュー表示する


イントラネット用に IE6 のころから利用していた方法ですが、IE9 できちんと動くかどうかをテストしました。

IE は、スクリプトとして JavaScript 以外に VBScript を動かす事ができます。このへんがそもそも、他のブラウザと根本的に違うところで、イントラネット + 業務アプリケーションが IE 限定になる理由でもあります。

JavaScript でオブジェクトの処理を書くと、どういうわけかバグがあってうまく動かない事が過去に多かったので、誰も JavaScript を使わないのです。

CreateObject("InternetExplorer.Application") で、インターネットエクスプローラオブジェクトを作成して、現在のページをナビゲートして、その内容を印刷プレビューで表示します。

こういってしまうと簡単ですが、実際使えるものにする為に、二段階のタイマーを使っています。また、フォーカスの処理を行う為に、WScript.Shellを使っていますので、経験無い方には全くなんの事が解らない特殊なコードになっていますが、Excel との連携では似たような事は昔から良く行われています。

通常のインターネット では、セキュリティの設定で、危険な ActiveXは、無効になっていますが、社内であれば別に気にする事は無いので ActiveXを有効にして、OS の恩恵を業務で役立てているわけです。

この方法の良いところは、印刷時のみページをカスタマイズ可能であるというところで、ここでは最も基本的なボタンの非表示を印刷時に行っています。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=EUC-JP">

<style type="text/css">
.<?= $_GET['print_preview'] ?> {
	display:none;
}
</style>
<script language="VBScript">

Dim WshShell
Set WshShell = CreateObject( "WScript.Shell" )

Dim Ie
Const OLECMDID_PRINTPREVIEW = 7
Const OLECMDEXECOPT_DODEFAULT = 0

'************************************
' プレビュー開始
'************************************
Function DoPrintPreview()

	if not IsEmpty( Ie ) then
		Ie.Quit()
	end if

	Set Ie = CreateObject("InternetExplorer.Application")
	Ie.Visible = True
	Ie.Navigate(window.location&"?print_preview=preview")

	TimerPreview()

End Function

'************************************
' ドキュメントロード完了待ち処理
'************************************
function TimerPreview()

	if Ie.Busy then
		Call window.setTimeout( _
			"Call TimerPreview()", _
			100, _
			"VBScript" _
		)
	else
 		Call Ie.ExecWB( _
			OLECMDID_PRINTPREVIEW, _
			OLECMDEXECOPT_DODEFAULT _
		)
		Call window.setTimeout( _
			"Call TimerFocus()", _
			500, _
			"VBScript" _
		)
	end if

end function

'************************************
' フォーカス取得
'************************************
function TimerFocus()

	Call WshShell.AppActivate( "印刷プレビュー" )
	Ie.Visible = False

end function

</script>
<script for="window" event="onunload" language="VBScript">

	if not IsEmpty( Ie ) then
		Ie.Quit()
	end if

</script>
</head>
<body>
<input class="preview" type='button' value="印刷プレビュー" onclick='Call DoPrintPreview()' language="VBScript">
<br><br>
<img src="http://lh5.googleusercontent.com/_IzfbcNjqGuE/TZlg5usBDjI/AAAAAAAACX0/v0Q8yvsp9os/ie_trust_site.png" style='border:solid 0px #000000' />
</body>
</html>




タグ:VBScript IE
posted by lightbox at 2011-04-04 15:25 | VBS + インターネット | このブログの読者になる | 更新情報をチェックする

2011年04月03日


HTML5 : 画像にテキストを重ねて少し回転して「名前を付けて画像を保存」するとどうなるか

キャンバスの大きさは、500 x 120 で、画像サイズは 334 x 80 です。Firefox 4.0 で保存すると以下のようになります。



ctx.rotate で回転する事を前提に以降の命令が実行されます。基本的に背景は透過しています。元の画像が png なのでそうなったのだとは思いますが、他ではまだ確認していません。

他を試してみると・・・

Google Chrome => x
Opera => x
Safari => x

思いの他、画像として保存できないようですが、IE9 はまだ試してませんが、Firefox 的にはかなりリードしてるような気がします。

( canvas に特別な指定をしていません )


IE9 製品候補版で試すと・・・

期待していたのですが、ダメでした。保存できませんので、Firefox のみブラウザで簡単な画像加工ができるという事になります。


toDataURL() を使うと可能ですが・・・

srcData = canvas.toDataURL()
document.getElementById("img_test").src = srcData;
---------------------------------------
<img src="" id="img_test" />

但し、この場合は元々の画像が同一ドメインでないと既存画像オブジェクトにセットできないのです。セキュリティエラーが出るので、そもそも正しいのですが、そうなると逆に Firefox はひょっとしてまずいのでは・・と思う事なるのですが、ブラウザの機能だから OK という事なのでしょうね。( 個人利用という考え方で、操作する人に依存する処理だから )

・・・でも、突っ込まれるのは確実そうな理屈ではあります。


<div id="target"><input type="button" value="CANVAS + 画像表示テスト" onclick='drawMyImage()'><br></div>
<script type="text/javascript">
function drawMyImage() {
	var canvas = document.createElement("canvas");
	if ( ! canvas || ! canvas.getContext ) {
		return false; 
	}
	else {
		canvas.setAttribute("width", "500");
		canvas.setAttribute("height", "120");
	}
	document.getElementById("target").appendChild(canvas)
	var ctx = canvas.getContext('2d');
	var img = new Image();
	img.src = "http://winofsql.jp/image/logical_error.png?" + new Date().getTime();
	img.onload = function() {
		ctx.rotate( 8 * Math.PI / 180 );
		ctx.drawImage(img, 0, 0);  
		ctx.font = "bold 22px 'MS Pゴシック'";
		ctx.strokeText("文字を重ねる", 15, 75);
		ctx.fillText("文字を重ねる", 15, 95);
	}
}
</script>


関連する記事

HTML5 : canvas 要素に画像をロードする



posted by lightbox at 2011-04-03 21:32 | HTML5 | このブログの読者になる | 更新情報をチェックする

2011年04月02日


HTML5 : canvas 要素に画像をロードする

IE9 はまだ製品候補版ですし、そもそも IE8 では canvas は実装されていませんが、
今後は IE9 をターゲットとしていろいろなものが作られるでしょうから、今のうち
に IE8 でもある程度は慣れておいたほうがいいと思います。

もちろん、HTML5 を想定した場合は、Firefox 等、IE 以外を使うのがテストの上で
は間違いありませんが、IE8 以下のシェアを無視できるほど提供側の懐は豊かでは
無いので、ガンガンに HTML5 を使わない場合は考慮しなければなりません。

excanvas.js は、そんな IE8 以前の為のライブラリで、完全に IE を無視できない
人の為にあります。プログラムで「ふり」をしているので、動的に canvas を作る
場合はちょっと解りません。そこまで調べる必要があるほど、IE8 の価値はもう無
いのでは無いかとも思うのも事実ですし。

<!--[if lte IE 8]>
<script type="text/javascript" src="http://lightbox.on.coocan.jp/js/excanvas.js"></script>
<canvas id="c1" width="334" height="80"></canvas>
<![endif]-->
<div id="target"><input type="button" value="CANVAS + 画像表示テスト" onclick='drawMyImage()'><br></div>
<script type="text/javascript">
function drawMyImage() {
	var canvas = document.createElement("canvas");
	if ( ! canvas || ! canvas.getContext ) {
		canvas = document.getElementById('c1'); 
		if ( ! canvas || ! canvas.getContext ) {
			return false; 
		}
	}
	else {
		canvas.setAttribute("width", "334");
		canvas.setAttribute("height", "80");
	}
	document.getElementById("target").appendChild(canvas)
	var ctx = canvas.getContext('2d');
	var img = new Image();
	img.src = "http://winofsql.jp/image/logical_error.png?" + new Date().getTime();
	img.onload = function() {
		ctx.drawImage(img, 0, 0);  
	}
}
</script>
関連する記事

HTML5 : 画像にテキストを重ねて少し回転して
「名前を付けて画像を保存」するとどうなるか


posted by lightbox at 2011-04-02 21:24 | HTML5 | このブログの読者になる | 更新情報をチェックする
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 終わり