2019年01月01日


Seesaa のスマホページで表示される広告が左に寄りすぎでみっともないので CSS( 属性セレクター ) で調整する

この左に寄っている部分です。



id の 先頭が gn_delivery となってるので、これが変わらない限りは有効ですね。

属性セレクター( mozilla )
div[id^="gn_delivery"] {
	text-align:center;
}




posted by at 2019-01-01 21:11 | Seesaa | このブログの読者になる | 更新情報をチェックする

2018年02月19日


MSXML2.XMLHTTPでファイルをPOSTする

MSXML2.XMLHTTPでファイルをアップロードする と対になる処理です。受けるほうは通常と同じで簡単ですが、送るほうは注意すべき点がいくつかあります

まず、送るほうでは日本語を URL エンコードする必要があるので、JavaScript を呼び出して encodeURIComponent を使用しています。( その為、PHP ではデコードされると UTF-8 になるので注意 )

後、http で POST する際の仕様として、http ヘッダに Content-Type として application/x-www-form-urlencoded をセットしています( データサイズは実際ブラウザが行っているのでセットしています。)

VBSCript 側
<JOB>
<SCRIPT language="JScript">
function js(str) {

	return encodeURIComponent( str );

}
</SCRIPT>

<SCRIPT language="VBScript">

' XMLHTTP を作成
Set objHTTP = Wscript.CreateObject("Msxml2.ServerXMLHTTP")
lResolve = 60 * 1000
lConnect = 60 * 1000
lSend = 60 * 1000
lReceive = 60 * 1000

Call objHTTP.Open("POST","https://yourdomain/test/post.php",False)
Call objHTTP.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
strData = "data=" & js("日本語をURLエンコードする")
Call objHTTP.SetRequestHeader("Content-Length",Len(strData))
Call objHTTP.setTimeouts(lResolve, lConnect, lSend, lReceive)
Call objHTTP.Send(strData)
Wscript.Echo objHTTP.responseText

</SCRIPT>

</JOB>


PHP 側
<?php
header( "Content-Type: text/html; charset=utf-8" );
header( "Expires: Thu, 19 Nov 1981 08:52:00 GMT" );
header( "Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0" );
header( "Pragma: no-cache" );

mb_language( "ja" );
mb_internal_encoding("utf-8");

foreach( $_POST as $key => $value ) {
	// $_GET の中には変換前が残る
	$_GET[$key] = $value;
	// $_POST を HTML 埋め込み用変数として使用する
	$_POST[$key] = htmlentities( $value );
}

if ( $_SERVER['REQUEST_METHOD'] == 'POST' ) {

	// ファイルへ入力されたデータを書き込み
	file_put_contents( "text.dat", mb_convert_encoding( $_GET['data'], "shift_jis", "utf-8" ) );

	print "POST処理を受付けました";

}

?>
<form method="post">
<input type="text" name="data" value="<?= $_POST["data"] ?>">
<input type="submit" name="send" value="送信">
</form>





posted by at 2018-02-19 17:57 | クライアント/サーバー | このブログの読者になる | 更新情報をチェックする

PHP の関数での環境情報取得( phpinfo の代替え )

@niftyホームページサービス(LaCoocan)では、phpinfo 関数が使用できないので、代替えの為いろいろな関数で情報を表示しています。

関数での情報取得

以下で使用している主な関数です。

ini_get
get_loaded_extensions
get_declared_classes
ini_get_all

phpversion
php_ini_loaded_file
get_include_path
get_magic_quotes_gpc


実行結果

少し見づらいですが、調査する場合や簡単な確認のとっかかりにはなると思います。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<title>phpinfo の代替え</title>
<style>
* {
	font-size: 12px;
	font-family: "ヒラギノ角ゴPro W6","Hiragino Kaku Gothic Pro W6","メイリオ",Meiryo,"MS Pゴシック",Verdana,Arial,Helvetica,sans-serif;
}

pre {
	white-space: pre-wrap;
	word-wrap: break-word;
}
</style>
</head>
<body style='width:400px;margin:auto;border:1px solid #ccc;padding:12px;'>

<pre>
<?php

	print "PHP version : " . phpversion() . "\n";

	print "php.ini : " . php_ini_loaded_file() . "\n";
	print "include_path : " . get_include_path() . "\n";
	print "get_magic_quotes : " . get_magic_quotes_gpc . "\n";

	print "variables_order : " . ini_get('variables_order') . "\n";
	print "short_open_tag : " . ini_get('short_open_tag') . "\n";
	print "display_errors : " . ini_get('display_errors') . "\n";
	print "display_startup_errors : " . ini_get('display_startup_errors') . "\n";
	print "allow_url_fopen : " . ini_get('allow_url_fopen') . "\n";
	print "allow_url_include : " . ini_get('allow_url_include') . "\n";
	print "max_execution_time : " . ini_get('max_execution_time') . "\n";
	print "post_max_size : " . ini_get('post_max_size') . "\n";
	print "track_errors : " . ini_get('track_errors') . "\n";

	print "<hr>";
	print "<b style='font-size:24;font-weight:bold'>Loaded_extensions</b>\n";

	// コンパイル/ロードされている全てのモジュールの名前を配列として返す
	$target = get_loaded_extensions();
	foreach( $target as $key => $value ) {
		print "$key => $value\n";
	}

	print "<hr>";
	print "<b style='font-size:24;font-weight:bold'>get_declared_classes</b>\n";

	// 定義済のクラスの名前を配列として返す
	$classes = get_declared_classes();
	foreach( $classes as $key => $value ) {
		print "$key => $value\n";
	}

	// $_SERVER
	print "<hr>";
	print "<b style='font-size:24;font-weight:bold'>\$_SERVER</b>\n";

	foreach( $_SERVER as $key => $value ) {
		print "$key => $value\n";
	}

	// $_ENV
	print "<hr>";
	print "<b style='font-size:24;font-weight:bold'>\$_ENV</b>\n";

	foreach( $_ENV as $key => $value ) {
		print "$key => $value\n";
	}

	// すべての設定オプションを得る
	print "<hr>";
	print "<b style='font-size:24;font-weight:bold'>ini_get_all</b>\n";
	$inis = ini_get_all();
	print_r($inis);

?>
</pre>

</body>
</html>




タグ:PHP phpinfo
posted by at 2018-02-19 10:06 | LaCoocan | このブログの読者になる | 更新情報をチェックする

2018年02月18日


MSXML2.(Server)XMLHTTPでファイルをアップロードする

呼び出し側は WSH としての VBScript です。バイナリとしてアップロードするので、CRLF は CRLF のままなので、LF へ変換が必要なファイルやシステムでは、サーバー側で変換する必要があります

PHP ならそのままで問題無いので、わざわざ 通常の POST 仕様にあわせる必要も無いと思います。

VBScript 側のサンプルは Microsoft の サポートオンラインにあるので、IIS ではうまくいくのかとは思うのですが、試してはいません。いずれにしても、IIS に対して行う場合はテストが必要です

テストはさくらインターネットの環境で行っています。PHP は、5.6.32 でした。

いったん PNG 画像をアップロードして、FileZilla でダウンロードして fc /b で比較しましたが問題無く同じものでした。テキストファイルも同じ結果で CRLF のままで返って来ています。ただ、rb wb を rt wt にしてもアップロードされたものは同じでした。ドキュメント通り、Windows の PHP 環境のみで効果があるのかもしれませんが、テストはできていません。

最初記事を書いたころは、MSXML2.XMLHTTP というクライアント用のオブジェクトを使用していましたが、Microsoft 側の変遷で現在は MSXML2.ServerXMLHTTP のほうが信頼性が高いと判断して使用しています。
upload.vbs
' *************************************
' サーバーオブジェクトを使用しています
' *************************************
Set objHTTP = Wscript.CreateObject("Msxml2.ServerXMLHTTP")
lResolve = 60 * 1000
lConnect = 60 * 1000
lSend = 60 * 1000
lReceive = 60 * 1000

' Stream オブジェクト の作成
Set Stream = CreateObject("ADODB.Stream")
' Stream のオープン
Stream.Open
' Stream タイプの指定
Stream.Type = 1		' StreamTypeEnum の adTypeBinary
' 既存ファイルの内容を Stream に読み込む
Stream.LoadFromFile "target.png"

' ▼ ご自分の環境に書き換えてください。
Call objHTTP.Open("POST","https://yourdomain/test/put.php",False)

nLen = Stream.Size
data = Stream.Read(nLen)

Call objHTTP.SetRequestHeader("Content-Length",nLen)
Call objHTTP.setTimeouts(lResolve, lConnect, lSend, lReceive)
Call objHTTP.Send(data)

Wscript.Echo objHTTP.responseText
 
' Stream を閉じる
Stream.Close


put.php
<?PHP
header( "Content-Type: text/html; charset=utf-8" );

$id = uniqid();

$fp = fopen( "php://input", "rb" );
$wfp = fopen( "data/{$id}_upload.dat", "wb" );

while( $ret = fread( $fp, 4096 ) ) {

	fwrite( $wfp, $ret );

}

fclose($wfp);
fclose($fp);


?>
データが保存されました


PHP は utf-8 で書いています。それ以外のキャラクタセットの場合は、http ヘッダに同じように設定しておかないと、XMLHTTP が日本語の変換をできないので注意して下さい。通常通り、使用しているキャラクタセットと http ヘッダを一致させればどのキャラクタセットでも問題ありません。

※ HTML 等の静的ページでは、サーバ側でキャラクタセツトの設定ができない場合は、UTF-8 扱いになってしまいます


 関連する記事

PHP + VBS 分割ダウンロード
バッチ処理的ファイルのコピー
MSXML2.XMLHTTPでファイルをPOSTする
prototype.js の Ajax.Request を使い、FORM を使わずにデータをPOSTする



posted by at 2018-02-18 16:12 | クライアント/サーバー | このブログの読者になる | 更新情報をチェックする

テンプレートでその記事の編集画面に直接リンクする


posted by ニックネームの ニックネーム部分にリンクを作成します。これは、「記事」コンテンツの HTML テンプレートを編集します。( こうしておくと、記事のリライトはとっても楽です )

posted by <a href="https://blog.seesaa.jp/pages/my/blog/article/edit/input?id=<% article.id %>" target="_blank"><% article.nickname %></a> at <% article.createstamp | date_format("%Y-%m-%d %H:%M") -%>


posted by at 2018-02-18 01:47 | Seesaa | このブログの読者になる | 更新情報をチェックする

Seesaaブログのテンプレート内で使用できる page_name 変数を JavaScript で使用する


page_name 変数は、テンプレート内で使用する変数なので、直接は使用できませんが、ヘッド部分に以下のコードを入れておけば後続のスクリプトで使用する事ができます
<script>
var $page_name = '<% page_name %>';
</script>


具体的な使用方法としては、トップページは 'index' になりますので、日付タイトルを以下のようにして非表示にする事ができます。
<script>
if ( $page_name == 'index' ) {
	str="";
	str+="<style> \n";
	str+=".date { display:none; } \n";
	str+="</style> ";
	document.write( str );
}
</script>


あるいは、jQuery が使えるのであれば以下のように動的に追加も可能です。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>

$(function(){

	var style = $("<style>");
	style.text(".date { display:none; }");

	var target = $("head").eq(0);
	style.appendTo(target);

});

</script>


さらに、トップページの記事数を1つにして、未来の当分来ない日付の記事を書き込めは、常に表示される「エントランス」を作成できます

注) 'tag' というページもあります



posted by at 2018-02-18 01:40 | Seesaa | このブログの読者になる | 更新情報をチェックする

『カーソル下の画像用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 拡張
posted by at 2018-02-18 01:07 | 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 | 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 | 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 | 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 | JavaScript | このブログの読者になる | 更新情報をチェックする

2015年12月18日


Seesaa ブログのエクスポートを呼び出して全てをバックアップするスクリプト



2015/12/18 : Google Chrome でダウンロード可能にしました
拡張子がスクリプトのままだと、Google Chrome がダウンロードさせてくれないので、 .lightbox としています。その為、【最初に set_script.bat を実行して、拡張子を .wsf に変更するようにしています】
2015/02/04 : 再び、正常に動作するように修正しました 2013/01/19 : 正常に動作するように修正しました bk.wsf
<JOB>
<COMMENT>
************************************************************
 EXPORT ( バッチ処理用 )
 Seesaa からブログのバックアップデータを取得する

************************************************************
</COMMENT>

<OBJECT id="objHTTP" progid="Msxml2.ServerXMLHTTP" />
<OBJECT id="Stream" progid="ADODB.Stream" />

<SCRIPT language=VBScript>
' ***********************************************************
' 正規表現用
' ***********************************************************
Set regEx = New RegExp

' ***********************************************************
' タイムアウト用
' ***********************************************************
lResolve = 60 * 1000
lConnect = 60 * 1000
lSend = 60 * 1000
lReceive = 60 * 1000

' ***********************************************************
' 処理開始
' ***********************************************************
bDebug = False
target_year1 = WScript.Arguments(0)
target_month1 = WScript.Arguments(1)
target_year2 = WScript.Arguments(2)
target_month2 = WScript.Arguments(3)

emailData = "メールアドレス"
passData = "パスワード"
' バックアップしたいブログの ID を指定します
blogData = "9999999"

' ログインページの取得
Call objHTTP.Open("GET","https://ssl.seesaa.jp/auth",False)
Call objHTTP.setTimeouts(lResolve, lConnect, lSend, lReceive)
Call objHTTP.Send()

' ページ全体
strPage = objHTTP.responseText

' 投稿用のキーを取得
regEx.IgnoreCase = True
regEx.Global = True
regEx.Pattern = "authpost""><input value=""([^""]+)"""
Set Matches = regEx.Execute( strPage )
For Each Match in Matches
	strPostKey = Match.SubMatches(0)
	Exit For
Next


' ***********************************************************
' (1) : POST
' ***********************************************************
' ログイン URL
Call objHTTP.Open("POST","https://ssl.seesaa.jp/auth",False)
' POST 用ヘッダ
Call objHTTP.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
strData = ""
strData = strData & "aXt=" & strPostKey
strData = strData & "&email=" & emailData
strData = strData & "&password=" & passData
strData = strData & "&return_to=http%3A%2F%2Fblog.seesaa.jp%2F"
Call objHTTP.SetRequestHeader("Content-Length",Len(strData))
Call objHTTP.Send(strData)

strHeaders = objHTTP.getAllResponseHeaders()
if bDebug then
	Wscript.Echo strHeaders
end if

' ***********************************************************
' (2) : GET
' ***********************************************************
' 対象ブログ URL
Call objHTTP.Open("GET","https://blog.seesaa.jp/cms/home/switch?blog_id="&blogData&"&goto=/cms/article/regist/input" , False)
Call objHTTP.setTimeouts(lResolve, lConnect, lSend, lReceive)
Call objHTTP.Send()

'Set OutObj = Fs.OpenTextFile( "log.txt", 2, True )
'OutObj.Write objHTTP.responseText
'OutObj.Close

if bDebug then
	Wscript.Echo "開始"
end if

' ***********************************************************
' (3) : GET
' ***********************************************************
' 投稿ページ
Call objHTTP.Open("GET","https://blog.seesaa.jp/cms/tools/mt/export/input" , False)
Call objHTTP.setTimeouts(lResolve, lConnect, lSend, lReceive)
Call objHTTP.Send()

' 投稿用のキーを取得
strPage = objHTTP.responseText
regEx.Pattern = "enctype=""multipart/form-data""><input value=""([^""]+)"""
Set Matches = regEx.Execute( strPage )
For Each Match in Matches
	strPostKey = Match.SubMatches(0)
	Exit For
Next

' ***********************************************************
' カテゴリ ID リストの取得 ( 2015/02/04 追加 )
' ***********************************************************
regEx.Pattern = "name=""category_id"" value=""([^""]+)"""
regEx.Global = True
Set Matches = regEx.Execute( strPage )

Wscript.Sleep(2000) ' 2秒間の間を置く

' ***********************************************************
' (3) : Export 用データ準備
' ***********************************************************
boundary = DateDiff("s", "1970/1/1 0:00:00",DateAdd("h",-9,now))
h_boundary = "---------------------------" & boundary


target_year1 = WScript.Arguments(0)
target_month1 = WScript.Arguments(1)
target_year2 = WScript.Arguments(2)
target_month2 = WScript.Arguments(3)

' ソース内テキストデータの表示
str = RegTrim(GetResource("myTextData"))
str = Replace( str, "$B", boundary )
str = Replace( str, "$YEAR1", target_year1 )
str = Replace( str, "$MONTH1", target_month1 )
str = Replace( str, "$YEAR2", target_year2 )
str = Replace( str, "$MONTH2", target_month2 )
str = Replace( str, "$AXT", strPostKey )
if bDebug then
	Wscript.Echo str
end if

' ***********************************************************
' カテゴリ ID リストの設定 ( 2015/02/04 追加 )
' ***********************************************************
bFlg = False

For Each Match in Matches
	if bFlg <> False then
		bFlg = True
	else
		str = str & vbCrLf
	end if
	str = str & "Content-Disposition: form-data; name=""category_id""" & vbCrLf & vbCrLf
	str = str & Match.SubMatches(0) & vbCrLf
	str = str & "-----------------------------" & boundary
Next

str = str & "--" & vCrLf

' ***********************************************************
' (4) : Export 用データ送信
' ***********************************************************
Call objHTTP.Open( "POST","https://blog.seesaa.jp/cms/tools/mt/export/do_export", False )
' POST 用 HTTP ヘッダ
Call objHTTP.setRequestHeader("Content-Type", "multipart/form-data; boundary=" & h_boundary)
' 念のため
Call objHTTP.setRequestHeader("Referer", "https://blog.seesaa.jp/cms/tools/mt/export/input" )
Call objHTTP.SetRequestHeader("Content-Length",Len(str))
Call objHTTP.setTimeouts(lResolve, lConnect, lSend, lReceive)
Call objHTTP.Send(str)

Stream.Open
Stream.Type = 1 ' バイナリ
Stream.Write objHTTP.responseBody
Stream.SaveToFile "seesaa_" & blogData & "_" & target_year1 & target_month1 & "_" & target_year2 & target_month2 & ".log", 2
Stream.Close   

Wscript.Echo "処理が終了しました:" & target_year1 & target_month1 & "〜" & target_year2 & target_month2

' ***********************************************************
' 文字列前後の漢字スペースを含むホワイトスペースの削除
' ***********************************************************
Function RegTrim( strValue )

	Dim regEx, str

	Set regEx = New RegExp
	regEx.IgnoreCase = True
	regEx.Pattern = "^[ \s]+"
	str = regEx.Replace( strValue, "" )
	regEx.Pattern = "[ \s]+$"
	RegTrim = regEx.Replace( str, "" )

End Function
</SCRIPT>

<COMMENT>
************************************************************
 ソース内テキストデータ
************************************************************
</COMMENT>
<RESOURCE id="myTextData">
<![CDATA[
-----------------------------$B
Content-Disposition: form-data; name="aXt"

$AXT
-----------------------------$B
Content-Disposition: form-data; name="encode"

utf8
-----------------------------$B
Content-Disposition: form-data; name="from_year_month"

$YEAR1-$MONTH1
-----------------------------$B
Content-Disposition: form-data; name="to_year_month"

$YEAR2-$MONTH2
-----------------------------$B
]]>
</RESOURCE>

</JOB>

オリジナルのシステムで範囲指定が指定可能なのでエクスポートが便利になっています。

▼ バッチファイル例は以下のようになりました
cscript.exe bk.wsf 2009 04 2010 03

sleep.vbs
cscript.exe bk.wsf 2010 04 2011 03

sleep.vbs
cscript.exe bk.wsf 2011 04 2012 03

sleep.vbs
cscript.exe bk.wsf 2012 04 2013 03
バックアップには、ブログの id 番号が必要です
=====================================================================
拡張子がスクリプトのままだと、Google Chrome がダウンロードさせてくれないので、
 .lightbox としています。その為、

【最初に set_script.bat を実行して下さい】
=====================================================================

■ 1) seesaa_backup.bat の中の範囲指定部分を適宜変更して利用して下さい。

例) 2012/4月 〜 2013/3月
cscript.exe bk.wsf 2012 04 2013 03

   範囲を広くしすぎると、エラーになるおそれがあるので年単位が妥当だと思います


■ 2) bk.wsf の以下の部分を変更して、seesaa.bat を実行して下さい

(行は36〜39)
emailData = "メールアドレス"
passData = "パスワード"
' バックアップしたいブログの ID を指定します
blogData = "9999999"


ブログの ID は、https://blog.seesaa.jp/cms/home/index で、該当
するブログの名前のリンク内の URL から取り出します。

例) blog_id の番号
https://blog.seesaa.jp/cms/home/switch?blog_id=9999999&goto=/cms/article/regist/input


■ 著作権その他

このプログラムはフリーです。どうぞ自由に御使用ください。
著作権は作者である私(lightbox)が保有しています。
また、本ソフトを運用した結果については、作者は一切責任を
負えせんのでご了承ください。
posted by at 2015-12-18 12:14 | Seesaa | このブログの読者になる | 更新情報をチェックする

2015年11月20日


【改造】雪を降らす snowstorm.js に 風向きを外部から設定できるオプションを追加しました

Snowstorm: A JavaScript Snow Effect for HTML

元々は、ランダムで風向きを算出して、マウスの動きで変化するようになっていますが、マウスの動きに反応しないようにするオプションはあるのですが(snowStorm.followMouse = false;)、風向きはそれこそ風任せなので、外部のプロパティから変更するようにしました。

snowStorm.vWindX = 横の強度( マイナス可 );
snowStorm.vWindY = 縦の強度;


JavaScript の圧縮はこちら

その他の一般的な内容の記事は以下です。

クリスマスに備えて、『雪を降らす snowstorm.js』のカスタマイズ / ダウンロードも何も必要ありません。jQuery も必要ありません

雪を降らす snowstorm.js の 特定 DIV 内での実装


▼ 以下、改造コード
/** @license
 * DHTML Snowstorm! JavaScript-based snow for web pages
 * Making it snow on the internets since 2003. You're welcome.
 * -----------------------------------------------------------
 * Version 1.44.20131208 (Previous rev: 1.44.20131125)
 * Copyright (c) 2007, Scott Schiller. All rights reserved.
 * Code provided under the BSD License
 * http://schillmania.com/projects/snowstorm/license.txt
 */

/*jslint nomen: true, plusplus: true, sloppy: true, vars: true, white: true */
/*global window, document, navigator, clearInterval, setInterval */

var snowStorm = (function(window, document) {

  // --- common properties ---

  this.autoStart = true;          // Whether the snow should start automatically or not.
  this.excludeMobile = true;      // Snow is likely to be bad news for mobile phones' CPUs (and batteries.) Enable at your own risk.
  this.flakesMax = 128;           // Limit total amount of snow made (falling + sticking)
  this.flakesMaxActive = 64;      // Limit amount of snow falling at once (less = lower CPU use)
  this.animationInterval = 33;    // Theoretical "miliseconds per frame" measurement. 20 = fast + smooth, but high CPU use. 50 = more conservative, but slower
  this.useGPU = true;             // Enable transform-based hardware acceleration, reduce CPU load.
  this.className = null;          // CSS class name for further customization on snow elements
  this.excludeMobile = true;      // Snow is likely to be bad news for mobile phones' CPUs (and batteries.) By default, be nice.
  this.flakeBottom = null;        // Integer for Y axis snow limit, 0 or null for "full-screen" snow effect
  this.followMouse = true;        // Snow movement can respond to the user's mouse
  this.snowColor = '#fff';        // Don't eat (or use?) yellow snow.
  this.snowCharacter = '&bull;';  // &bull; = bullet, &middot; is square on some systems etc.
  this.snowStick = true;          // Whether or not snow should "stick" at the bottom. When off, will never collect.
  this.targetElement = null;      // element which snow will be appended to (null = document.body) - can be an element ID eg. 'myDiv', or a DOM node reference
  this.useMeltEffect = true;      // When recycling fallen snow (or rarely, when falling), have it "melt" and fade out if browser supports it
  this.useTwinkleEffect = false;  // Allow snow to randomly "flicker" in and out of view while falling
  this.usePositionFixed = false;  // true = snow does not shift vertically when scrolling. May increase CPU load, disabled by default - if enabled, used only where supported
  this.usePixelPosition = false;  // Whether to use pixel values for snow top/left vs. percentages. Auto-enabled if body is position:relative or targetElement is specified.

  // --- less-used bits ---

  this.freezeOnBlur = true;       // Only snow when the window is in focus (foreground.) Saves CPU.
  this.flakeLeftOffset = 0;       // Left margin/gutter space on edge of container (eg. browser window.) Bump up these values if seeing horizontal scrollbars.
  this.flakeRightOffset = 0;      // Right margin/gutter space on edge of container
  this.flakeWidth = 8;            // Max pixel width reserved for snow element
  this.flakeHeight = 8;           // Max pixel height reserved for snow element
  this.vMaxX = 5;                 // Maximum X velocity range for snow
  this.vMaxY = 4;                 // Maximum Y velocity range for snow
  this.zIndex = 0;                // CSS stacking order applied to each snowflake

  // 2015-11-19 lightbox
  this.vWindX = 2;                // 
  this.vWindY = 2;                // 

  // --- "No user-serviceable parts inside" past this point, yadda yadda ---

  var storm = this,
  features,
  // UA sniffing and backCompat rendering mode checks for fixed position, etc.
  isIE = navigator.userAgent.match(/msie/i),
  isIE6 = navigator.userAgent.match(/msie 6/i),
  isMobile = navigator.userAgent.match(/mobile|opera m(ob|in)/i),
  isBackCompatIE = (isIE && document.compatMode === 'BackCompat'),
  noFixed = (isBackCompatIE || isIE6),
  screenX = null, screenX2 = null, screenY = null, scrollY = null, docHeight = null, vRndX = null, vRndY = null,
  windOffset = 1,
  windMultiplier = 2,
  flakeTypes = 6,
  fixedForEverything = false,
  targetElementIsRelative = false,
  opacitySupported = (function(){
    try {
      document.createElement('div').style.opacity = '0.5';
    } catch(e) {
      return false;
    }
    return true;
  }()),
  didInit = false,
  docFrag = document.createDocumentFragment();

  features = (function() {

    var getAnimationFrame;

    /**
     * hat tip: paul irish
     * http://paulirish.com/2011/requestanimationframe-for-smart-animating/
     * https://gist.github.com/838785
     */

    function timeoutShim(callback) {
      window.setTimeout(callback, 1000/(storm.animationInterval || 20));
    }

    var _animationFrame = (window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        timeoutShim);

    // apply to window, avoid "illegal invocation" errors in Chrome
    getAnimationFrame = _animationFrame ? function() {
      return _animationFrame.apply(window, arguments);
    } : null;

    var testDiv;

    testDiv = document.createElement('div');

    function has(prop) {

      // test for feature support
      var result = testDiv.style[prop];
      return (result !== undefined ? prop : null);

    }

    // note local scope.
    var localFeatures = {

      transform: {
        ie:  has('-ms-transform'),
        moz: has('MozTransform'),
        opera: has('OTransform'),
        webkit: has('webkitTransform'),
        w3: has('transform'),
        prop: null // the normalized property value
      },

      getAnimationFrame: getAnimationFrame

    };

    localFeatures.transform.prop = (
      localFeatures.transform.w3 || 
      localFeatures.transform.moz ||
      localFeatures.transform.webkit ||
      localFeatures.transform.ie ||
      localFeatures.transform.opera
    );

    testDiv = null;

    return localFeatures;

  }());

  this.timer = null;
  this.flakes = [];
  this.disabled = false;
  this.active = false;
  this.meltFrameCount = 20;
  this.meltFrames = [];

  this.setXY = function(o, x, y) {

    if (!o) {
      return false;
    }

    if (storm.usePixelPosition || targetElementIsRelative) {

      o.style.left = (x - storm.flakeWidth) + 'px';
      o.style.top = (y - storm.flakeHeight) + 'px';

    } else if (noFixed) {

      o.style.right = (100-(x/screenX*100)) + '%';
      // avoid creating vertical scrollbars
      o.style.top = (Math.min(y, docHeight-storm.flakeHeight)) + 'px';

    } else {

      if (!storm.flakeBottom) {

        // if not using a fixed bottom coordinate...
        o.style.right = (100-(x/screenX*100)) + '%';
        o.style.bottom = (100-(y/screenY*100)) + '%';

      } else {

        // absolute top.
        o.style.right = (100-(x/screenX*100)) + '%';
        o.style.top = (Math.min(y, docHeight-storm.flakeHeight)) + 'px';

      }

    }

  };

  this.events = (function() {

    var old = (!window.addEventListener && window.attachEvent), slice = Array.prototype.slice,
    evt = {
      add: (old?'attachEvent':'addEventListener'),
      remove: (old?'detachEvent':'removeEventListener')
    };

    function getArgs(oArgs) {
      var args = slice.call(oArgs), len = args.length;
      if (old) {
        args[1] = 'on' + args[1]; // prefix
        if (len > 3) {
          args.pop(); // no capture
        }
      } else if (len === 3) {
        args.push(false);
      }
      return args;
    }

    function apply(args, sType) {
      var element = args.shift(),
          method = [evt[sType]];
      if (old) {
        element[method](args[0], args[1]);
      } else {
        element[method].apply(element, args);
      }
    }

    function addEvent() {
      apply(getArgs(arguments), 'add');
    }

    function removeEvent() {
      apply(getArgs(arguments), 'remove');
    }

    return {
      add: addEvent,
      remove: removeEvent
    };

  }());

  function rnd(n,min) {
    if (isNaN(min)) {
      min = 0;
    }
    return (Math.random()*n)+min;
  }

  function plusMinus(n) {
    return (parseInt(rnd(2),10)===1?n*-1:n);
  }

  this.randomizeWind = function() {
    var i;
// 2015-11-19 lightbox
//    vRndX = plusMinus(rnd(storm.vMaxX,0.2));
//    vRndY = rnd(storm.vMaxY,0.2);
    if (this.flakes) {
      for (i=0; i<this.flakes.length; i++) {
        if (this.flakes[i].active) {
          this.flakes[i].setVelocities();
        }
      }
    }
  };

  this.scrollHandler = function() {
    var i;
    // "attach" snowflakes to bottom of window if no absolute bottom value was given
    scrollY = (storm.flakeBottom ? 0 : parseInt(window.scrollY || document.documentElement.scrollTop || (noFixed ? document.body.scrollTop : 0), 10));
    if (isNaN(scrollY)) {
      scrollY = 0; // Netscape 6 scroll fix
    }
    if (!fixedForEverything && !storm.flakeBottom && storm.flakes) {
      for (i=0; i<storm.flakes.length; i++) {
        if (storm.flakes[i].active === 0) {
          storm.flakes[i].stick();
        }
      }
    }
  };

  this.resizeHandler = function() {
    if (window.innerWidth || window.innerHeight) {
      screenX = window.innerWidth - 16 - storm.flakeRightOffset;
      screenY = (storm.flakeBottom || window.innerHeight);
    } else {
      screenX = (document.documentElement.clientWidth || document.body.clientWidth || document.body.scrollWidth) - (!isIE ? 8 : 0) - storm.flakeRightOffset;
      screenY = storm.flakeBottom || document.documentElement.clientHeight || document.body.clientHeight || document.body.scrollHeight;
    }
    docHeight = document.body.offsetHeight;
    screenX2 = parseInt(screenX/2,10);
  };

  this.resizeHandlerAlt = function() {
    screenX = storm.targetElement.offsetWidth - storm.flakeRightOffset;
    screenY = storm.flakeBottom || storm.targetElement.offsetHeight;
    screenX2 = parseInt(screenX/2,10);
    docHeight = document.body.offsetHeight;
  };

  this.freeze = function() {
    // pause animation
    if (!storm.disabled) {
      storm.disabled = 1;
    } else {
      return false;
    }
    storm.timer = null;
  };

  this.resume = function() {
    if (storm.disabled) {
       storm.disabled = 0;
    } else {
      return false;
    }
    storm.timerInit();
  };

  this.toggleSnow = function() {
    if (!storm.flakes.length) {
      // first run
      storm.start();
    } else {
      storm.active = !storm.active;
      if (storm.active) {
        storm.show();
        storm.resume();
      } else {
        storm.stop();
        storm.freeze();
      }
    }
  };

  this.stop = function() {
    var i;
    this.freeze();
    for (i=0; i<this.flakes.length; i++) {
      this.flakes[i].o.style.display = 'none';
    }
    storm.events.remove(window,'scroll',storm.scrollHandler);
    storm.events.remove(window,'resize',storm.resizeHandler);
    if (storm.freezeOnBlur) {
      if (isIE) {
        storm.events.remove(document,'focusout',storm.freeze);
        storm.events.remove(document,'focusin',storm.resume);
      } else {
        storm.events.remove(window,'blur',storm.freeze);
        storm.events.remove(window,'focus',storm.resume);
      }
    }
  };

  this.show = function() {
    var i;
    for (i=0; i<this.flakes.length; i++) {
      this.flakes[i].o.style.display = 'block';
    }
  };

  this.SnowFlake = function(type,x,y) {
    var s = this;
    this.type = type;
    this.x = x||parseInt(rnd(screenX-20),10);
    this.y = (!isNaN(y)?y:-rnd(screenY)-12);
    this.vX = null;
    this.vY = null;
    this.vAmpTypes = [1,1.2,1.4,1.6,1.8]; // "amplification" for vX/vY (based on flake size/type)
    this.vAmp = this.vAmpTypes[this.type] || 1;
    this.melting = false;
    this.meltFrameCount = storm.meltFrameCount;
    this.meltFrames = storm.meltFrames;
    this.meltFrame = 0;
    this.twinkleFrame = 0;
    this.active = 1;
    this.fontSize = (10+(this.type/5)*10);
    this.o = document.createElement('div');
    this.o.innerHTML = storm.snowCharacter;
    if (storm.className) {
      this.o.setAttribute('class', storm.className);
    }
    this.o.style.color = storm.snowColor;
    this.o.style.position = (fixedForEverything?'fixed':'absolute');
    if (storm.useGPU && features.transform.prop) {
      // GPU-accelerated snow.
      this.o.style[features.transform.prop] = 'translate3d(0px, 0px, 0px)';
    }
    this.o.style.width = storm.flakeWidth+'px';
    this.o.style.height = storm.flakeHeight+'px';
    this.o.style.fontFamily = 'arial,verdana';
    this.o.style.cursor = 'default';
    this.o.style.overflow = 'hidden';
    this.o.style.fontWeight = 'normal';
    this.o.style.zIndex = storm.zIndex;
    docFrag.appendChild(this.o);

    this.refresh = function() {
      if (isNaN(s.x) || isNaN(s.y)) {
        // safety check
        return false;
      }
      storm.setXY(s.o, s.x, s.y);
    };

    this.stick = function() {
      if (noFixed || (storm.targetElement !== document.documentElement && storm.targetElement !== document.body)) {
        s.o.style.top = (screenY+scrollY-storm.flakeHeight)+'px';
      } else if (storm.flakeBottom) {
        s.o.style.top = storm.flakeBottom+'px';
      } else {
        s.o.style.display = 'none';
        s.o.style.bottom = '0%';
        s.o.style.position = 'fixed';
        s.o.style.display = 'block';
      }
    };

    this.vCheck = function() {
      if (s.vX>=0 && s.vX<0.2) {
        s.vX = 0.2;
      } else if (s.vX<0 && s.vX>-0.2) {
        s.vX = -0.2;
      }
      if (s.vY>=0 && s.vY<0.2) {
        s.vY = 0.2;
      }
    };

    this.move = function() {
      var vX = s.vX*windOffset, yDiff;
      s.x += vX;
      s.y += (s.vY*s.vAmp);
      if (s.x >= screenX || screenX-s.x < storm.flakeWidth) { // X-axis scroll check
        s.x = 0;
      } else if (vX < 0 && s.x-storm.flakeLeftOffset < -storm.flakeWidth) {
        s.x = screenX-storm.flakeWidth-1; // flakeWidth;
      }
      s.refresh();
      yDiff = screenY+scrollY-s.y+storm.flakeHeight;
      if (yDiff<storm.flakeHeight) {
        s.active = 0;
        if (storm.snowStick) {
          s.stick();
        } else {
          s.recycle();
        }
      } else {
        if (storm.useMeltEffect && s.active && s.type < 3 && !s.melting && Math.random()>0.998) {
          // ~1/1000 chance of melting mid-air, with each frame
          s.melting = true;
          s.melt();
          // only incrementally melt one frame
          // s.melting = false;
        }
        if (storm.useTwinkleEffect) {
          if (s.twinkleFrame < 0) {
            if (Math.random() > 0.97) {
              s.twinkleFrame = parseInt(Math.random() * 8, 10);
            }
          } else {
            s.twinkleFrame--;
            if (!opacitySupported) {
              s.o.style.visibility = (s.twinkleFrame && s.twinkleFrame % 2 === 0 ? 'hidden' : 'visible');
            } else {
              s.o.style.opacity = (s.twinkleFrame && s.twinkleFrame % 2 === 0 ? 0 : 1);
            }
          }
        }
      }
    };

    this.animate = function() {
      // main animation loop
      // move, check status, die etc.
      s.move();
    };

    this.setVelocities = function() {
// 2015-11-19 lightbox : vRndX > storm.vRndX,vRndY > storm.vRndY
      s.vX = storm.vWindX+rnd(storm.vMaxX*0.12,0.1);
      s.vY = storm.vWindY+rnd(storm.vMaxY*0.12,0.1);
    };

    this.setOpacity = function(o,opacity) {
      if (!opacitySupported) {
        return false;
      }
      o.style.opacity = opacity;
    };

    this.melt = function() {
      if (!storm.useMeltEffect || !s.melting) {
        s.recycle();
      } else {
        if (s.meltFrame < s.meltFrameCount) {
          s.setOpacity(s.o,s.meltFrames[s.meltFrame]);
          s.o.style.fontSize = s.fontSize-(s.fontSize*(s.meltFrame/s.meltFrameCount))+'px';
          s.o.style.lineHeight = storm.flakeHeight+2+(storm.flakeHeight*0.75*(s.meltFrame/s.meltFrameCount))+'px';
          s.meltFrame++;
        } else {
          s.recycle();
        }
      }
    };

    this.recycle = function() {
      s.o.style.display = 'none';
      s.o.style.position = (fixedForEverything?'fixed':'absolute');
      s.o.style.bottom = 'auto';
      s.setVelocities();
      s.vCheck();
      s.meltFrame = 0;
      s.melting = false;
      s.setOpacity(s.o,1);
      s.o.style.padding = '0px';
      s.o.style.margin = '0px';
      s.o.style.fontSize = s.fontSize+'px';
      s.o.style.lineHeight = (storm.flakeHeight+2)+'px';
      s.o.style.textAlign = 'center';
      s.o.style.verticalAlign = 'baseline';
      s.x = parseInt(rnd(screenX-storm.flakeWidth-20),10);
      s.y = parseInt(rnd(screenY)*-1,10)-storm.flakeHeight;
      s.refresh();
      s.o.style.display = 'block';
      s.active = 1;
    };

    this.recycle(); // set up x/y coords etc.
    this.refresh();

  };

  this.snow = function() {
    var active = 0, flake = null, i, j;
    for (i=0, j=storm.flakes.length; i<j; i++) {
      if (storm.flakes[i].active === 1) {
        storm.flakes[i].move();
        active++;
      }
      if (storm.flakes[i].melting) {
        storm.flakes[i].melt();
      }
    }
    if (active<storm.flakesMaxActive) {
      flake = storm.flakes[parseInt(rnd(storm.flakes.length),10)];
      if (flake.active === 0) {
        flake.melting = true;
      }
    }
    if (storm.timer) {
      features.getAnimationFrame(storm.snow);
    }
  };

  this.mouseMove = function(e) {
    if (!storm.followMouse) {
      return true;
    }
    var x = parseInt(e.clientX,10);
    if (x<screenX2) {
      windOffset = -windMultiplier+(x/screenX2*windMultiplier);
    } else {
      x -= screenX2;
      windOffset = (x/screenX2)*windMultiplier;
    }
  };

  this.createSnow = function(limit,allowInactive) {
    var i;
    for (i=0; i<limit; i++) {
      storm.flakes[storm.flakes.length] = new storm.SnowFlake(parseInt(rnd(flakeTypes),10));
      if (allowInactive || i>storm.flakesMaxActive) {
        storm.flakes[storm.flakes.length-1].active = -1;
      }
    }
    storm.targetElement.appendChild(docFrag);
  };

  this.timerInit = function() {
    storm.timer = true;
    storm.snow();
  };

  this.init = function() {
    var i;
    for (i=0; i<storm.meltFrameCount; i++) {
      storm.meltFrames.push(1-(i/storm.meltFrameCount));
    }
    storm.randomizeWind();
    storm.createSnow(storm.flakesMax); // create initial batch
    storm.events.add(window,'resize',storm.resizeHandler);
    storm.events.add(window,'scroll',storm.scrollHandler);
    if (storm.freezeOnBlur) {
      if (isIE) {
        storm.events.add(document,'focusout',storm.freeze);
        storm.events.add(document,'focusin',storm.resume);
      } else {
        storm.events.add(window,'blur',storm.freeze);
        storm.events.add(window,'focus',storm.resume);
      }
    }
    storm.resizeHandler();
    storm.scrollHandler();
    if (storm.followMouse) {
      storm.events.add(isIE?document:window,'mousemove',storm.mouseMove);
    }
    storm.animationInterval = Math.max(20,storm.animationInterval);
    storm.timerInit();
  };

  this.start = function(bFromOnLoad) {
    if (!didInit) {
      didInit = true;
    } else if (bFromOnLoad) {
      // already loaded and running
      return true;
    }
    if (typeof storm.targetElement === 'string') {
      var targetID = storm.targetElement;
      storm.targetElement = document.getElementById(targetID);
      if (!storm.targetElement) {
        throw new Error('Snowstorm: Unable to get targetElement "'+targetID+'"');
      }
    }
    if (!storm.targetElement) {
      storm.targetElement = (document.body || document.documentElement);
    }
    if (storm.targetElement !== document.documentElement && storm.targetElement !== document.body) {
      // re-map handler to get element instead of screen dimensions
      storm.resizeHandler = storm.resizeHandlerAlt;
      //and force-enable pixel positioning
      storm.usePixelPosition = true;
    }
    storm.resizeHandler(); // get bounding box elements
    storm.usePositionFixed = (storm.usePositionFixed && !noFixed && !storm.flakeBottom); // whether or not position:fixed is to be used
    if (window.getComputedStyle) {
      // attempt to determine if body or user-specified snow parent element is relatlively-positioned.
      try {
        targetElementIsRelative = (window.getComputedStyle(storm.targetElement, null).getPropertyValue('position') === 'relative');
      } catch(e) {
        // oh well
        targetElementIsRelative = false;
      }
    }
    fixedForEverything = storm.usePositionFixed;
    if (screenX && screenY && !storm.disabled) {
      storm.init();
      storm.active = true;
    }
  };

  function doDelayedStart() {
    window.setTimeout(function() {
      storm.start(true);
    }, 20);
    // event cleanup
    storm.events.remove(isIE?document:window,'mousemove',doDelayedStart);
  }

  function doStart() {
    if (!storm.excludeMobile || !isMobile) {
      doDelayedStart();
    }
    // event cleanup
    storm.events.remove(window, 'load', doStart);
  }

  // hooks for starting the snow
  if (storm.autoStart) {
    storm.events.add(window, 'load', doStart, false);
  }

  return this;

}(window, document));





posted by at 2015-11-20 00:10 | JavaScript | このブログの読者になる | 更新情報をチェックする

2015年11月19日


Google MAP API V3 + Google AdSense は、2015年11月2日(日本時間では3日) で廃止されていたようです。

Google Maps Javascript API AdSense Library

The adsense library has been deprecated. This library will continue to work until November 2, 2015. After that date, the library will no longer be available.
AdSenseのライブラリが廃止されました。このライブラリは、2015年11月2日まで作業を継続すると、その日の後、ライブラリは利用できなくなります。 確かに AdSense のチャネルを調べるとそうなってました。単なる興味本位で貼ってただけなので、支障は無いですが少しさびしい気もします。そもそも Google MAP の有償化と並行して行われた作業の一つなんでしょうね。 googleマップ、有料化のまとめ。1日あたり2万5千読み込み以上が対象。 (2011年11月4日 記事) GoogleMapAPIの商用利用 (2014/04/22 記事)
posted by at 2015-11-19 02:34 | Google | このブログの読者になる | 更新情報をチェックする

2015年03月08日


allow_url_fopen と allow_url_include

allow_url_fopen は、デフォルトで有効ですが、allow_url_include はそうではありません
名前デフォルト変更可能変更履歴
allow_url_fopen"1"PHP_INI_SYSTEMPHP <= 4.3.4 では PHP_INI_ALL。
PHP 4.0.4 から利用可能です。
allow_url_include"0"PHP_INI_SYSTEMPHP 5.2.0 から利用可能です。
何れも、セキュリティ上の理由により、アプリケーションからは変更できませんが、allow_url_fopen が有効であれば、allow_url_include が無効でも代替方法があります。
function inc( $path ) {
// *******************************
// 配列にセット
// *******************************
	$inc = @file( $path );
// *******************************
// 最初と最後の行を削除
// *******************************
	array_shift($inc);
	array_pop($inc);
// *******************************
// 配列をテキストに戻す
// *******************************
	$GLOBALS['inc_eval_txt'] = implode( "", $inc );
// *******************************
// テキストを実行する
// *******************************
	eval($GLOBALS['inc_eval_txt']);
}

まず、ファイルを配列にセットして、最初と最後の行を取り除きます( <?php と ?> の削除 ) 
※ うまくいくように、ファイルの記述方法を定める必要があります。
( その前提ならば、ただのテキストファイルにするといいです )
※ ファイルの拡張子は、テキストの内容がサーバによって加工されないものを使います。

テストしてみると解りますが、include を使った場合でも、http 経由で読み込むテキストの拡張子は、php であってはいけません。( .php では サーバがソースコードを返す事が無いからです )

その後、テキストに戻してからグローバル変数に代入して eval して内容を実行します。

eval は危険な処理ですが、それはユーザーから受け取ったデータを対象にする場合です。ここでの処理は、本来allow_url_include によって利用可能な信頼できる文字列が対象です。
http://winofsql.jp/php/test/print.txt
<?php
inc("http://winofsql.jp/php/test/print.txt");

allow_url_inc();

print "<pre>";

$arr = get_defined_functions();
print_r( $arr["user"] );

print "</pre>";

function inc( $path ) {
// *******************************
// 配列にセット
// *******************************
	$inc = @file( $path );
// *******************************
// 最初と最後の行を削除
// *******************************
	array_shift($inc);
	array_pop($inc);
// *******************************
// 配列をテキストに戻す
// *******************************
	$GLOBALS['inc_eval_txt'] = implode( "", $inc );
// *******************************
// テキストを実行する
// *******************************
	eval($GLOBALS['inc_eval_txt']);
}


?>





タグ:PHP
posted by at 2015-03-08 16:01 | PHP | このブログの読者になる | 更新情報をチェックする

2015年02月27日


DIV に入れて、ドロップシャドウ( inline-block で、縦のスペースを取り去る方法 )

DIV を普通に使って中にコンテンツを入れると、DIV の横幅は中身の幅に同期しないので、inline-block を指定しました。そのおかげで横幅はぴったりになりましたが、縦の高さが何故か 2px 大きくなるので、line-height: 0px; を指定してみると、見事に綺麗に収まりました。

デモ

ただ、<!DOCTYPE html> で、HTML5 指定している場合に起きるのでこのブログでは必要ありません。

<style>
.shadow_bug {
	display:inline-block; 
	box-shadow: 10px 10px 20px #000;
}

.shadow_div {
	display:inline-block; 
	box-shadow: 10px 10px 20px #000;
	line-height: 0px;
}
</style>

<div class="shadow_bug">
<iframe width="420" height="315" src="https://www.youtube.com/embed/L_QVB4Qdh6o" frameborder="0" allowfullscreen></iframe>
</div>

<br><br><br><br>

<div class="shadow_div">
<iframe width="420" height="315" src="https://www.youtube.com/embed/L_QVB4Qdh6o" frameborder="0" allowfullscreen></iframe>
</div>

関連する Stack Overflow

Why display=inline-block adds uncontrollable vertical margins


posted by at 2015-02-27 00:39 | テクニック | このブログの読者になる | 更新情報をチェックする

2015年02月26日


Seesaa のテンプレートのタイトル部分 ( 2015年2月現在 ) ☀

このままですと、改行が入ってしまうので使える事は使えますが、展開された HTML ソースはあまり見栄えは良くありません。
<title>
<% if:page_name eq 'search' %>
  <% keyword %>: 
<% /if %>

<% if:page_name eq 'archive' %>
  <% extra_title_datetime | date_format("%Y年%m月") %> : 
<% else %>
  <% if:extra_title %>
    <% extra_title | remove_emoji %> :
  <% /if %>
<% /if %>

<% if:current_page > 1 %>(
  <% current_page %>) 
<% /if %>

<% blog.title %>
</title>

しかし、タイトルだけでかなりのテンプレート情報が含まれています。少なくとも if 文による HTML の出力についてとても参考になると思います。

まず、通常の記事ページとカテゴリページの場合のタイトルは、extra_title であり、それがある時に extra_title より絵文字を省いて出力しています。

remove_emoji は、記事のテキストエリアで使える絵文字です。結局 img 要素ですが、この記事でもタイトルとして使えています。ですが、title 要素内で使うのはまずいので remove_emoji で削除できるという事です。

この際の |(縦棒)は、いわゆるパイプの役目をして、他の文字列変換に繋げる事ができます。

current_page は、複数ページがある場合、現在が何ページかという数値が入っているので、この例では 2 ページ目以降ではタイトルに ( ページ数 ) が出力されます

※ 昔は、<%- または -%> で前後の改行コードを取り除いていた記憶があるのですが、動作しませんでした。


posted by at 2015-02-26 19:22 | Seesaa | このブログの読者になる | 更新情報をチェックする

2014年11月28日


WEB アーカイブと Google ウェブマスターツール / ペンギンアップデート以来不明なリンク切れエントリが急増


(Panguin Tool ( ペンギン・パンダアップデート影響確認ツール ) | Technology by Barracuda Digital)

気のせいか、この間のペンギンアップデート以来、よく解らないリンク切れのエラーが Google ウェブマスターツールで積み重なって行くのですが、どれも全く意味の無いエントリで、かなり前に公開をやめたブログの記事ばかりです。



しかも、リンク元にはそのリンクは無く、そもそも、リンク元がリンク切れしているものもあります。どうも、Google の解析が失敗しているらしいと思われる現象が他にもあって、JavaScript 内の処理結果を間違って判断しているような形跡もあります。

とは言え、Google に何か言うのはお角違いなので、こちらは対症療法を頑張るしかありません。( 該当する JavaScript は消しました )なので、リンク切れの記事をリニューアルして公開する方向で作業していますが・・・・・

ここで一つ問題が。

Google ウェブマスターツールでは、URL は解るのですがタイトルが解らないのでどの非公開記事なのかわかりません。リンク元にはもう既に無いのですから( 普通はこれで確認しますけれど )

そこで。

WEB アーカイブの出番です。一般のブログであれなんであれ、WEB アーカイブには見事に保存されていました。ほとんど当時のまま表示可能で、タイトルを取得する事は簡単で、そこからブログシステム内の検索で取り出す事ができます。

Wayback Machine - Internet Archive


WEB アーカイブは他にもいろいろ助かっています。

■ 対象サーバーがダウンしていてもダウンロード可能で記事も読める。
■ サイトが閉鎖していても、当時のままのソフトウェアがダウンロードできる。

特に、最近良くフリーフォントの配布先がなくなったりしていた事が多かったので、助かっています。

これは自分のサイトでも言える事で、URL さえどこかに保存できていたら、当時の文章やファイルを手に入れる事ができます。

関連する情報

サイトが閉鎖された Gray Graphics さんのフリーフォント



タグ:google
posted by at 2014-11-28 21:20 | テクニック | このブログの読者になる | 更新情報をチェックする

2014年11月27日


Seesaa が『この広告は1年以上更新がないブログに表示されております。』という広告を表示しています。

新規投稿でないと対象にならないようです。info.seesaa.net をドメイン内検索をしても、該当するものは無いので突然の仕様変更かもしれません。

ブックマークレット : Googleのドメイン内検索を任意のページで実行




ソースを表示して、一番下までスクロールすると、以下のような記述があります。
<p style="margin:0;padding:0;font-size:10px;color:#DDD;">この広告は1年以上更新がないブログに表示されております。</p>
</div>
<script type="text/javascript">
//<![CDATA[
document.getElementById('seesaa-bnr-close').addEventListener('click', function(){ document.getElementById('seesaa-bnr').style.display = 'none'; });
//]]>
</script>
<script type="text/javascript">
var url = document.URL;
document.write("<img src='http://d3mgo879eugsjh.cloudfront.net/t.gif?url=" + encodeURIComponent(url) + "' />");
</script>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<script type="text/javascript">
var nend_params = {"media":3,"site":3,"spot":57750,"type":2,"oriented":1,"sp":0};
</script>
<script type="text/javascript" src="http://js1.nend.net/js/nendAdLoader.js"></script>
<script type="text/javascript" src="http://t.seesaa.net/analytics-seesaa-net.js?v=20141014&tid=UA-53911882-1"></script>



posted by at 2014-11-27 23:16 | クライアント/サーバー | このブログの読者になる | 更新情報をチェックする

Cron の代替え : VBScript でタイマー処理

同一スクリプトで、別々の処理は一応可能のようですが、厳密には非同期では無く一つの処理を実行中は他の処理は待たされるようなので、本来の非同期処理が必要な場合は、外部アプリケーション(スクリプト)を呼び出す形にして下さい。

Windows には、昔から「スケジューラ」というサービスがあり、Cron と同じ事が可能です。しかし、Windows 純正で、URL を呼び出すとなると、それなりに知識も必要ですし、そもそもWindows のスケジューラは、非常に解りにくい不便なしろもので、できればあまり使用したく無いです。

そこで、VBScript のみを使って簡単なスケジューラを作り、そこからさらに VBScript で任意の URL を呼び出します。

10秒毎の非同期別スレッド処理のサンプル
' このセクションは、cscript.exe で処理を強制させるものです
str = WScript.FullName
str = Right( str, 11 )
str = Ucase( str )
if str <> "CSCRIPT.EXE" then
	str = WScript.ScriptFullName
	Set WshShell = CreateObject( "WScript.Shell" )
	Call WshShell.Run( "cmd.exe /c cscript.exe """ & str & """ & pause", 3 )
	WScript.Quit
end if

Dim Disp : Disp = True	' False にすると、秒単位の表示はしなくなります
Set WshShell = WScript.CreateObject("WScript.Shell")

Set SINK = WScript.CreateObject("WbemScripting.SWbemSink","SINK_")
Set objWMIService = GetObject("winmgmts:\\.\root\cimv2")
objWMIService.ExecNotificationQueryAsync _
 SINK, _
 "SELECT * FROM  __InstanceModificationEvent " & _
 "WHERE TargetInstance ISA 'Win32_LocalTime'"

Wscript.Echo "非同期別スレッドタイマー処理を開始します"
str = WScript.FullName
str = Right( str, 11 )
str = Ucase( str )
if str = "CSCRIPT.EXE" then
	' Cscript.exe で、CTRL+C で終わらせる
	Do
		WScript.Sleep 10000
	Loop
end if

' この処理は、毎秒非同期のスレッドから呼び出されます
Sub SINK_OnObjectReady(objLatestEvent, objAsyncContext)

	' 10秒毎の非同期別スレッド処理
	if objLatestEvent.TargetInstance.Second MOD 10 = 0 then
		' ここが 10秒毎に呼び出されます
		WshShell.Run( "wscript httpget.vbs http://xxxxx.jp/xxxxx.php" )
	end if

	if Disp then
		' 秒単位に呼び出されるこのルーチンで毎回表示
		Wscript.Echo "Time: " & _
			objLatestEvent.TargetInstance.Hour & ":" & _
			objLatestEvent.TargetInstance.Minute & ":" & _
			objLatestEvent.TargetInstance.Second
	end if
End Sub



httpget.vbs
if Wscript.Arguments.Count = 0 then
	Wscript.Echo "httpget url [savepath]"
	Wscript.Quit
end if

' ダウンロード用のオブジェクト
Set objSrvHTTP = Wscript.CreateObject("Msxml2.ServerXMLHTTP")

' 第1引数は URL
strUrl = Wscript.Arguments(0)
if Wscript.Arguments.Count = 1 then
	' 第2引数が無い場合は、URL の最後の部分
	' ( カレントにダウンロード )
	aData = Split(strUrl,"/")
	strFile = aData(Ubound(aData))
else
	' 第2引数がある場合はそれをローカルファイルとする
	strFile = Wscript.Arguments(1)
end if

' ダウンロード要求
on error resume next
Call objSrvHTTP.Open("GET", strUrl, False )
if Err.Number <> 0 then
'	Wscript.Echo Err.Description
	Wscript.Quit
end if
objSrvHTTP.Send
if Err.Number <> 0 then
	' おそらくサーバーの指定が間違っている
'	Wscript.Echo Err.Description
	Wscript.Quit
end if
on error goto 0

if objSrvHTTP.status = 404 then
'	Wscript.Echo "URL が正しくありません(404)"
	Wscript.Quit
end if

' バイナリデータ保存用オブジェクト
Set Stream = Wscript.CreateObject("ADODB.Stream")
Stream.Open
Stream.Type = 1	' バイナリ
' 戻されたバイナリをファイルとしてストリームに書き込み
Stream.Write objSrvHTTP.responseBody
' ファイルとして保存
Stream.SaveToFile strFile, 2
Stream.Close



関連する記事

VBScript : 30秒後のイベント処理
VBScript : 10秒毎に処理を実行する( 時刻指定も可能 )
VBScript : スクリプトを終了しないようにする



posted by at 2014-11-27 23:09 | VBScript | このブログの読者になる | 更新情報をチェックする

2014年07月03日


Facebox v1.3 の正しい設置方法と使用方法








▼ href の画像を表示します


▼ href に他の id を指定してその内容を表示します


▼ url で指定されたテキストの内容を HTML として表示します
(但し、クリックした後2秒後に閉じます)


▼ ajax で読み込んだ内容を表示します
ダウンロード

Facebox 1.3

自分のサイトにアップロード

1) facebox.js
2) facebox.css
3) closelabel.png
4) loading.gif

ファイルをアップロードできるブログであればブログでも可能です。

アップロードする前に、facebox.js 内の closelabel.png と loading.gif の URL を直接 http から記述しておけば、実行するページからプログラムで変更する必要がなくなります。

facebook.js の変更部分(URLを3つ)
  $.extend($.facebox, {
    settings: {
      opacity      : 0.2,
      overlay      : true,
      loadingImage : 'https://lightbox.sakura.ne.jp/demo/facebox13/loading.gif',
      closeImage   : 'https://lightbox.sakura.ne.jp/demo/facebox13/closelabel.png',
      imageTypes   : [ 'png', 'jpg', 'jpeg', 'gif' ],
      faceboxHtml  : '\
    <div id="facebox" style="display:none;"> \
      <div class="popup"> \
        <div class="content"> \
        </div> \
        <a href="#" class="close"><img src="https://lightbox.sakura.ne.jp/demo/facebox13/closelabel.png" title="close" class="close_image" /></a> \
      </div> \
    </div>'
    },
※ プログラムからは以下のようにして変更します
$.facebox.settings.closeImage = '/images/facebox/closelabel.png'
$.facebox.settings.loadingImage = '/images/facebox/loading.gif'

または、

jQuery(document).ready(function($) {
	$('a[rel*=facebox]').facebox({
		loadingImage : 'images/loading.gif',
		closeImage   : 'images/closelabel.png'
	})
})


j設置

jQuery が必要ですが、google がホスティングしているものを使います。

あるいは、jQuery をダウンロードして設置して下さい。

このサンプルでは、外部ファイルとして image_001.txt と、message_001.txt を使っています。その為、実行する URL と 同一ドメインである必要があります。( access-control-allow-origin:* を返す場合はどこからでも OK )

image_001.txt
message_001.txt

rel="文字列" で、文字列は自由に設定可能で、facebox の初期処理で指定します
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://lightbox.sakura.ne.jp/demo/facebox13/facebox.js"></script>
<link type="text/css" rel="stylesheet" href="https://lightbox.sakura.ne.jp/demo/facebox13/facebox.css">

<script	type="text/javascript">
// jQuery の画面準備完了時のイベント
$(function(){
	// rel 属性で対象を決定しています( ここでは、my_image が含まれるもの )
	$('a[rel*=my_image]').facebox()

	// イベント登録
	$(document).bind('beforeReveal.facebox', 
	function(){
		console.log("実行直前");
	});

});
</script>


<div>▼ href の画像を表示します</div>
<a href="http://lh6.ggpht.com/_IzfbcNjqGuE/S1jkKM952HI/AAAAAAAAAPU/CheJ6YkRGPM/s720/b15architecture_exteriors014.jpg" rel="my_image1"><img  src="http://lh6.ggpht.com/_IzfbcNjqGuE/S1jkKM952HI/AAAAAAAAAPU/CheJ6YkRGPM/s128/b15architecture_exteriors014.jpg" style='border-width:0px;'></a>


<br><br>

<div>▼ href に他の id を指定してその内容を表示します</div>
<a href="#my_div" rel="my_image2"><img src="http://lh3.ggpht.com/_IzfbcNjqGuE/S1j75KHGTZI/AAAAAAAAARg/l_d3g2d4fb0/s128/b17diederik015.jpg" style='border-width:0px;'></a>
<div id="my_div" style='display:none'><t5>divの中にタイトルと画像をセットして、display:none を指定しています</t5><img  src="http://lh3.ggpht.com/_IzfbcNjqGuE/S1j75KHGTZI/AAAAAAAAARg/l_d3g2d4fb0/s720/b17diederik015.jpg" style='border-width:1px;'></div>

<br><br>

<div>
▼ url で指定されたテキストの内容を HTML として表示します
<br>
(但し、クリックした後2秒後に閉じます)
</div>
<a href="https://lightbox.sakura.ne.jp/demo/facebox13/image_001.txt" rel="my_image3"><img src="http://lh3.ggpht.com/_IzfbcNjqGuE/S1js9TWpzrI/AAAAAAAAAP0/OG-rkSIkyIQ/s128/b7architecture_exteriors045.jpg" style='border-width:0px;' onclick='setTimeout(function(){$(document).trigger("close.facebox")},2000)'></a>

<br><br>

<div>▼ ajax で読み込んだ内容を表示します</div>
<input type="button" value="メッセージ" onclick="$.facebox({ ajax: 'https://lightbox.sakura.ne.jp/demo/facebox13/message_001.txt' })">

</body>
</html>
関連する記事

lightbox.js の正しい設置方法


posted by at 2014-07-03 02:33 | 小ネタ | このブログの読者になる | 更新情報をチェックする

2013年11月01日


Google Chroem の自分用テーマを超簡単に作成する方法

環境準備

とにかく、元となるようなテーマをインストールします。( 後でいろいろ変更すれば良いです )

インストールされたテーマデータを複写

『C:\Users\ユーザ名\AppData\Local\Google\Chrome\User Data\Default\Extensions』

に移動して、タイムスタンプよりインストールされたばかりのフォルダに入ります。



必要なのは、images フォルダ全てと、manifest.json です。これらをどこか好きなフォルダにコピーします。

テーマ用背景画像を images フォルダにコピー

jpg でも png でもどちらでもかまいません。そのファイル名を manifest.json の中の theme_ntp_background の値として変更します。
      "images": {
         "theme_button_background": "images/theme_button_background.png",
         "theme_frame": "images/theme_frame.png",
         "theme_frame_inactive": "images/theme_frame_inactive.png",
         "theme_frame_incognito": "images/theme_frame_incognito.png",
         "theme_ntp_background": "images/UrbanFuture4_1.jpg",
         "theme_tab_background": "images/theme_tab_background.png",
         "theme_tab_background_incognito": "images/theme_tab_background_incognito.png",
         "theme_tab_background_v": "images/theme_tab_background_v.png",
         "theme_toolbar": "images/theme_toolbar.png",
         "theme_window_control_background": "images/theme_window_control_background.png"
      },

他はとりあえずそのままにしておいて、他のファイルは自分用のパッケージを作成してからゆっくり変更して下さい。

manifest.json の変更

インストール済みの manifest.json には必要無い部分が含まれているので、以下のようなエントリのみにします( manifest_version が無い場合は追加して下さい )
{
   "manifest_version": 2,
   "name": "DAZ3D / sworc",
   "theme": {
      "colors": {
         "bookmark_text": [ 232, 232, 232 ],
         "button_background": [ 255, 9, 9 ],
         "control_background": [ 70, 0, 0 ],
         "frame": [ 4, 4, 4 ],
         "frame_inactive": [ 4, 4, 4 ],
         "frame_incognito": [ 4, 4, 4 ],
         "frame_incognito_inactive": [ 0, 0, 0 ],
         "ntp_background": [ 0, 0, 0 ],
         "ntp_header": [ 70, 0, 0 ],
         "ntp_link": [ 255, 9, 9 ],
         "ntp_link_underline": [ 255, 9, 9 ],
         "ntp_section": [ 70, 0, 0 ],
         "ntp_section_link": [ 255, 9, 9 ],
         "ntp_section_link_underline": [ 255, 9, 9 ],
         "ntp_section_text": [ 186, 186, 186 ],
         "ntp_text": [ 186, 186, 186 ],
         "tab_background_text": [ 4, 4, 4 ],
         "tab_text": [ 232, 232, 232 ],
         "toolbar": [ 56, 56, 56 ]
      },
      "images": {
         "theme_button_background": "images/theme_button_background.png",
         "theme_frame": "images/theme_frame.png",
         "theme_frame_inactive": "images/theme_frame_inactive.png",
         "theme_frame_incognito": "images/theme_frame_incognito.png",
         "theme_ntp_background": "images/UrbanFuture4_1.jpg",
         "theme_tab_background": "images/theme_tab_background.png",
         "theme_tab_background_incognito": "images/theme_tab_background_incognito.png",
         "theme_tab_background_v": "images/theme_tab_background_v.png",
         "theme_toolbar": "images/theme_toolbar.png",
         "theme_window_control_background": "images/theme_window_control_background.png"
      },
      "properties": {
         "ntp_background_alignment": "center",
         "ntp_background_repeat": "no-repeat",
         "ntp_logo_alternate": 1
      },
      "tints": {
         "background_tab": [ -1.0, 0.5, 0.75 ],
         "buttons": [ 1.0, 0.0, 1.0 ],
         "frame": [ -1.0, -1.0, -1.0 ],
         "frame_inactive": [ -1.0, -1.0, 0.75 ],
         "frame_incognito": [ -1.0, 0.2, 0.35 ],
         "frame_incognito_inactive": [ -1.0, 0.3, 0.6 ]
      }
   },
   "version": "1.0"
}

パッケージ作成とインストール

Google Chrome の chrome://extensions/ を開いて、デベロッパーモードをチェックして、拡張機能のパッケージ化で、パッケージを作成します。出来上がったパッケージは、拡張子が crx になります。出来上がったら、Google Chrome にドラッグ & ドロップするとインストール完了です。

細かいチューニング方法

オプションの詳細(英文)で細かい設定をチェックして、現在インストール済みのオプションを変更して状況を確かめます。

変更するには、Google Chrome を終了させて『C:\Users\ユーザ名\AppData\Local\Google\Chrome\User Data\Default\Preferences』を開いて manifest.json の内容がコピーされた部分を変更します。インストール先の manifest.json は変更しても状態は変化しません。Preferences の内容を変更したら、インストール先の Cached Theme.pak を削除して Google Chrome を起動すると変更されているばすです。(Cached Theme.pak は、Google Chrome 起動毎に作成されるので、この処理を繰り返して完成させます)

全ての変更が終わったら、パッケージ用の manifest.json に内容をコピーして再度パッケージ化すれば、オリジナルのテーマパッケージが完成します。





posted by at 2013-11-01 01:05 | Google | このブログの読者になる | 更新情報をチェックする

2013年04月01日


Google Chrome 拡張作成入門

最新の情報は以下のリンク先です

マウスカーソル下の画像表示用 HTML コードをクリップボードにコピーする Google Chrome 拡張

▼ 以下はバージョンアップ(仕様変更)の為、動作しません
---------------------------------------------------------

以下のコードは最も簡単でかつ利用価値の高いものです。必要なファイルは、拡張アプリケーションの基本定義である『background.html』と、全体の仕様を定義する『manifest.json』と、アイコンファイルが3つです( アイコンは必ずしも必要ではありません )

以上の5つファイルを任意のディレクトリ内に配置して、Google Chrome から読み込むだけで、拡張機能として実装されて、デバッグも可能になります。もし、世の中に配布したいのであれば、そこからパッケージを作成する事も可能です
background.html(UTF-8N)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

// *************************************************
// クリップボードへコピー
// *************************************************
function clip_Copy(str) {
	document.getElementById('text').value = str;
	document.getElementById('text').select();
	document.getElementById('text').focus();
	document.execCommand("Copy");
}

// *********************************************************
// 右クリックメニューの処理
// *********************************************************
function active_Action(info, tab) {

	var str = "";

	if ( info.mediaType == 'image' && typeof( info.srcUrl ) !== 'undefined' ) {
		str = '<img src="' + info.srcUrl + '"';
		str += ' style="border: solid 0px #000000" />';
		clip_Copy( str );
		chrome.tabs.executeScript(
			null,
			{ code: "alert('"+str+"');" },
			function() {
			}
		);
	}

}

// *********************************************************
// 初期処理
// *********************************************************
try {
	chrome.contextMenus.removeAll();
}catch(e) {}

// 右クリックメニューを作成
chrome.contextMenus.create(
	{
		"title": "画像HTML取得",
		"contexts":["image"],
		"onclick": active_Action
	}
);
</script>
</head>
<body>
<textarea name="text" id="text"></textarea> 
</body>
</html>

manifest.json
{
   "background_page": "background.html",
   "description": "\u53F3\u30AF\u30EA\u30C3\u30AF\u3088\u308A\u6A19\u6E96\u7684\u306A \u753B\u50CF\u7528HTML \u3092\u53D6\u5F97\u3057\u307E\u3059",
   "icons": {
      "128": "icon128.png",
      "16": "icon16.png",
      "48": "icon48.png"
   },
   "name": "\u753B\u50CFHTML\u53D6\u5F97",
   "permissions": [ "contextMenus", "tabs", "http://*/*", "https://*/*" ],
   "version": "1.0"
}

まず最初にデベロッパーモードのチェックボックスをオンにします。そうすると、読み込み用のボタンが現れるので5つのファイルを配置したフォルダを選択します






ファイルを読み込んだ状態



詳細を表示した状態



background.html のリンクをクリックすると、非表示である background.html 用のデベロッパーツールが開きます( 通常は F12 でひらくもの )

id は、仮の id で、正式に登録されるとGoogle Chrome の環境フォルダ でダウンロードしたスクリプトを実行して、さらに extentions フォルダに入るとその中にあるはずです。

この拡張機能の要点

画像を右クリックすると、コンテキストメニューに登録した機能が表示されて、選択するとその画像を使用した HTML 記述がクリップボードにコピーされます。





クリップボードへのコピー

background.html はもともと非表示なので、コピーするために必要な入力エリアを作成しておいて、データをセットして選択して document.execCommand("Copy"); でコピーします

コンテキストメニューの追加

これは、API の処理なので、まず manifest.json で利用する API を宣言する必要があります。その上で、chrome.contextMenus.removeAll(); で既存のメニューを削除しておいて、chrome.contextMenus.create で作成します。

"contexts":["image"] の記述が、対象が画像のみであることを示しています。他には、 "page", "frame", "selection", "link", "editable", "video", "audio" というようなコンテンツを複数配列で指定する仕様になっています。

実際の処理

クリックすると、定義した function が呼び出されますが、その際に API から引数が渡されて、ある程度の情報をその場で利用する事ができます。この場合は、画像の URL を使って、IMG 要素を完成させています。

1) OnClickData
2) Tab

表示されているページへの通信

セキュリティ上の理由だと思われますが、直接表示しているページへのアクセスは禁じられており、メッセージを送る事によって互いに通信するような仕様になっているようです。

その中で簡単に background から呼び出せる方法がこの、chrome.tabs.executeScript を使った実行です。

この処理はメニューとは別の API 分類になるので、manifest.json で宣言しておく必要があります。

関連する記事

Twitter用埋め込みコードを取得する Google Chrome 拡張


posted by at 2013-04-01 02:24 | ツール | このブログの読者になる | 更新情報をチェックする

2013年02月07日


Google News Search API の NewsShow でニュースコンテンツを利用する

Code Playground

慣れている場合は、Code Playground( サンプルコードと実演 ) でチェックして動作を確認します( IE では動かないので注意して下さい )

※ Code Playground は使い方が解りにくいので、以下に抜粋サンプルを作成しています

その他のサンプルコードと実装

Google NewsShow ( queryList ) - SOURCE
Google NewsShow( IFRAME ) - SOURCE
( IFRAME のほうが簡単で CSS の影響が出ません )

実装について

ドキュメント : NewsShow Documentation - Google News Search API - Google Code

Google のサンプルはページの onload で実装されているので、単独ページなら良いですが、部品としてコンテンツとして埋め込みたい場合はなかなか面倒ですですが、本来 onload で実装する必要は全く無いので以下のように書きます。
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
▲はヘッダ部分に記述します
( 必ずしもヘッダ部分で描く必要は無く、実装したい DIV の直前でもかまいません )

ここをクリックすると、以下と同等のコードを編集しながらテストできます
( onload での実装 )
<div style='position:absolute;left:951px;top:0px;height:250px;'>
<div id="ggnews"></div>
</div>
<script type="text/javascript">
google.load("elements", "1", {packages : ["newsshow"]});
</script>
<script type="text/javascript">
(function () {
	var options = {
		"format" : "300x250",
		"linkTarget" : "_blank",
		"displayTime" : 30000
	}
	var content = document.getElementById('ggnews');
	var newsShow = new google.elements.NewsShow(content, options);
})();
</script>

displayTime は表示が切り替わる間隔で、ここでは 30 秒にしています

フォーマットは以下の二通りが有効です
■ "728x90"
■ "300x250"



posted by at 2013-02-07 08:24 | Google | このブログの読者になる | 更新情報をチェックする

2013年01月19日


Seesaa に VBScript でログインする

HTTP でアクセスするオブジェクトは、サーバー用クライアント用と二つありますが、現時点ではサーバー用が優れているように思われます。この場合(記事下のサンプルコード)は、おそらくクライアント用では動かないと思いますが、少なくともタイムアウトの設定が可能なのは、サーバー用です。

経験上、クッキーの処理はオブジェクトが自動的に引き継いでいるようなので、このサンプルではクッキーの処理はありません。しかし、WEB サービスのシステムとして突然 URL にアクセスしても拒否されるので( Seesaa では、POST する場合は事前に表示されたページのキーが必要です )正規表現での処理が必要になります。

これが理由で、ページの HTML 構成が変更されると、この手のアプリケーションは動かなくなるので注意が必要です。( 今回を含めて過去に2回変更しています )

実際のブラウザで処理してネットワークの情報を読み、どのような情報が必要かは各ブラウザの開発者用ツールを使って確認しますが、IE のそれは役に立たないので注意して下さい。Google Chrome か Firefox を使うと良いです。

POST する場合は、HTTP ヘッダに "application/x-www-form-urlencoded" を送るのは HTTP の仕様なので必ず必要ですが、POST も通常の POST 以外に "multipart/form-data; boundary=xxxxxxx" というバイナリデータを送る事が可能な仕様もあります。そのあたりの仕様はなかなか解りづらいですが、ここでは説明していません。

Seesaa のシステムも人間の作ったアプリケーションなので、完璧では無いので、この手のアプリで対応しようとする場合、首をかしげるような時もありますが、だいたいにおいて『結果オーライ』で深く考えないほうがいいと思います。あと、システム的な不明点もあり、どうしてもこのサンプルで返ってくるページが utf-8 ではなく SHIFT_JIS でかえって来ます。しかし、次の処理には関係無いので『ログイン』としてはこれで OK であると思います。

テキストファイルへの書き込みは、取得したページを確認できるようにする為で処理とは直接関係はありません。
' ***********************************************************
' サーバーオブジェクトの準備
' ***********************************************************
Set objHTTP = Wscript.CreateObject("Msxml2.ServerXMLHTTP")
lResolve = 60 * 1000
lConnect = 60 * 1000
lSend = 60 * 1000
lReceive = 60 * 1000

' ***********************************************************
' 正規表現用
' ***********************************************************
Set regEx = New RegExp
' ***********************************************************
' ページ書き込み用
' ***********************************************************
Set Fs = CreateObject( "Scripting.FileSystemObject" )

' ログインページの取得
Call objHTTP.Open("GET","https://ssl.seesaa.jp/auth",False)
Call objHTTP.setTimeouts(lResolve, lConnect, lSend, lReceive)
Call objHTTP.Send()

' ページ全体
strPage = objHTTP.responseText

' 書き込み専用(2)で、存在しない場合は作成(True)
Set OutObj = Fs.OpenTextFile( "page_login.html", 2, True )
OutObj.Write objHTTP.responseText
OutObj.Close

' 投稿用のキーを取得
regEx.IgnoreCase = True
regEx.Global = True
regEx.Pattern = "authpost""><input value=""([^""]+)"""
Set Matches = regEx.Execute( strPage )
For Each Match in Matches
	strPostKey = Match.SubMatches(0)
	Exit For
Next

Wscript.Echo strPostKey

' ***********************************************************
' ログイン用の情報
' ***********************************************************
' Seesaa のログインユーザ( メールアドレス )
emailData = ""
' Seesaa のログインパスワード
passData = ""
' 対象となるブログの ID
blogData = ""

' ***********************************************************
' ログイン ( POST )
' ***********************************************************
' ログイン URL
Call objHTTP.Open("POST","https://ssl.seesaa.jp/auth",False)
Call objHTTP.setTimeouts(lResolve, lConnect, lSend, lReceive)
Call objHTTP.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
strData = ""
strData = strData & "aXt=" & strPostKey
strData = strData & "&email=" & emailData
strData = strData & "&password=" & passData
strData = strData & "&return_to=http%3A%2F%2Fblog.seesaa.jp%2F"
Call objHTTP.SetRequestHeader("Content-Length",Len(strData))
Call objHTTP.Send(strData)

Set OutObj = Fs.OpenTextFile( "page_login_after.html", 2, True )
OutObj.Write objHTTP.responseText
OutObj.Close

関連する記事

Seesaa ブログのエクスポートを呼び出して全てをバックアップするスクリプト

VBScript で Seesaaブログへ禁止ワード一括登録( アップロード )




タグ:VBScript HTTP
posted by at 2013-01-19 23:15 | Seesaa | このブログの読者になる | 更新情報をチェックする

2012年11月19日


HTML(ローカル) を使用して Facebook へ画像をアップロードする

『App ID/API Key』が必要です。以下の client_id のフィールドに API Key をセットして送信すると、Facebook にログインしていない場合は、ログイン画面が表示されるのでそこでログインすると、URL に access_token=アクセストークン の形でセットされているのでそれを取得します。

※ ログイン済の場合は Success と表示されるのでアドレスバーを見ます。

get_login.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<form action="https://www.facebook.com/dialog/oauth/">
<pre>
<input type="text" name="redirect_uri" value="http://www.facebook.com/connect/login_success.html">
<input type="text" name="response_type" value="token">
<input type="text" name="client_id">
<input type="text" name="scope" value="user_about_me,user_photos,read_stream,publish_stream">
<input type="submit" name="send" value="get login">
</pre>
</form>
</body>
</html>

『アクセストークン』を以下の該当部分( FORM の action の中 )にセットしてブラウザで実行してファイルをアップロードできます(メッセージも同時に投稿できます)

▼ UTF-8N で保存します
file_upload.htm
<!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=utf-8" />
<title>Facebook に画像アップロード</title>
</head>
<body>
<form method="post" action="https://graph.facebook.com/me/photos?access_token=アクセストークン" enctype="multipart/form-data">
<pre>
<input type="file" name="source">
<textarea name="message"></textarea>
<input type="submit" name="send" value="file upload">
</pre>
</form>
</body>
</html>





タグ:Facebook API
posted by at 2012-11-19 23:29 | WEBサービス | このブログの読者になる | 更新情報をチェックする

2012年06月19日


既存の Google Chrome 拡張のカスタマイズ( ブラウザのクイックリンク )



この拡張は便利ですし、中身は難しい事を一切やっていないので、ちょっと知識があれば自分でカスタマイズできます。画像の下3つは追加したもので、上の部分も順序を入れ替えています。必要無いエントリは、コードの一番下の div 一列を削除するだけです。

1) Google Chrome の拡張フォルダへ移動
( このスクリプトで開くフォルダの中にある Extentions フォルダが拡張フォルダです )
2) plpjogfhobhpdcmcblieglnoooccfcmm フォルダに入る
3) 1.5_0\popup.html をエディタで開く
4) 以下のコードですべて置き換える
<style> 
body {
  overflow: hidden;
  margin: 0px;
  padding: 0px;
  background: white;
}
 
div:first-child {
  xmargin-top: 0px;
}
 
div {
  cursor: pointer;
  text-align: left;
  padding: 0px;
  
  width: 212px;
  height:38px;
  margin-top: 0px;
  background: #ffffff;
  background-image:url(Blank.png);
  background-position:center center;
  background-repeat:no-repeat;
}
div:hover {
  background-image:url(Hover.png);
}
table 
{
    border-collapse:collapse;
    padding:0;
    margin-left:2px;
    vertical-align:middle;
    font-family: verdana, Arial, Helvetica;
    font-size: 12px;
    font-weight:500;

}
</style> 


<body onload="Localise();">

    <script>
        function getLocal(sID, sDefault) {
            var sRes = chrome.i18n.getMessage(sID);
            if (sRes == "") sRes = sDefault;
            return(sRes);
        }

        function Localise() {
            document.getElementById("tB").innerHTML = getLocal("lbookmarks", "Bookmarks");
            document.getElementById("tH").innerHTML = getLocal("lhistory", "History");
            document.getElementById("tD").innerHTML = getLocal("ldownloads", "Downloads");
            document.getElementById("tE").innerHTML = getLocal("lextensions", "Extensions");
            document.getElementById("tP").innerHTML = getLocal("lplugins", "Plugins");
            document.getElementById("tM").innerHTML = getLocal("lmemory", "Memory");
            document.getElementById("tS").innerHTML = getLocal("lsettings", "Settings");
        }

    
        function xclick(ClickedItem) {
            var Clicked = ClickedItem.id.toString();
            var strURL = "";
            if (Clicked.charAt(0) == "c") {
                strURL = "chrome://";
                strURL += Clicked.substr(1);
                strURL += "/";
            }
            if (Clicked.charAt(0) == "a") {
                strURL = "about:";
                strURL += Clicked.substr(1);
                strURL += "/";
            }
            if (Clicked.charAt(0) == "w") {
                strURL = "http://goo.gl/";
                strURL += Clicked.substr(1);
            }
            chrome.tabs.create({ url: strURL, selected: true });
            window.close();
        }
    </script> 

    <div onclick="xclick(this);" id="csettings"><table><tr><td><img src="iSettings.png" /></td><td id=tS>Settings</td></tr></table></div>
    <div onclick="xclick(this);" id="cdownloads"><table><tr><td><img src="iDownloads.png" /></td><td id=tD>Downloads</td></tr></table></div>
    <div onclick="xclick(this);" id="cbookmarks"><table><tr><td><img src="iBookmarks.png" /></td><td id=tB>Bookmarks</td></tr></table></div>
    <div onclick="xclick(this);" id="chistory"><table><tr><td><img src="iHistory.png" /></td><td id=tH>History</td></tr></table></div>
    <div onclick="xclick(this);" id="cextensions"><table><tr><td><img src="iExtensions.png" /></td><td id=tE>Extensions</td></tr></table></div>
    <div onclick="xclick(this);" id="cplugins"><table><tr><td><img src="iPlugins.png" /></td><td id=tP>Plugins</td></tr></table></div>
    <div onclick="xclick(this);" id="amemory"><table><tr><td><img src="iMemory.png" /></td><td id=tM>Memory</td></tr></table></div> 

    <div onclick="xclick(this);" id="csettings/cookies"><table><tr><td><img src="iSettings.png" /></td><td>Cookies</td></tr></table></div>
    <div onclick="xclick(this);" id="w"><table><tr><td><img src="iBookmarks.png" /></td><td>URL短縮</td></tr></table></div> 
    <div onclick="xclick(this);" id="wg4lFF"><table><tr><td><img src="iBookmarks.png" /></td><td>Google+</td></tr></table></div> 

</body>

どういうわけか、SHIFT_JIS で直接日本語書き込んでいるのに正しく表示されました。
c と a は、chrome:// と about: が対象ですが、新たに http:// を追加しました。id の一文字目を w にして、http://goo.gl/ に続く文字列を w に続けて id にするようにしています。続ける内容は移動したい URLを Google URL 短縮で短縮して作成しています。


posted by at 2012-06-19 22:42 | ツール | このブログの読者になる | 更新情報をチェックする

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, #f00, #333);
	background: -webkit-linear-gradient(top, #f00, #333);
	background: -o-linear-gradient(top, #f00, #333);
	background: linear-gradient(to bottom, #f00, #333);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ff0000, 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 2012-05-17 23:55 | ツール | このブログの読者になる | 更新情報をチェックする

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 2012-04-30 14:29 | ツール | このブログの読者になる | 更新情報をチェックする