2016年11月19日


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}

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



▼ デモ



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

2015年12月18日


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



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

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

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

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

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

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

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

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

' ページ全体
strPage = objHTTP.responseText

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


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

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

' ***********************************************************
' (2) : GET
' ***********************************************************
' 対象ブログ URL
Call objHTTP.Open("GET","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)が保有しています。
また、本ソフトを運用した結果については、作者は一切責任を
負えせんのでご了承ください。
posted by at 2015-12-18 12:14 | Comment(0) | Seesaa | このブログの読者になる | 更新情報をチェックする

2015年11月20日


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

Snowstorm: A JavaScript Snow Effect for HTML

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

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


JavaScript の圧縮はこちら

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

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

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


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

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

var snowStorm = (function(window, document) {

  // --- common properties ---

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

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

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

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

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

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

  features = (function() {

    var getAnimationFrame;

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

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

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

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

    var testDiv;

    testDiv = document.createElement('div');

    function has(prop) {

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

    }

    // note local scope.
    var localFeatures = {

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

      getAnimationFrame: getAnimationFrame

    };

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

    testDiv = null;

    return localFeatures;

  }());

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

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

    if (!o) {
      return false;
    }

    if (storm.usePixelPosition || targetElementIsRelative) {

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

    } else if (noFixed) {

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

    } else {

      if (!storm.flakeBottom) {

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

      } else {

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

      }

    }

  };

  this.events = (function() {

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

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

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

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

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

    return {
      add: addEvent,
      remove: removeEvent
    };

  }());

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  };

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

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

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

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

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

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

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

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

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

  return this;

}(window, document));




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

2015年11月19日


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

Google Maps Javascript API AdSense Library

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

2015年03月14日


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

2015年3月14日現在

昔は、LaCoocan では phpinfo 関数が使用できなかったんですが、今は使用できます。

実行結果

現在 PHP のバージョンは 5.2.14 です。あいかわらず、OS は Linux ですけれど・・・・

関数での情報取得

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

ini_get
get_loaded_extensions
get_declared_classes
ini_get_all

phpversion
php_ini_loaded_file
get_include_path
get_magic_quotes_gpc


実行結果

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

<?php
print "PHP version : " . phpversion() . "<br>";

print "php.ini : " . php_ini_loaded_file() . "<br>";
print "include_path : " . get_include_path() . "<br>";
print "get_magic_quotes : " . get_magic_quotes_gpc . "<br>";

print "variables_order : " . ini_get('variables_order') . "<br>";
print "short_open_tag : " . ini_get('short_open_tag') . "<br>";
print "display_errors : " . ini_get('display_errors') . "<br>";
print "display_startup_errors : " . ini_get('display_startup_errors') . "<br>";
print "allow_url_fopen : " . ini_get('allow_url_fopen') . "<br>";
print "allow_url_include : " . ini_get('allow_url_include') . "<br>";
print "max_execution_time : " . ini_get('max_execution_time') . "<br>";
print "post_max_size : " . ini_get('post_max_size') . "<br>";
print "track_errors : " . ini_get('track_errors') . "<br>";

print "<HR>";
print "<b style='font-size:24;font-weight:bold'>Loaded_extensions</b><br>";

$target = get_loaded_extensions();
foreach( $target as $Key => $Value ) {
	print "$Key => $Value<br>";
}

print "<HR>";
print "<b style='font-size:24;font-weight:bold'>get_declared_classes</b><br>";

$classes = get_declared_classes();
foreach( $classes as $Key => $Value ) {
	print "$Key => $Value<br>";
}

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

foreach( $_SERVER as $Key => $Value ) {
	print "$Key => $Value<br>";
}

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

foreach( $_ENV as $Key => $Value ) {
	print "$Key => $Value<br>";
}

print "<HR>";
print "<b style='font-size:24;font-weight:bold'>ini_get_all</b><br>";
print "<PRE>";
$inis = ini_get_all();
print_r($inis);
print "</PRE>";

?>



タグ:PHP phpinfo
posted by at 2015-03-14 12:19 | Comment(0) | LaCoocan | このブログの読者になる | 更新情報をチェックする