SQLの窓

2013年12月23日


jQuery プラグイン : 日本語を縦書きにする( 縦書きスクリプト )

昔作った時は、回転とか自由にできなかったのですがさすがに今は簡単に実装できてしまいました。
( IE は 10以上でないと回らないです )

▼ ここからが元のテキストです。
列車は空を行き交い、普通の移動にさえロマンを感じられる。
まるでそこはパーティールームのようにも見え、空間の4分の1は外界を望む事ができた。

夜。夜空の美しいその夜。

偶然にしては出来すぎたように列車最後尾に一人の女性が乗っていた。そして、夜空から現れたプラットホームと、静かに列車が交わる。

やがて、緩やかな弧を描くような静止と共に一人の青年が乗り込んできた・・・。


青年は踊る心臓の鼓動を必死で押さえたが、やはりあれだけ練習した予定を忘れてしまった。

不覚にも、ほんの一瞬彼女に見とれたせいである。無理も無い、苦労してここにたどり着いたのは決して偶然では無いのだから。 

が、すぐ平静を装って彼女に問いかける。 

「すいません。えっと、この列車たしか止まりましたよね?」

「えっと・・何だっけ、あ・・」 


▼ ここからが変換されたコンテンツです。

<script>
if ( window[window.location.hostname+'.loadjQuery'] !== true ) {
	window[window.location.hostname+'.loadjQuery'] = true;
	if ( !window.jQuery ) {
		document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
	}
}
</script>
<script type="text/javascript">
$(function() {
	$("#area").tate($("#src01").text(),26,35);
});
</script>

<style>
#area {
	line-height: 14px;
}
#area td {
	font-size:14px;
	font-family: Arial, Helvetica, Verdana, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "MS Pゴシック";
}
</style>
<script charset="utf-8" src="http://winofsql.jp/tate.js"></script>

<div id="area"></div>

改行の入ったテキストを引き渡すだけです。文字一つ一つは TD で表現されているので、元のテキストを直接コピーできません。ただ、かならず元のテキストは用意しないといけないのでそちらからコピーするようにすればいいと思います。

tate.js
// 著作 : lightbox
// url : http://winofsql.jp
$.fn.extend({
	tate: function(text,width,height) {

		var base = text.replace(/\r/,"");

		a = width;
		b = height;

		var str = "";
		str = "<table border=0 style='table-layout:fixed;'>"
		for( j = 0; j < a; j++ ) {
			str += "<col style='width:1.3em;'>"
		}
		for( i = 0; i < b; i++ ) {
			str += "<tr>"
			for( j = 0; j < a; j++ ) {
				str += "<td style='text-align:center;'>&nbsp;</td>"
			}
			str += "</tr>"
		}
		str += "</table>"
		$(this).html(str);

		obj = $(this)[0].getElementsByTagName("table")[0];
		td = obj.getElementsByTagName("td");

		str = "";
		offset = 1;
		var bstr = "";
		var x;
		for( var i = 1; i <= base.length; i++ ) {
			x = a - Math.floor((i+offset-1)/b) + a * (( i+offset-1 ) % b );

			bstr = base.substr( i-1, 1 );

			switch( bstr ) {
				case '(':
				case ')':
				case '[':
				case ']':
				case '{':
				case '}':
				case '(':
				case ')':
				case '[':
				case ']':
				case '{':
				case '}':
				case '【':
				case '】':
				case '『':
				case '』':
				case '《':
				case '》':
				case '≪':
				case '≫':
					td[x-1].innerHTML = 
					"
" + bstr + "
"; $(this).rotate(td[x-1],90); break; case 'ー': td[x-1].innerHTML = "<div style='position:relative;top:0px;left:0px;'>" + bstr + "</div>"; $(this).rotate(td[x-1],270); break; case '、': case '。': td[x-1].innerHTML = "<div style='position:relative;top:-8px;left:7px;'>" + bstr + "</div>"; break; case '「': td[x-1].innerHTML = "<div style='position:relative;top:-4px;left:0px;'>" + bstr + "</div>"; $(this).rotate(td[x-1],90); break; case '」': td[x-1].innerHTML = "<div style='position:relative;top:4px;left:0px;'>" + bstr + "</div>"; $(this).rotate(td[x-1],90); break; case 'ぁ': case 'ぅ': case 'ぇ': case 'ぉ': case 'ゃ': case 'ゅ': case 'ょ': case 'っ': case 'ァ': case 'ゥ': case 'ェ': case 'ォ': case 'ャ': case 'ュ': case 'ョ': case 'ッ': td[x-1].innerHTML = "<div style='position:relative;top:-1px;left:4px;'>" + bstr + "</div>"; break; default: td[x-1].innerHTML = bstr; break; } if ( bstr == "\n" ) { offset += b-((i+offset-1)%b); } } return this; }, rotate: function(obj,d) { var s = "rotate(" + d + "deg)"; if (obj.style) { obj.style.MozTransform = s obj.style.WebkitTransform = s; obj.style.OTransform = s; obj.style.MSTransform = s; obj.style.transform = s; } else if (obj.css) { obj.css("-moz-transform", s); obj.css("-webkit-transform", s); obj.css("-o-transform", s); obj.css("-ms-transform", s); obj.css("transform", s); } obj.setAttribute("rotation", d); return this; } });



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


2013年12月08日


Panoramio の表示

wapi.js の hl=ja_JP は、日本語指定で必ず必要です。指定しないと英語表記になります。(キャラクタセットは自動判定するようです)

ユーザーID と フォトID は、写真のページから取得可能ですが、表にはっきり表示しているわけではありません。とても美しい写真が、こちらのページで堪能できます
<script>
if ( window[window.location.hostname+'.panoramio'] !== true ) {
	window[window.location.hostname+'.panoramio'] = true;
	if ( !window.CPWA ) {
		document.write("<"+"script src=\"http://www.panoramio.com/wapi/wapi.js?v=1&hl=ja_JP\"></"+"script>");
	}
	(function(){
	var str;
	str="";
	str+="<style type=\"text/css\">  \n";
	str+=".panoramio-wapi-photo .panoramio-wapi-images {  \n";
	str+="	background-color: #ffffff;  \n";
	str+="}  \n";
	str+="</style>  ";
	document.write(str);
	})();
}
</script>
<div id="p85021932"></div>
<script>
(function() { 
var wapiblock = document.getElementById('p85021932');
var myOptions = {
	'width': 600,
	'height': 450,
	'openLinksInNewWindow': true
};
var photoRequestOptions = {
	ids: [{
		'photoId': 85021932,
		'userId': 2296867
	}]
};
var widget = new panoramio.PhotoWidget(wapiblock, photoRequestOptions, myOptions);
widget.setPosition(0);
})(); 
</script>

ちなみに、IE8 以前ではエラーが出ます。回避方法はありますが、もう切り捨てていいと思います。


posted by at 21:55 | JavaScript | このブログの読者になる | 更新情報をチェックする


2013年11月29日


jQuery + Google Visualization : 円グラフのプラグイン化

jQuery で Google Visualization DataTable Class をプラグイン化 の進化版です。前回は、文字列のみを想定していましたが、今回はグラフなので数値列を作成して円グラフ用のクラスで draw しています。

実行ページ
<script>
if ( window[window.location.hostname+'.loadjQuery'] !== true ) {
	window[window.location.hostname+'.loadjQuery'] = true;
	if ( !window.jQuery ) {
		document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
	}
	document.write("<"+"script src=\"http://www.google.com/jsapi\"></"+"script>");
}
</script>
<script>
google.load('visualization', '1', { packages: ['table','piechart'] });

$.fn.extend({
	gvt: function() {
		$(this).data("DataTable", new google.visualization.DataTable());
		return this;
	},
	gvt_addColumn: function(title){
		$(this).data("DataTable").addColumn('string', title);
		return this;
	},
	gvt_addNumColumn: function(title){
		$(this).data("DataTable").addColumn('number', title);
		return this;
	},
	gvt_addRow: function(){
		$(this).data("CurRow", $(this).data("DataTable").addRow() );
		return this;
	},
	gvt_setCell: function(col, data){
		$(this).data("DataTable").setCell($(this).data("CurRow"), col, data+"" );
		return this;
	},
	gvt_setNumCell: function(col, data){
		$(this).data("DataTable").setCell($(this).data("CurRow"), col, data );
		return this;
	},
	gvt_setRowCell: function(row, col, data){
		$(this).data("DataTable").setCell(row, col, data+"" );
		return this;
	},
	gvt_draw: function(width){
		var visualization = new google.visualization.Table($(this)[0]);
		visualization.draw($(this).data("DataTable"), {
			cssClassNames: {
				tableCell: 'myCell',
				headerCell: 'myHeader'
			},
			width: width+"px"
		});
		return this;
	},
	gvt_pie: function(width,height,title){
		var visualization = new google.visualization.PieChart($(this)[0]);
		visualization.draw($(this).data("DataTable"), {
			width: width,
			height: height,
			is3D: true,
			title: title,
			legend: 'right'
		});
		return this;
	}
});

$(function(){

	$("#pie_chart_area")
	.gvt()
	.gvt_addColumn('分類')
	.gvt_addNumColumn('データ');

	testData = [
		12543,
		326,
		2890,
		1112,
		200,
		8891,
		6333
	];

	var row;
	for( var i = 0; i < testData.length; i++ ) {
		$("#pie_chart_area")
		.gvt_addRow()
		.gvt_setCell(0,"分類"+(i+1))
		.gvt_setNumCell(1,testData[i]);
	}

	$("#pie_chart_area").gvt_pie(600,400,'テスト円グラフ');

});

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


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