SQLの窓

2016年11月06日


WEB ブラウザで WEBカメラから静止画像を canvas へ転送して、その画像をローカルへ保存するテンプレート

デモページ

WEBカメラの画像をローカルに保存する事が目的です(IE は WebRTC が使えないので、通常動画で代替)。Webカメラが無い場合は、動画で代替えます。

IE 以外は toDataURL を アンカーの href にセットしてダウンロードする事ができますが、例によって IE は特別な方法を取りますIE11 は長い URL がダメ

根本的に IE は無理です。このあたりの制限はずっと昔からありました。Edge は正しくデータとして取れるのですが、アンカーの href としては使えず、img の src としてならば使えます。いずれにしても、ダウンロードは別の方法である Blob を使うのですが、jpeg としてダウンロードするには、さらにひと工夫が必要そうです。できそうな資料はありましたが、動作は未確認です。
動作確認しました。IE11 で JPEG 保存可能です。
	// IE の場合
	if ( typeof(MSBlobBuilder) != "undefined" ) {
		var jpeg = canvas.toDataURL("image/jpeg")	// JPEG
		var bin = atob(jpeg.split(',')[1]);
		var buffer = new Uint8Array(bin.length);
		for (var i = 0; i < bin.length; i++) {
		  buffer[i] = bin.charCodeAt(i);
		}
		var blob = new Blob([buffer.buffer], {type: "image/jpeg"});
		navigator.msSaveBlob(blob, "canvas.jpg" );
	}


<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="shortcut icon" href="https://lightbox.sakura.ne.jp/homepage/WinOfSql.ico">


</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.min.js"></script>

<style>
input {
	font-size: 20px;
}
#camera {
	width: 400px;
	height: 300px;
}
#canvas,#camera {
	border: 1px solid #000;
}
</style>

<input id="copy" type="button" value="copy">
<input id="save" type="button" value="save">
<br>
<br>
<video id="camera" autoplay></video>
<canvas id="canvas" width="400" height="300"></canvas>

<script>
jQuery.isMobile = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));
toastr.options.positionClass = "toast-top-center";

if ( $.isMobile ) {
	$("#camera").css("width","100%");
	$("#canvas").css("width","100%");
}

// カメラ用 video 要素(DOM オブジェクト)
var camera;
// 静止画用 canvas 要素(DOM オブジェクト)
var cancas;

check();

// *************************************
// Canvas へコピー
// *************************************
$("#copy").on( "click", function(){

	camera = $("#camera").get(0);
	canvas = $("#canvas").get(0);
	var ctx = canvas.getContext('2d');

	// カメラから キャンバスに静止画を描く
	ctx.drawImage(camera, 0, 0, 400, 300);
});

// *************************************
// Canvas の画像を保存
// *************************************
$("#save").on( "click", function(){

	// IE の場合
	if ( typeof(MSBlobBuilder) != "undefined" ) {

//		var blobBuilderObject = new MSBlobBuilder();
//		blobBuilderObject.append( canvas.msToBlob() );
//		navigator.msSaveBlob(blobBuilderObject.getBlob(), "canvas.png" );	// PNG

		var jpeg = canvas.toDataURL("image/jpeg")	// JPEG
		var bin = atob(jpeg.split(',')[1]);
		var buffer = new Uint8Array(bin.length);
		for (var i = 0; i < bin.length; i++) {
		  buffer[i] = bin.charCodeAt(i);
		}
		var blob = new Blob([buffer.buffer], {type: "image/jpeg"});
		navigator.msSaveBlob(blob, "canvas.jpg" );

	}
	else {
		var jpeg = canvas.toDataURL("image/jpeg")	// JPEG
		var download = $("<a></a>").appendTo("body").css("display","none");
		download.prop({"href" : jpeg, "download": "canvas.jpg" });
		download.get(0).click();
		download.remove();
	}

});

// *************************************
// navigator.getUserMedia チェック
// *************************************
function check() {

	if ( !navigator.mediaDevices ) {
		var api = [
			"webkitGetUserMedia", "mozGetUserMedia","msGetUserMedia"
		]

		$.each(api,function(idx){
			if (navigator.getUserMedia = navigator.getUserMedia || navigator[api[idx]]) {
				return false;
			}
		});

		if ( !navigator.getUserMedia ) {
			error("WebRTC を使用できません");
			return;
		}
	}

	// WEBカメラの初期化
	init();
}

// *************************************
// カメラストリーム
// *************************************
function init() {

	camera = $("#camera").get(0);

	if ( navigator.mediaDevices ) {
		console.log("navigator.mediaDevices.getUserMedia");
		navigator.mediaDevices.getUserMedia({video: true})
		.then(function(stream){
			camera.src = window.URL.createObjectURL(stream);
		})
		.catch(function(err){
			error(err.name);
		});	}
	else {
		console.log("navigator.getUserMedia");
		navigator.getUserMedia(
			{video: true}, 
			function(stream) {
				camera.src = window.URL.createObjectURL(stream);
			},
			function(err){
				error(err.name);
			}
		);
	}
}

// *************************************
// エラー処理
// ※ 動画で代替
// *************************************
function error( message ) {
		toastr.error( message + "<br>代替として動画を表示します" );
		$("#camera")
		.prop({ 
			"loop" : true, "muted" : true, "controls" : true,
			"src" : "https://lightbox.sakura.ne.jp/demo/mp4/waterfall-free-video9.mp4"
		})
		.css("border", "solid 1px #000");
}
</script>
</body>
</html>

関連する記事

WEB ブラウザで WEBカメラをテストするテンプレート / Android Chrome でテストすると【今は】カメラの front と back を切り替えできます

参考にすべき資料

Microsoft: キャンバスの画像をローカルに保存する
Microsoft : BlobBuilder を使ってファイルを作成する

Canvas に描いた画像を png などの形式の Blob に変換する方法



posted by lightbox at 2016-11-06 02:11 | Comment(0) | WEBブラウザ | このブログの読者になる | 更新情報をチェックする

WEB ブラウザで WEBカメラをテストするテンプレート / Android Chrome でテストすると【今は】カメラの front と back を切り替えできます

navigator.mediaDevices.getUserMedia() と navigator.mediaDevices.enumerateDevices() を使うといいみたいです。(警告が出なくなりました。)

navigator.mediaDevices を使ったカメラのサンプル
デモページ ※ Android で見るのがおもしろいです。
MediaStreamTrack.getSources() は、非推奨で Chrome の 56 で削除される見通しです。
これも、Firebase のテストをする一環で、カメラの画像を Firebase storage に保存する為に使用しています。 いまのところ、WebRTC が動作してカメラが動くのを確認したのは Google Chrome と Firefox と Microsoft Edge と Android の Chrome です。 ※ Chrome は https でないと動作しません カメラが使えない場合も、Firebase で 静止画のアップロードを行いたいので、その場合はエラー処理で動画を表示するようにしています。 Chrome では、MediaStreamTrack.getSources() で、カメラの一覧を取得できるので、コンボボックスで切り替えれるようにしています。 カメラの切り替えは、WebRTC の停止が困難なので(というか Android では再起動してしまう)、現状はコードでするよりリロードするのが簡単なので、location.hash を使用してリロードしています。 できる限り、jQuery を使用しています カメラの扱いは DOM ですが、イベントやら画面の扱いは jQuery が簡単です。特に、コンボボックスを追加して body に追加する部分は直感的にできます。 ▼ Google Chrome WEBカメラによって、一覧が複数あったり、一つだったりしました ▼ Android 4が front で、5が back と label に表示されますが、2番目のカメラ(?)でも、back カメラになりました。 ▼ Google Chrome これは、一つしかなかったです(安いWEBカメラ)
<video id="camera" autoplay></video>
<br>

<script>
jQuery.isMobile = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));
toastr.options.positionClass = "toast-top-center";

if ( $.isMobile ) {
	$("#camera").css("width","100%");
}

// カメラ用 video 要素(DOM オブジェクト)
var camera;
// スマホ用コンボボックス(jQuery オブジェクト)
var select;
// カメラの一覧
var camera_data;
// 現在のカメラの ID
var camera_id = "default";

check();

// *************************************
// navigator.getUserMedia チェック
// *************************************
function check() {

	var api = [
		"webkitGetUserMedia", "mozGetUserMedia","msGetUserMedia"
	]

	$.each(api,function(idx){
		if (navigator.getUserMedia = navigator.getUserMedia || navigator[api[idx]]) {
			return false;
		}
	});

	if ( !navigator.getUserMedia ) {
		error("WebRTC を使用できません");
		return;
	}

	// WEBカメラの初期化
	init();
}

// *************************************
// カメラストリーム
// *************************************
function init() {

	camera = $("#camera").get(0);

	if ( location.hash != "" ) {
		camera_id = location.hash;
		camera_id = camera_id.replace("#","");
		console.log(camera_id);
		$("<div>"+camera_id+" を選択しました</div>").appendTo("body");
	}

	navigator.getUserMedia(
		{video: {
			optional: [{sourceId: camera_id }]
		}}, 
		function(stream) {
			camera.src = window.URL.createObjectURL(stream);
		},
		function(err){
			error(err.name);
		}
	);

	list();

}

// *************************************
// MediaStreamTrack が使える場合
// カメラ一覧をコンボボックス化
// *************************************
function list() {

	MediaStreamTrack.getSources(function(data){

		if ( data.length > 0 ) {

			var div = $("<div></div>");

			camera_data = data;

			select = $("<select></select>");
			select.append("<option value=\"none\"></option>");
			for( i = 0; i < data.length; i++ ) {
				select.append("<option value=\""+ data[i].id +"\">"+(i+1)+") "+data[i].kind+"</option>");
				div.append("<p>label "+(i+1)+"<br>"+data[i].label +"</p>");
			}
			select.appendTo("body");
			div.appendTo("body");

			console.dir(camera_data);

			select.on("change",function(){
				if ( $(this).val() != "none" ) {
					location.hash=$(this).val();
					location.reload(true);
				}
			});

		}

	});

}

// *************************************
// エラー処理
// ※ 動画で代替
// *************************************
function error( message ) {
		toastr.error( message + "<br>代替として動画を表示します" );
		$("#camera")
		.prop({ 
			"loop" : true, "muted" : true, "controls" : true,
			"src" : "https://lightbox.sakura.ne.jp/demo/mp4/waterfall-free-video9.mp4"
		})
		.css("border", "solid 1px #000");
}
</script>

関連する記事

WEB ブラウザで WEBカメラから静止画像を canvas へ転送して、その画像をローカルへ保存するテンプレート




posted by lightbox at 2016-11-06 01:18 | Comment(0) | WEBブラウザ | このブログの読者になる | 更新情報をチェックする

2016年10月28日


iPhone を EpocCam というアプリで Wi-Fi の WEBカメラにする場合のいろいろ知っておく事。

WebRTC(iOS上のブラウザでは使えません) で、いろいろアプリをテストする上での一つのツールとして、使ってない iPhone4S を WEBカメラにしてみて解った情報です。(Android は DroidCam のほうがいいので詳細は後日調べる予定 / クライアントソフトはこちら)

このアプリ、USB は使えないですし、USB のWEBカメラは安いのがいくらでもあるので、自分の家の特定位置の監視カメラとして使う以外はメリットはあまりありません。(外部からのアクセスは無理です。外部からは、Android 系の IPカメラアプリとルータ設定でできるかもしれません:未確認)

そもそも、古い忘れられたソフトだと思われるので、古い iPhone(iOS8.0以降) 以外で試してみようとは思わないほうがいいと思います。広告も結構大きいのが出て画面ふさぎますし

(その間も WEBカメラとしては使えるので、定点監視カメラなら広告は関係ないです)。

EpocCam のダウンロードとインストール

アプリの更新は、2015年10月17日よりされていません。インターネットで検索しても探すのに一苦労します。

こちらから PC 用のソフトをダウンロードしてインストールします。(自分の環境は Windows7 で、32ビットですが、ダウンロード時の選択はありませんでした)


インストールオプションとして、Barcode Reader を同時にインストールしようとするので、チェックを外す必要があります。

インストール時にいろいろ警告が出ました。たぶん、インターネットアクセスに対しての信頼性の警告だと思いますが、何が起きてもかまわないテストマシンでやってるのでインストールを続行しました。気になる方は、この時点で使う事をあきらめたほうがいいと思います。また、自分以外の環境では警告が出ない可能性もあるので、なんとも言い切れません。

iPhoneアプリのほうは、クライアントの確認が終わってから、インストールして開けばいいです。(当然ですが、Wi-Fi が使える必要があります。USB が使えるような雰囲気がネットではありますが、どうも USB は対応をやめたようです)


サービスが登録されて自動起動になるので注意



Bonjour は、Apple 系アプリ用のサービスなので、既に入っている可能性もあります。しかし、新たに入る場合だと、サービスは当然停止設定にして必要な時だけ起動します。



あと、開発元の Kinoni のサービスも自動起動されるので、停止設定にして必要な場合にのみ起動します。

付属のビュアーは必要無いので起動しないように

単なる、動作確認用です。起動していると肝心の WEB カメラの画像が劣化します。

ファイアーウォールの設定が必要な場合もあります



こうなると専門知識無いとどうにもなりませんが、PC のファイヤーウォールの設定を行うか、ファイヤーウォールを止めてとりあえず動作確認するかです。

昔は USB で使えたであろう残骸



ソースを見ると USB の文字が残ってますが、表示内にはありません。検索用のキーワードにも残ってますし、適当にアップデートした感満載です。ま、でも USB で使うメリットは現在コスト的にほぼ無いので開発をやめるのは当然でしょう。Wi-Fi 使っても十分速いわけですし(ビュアー起動するとアウトですが)

で、上のソース場所は表から見ると以下のようになっています。


※ 何故か、Debut Video Capture software による動作確認となっています。

さて、実行画面



一番下の英文は、x で閉じれます。最初、雷マークが出てタッチすると、なんか説明みたいなのが出ます。矢印は反転指定で、昔は逆になったままだとかネットで見かけましたが、これで正しくできるようになっています。

通常運用では、以下のように上部に広告が出て、何かのタイミング( たぶん画面にユーザがアクセスした時 )で、画面いっぱいの広告が日本語で出たり英語で出たりします。基本、左上の x 閉じるのですが、中には広告が何枚も移り変わって最後にならないと閉じれない場合もあります。



だから、リアルタイムの WEB カメラには使えません

最後に、Google Chrome からの画面です



※ 玄関で定点カメラテスト


posted by lightbox at 2016-10-28 13:45 | Comment(0) | WEBブラウザ | このブログの読者になる | 更新情報をチェックする

2015年03月13日


ブラウザ別『Java 無効』

全てのブラウザでの一括処理

コントロールパネルより、Java のセキュリティ設定を行います。他のどんな方法より確実で簡単です。




Google Chrome

アドレスバーに『chrome://plugins』を入力して、Java のセクションを無効( 灰色になります )にする




IE

右上のツールアイコンから『アドオンの管理』で Java を選択して、右下のボタンで無効にします( 無効にすると、ボタンの表示は『有効』になります )
( コントロールパネルから無効にすると表示されません )



IE のカスタマイズで、Javaアプレットを有効にする方法は、Java の公式サイトで書かれてあったのですが、これを逆にしても脆弱性の対処にはならないようです。


Firefox

メニューから『アドオン』を選択して、アドオンマネージャで 『プラグイン』の Java を無効にします





▼ 古いメニュー



Opera

アドレスバーに opera:plugins を入力して、Java を無効にします




Safari for Windows

設定の『セキュリティの』Javaを有効にする チェックボックスをオフにします




関連する記事

IE、Firefox、Chrome、Opera、Safari で JavaScript を無効にする
IE、Firefox、Chrome、Opera、Safari のキャッシュ削除のショートカット
ブラウザの入力履歴の削除( 特にパスワード )

関連する情報

Flash は仕方ない(使うので最新に更新できる)として、少なくとも Java は使わないので無効にしておかないとWEBページを開いただけでウィルスに感染するかもしれません。もし使う場合は、常に最新に更新するよう注意を払う事が必要になります。

Adobe Reader もただ PDF を見るだけなら、Google Chrome では『Chrome PDF Viewer』というプラグインが最初から入っているので感染のリスクを軽減できます。

そもそも、Google Chrome のみ、ブラウザと共に Flash のプラグインが同梱されているので、Google Update さえ正常に働いておれば Adobe Reader のプラグインと Java のプラグインを無効にするだけで感染の危険性が格段に下がります。

現状として、普通のサイトでも安心できない昨今の事情では、まったくの素人さんのほうが感染する事は少ないかもしれません( 環境が単純で、全て受け入れている )。しかし、それなりの環境の幅を知識とともに展開している人程、逆に危ない(見落としの)可能性があります。 
posted by lightbox at 2015-03-13 15:21 | WEBブラウザ | このブログの読者になる | 更新情報をチェックする

2015年03月12日


IE、Firefox、Chrome、Opera、Safari で JavaScript を無効にする

右クリックをできないようにしているサイトで使えると思います。文字列をコピーできないようにしているサイトもあるので、必要に応じて一時的に設定して後ですぐ戻す必要がありますが、全般的に設定はとても面倒な処理となっています。

※ 最近は、簡単に変更できないようにする流れとなっているようです。

IE

昔からの正統な設定方法ですが、手順が多い上に一般的には解りにくいものとなっています。






▼ 過去の IE では使えてました。
F12 で開発者ツールを表示させて、メニューの「無効化」の中から設定します。




Firefox

『開発ツール』アイコンから、開発ツールを表示をクリックして『インスペクタ』を表示し、一番上のタブの右端にある設定アイコンでオプションを開いて以下のチェックボックスをオンにします




▼ 昔はできたんですが、今はありません。
設定ダイアログより設定します




Google Chrome

ALT+E でメニューを開いて、キーボードから指を離して S キーで設定ページが開きます



その後、一番下の『詳細設定を表示』をクリックして開く『プライバシー』の『コンテンツ』ボタンをクリック



javascript のラジオホダンで設定します( 以下の状態は javascript が有効です )



Opera

設定画面をメニューから開いて『ウェブサイト』内の先頭にあります




▼ Opera は事情でいい意味で変わっています
F12 で表示されるポップアップメニューから設定します




Safari for Windows

まず、設定ダイアログで「開発」メニューを表示するようにして、メニュー内で設定します






関連する記事

IE、Firefox、Chrome、Opera、Safari のキャッシュ削除のショートカット
ブラウザの入力履歴の削除( 特にパスワード )
ブラウザ別『Java 無効』



posted by lightbox at 2015-03-12 18:19 | WEBブラウザ | このブログの読者になる | 更新情報をチェックする

2015年03月11日


ブラウザの入力履歴の削除( 特にパスワード )

自宅以外の PC でどこかにログインした場合、油断しているとパスワードが記録されてしまう場合があります。また、パスワードでなくても、ユーザ名が記録される事のほうが殆どなので、できる限り削除する必要があります。

IE11



IE7

「全般タブ」=>「削除」ボタン
Ie7_pass_del

IE6

「コンテンツタブ」=>「オートコンプリート」ボタン
Ie6_pass_del

Firefox





▼ チェックされているとフォームの内容が登録される


▼ 登録されたフォームの内容の削除( CTRL + SHIFT + DEL )


履歴には何が含まれていますか?

※ ログイン情報は、HTTP 認証のログイン情報です。通常はなにもする必要がありません

Google Chrome



Opera



Safari for Windows



関連する記事

IE、Firefox、Chrome、Opera、Safari のキャッシュ削除のショートカット
IE、Firefox、Chrome、Opera、Safari で JavaScript を無効にする


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

2015年03月10日


IE、Firefox、Chrome、Opera、Safari のキャッシュ削除のショートカット

結論から言うと、(2015/3/10現在) CTRL+SHIFT+DEL で、IE と Firefox と Chrome と Opera が動作します。Safarai は、CTRL+ALT+E で、空にするかキャンセルするかを選択するメッセージボックスが表示されます。

IE11 : CTRL + SHIFT + DEL



Firefox 36.0.1 : CTRL + SHIFT + DEL



Firefox のキャッシュを消去するには

Chrome 41.0.2272.76 : CTRL + SHIFT + DEL

『期間』のコンボボックスから『すべて』を選択します



キャッシュなどの閲覧データを削除する

Opera 27.0 : CTRL + SHIFT + DEL

『期間』のコンボボックスから『すべての期間』を選択します



Safari 5.1.7 : CTRL + ALT + E




関連する記事

ブラウザ別『Java 無効』
IE、Firefox、Chrome、Opera、Safari で JavaScript を無効にする



posted by lightbox at 2015-03-10 13:49 | WEBブラウザ | このブログの読者になる | 更新情報をチェックする

2014年10月02日


ブラウザを使用した簡易パーセントエンコーディング変換

通常、サーバへデータを送る為にブラウザがパーセントエンコーディングを行ってくれますが、サーバーへ送らなくても変換だけは行ってくれます。なので、それを利用して変換するツールです。

主に利用している機能としては、document.charsetlocalStorage ですが、Firefox では charset が定義されていないので、FORM の acceptCharset を使用する必要がありました。
<script>
function setData() {
	var wk = location.search;
	var ar = wk.split("=");
	if ( ar.length > 1 ) {
		document.getElementById("result").value = ar[1];
	}

	if ( document.charset ) {
		document.getElementById("charset").value = (document.charset).toLowerCase();
	}
	else {
		document.getElementById("charset").value = (document.characterSet).toLowerCase();
	}

	if ( localStorage["encodeData"] ) {
		document.getElementById("data").value = localStorage["encodeData"];
	} 
	if ( localStorage["charset"] ) {
		document.getElementById("charset").value = localStorage["charset"];
	} 
}

function vSubmit() {

	localStorage["encodeData"] = document.getElementById("data").value;
	localStorage["charset"] = document.getElementById("charset").value;

	if ( document.charset ) {
		document.charset = document.getElementById("charset").value;
	}
	else {
		document.getElementById("frm").acceptCharset = document.getElementById("charset").value;
	}

}
</script>
<body onload="setData()">
<select id="charset">
<option value="utf-8">utf-8</option>
<option value="euc-jp">euc-jp</option>
<option value="shift_jis">shift_jis</option>
</select>
<form id="frm" onsubmit='vSubmit()'>
<input type="text" name="data" id="data">
<input type="submit" value="send">
</form>
<textarea id="result" style='width:550px;height:400px;'></textarea>
</body>

上記のようなファイルを「urlencode.htm」で作成して、IFRAME に埋め込んで使います。以下は、Google ドライブにアップロードして利用しています。
関連する記事

Google ドライブにWEBページを作成する方法



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

各ブラウザで、onbeforeunload を使おうとすると



上は、IE9 です。(現在は IE11 でエミュレーションできる全てのバージョンで動作します)

▼ IE11


Firefox は、いまだに returnValue にも何か文字列をセットしないと動作しません。

Firefox では、returnValue に値をセットする必要があるようで、しかもバグによって設定した文字列は表示されない事が記されています

リンク先では、IE も returnValue を使うような事が書かれていますが、IE9 ではreturn "文字列"; で動作し、リンク先の内容から Safari も return "文字列" であると書かれています。

結果的に、Google Chrome も動作しましたが、Opera はこのイベントそのものが実装されておらず、ページ移動時のチェックはできないようです。
※ 現在 Opera 15 では、WebKit エンジンに変わった為動作するらしいです。
<script type="text/javascript">
var postsw = 0;
if (window.attachEvent){
	window.attachEvent('onbeforeunload', unloadCheck);
}
else {
	window.addEventListener('beforeunload', unloadCheck, false);
}

function unloadCheck(ev) {
	var str;
	if ( postsw == 0 ) {
		str =  "★★★★★★★★★★★★★★★★★★★★★★\n";
		str += "     ページを移動しないで下さい!!\n";
		str += "★★★★★★★★★★★★★★★★★★★★★★\n";
		ev.returnValue = str;
		return str;
	}
}
</script>

postsw を、正当なページ移動処理時(submit ボタン等)の実行時に 1 にするとダイアログは表示されません

Firefox



Google Chrome



Safari(古い画像です)




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

2014年07月07日


2014年7月7日現在。WEBフォントの実際

久しぶりに WEB フォントがどのようになっているか IE11、Google Chrome、Firefox で確認してみました。どういうわけか、WEB 上には『これだ』という情報が無く、現時点でもいろいろ変化の途中なのかな・・・と思った次第ですが、いろいろチェックした結果二つの大きな事が解りました。

1) 3つのブラウザで、WOFF 形式で表示可能
2) WOFF の変換は、ttf to woff converter というオンラインサービスで行う必要がある

最も大きな事は 2番目です。最初、武蔵システムの WOFF コンバータを使ってうまく行かず、既に表示されているサイトからフォントをダウンロードして動作する事を確認し、要するに WOFF ファイルが悪いという事が解って、できるだけ新しい日付の記事等で、コンバータを探してたどり着いたのが Everything Fonts という、このコンバータのサイトです。ここでは、API を有償で公開していますので、ある程度またはかなりの信頼性があります。他のツールを見ても幅広く、余程フォントに関して精通しておられる方のサイトと見受けられます。

結局、元々の ttf ですら厳密にはいろいろな問題のあるファイルが流通している、または自分で作ってしまっている事が考えられます。そこから、WOFF へ変換して、うまく行ったのが Everything Fonts のみという結果です。

クロスドメイン用に Google ドライブ

Google ドライブで誰でも簡単 WEB ページ

Google ドライブですと、Access-Control-Allow-Origin: * を返してくれるので、Ajax のデータや、このようなフォント置き場としてブログ等から利用できます。ただ、フォントとなるとそれなりに大きいので、最初はかならずダウンロードが発生します( フルの日本語フォントならそれなりに時間を要します )。なので、一応ブログでは必要な記事でのみ呼び出す事にします。
<script>
if ( !window[window.location.hostname+'.FancyBalloons'] ) {
	window[window.location.hostname+'.FancyBalloons'] = true;
	(function() {
		var str="";
		str+="<style> \n";
		str+="@font-face { \n";
		str+="    font-family: 'fb'; \n";
		str+="    src: url('https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/font/FancyBalloons_x.woff') format('woff'); \n";
		str+="} \n";
		str+="</style> \n";
		document.write(str);
	})();
}
</script>
<style>
#web_font_content {
	font-family: 'fb';
	font-size:60px;
}
</style>
<span id="web_font_content">ファンシーバルーン</span>


ファンシーバルーン



タグ:Webフォント
posted by lightbox at 2014-07-07 20:56 | WEBブラウザ | このブログの読者になる | 更新情報をチェックする

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年05月01日


Flash Playerに危険な脆弱性( またかというかこっちもか )。13.0.0.206 である事を確認しましょう。

米アドビシステムズは米国時間2014年4月28日、「Flash Player」に危険な脆弱性が見つかったとして注意を呼びかけた。
IE に追い討ちかけるような内容です。自分は、Google Chrome の内臓 Flash しか使用していないので、『C:\Program Files\Google\Chrome\Application\34.0.1847.131\PepperFlash』の中の manifest.json で、pepflashplayer.dll が 13.0.0.206 である事を確認しました。 ブラウザ上の Flash から 右クリックから確認してもいいです。 とにかくこういう事が起きる毎に、複数のブラウザのメンテするのが大変なので、Flash と PDF Viewer は Google Chrome 内臓のものしか使っていません。今回、本体の更新無しに、Flash は更新されていたようなので、とても安心しました。 ただ、更新日付が『2014‎年‎4‎月‎24‎日』なので、公式発表より4日も前です。当然ソフトウェアの対応が終わってからの発表だと思われますが、内臓のほうが速く対応されたのだろうか・・・と比べる対象が無いので良くわかりませんが、Google Chrome という立ち位置からすると、このへんは格段に IE から優位である気がします。 特に今回のような IE の不始末と同時期だけに。 関連する記事 IE の不始末の回避策( IEの深刻なゼロデイ脆弱性 ) 関連する記事


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

2014年03月23日


デベロッパーツールを使用してクッキーの一覧を表示する

現在、どのブラウザのデベロッパーツール( 開発者ツール ) も高性能でオブジェクトの一覧を表示できます。以下のコードを、それぞれの複数行モードで実行すると、_data 内の一覧として見る事ができます。
console.clear();
var _data = {};
var _target = new Array();
var _arr = document.cookie.split(";");
for ( var _i = 0; _i < _arr.length; _i++ ) {
	var _x = _arr[_i].split("=");
	if ( _x.length >= 1 ) {
		_target.push(_x[0].replace(/\s/g,""))
	}
}
for(var _i = 0; _i < _arr.length; _i++) {
	var c = _arr[_i];
	while (c.charAt(0)==' ') c = c.substring(1,c.length);
	if (c.indexOf(_target[_i]+'=') == 0) _data[_target[_i]] = c.substring((_target[_i]+'=').length,c.length);
}
console.dir(_data);


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

2013年12月05日


view-source: で、好きなサイトのソースを表示する( IE では利用できません )

Three.js のサイトで利用していたので気が付いたのですが、IE では利用できません。大昔には IE でも利用できていたという記録がありますが、今はできません。

Google Chrome と Firefox でのみ(OperaもSafariもダメでした)動作を確認しています。

他サイトの CSS 等を参考資料として記事に付け加えたい場合に便利だと思います




<script type="text/javascript">
function openSource( url ) {
	window.open( 'view-source:' + url );
}
</script>
<input type="button" value="Google" onclick='openSource("https://www.google.co.jp/");'>
<br>
<input type="button" value="自家製ストリートビュー用 js レベル1" onclick='openSource("http://winofsql.jp/jquery/plugins/street_view.js");'>
<br>
<input type="button" value="自家製ストリートビュー用 js レベル2" onclick='openSource("http://winofsql.jp/jquery/plugins/street_view_1.js");'>
<br>
<input type="button" value="自家製ストリートビュー用 js レベル3" onclick='openSource("http://winofsql.jp/jquery/plugins/street_view_2.js");'>
<br>
<input type="button" value="Yahoo! の CSS" onclick='openSource("http://k.yimg.jp/images/top/sp2/clr/130528/1.css");'>
※ ここでは、任意のサイトのソースコードを表示させる PHP を使って、Google Chrome と Firefox 以外でもソース表示を可能にしています。


posted by lightbox at 2013-12-05 15:48 | WEBブラウザ | このブログの読者になる | 更新情報をチェックする

2013年10月26日


Seesaa ブログの『保存ボタンが表示されない』

どうも、Google Chrome でたまーーに起こるようなのですが、キャッシュの削除で復帰されました。

いずれにしても、ブラウザの不可思議なトラブルは『キャッシュの削除』が望ましいです。Google Chrome も、Firefox も、IE も、『CTRL+SHIFT+DEL』でショートカットで削除画面が表示されます。

ところで、最近 Google Chrome ではキャッシュの実装がいろいろ変化があるような気がします。開発者ツールを表示している時だけ強制的にキャッシュを使用しない、というオプションがあり、実際それをしないと WEB アプリが不思議な動作をする場合があります。

どうしても、キャッシュを削除したく無い場合は、そちらを使うといいかもしれません。




タグ:トラブル
posted by lightbox at 2013-10-26 17:48 | WEBブラウザ | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します


Windows
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
PHP正規表現チェッカー
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり