WEB 職人 https://webcraft.seesaa.net/ WEBサイト構築に必要な職人芸の紹介をしています。 ja http://blogs.law.harvard.edu/tech/rss WEBサイト構築に必要な職人芸の紹介をしています。 WEB,PHP,javascript,テクニカル,技術 lightbox no https://webcraft.seesaa.net/article/463468461.html Seesaa のスマホページで表示される広告が左に寄りすぎでみっともないので CSS( 属性セレクター ) で調整する Tue, 01 Jan 2019 21:11:57 +0900 この左に寄っている部分です。id の 先頭が gn_delivery となってるので、これが変わらない限りは有効ですね。属性セレクター( mozilla ) div[id^="gn_delivery"] { text-align:center;} id の 先頭が gn_delivery となってるので、これが変わらない限りは有効ですね。 属性セレクター( mozilla ) div[id^="gn_delivery"] { text-align:center; } ]]> この左に寄っている部分です。 id の 先頭が gn_delivery となってるので、これが変わらない限りは有効ですね。 属性セレクター( mozilla ) 
div[id^="gn_delivery"] {
	text-align:center;
}
]]> Seesaa lightbox blog:https://blog.seesaa.jp,webcraft/463468461 https://webcraft.seesaa.net/article/122661267.html MSXML2.XMLHTTPでファイルをPOSTする Mon, 19 Feb 2018 17:57:32 +0900 MSXML2.XMLHTTPでファイルをアップロードする と対になる処理です。受けるほうは通常と同じで簡単ですが、送るほうは注意すべき点がいくつかありますまず、送るほうでは日本語を URL エンコードする必要があるので、JavaScript を呼び出して encodeURIComponent を使用しています。( その為、PHP ではデコードされると UTF-8 になるので注意 )後、http で POST する際の仕様として、http ヘッダに Content-Type と.. 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> ]]> 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>
]]> クライアント/サーバー lightbox blog:https://blog.seesaa.jp,webcraft/122661267 https://webcraft.seesaa.net/article/144330379.html PHP の関数での環境情報取得( phpinfo の代替え ) Mon, 19 Feb 2018 10:06:34 +0900 @niftyホームページサービス（LaCoocan）では、phpinfo 関数が使用できないので、代替えの為いろいろな関数で情報を表示しています。関数での情報取得以下で使用している主な関数です。ini_getget_loaded_extensionsget_declared_classesini_get_allphpversionphp_ini_loaded_fileget_include_pathget_magic_quotes_gpc実行結果少し見づらいですが、調査する場.. @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,"ＭＳ Ｐゴシック",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> ]]> @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,"ＭＳ Ｐゴシック",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>
]]> LaCoocan lightbox blog:https://blog.seesaa.jp,webcraft/144330379 https://webcraft.seesaa.net/article/122130466.html MSXML2.(Server)XMLHTTPでファイルをアップロードする Sun, 18 Feb 2018 16:12:07 +0900 呼び出し側は WSH としての VBScript です。バイナリとしてアップロードするので、CRLF は CRLF のままなので、LF へ変換が必要なファイルやシステムでは、サーバー側で変換する必要がありますPHP ならそのままで問題無いので、わざわざ 通常の POST 仕様にあわせる必要も無いと思います。VBScript 側のサンプルは Microsoft の サポートオンラインにあるので、IIS ではうまくいくのかとは思うのですが、試してはいません。いずれにしても、IIS.. 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する ]]> 呼び出し側は 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する
]]> クライアント/サーバー lightbox blog:https://blog.seesaa.jp,webcraft/122130466 https://webcraft.seesaa.net/article/122129345.html テンプレートでその記事の編集画面に直接リンクする Sun, 18 Feb 2018 01:47:34 +0900 posted by ニックネームの ニックネーム部分にリンクを作成します。これは、「記事」コンテンツの HTML テンプレートを編集します。( こうしておくと、記事のリライトはとっても楽です ) posted by &lt;a href="http://blog.seesaa.jp/pages/my/blog/article/edit/input?id=&lt;% article.id %&gt;" target="_blank"&gt;&lt;% article.nic.. ]]> posted by ニックネームの ニックネーム部分にリンクを作成します。これは、「記事」コンテンツの HTML テンプレートを編集します。( こうしておくと、記事のリライトはとっても楽です ) 
posted by <a href="http://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") -%>
]]> Seesaa lightbox blog:https://blog.seesaa.jp,webcraft/122129345 https://webcraft.seesaa.net/article/122129349.html Seesaaブログのテンプレート内で使用できる page_name 変数を JavaScript で使用する Sun, 18 Feb 2018 01:40:26 +0900 page_name 変数は、テンプレート内で使用する変数なので、直接は使用できませんが、ヘッド部分に以下のコードを入れておけば後続のスクリプトで使用する事ができます &lt;script&gt;var $page_name = '&lt;% page_name %&gt;';&lt;/script&gt;具体的な使用方法としては、トップページは 'index' になりますので、日付タイトルを以下のようにして非表示にする事ができます。 &lt;script&gt;if .. 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' というページもあります ]]> 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' というページもあります
]]> Seesaa lightbox blog:https://blog.seesaa.jp,webcraft/122129349 https://webcraft.seesaa.net/article/267501704.html 『カーソル下の画像用HTMLの取得』を行うIE拡張をダイアログを表示して行う Sun, 18 Feb 2018 01:07:56 +0900 画面定義を表示させます。( レジストリには "Flags"=dword:00000001 が必要です )ダイアログが表示された時、すでにテキストエリア内のコードはクリップボードにコピーされていますが、内容を変更して再度クリップボードにコピーする事ができます。get_img_html_clip.htm &lt;html&gt;&lt;head&gt;&lt;meta http-equiv="content-type" content="text/html; charset=.. ダイアログが表示された時、すでにテキストエリア内のコードはクリップボードにコピーされていますが、内容を変更して再度クリップボードにコピーする事ができます。 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の取得 ]]> 画面定義を表示させます。( レジストリには "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拡張 lightbox blog:https://blog.seesaa.jp,webcraft/267501704 https://webcraft.seesaa.net/article/267493616.html IE 拡張を作成する為の基本仕様 Sun, 18 Feb 2018 00:27:11 +0900 かなり古い Microsoft のドキュメントに記述されている内容ですが、以下のような内容になります。登録は、レジストリに直接登録しますが、登録時は IE を終了させておいて下さい。変更する場合も IE を終了させる必要があります。レジストリの登録場所 HKEY_CURRENT_USER Software Microsoft Internet Explorer MenuExtこ.. かなり古い 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の取得 ]]> かなり古い 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の取得
]]> IE拡張 lightbox blog:https://blog.seesaa.jp,webcraft/267493616 https://webcraft.seesaa.net/article/263446365.html ブラウザ拡張の中で一番簡単な IE 拡張 : カーソル下の画像用HTMLの取得 Sat, 17 Feb 2018 03:10:37 +0900 インストールは少し面倒ですが、いったんインストールしてしまえば修正やデバッグもすぐに反映されます。ただ、詳細なドキュメントを探すのに苦労する事と、今までいろいろ変遷があって、なかなか解りづらい問題がたくさんあって、あまり一般的には使われていないのが現実です。例えば、最初のころは、そのページの URL を操作するのに、location オブジェクトが使えたのですが、今では、document オブジェクトの URL プロパティを使用するようになっています。get_img_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 のリンクコンテンツを一瞬でソートする ]]> インストールは少し面倒ですが、いったんインストールしてしまえば修正やデバッグもすぐに反映されます。 ただ、詳細なドキュメントを探すのに苦労する事と、今までいろいろ変遷があって、なかなか解りづらい問題がたくさんあって、あまり一般的には使われていないのが現実です。例えば、最初のころは、そのページの 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 のリンクコンテンツを一瞬でソートする
]]> IE拡張 lightbox blog:https://blog.seesaa.jp,webcraft/263446365 https://webcraft.seesaa.net/article/456930107.html ブラウザ上のテキストをレジストリデータのエクスポートである .reg として保存させる JavaScript のコード Sat, 17 Feb 2018 00:17:36 +0900 FileSaver.js でローカルにテキストファイルを保存させる事ができます。その際、テキストデータを JavaScript の unicode の配列に変換して、さらに Uint16Array で new Blob() に渡す為のデータに変換します。先頭に unicode 用の BOM をセットして保存すると、unicode のテキストして保存されます。これは、拡張子が .reg のデータを保存する為に行っていますが、実際には shift_jis のデータでも Windo.. 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="保存"> ]]> 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="保存">
]]> JavaScript lightbox blog:https://blog.seesaa.jp,webcraft/456930107 https://webcraft.seesaa.net/article/444135717.html Google Visualization API の円グラフと通常テーブルの表示を jQuery のプラグインで作成する Sat, 19 Nov 2016 18:23:09 +0900 Google Visualization を扱う時に基本部分となる円グラフの表示です。その表示の為に DataTable オブジェクトを作成しますが、それを単純に表示する為にテーブル表示部分(google.visualization.Table)も実装しています※ ライブラリのロードは {'packages':['corechart','table']} ですGoogle の ドキュメント内の『オプション一覧』Google のドキュメントの 『円グラフのクイック・スタート』 .. 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> ▼ デモ ]]> 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>




▼ デモ
]]> JavaScript lightbox blog:https://blog.seesaa.jp,webcraft/444135717 https://webcraft.seesaa.net/article/240480997.html Seesaa ブログのエクスポートを呼び出して全てをバックアップするスクリプト Fri, 18 Dec 2015 12:14:27 +0900 2015/12/18 : Google Chrome でダウンロード可能にしました拡張子がスクリプトのままだと、Google Chrome がダウンロードさせてくれないので、 .lightbox としています。その為、【最初に set_script.bat を実行して、拡張子を .wsf に変更するようにしています】2015/02/04 : 再び、正常に動作するように修正しました2013/01/19 : 正常に動作するように修正しましたbk.wsf &lt;JOB&gt;.. 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","http://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","http://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","http://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", "http://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 は、http://blog.seesaa.jp/cms/home/index で、該当 するブログの名前のリンク内の URL から取り出します。 例) blog_id の番号 http://blog.seesaa.jp/cms/home/switch?blog_id=9999999&goto=/cms/article/regist/input ■ 著作権その他 このプログラムはフリーです。どうぞ自由に御使用ください。 著作権は作者である私(lightbox)が保有しています。 また、本ソフトを運用した結果については、作者は一切責任を 負えせんのでご了承ください。 ]]> 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","http://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","http://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","http://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", "http://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 は、http://blog.seesaa.jp/cms/home/index で、該当
するブログの名前のリンク内の URL から取り出します。

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


■ 著作権その他

このプログラムはフリーです。どうぞ自由に御使用ください。
著作権は作者である私(lightbox)が保有しています。
また、本ソフトを運用した結果については、作者は一切責任を
負えせんのでご了承ください。
]]> Seesaa lightbox blog:https://blog.seesaa.jp,webcraft/240480997 https://webcraft.seesaa.net/article/429939672.html 【改造】雪を降らす snowstorm.js に 風向きを外部から設定できるオプションを追加しました Fri, 20 Nov 2015 00:10:13 +0900 Snowstorm: A JavaScript Snow Effect for HTML元々は、ランダムで風向きを算出して、マウスの動きで変化するようになっていますが、マウスの動きに反応しないようにするオプションはあるのですが(snowStorm.followMouse = false;)、風向きはそれこそ風任せなので、外部のプロパティから変更するようにしました。snowStorm.vWindX = 横の強度( マイナス可 );snowStorm.vWindY = 縦の強度;.. 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)); ]]> 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));
]]> JavaScript lightbox blog:https://blog.seesaa.jp,webcraft/429939672 https://webcraft.seesaa.net/article/219944268.html Google MAP API V3 + Google AdSense は、2015年11月2日(日本時間では3日) で廃止されていたようです。 Thu, 19 Nov 2015 02:34:04 +0900 Google Maps Javascript API AdSense LibraryThe 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日.. 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マップ、有料化のまとめ。１日あたり２万５千読み込み以上が対象。 (2011年11月4日 記事) GoogleMapAPIの商用利用 (2014/04/22 記事) ]]> 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マップ、有料化のまとめ。１日あたり２万５千読み込み以上が対象。 (2011年11月4日 記事) GoogleMapAPIの商用利用 (2014/04/22 記事) ]]> Google lightbox blog:https://blog.seesaa.jp,webcraft/219944268 https://webcraft.seesaa.net/article/122129343.html allow_url_fopen と allow_url_include Sun, 08 Mar 2015 16:01:37 +0900 allow_url_fopen は、デフォルトで有効ですが、allow_url_include はそうではありません。名前デフォルト変更可能変更履歴allow_url_fopen"1"PHP_INI_SYSTEMPHP &lt;= 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 はそうではありません。 名前デフォルト変更可能変更履歴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']); } ?> ]]> 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 lightbox blog:https://blog.seesaa.jp,webcraft/122129343