WEB 職人 :トップページ

2012年05月17日

『Yahoo!24H番組』ボタン(2) / コンボボックス & localStorage 版

ブログに貼りつけるツールとしてコンボボックスを使って、一度選択した地域を localStorage に保存するようにしました。

<style>
#yahoo_bangumi input {
	color: #fff;
	font-weight:bold;
	border-radius: 6px;
	background: -moz-linear-gradient(top, #000, #333);
	background: -webkit-linear-gradient(top, #000, #333);
	background: -o-linear-gradient(top, #000, #333);
	background: -ms-linear-gradient:(top, #000, #333 );
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#000000, endColorstr=#333333)";
}
</style>
<div id="yahoo_bangumi" style='margin-top:0px;'>
<select id="yahoo_area">
<option value="10">北海道（札幌）</option><option value="11">北海道（函館）</option><option value="12">北海道（旭川）</option><option value="13">北海道（帯広）</option><option value="14">北海道（釧路）</option><option value="15">北海道（北見）</option><option value="16">北海道（室蘭）</option><option value="22">青森</option><option value="20">岩手</option><option value="18">秋田</option><option value="19">山形</option><option value="17">宮城</option><option value="21">福島</option><option value="28">栃木</option><option value="25">群馬</option><option value="26">茨城</option><option value="23">東京</option><option value="24">神奈川</option><option value="29">埼玉</option><option value="27">千葉</option><option value="32">山梨</option><option value="31">新潟</option><option value="30">長野</option><option value="34">石川</option><option value="37">富山</option><option value="36">福井</option><option value="35">静岡</option><option value="33">愛知</option><option value="39">岐阜</option><option value="38">三重</option><option value="43">和歌山</option><option value="44">奈良</option><option value="45">滋賀</option><option value="41">京都</option><option value="40">大阪</option><option value="42">兵庫</option><option value="53">徳島</option><option value="51">愛媛</option><option value="54">高知</option><option value="52">香川</option><option value="47">岡山</option><option value="46">広島</option><option value="49">鳥取</option><option value="48">島根</option><option value="50">山口</option><option value="55">福岡</option><option value="61">佐賀</option><option value="56">熊本</option><option value="57">長崎</option><option value="60">大分</option><option value="59">宮崎</option><option value="58">鹿児島</option><option value="62">沖縄</option></select>
<br />
<script type="text/javascript">
(function() {
	var wk = localStorage['yahoo_area'] || '';
	if ( wk != '' ) {
		document.getElementById('yahoo_area').value = wk;
	}
})();
</script>
<input
	type="button"
	value="Yahoo! 24H番組"
	onclick="
(function(){
	localStorage['yahoo_area'] = document.getElementById('yahoo_area').value;
	var url = 'http://tv.yahoo.co.jp/listings/?&type=normal&a='+document.getElementById('yahoo_area').value+'&t=TV&s=1&vb=1&vc=0&vd=0&ve=1&va=24';
	var d = new Date();
	var yyyy = d.getFullYear();
	var mm = (d.getMonth()+1);
	var len1 = ('00'+mm).length;
	mm = ('00'+mm).substr(len1-2,2);
	var dd = d.getDate();
	var len2 = ('00'+dd).length;
	dd = ('00'+dd).substr(len2-2,2);
	var hh = d.getHours() - 2;
	if ( hh <= 1 ) {
		hh = hh + 24;
		dd = d.getDate()-1;
		len2 = ('00'+dd).length;
		dd = ('00'+dd).substr(len2-2,2);
	}
	url += '&d=' + yyyy+mm+dd;
	url += '&st=' + hh;
	window.open(url);
})();
	"
/>
</div>

【クライアント/サーバーの最新記事】

posted by at 23:55 | Comment(0) | クライアント/サーバー |

|

2012年04月30日

『Yahoo!大阪24H番組』ボタン

2012/4/30 : 24～3 の間がうまく行ってなかったのを修正しました

最近、WEB から番組をチェックするようになったので、専用のボタンを作成しました。
地域は、大阪が 40 ですが、他は以下のようになります

<input
	type="button"
	value="Yahoo!大阪24H番組"
	onclick="
(function(){
	var url = 'http://tv.yahoo.co.jp/listings/?&type=normal&a=40&t=TV&s=1&vb=1&vc=0&vd=0&ve=1&va=24';
	var d = new Date();
	var yyyy = d.getFullYear();
	var mm = (d.getMonth()+1);
	var len1 = ('00'+mm).length;
	mm = ('00'+mm).substr(len1-2,2);
	var dd = d.getDate();
	var len2 = ('00'+dd).length;
	dd = ('00'+dd).substr(len2-2,2);
	var hh = d.getHours() - 2;
	if ( hh <= 1 ) {
		hh = hh + 24;
		dd = d.getDate()-1;
		len2 = ('00'+dd).length;
		dd = ('00'+dd).substr(len2-2,2);
	}
	url += '&d=' + yyyy+mm+dd;
	url += '&st=' + hh;
	window.open(url);
})();
	"
/>

この下はさらに、ボタン画像を使ったものです。

<style type="text/css">
.bt {
	border: 0px;
	width: 180px;
	height: 30px;
	text-align: left;
	padding-left: 32px;
	font-size:13px; 
	font-weight: bold;
	cursor: pointer;
	background-color: #fff;
	margin: 4px 4px 4px 4px;
}
</style>
<input
	class="bt"
	type="button"
	value="Yahoo!東京24H番組"
 	style='background-image: url(https://lh6.googleusercontent.com/-dZnazzvnzCw/T5FN4nTSUrI/AAAAAAAAFnQ/JMTzwUr7CDk/s180/btn049_06.png);'
	onclick="
(function(){
	var url = 'http://tv.yahoo.co.jp/listings/?&type=normal&a=23&t=TV&s=1&vb=1&vc=0&vd=0&ve=1&va=24';
	var d = new Date();
	var yyyy = d.getFullYear();
	var mm = (d.getMonth()+1);
	var len1 = ('00'+mm).length;
	mm = ('00'+mm).substr(len1-2,2);
	var dd = d.getDate();
	var len2 = ('00'+dd).length;
	dd = ('00'+dd).substr(len2-2,2);
	var hh = d.getHours() - 2;
	if ( hh <= 1 ) {
		hh = hh + 24;
		dd = d.getDate()-1;
		len2 = ('00'+dd).length;
		dd = ('00'+dd).substr(len2-2,2);
	}
	url += '&d=' + yyyy+mm+dd;
	url += '&st=' + hh;
	window.open(url);
})();
	"
/>

▼ボタン画像
WEBデザイナーが作った超シンプル素材集

posted by at 14:29 | Comment(0) | ツール |

|

2012年04月28日

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

実行部分を WEB 上に置いて、固定部分を .js に分けて作成しました
( レジストリには "Flags"=dword:00000001 が必要です )



ダイアログが表示された時、すでにテキストエリア内のコードはクリップボードにコピー
されていますが、内容を変更して再度クリップボードにコピーする事ができます。

ie_ex.js


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

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

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

	str="";
	str+="<input \n";
	str+="	id=\"btn\" \n";
	str+="	type=\"button\" \n";
	str+="	style=\"display:none;\" \n";
	str+="	onClick='keyflg1=window.event.shiftKey;keyflg2=window.event.ctrlKey;keyflg3=window.event.altKey;' \n";
	str+="> ";
	document.write( str );

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

	try {
		// *************************************************
		// 画像専用処理( レジストリ 0x2 )
		// *************************************************
		if ( keyflg1 && keyflg2 && keyflg3 ) {
			if ( uninstall() ) {
				str = "アンインストールを実行しましたので、IE を再起動して下さい　　　";
				window.close();
			}
			else {
				str = "アンインストールをキャンセルしました　　　";
			}
			alert(str)
		}
	}
	catch(e){
		str = "アンインストール処理ができませんでした　　　";
		alert(str)
	}



// *********************************************************
// アンインストール
// *********************************************************
function uninstall() {

	var WshShell = new ActiveXObject("WScript.Shell");

	if ( confirm("アンインストールしてよろしいですか?　　　") ) {
		try {
			WshShell.RegDelete( "HKCU\\Software\\Microsoft\\Internet Explorer\\MenuExt\\" + RegName + "\\" );
		}
		catch(e){
			alert("アンインストールが失敗しました　　　");
		}
		return true;
	}
	else {
		return false;
	}

}


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;

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

</script>
<script language="JavaScript" src="http://winofsql.jp/html/ie_ex.js"></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">

	str = '<img src="' + obj.src + '"';
	str += ' style="border: solid 0px #000000" />';

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

	document.getElementById("text").value = str;

</script>

関連する記事

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

posted by at 14:37 | Comment(0) | IE拡張 |

|

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

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

レジストリの登録場所

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)

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

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

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

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

後発の仕様変更

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


関連する記事

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

posted by at 13:51 | Comment(0) | IE拡張 |

|

2012年04月09日

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



ブラウザの拡張は、今表示しているコンテンツの情報を効率良く利用しようというところ
からたいてい始まります。Google Chrome 拡張作成入門 でも、表示している画像の URL
から HTML のコードを取得しましたが、IE 拡張でも当然可能です。

インストールは少し面倒ですが、いったんインストールしてしまえば修正やデバッグもすぐ
に反映されますし、Google Chrome よりかなり簡単に表示しているページを加工する事が
可能です。

ただ、詳細なドキュメントを探すのに苦労する事と、今までいろいろ変遷があって、なかなか
解りづらい問題がたくさんあって、あまり一般的には使われていないのが現実です。例えば、
数年前までは、そのページの 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;

// *********************************************************
// アンインストール
// *********************************************************
function uninstall() {

	var WshShell = new ActiveXObject("WScript.Shell");

	if ( confirm("アンインストールしてよろしいですか?　　　") ) {
		try {
			WshShell.RegDelete( "HKCU\\Software\\Microsoft\\Internet Explorer\\MenuExt\\" + RegName + "\\" );
		}
		catch(e){
			alert("アンインストールが失敗しました　　　");
		}
		return true;
	}
	else {
		return false;
	}

}
</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 {
		// *************************************************
		// 画像専用処理( レジストリ 0x2 )
		// *************************************************
		if ( keyflg1 && keyflg2 && keyflg3 ) {
			if ( uninstall() ) {
				str = "アンインストールを実行しましたので、IE を再起動して下さい　　　";
			}
			else {
				str = "アンインストールをキャンセルしました　　　";
			}
		}
		else {
			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:\\laylaClass\\menuex\\get_img_html.htm"
"Contexts"=dword:00000002

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

アンインストール

ALT キーを押してから、SHIFT と CTRL を押して、3つ同時に押している状態で右クリックして
メニューを選択すると、アンインストール処理が実行されて、レジストリよりエントリが削除
されます( get_img_html.htm は削除されません )

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

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

関連する記事

Twitter用埋め込みコードを取得する IE拡張
Seesaa の記事カテゴリをソートする IE 拡張
IE拡張メニュー : Seesaa のリンクコンテンツを一瞬でソートする

posted by at 19:04 | Comment(0) | IE拡張 |

|

	『Yahoo!24H番組』ボタン(2) / コンボボックス & localStorage 版
	『Yahoo!大阪24H番組』ボタン
	『カーソル下の画像用HTMLの取得』を行うIE拡張をダイアログを表示して行う
	IE拡張を作成する為の基本仕様
	ブラウザ拡張の中で一番簡単な IE 拡張 : カーソル下の画像用HTMLの取得
	Google Chrome 拡張作成入門
	Google Chrome 拡張機能『Awesome Screenshot』: (ページを画像化) の日本語化が中途半端なので修正しました
	Twitter用埋め込みコードを取得する Google Chrome 拡張
	Twitter用埋め込みコードを取得する Firefox アドオン
	Twitter用埋め込みコードを取得する IE拡張
	bit.ly のブックマーレットを開けて見てみると、『tumblr』のを転用してました
	bitly の URL 短縮結果のカスタマイズ
	行の最後に画像を配置する為の HTML 記述
	Seesaa ブログのエクスポートを呼び出して全てをバックアップするスクリプト
	Seesaa ブログの記事一覧の一括編集時に一括設定できるようにする Greasemonkey
	prototype.js による onload イベントの登録
	jQuery の bind メソッドで一般的な onload イベントを実装
	Google の一般API( jsapi ) を使って onload イベントを実行する
	Google News Search API の NewsShow でニュースコンテンツを利用する
	Google MAP API V3 の addDomListener でページロード時のイベントを登録する