2018年02月18日


『カーソル下の画像用HTMLの取得』を行うIE拡張をダイアログを表示して行う

画面定義を表示させます。( レジストリには "Flags"=dword:00000001 が必要です )



ダイアログが表示された時、すでにテキストエリア内のコードはクリップボードにコピーされていますが、内容を変更して再度クリップボードにコピーする事ができます。
get_img_html_clip.htm
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=SHIFT_JIS">
<title>カーソル下の画像用HTMLの取得</title>
<script language="JavaScript">

	// *************************************************
	// ウインドウサイズ
	// *************************************************
	window.dialogWidth = "400px";
	window.dialogHeight = "300px";

	// 対象となるオブジェクト( ここでは画像 )
	var obj = external.menuArguments.event.srcElement;

</script>
</head>
<body style='padding:20px;'>
<textarea id="text" style='width:300px;height:200px;'></textarea>
<br>
<input
	type="button"
	value="クリップボードにコピー"
	onclick='window.clipboardData.setData("Text", document.getElementById("text").value );window.close();'>
</body>
</html>
<script language="JavaScript">

	// カーソル下の HTML
	str = obj.outerHTML;

	// クリップボードにセット
	window.clipboardData.setData("Text",str );

	// テキストエリアにセット
	document.getElementById("text").value = str;

</script>


▼ レジストリ登録用 install.reg
Windows Registry Editor Version 5.00

[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\MenuExt\=> カーソル下の画像用HTMLの取得とクリップボード]
@="C:\\Users\\lightbox\\AppData\\Roaming\\laylaClass\\menuex\\get_img_html_clip.htm"
"Contexts"=dword:00000002
"Flags"=dword:00000001



▼ レジストリよりアンインストール用 unistall.reg
Windows Registry Editor Version 5.00

[-HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\MenuExt\=> カーソル下の画像用HTMLの取得とクリップボード]



関連する記事

IE拡張を作成する為の基本仕様
ブラウザ拡張の中で一番簡単な IE 拡張 : カーソル下の画像用HTMLの取得


タグ:IE 拡張
【IE拡張の最新記事】
posted by at 2018-02-18 01:07 | Comment(0) | IE拡張 | このブログの読者になる | 更新情報をチェックする

IE 拡張を作成する為の基本仕様

かなり古い Microsoft のドキュメントに記述されている内容ですが、以下のような内容になります。登録は、レジストリに直接登録しますが、登録時は IE を終了させておいて下さい。変更する場合も IE を終了させる必要があります。

レジストリの登録場所
HKEY_CURRENT_USER
       Software
           Microsoft
               Internet Explorer
                   MenuExt

このキーの下に、メニューに表示させる項目名をキー名としてキーを作成しますこのキー名がメニュー項目としてそのまま表示されます。
HKEY_CURRENT_USER
       Software
           Microsoft
               Internet Explorer
                   MenuExt
                       メニュー名 = c:\myscript.htm

※ c:\myscript.htm は http:// ではじまる URL でもかまいません
レジストリデータ的には、(規定) にセットします

@="http://winofsql.jp/html/get_img_html.htm"
"Contexts"=dword:00000002

Contexts は、右クリックした時のカーソル下のオブジェクトによって拡張メニーを表示するかしないかを決定する値を ビットの論理 OR で指定します。上記例は『画像』のみを対象としています。

(0x1 << CONTEXT_MENU_DEFAULT) (evaluates to 0x1)
(0x1 << CONTEXT_MENU_IMAGE) (evaluates to 0x2)
(0x1 << CONTEXT_MENU_CONTROL) (evaluates to 0x4) 
(0x1 << CONTEXT_MENU_TABLE) (evaluates to 0x8)
(0x1 << CONTEXT_MENU_TEXTSELECT) (evaluates to 0x10)
(0x1 << CONTEXT_MENU_ANCHOR) (evaluates to 0x20)
(0x1 << CONTEXT_MENU_UNKNOWN) (evaluates to 0x40)
※ CONTROL は、入力関連です。

ダイアログ表示オプション

もう 1 つのオプションは DWORD 値の "Flags" です。これは 1 ビットの値 (0x1) で、このビットを設定すると、スクリプトは ShowModalDialog を使って呼び出されます。これにより、スクリプトをロードしたウィンドウは隠されず、自動的に閉じることもありません。

external.menuArugments の値はメニューを選択した Window オブジェクトを保持したままとなります。

※ external.menuArugments は、そのページの window オブジェクトです。

後発の仕様変更

実行ファイルの拡張子は .htm または .html である必要があります。external.menuArugments は windows オブジェクトですが、現在の
 URL が必要な場合、location オブジェクトを直接操作できないので、document.URL を使用します。


関連する記事

ブラウザ拡張の中で一番簡単な IE 拡張 : カーソル下の画像用HTMLの取得



posted by at 2018-02-18 00:27 | Comment(0) | IE拡張 | このブログの読者になる | 更新情報をチェックする

2018年02月17日


ブラウザ拡張の中で一番簡単な IE 拡張 : カーソル下の画像用HTMLの取得

インストールは少し面倒ですが、いったんインストールしてしまえば修正やデバッグもすぐに反映されます。

ただ、詳細なドキュメントを探すのに苦労する事と、今までいろいろ変遷があって、なかなか解りづらい問題がたくさんあって、あまり一般的には使われていないのが現実です。例えば、最初のころは、そのページの URL を操作するのに、location オブジェクトが使えたのですが、今では、document オブジェクトの URL プロパティを使用するようになっています。

get_img_html.htm
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=SHIFT_JIS">
<title>カーソル下の画像用HTMLの取得</title>
<script language="JavaScript">

	var RegName,strLocation,obj;

	RegName = "=> カーソル下の画像用HTMLの取得";

	// ここでは使用しませんが、URL は document 経由で利用する必要があります
	strLocation = external.menuArguments.document.URL;

	// SHIFTとCTRLとALT用変数
	var keyflg1,keyflg2,keyflg3;
	keyflg1 = false;	// SHIFT
	keyflg2 = false;	// CTL
	keyflg3 = false;	// ALT

	// 対象となるオブジェクト( ここでは画像 )
	obj = external.menuArguments.event.srcElement;

</script>
</head>
<body>
<!--SHIFTとCTRLが押されているかどうかを取得するボタン-->
<input id="btn" type=button onClick='keyflg1=window.event.shiftKey;keyflg2=window.event.ctrlKey;keyflg3=window.event.altKey;'>
</body>
</html>
<script language="JavaScript">

	// ボタンの呼び出し
	document.getElementById("btn").click();

	var str;

	try {
		str = obj.outerHTML;
		// 独自の構成にする場合等
		// str = '<img src="' + obj.src + '"';
		// str += ' style="border: solid 0px #000000">';

		// クリップボードにセット
		window.clipboardData.setData("Text",str);
	}
	catch(e){
		str = "処理できませんでした   ";
	}

	alert(str)

</script>


このコードを get_img_html.htm として SHIFT_JIS で保存して好きなフォルダへ保存し、レジストリエディタで登録するだけで利用可能になります。
Windows Registry Editor Version 5.00

[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\MenuExt\=> カーソル下の画像用HTMLの取得]
@="C:\\Users\\lightbox\\AppData\\Roaming\\laylaClass\\menuex\\get_img_html.htm"
"Contexts"=dword:00000002

00000002 は、画像が対象である事を示しています

アンインストール

以下の VBScript をダウンロードして実行して下さい( get_img_html.htm は削除されませんがレジストリからは削除されます )
' 管理者として実行を強制する
Set obj = Wscript.CreateObject("Shell.Application")
if Wscript.Arguments.Count = 0 then
	obj.ShellExecute "wscript.exe", WScript.ScriptFullName & " runas", "", "runas", 1
	Wscript.Quit
end if

Set WshShell = CreateObject( "WScript.Shell" )
WshShell.RegDelete( "HKCU\Software\Microsoft\Internet Explorer\MenuExt\=> カーソル下の画像用HTMLの取得\" )

メニューのタイトルについて

MenuExt の下に作成するキーがそのままタイトルになるのですが、順序は文字順になるので、任意の記号を使って使いやすい順序にカスタマイズすればいいと思います。( 但し、その場合は、アンインストール用の文字列も変更する必要があります )

関連する記事

Seesaa の記事カテゴリをソートする IE 拡張
IE拡張メニュー : Seesaa のリンクコンテンツを一瞬でソートする


posted by at 2018-02-17 03:10 | Comment(0) | IE拡張 | このブログの読者になる | 更新情報をチェックする

ブラウザ上のテキストをレジストリデータのエクスポートである .reg として保存させる JavaScript のコード

FileSaver.js でローカルにテキストファイルを保存させる事ができます。その際、テキストデータを JavaScript の unicode の配列に変換して、さらに Uint16Array で new Blob() に渡す為のデータに変換します。先頭に unicode 用の BOM をセットして保存すると、unicode のテキストして保存されます。

これは、拡張子が .reg のデータを保存する為に行っていますが、実際には shift_jis のデータでも Windows には登録できると思います。ただ、その場合はもう一つライブラリが必要になります。

JavaScript の内部コード文字列を SHIFT_JIS としてダウンロードさせる方法

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
$(function(){
	
	$("#btn").on("click",function(){

		var text = $("#text").val();
		text = text.replace(/\n/g, '\r\n');
		var array = str2array( text );
		var unicode_data = new Uint16Array(array);
		var bom = new Uint8Array([0xFF, 0xFE]);	// unicode bom
		saveAs( new Blob( [bom,unicode_data], {type: "text/plain;charset=unicode"})
				,"target.reg"
		);		

	});
});

var str2array = function(str) {
	var array = [],i,il=str.length;
	for(i=0;i<il;i++) array.push(str.charCodeAt(i));
	return array;
};
</script>

<textarea id="text" style='width:400px;height:100px;'></textarea>
<br>
<input id="btn" type="button" value="保存"> 



posted by at 2018-02-17 00:17 | Comment(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

2016年11月19日


Google Visualization API の円グラフと通常テーブルの表示を jQuery のプラグインで作成する

Google Visualization を扱う時に基本部分となる円グラフの表示です。その表示の為に DataTable オブジェクトを作成しますが、それを単純に表示する為にテーブル表示部分(google.visualization.Table)も実装しています

※ ライブラリのロードは {'packages':['corechart','table']} です

Google の ドキュメント内の『オプション一覧』

Google のドキュメントの 『円グラフのクイック・スタート』

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>

<style>
#table_area .google-visualization-table-table {
	border-collapse: collapse;
}

.myHeader {
	color:#ffffff;
	background: #123456;
	padding: 12px!important
	border: solid #303030 1px;
}
.myCell {
	padding: 12px!important;
	border: solid #303030 1px!important;
}
</style>

<script>
var testData = 
[
	12543,
	326,
	2890,
	1112,
	200,
	8891,
	6333
];

// *********************************************
// jQuery を使用して画面上の
// コンテンツがロードされてから
// google.visualization をロード
// *********************************************
$(function(){
	google.charts.load('current', {'packages':['corechart','table']});
	google.charts.setOnLoadCallback(function(){
		// *********************************************
		// jQuery によるプラグイン化
		// *********************************************
		$.fn.extend({
			gv_getData: function() {
				return $(this).data("DataTable");
			},
			gv_setData: function() {
				if (arguments.length == 1) {
					// 引数がある場合は引数の DataTable をセットする
					$(this).data("DataTable",arguments[0]);
				}
				else {
					// 引数が無い場合は初期化した DataTable をセットする
					$(this).data("DataTable", new google.visualization.DataTable());
				}
				return this;
			},
			gv_addColumn: function(title){
				$(this).data("DataTable").addColumn('string', title);
				return this;
			},
			gv_addNumColumn: function(title){
				$(this).data("DataTable").addColumn('number', title);
				return this;
			},
			gv_addRow: function(){
				$(this).data("CurRow", $(this).data("DataTable").addRow() );
				return this;
			},
			gv_setCell: function(col, data){
				$(this).data("DataTable").setCell($(this).data("CurRow"), col, data+"" );
				return this;
			},
			gv_setNumCell: function(col, data){
				$(this).data("DataTable").setCell($(this).data("CurRow"), col, data );
				return this;
			},
			gv_setRowCell: function(row, col, data){
				$(this).data("DataTable").setCell(row, col, data+"" );
				return this;
			},
			gv_setRowNumCell: function(row, col, data){
				$(this).data("DataTable").setCell(row, col, data );
				return this;
			},
			gv_table: function(options){
				var visualization = new google.visualization.Table($(this).get(0));
				visualization.draw($(this).data("DataTable"), options);
				return this;
			},
			gv_pie: function(options){
				var visualization = new google.visualization.PieChart($(this).get(0));
				visualization.draw($(this).data("DataTable"), options);
				return this;
			}
		});

	
		// *********************************************
		// 初期の実行
		// *********************************************
		drawPieChart()
	});
});

// *********************************************
// visualization のロード完了時に実行
// *********************************************
function drawPieChart() {

	var pie_chart 	= $("#pie_chart_area");
	var table_area = $("#table_area");

	// ***************************************
	// 円グラフ作成
	// ***************************************
	pie_chart 
		.gv_setData()						// DataTable の初期化
		.gv_addColumn('分類')				// 列追加
		.gv_addNumColumn('データ');		// 列追加

	// ***************************************
	// 円グラフ内に DataTable を作成
	// ***************************************
	for( var i = 0; i < testData.length; i++ ) {
		pie_chart 
			.gv_addRow()				// 行追加
			.gv_setCell(0,"分類"+(i+1))		// カラムデータセット
			.gv_setNumCell(1,testData[i]);	// カラムデータセット
	}

	// ***************************************
	// 円グラフ描画
	// ***************************************
	pie_chart.gv_pie({
		width: 500,
		height: 400,
		is3D: true,
		title: '円グラフの表示',
		legend: 'right'
	});

	// ***************************************
	// pie_chart で作成した DataTable
	//  を使ってテーブルを表示する
	// ***************************************
	table_area
		.gv_setData(pie_chart.gv_getData())		// データのセット
		.gv_table({
			width: 300,
			cssClassNames: {
				tableCell: 'myCell',
				headerCell: 'myHeader'
			},
			showRowNumber: true
		});

}

</script>
<div id="pie_chart_area"></div>
<div id="table_area"></div>



▼ デモ



posted by at 2016-11-19 18:23 | Comment(0) | JavaScript | このブログの読者になる | 更新情報をチェックする