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年11月22日


jQuery で Google Visualization DataTable Class をプラグイン化

ここまですれば、わりと誰でも扱えるかと思います。ただ順序が決まっていて、draw は最後でなくては動作しません。

できるだけ簡単にする為に、行を追加した場合内部にカレント行を保存しています。その為、汎用的な gvt_setRowCell メソッドを追加実装しています。

まだ、Google ドキュメントや、グラフの実装もあるので、このプラグイン方法がいいかはまだ解りませんが、一覧形式で取り出せるオブジェクトをテーブル化するのは簡単にできるようになるはずです。
<style>
#table_area .google-visualization-table-table {
	border-collapse: collapse;
}
.myHeader {
	color:#FFFFFF;
	background: #000000;
	padding: 7px;
	border: solid #303030 1px;
}
.myCell {
	padding: 7px;
	border: solid #303030 1px;
}
</style>

<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'] });

$.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_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_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;
	}
});

$(function(){

	$("#table_area")
	.gvt()
	.gvt_addColumn('プロパティ')
	.gvt_addColumn('内容');

	var row;
	for (var key in window.navigator) {
		$("#table_area")
		.gvt_addRow()
		.gvt_setCell(0,key)
		.gvt_setCell(1,window.navigator[key]);
	}

	$("#table_area").gvt_draw(600);

});

</script>
<div id="table_area"></div>
関連する記事

jQuery でとりあえず実装する Google Visualization DataTable Class ( 後でプラグイン化予定 )



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


2013年11月17日


jQuery プラグイン : Zoomooz.js の使いどころ

いくら考えても、画像の拡大しか思いつきません。( 一応、SyntaxHighlighter に使って見たら、結構いいかも )

画像の場合、大きい画像を指定しておいて、表示だけを幅指定等で小さくしておくと、拡大時にオリジナルの解像度の画像をできるだけ使ってくれるようです。( Google Chrome は結構気まぐれでした )

ただ、jQuery は Google のホスティングを使用するとして、Zoomooz.js は、自分の Google ドライブに webViewLink を作ってホスティングしてみました。

画像も、Google の Picasa を使っています。

Google さまさま。
▼ クリックすると、表示領域の 1.2倍になります( クリックすると元戻る )

★ 拡大したい要素には、class="zoomTarget" を設定します
★ 表示領域に対する拡大率は、data-targetsize="1.2" で指定します( 通常は 0.9 くらい )
★ 対象をクリックして元に戻したい場合は、data-closeclick="true"
( 省略した場合は、周りをクリックしたら元に戻ります / 1.2 だと画像でいっぱいになるので )

これらも含めて、jQuery で動的に指定できる内容が以下の通りですが、未確認です。
scalemode: "both"
duration: 450
easing: "ease"
nativeanimation: true
root: $(document.body)
debug: false
animationendcallback: null
preservescroll: false
( いずれもデフォルト値 )
▼ ソースが拡大されるのはこの程度の長さならいいかもしれません。
<script type="text/javascript">
if ( window[window.location.hostname+'.loadZoomooz'] !== true ) {
	window[window.location.hostname+'.loadZoomooz'] = 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=\"https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/jquery.zoomooz.min.js\"></"+"script>");
}
</script>
<pre>
▼ クリックすると、表示領域の 1.2倍になります( クリックすると元戻る )
<img
	id="img"
	class="zoomTarget"
	src="https://lh3.googleusercontent.com/-ulnfI0dn2Sg/UiXUpNDBy3I/AAAAAAAAQE8/XDo4nrrauFc/s1200/Hitomi_Dragon_Rider2.jpg"
	style="border: solid 0px #000000;width:600px;"
	data-targetsize="1.2"
	data-closeclick="true"
>
</pre>


同じ内容をjQuery で設定する場合は以下のようになります
(画像処理)
<script type="text/javascript">
if ( window[window.location.hostname+'.loadZoomooz'] !== true ) {
	window[window.location.hostname+'.loadZoomooz'] = 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=\"https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/jquery.zoomooz.min.js\"></"+"script>");
}
</script>
<script type="text/javascript">
$(function() {
	$.zoomooz.setup({targetsize:1.2, closeclick:true});
	$("#img").zoomTarget();
});
</script>
<pre>
▼ クリックすると、表示領域の 1.2倍になります( クリックすると元戻る )
<img
	id="img"
	src="https://lh3.googleusercontent.com/-ulnfI0dn2Sg/UiXUpNDBy3I/AAAAAAAAQE8/XDo4nrrauFc/s1200/Hitomi_Dragon_Rider2.jpg"
	style="border: solid 0px #000000;width:600px;"
>
</pre>
これは、複数の画像をクラスで一括対応する場合に便利です。

個別に拡大処理する場合は、zoomTo というメソッドがありますが、clickclose が使えないようなので、画面を元に戻すコントロールが難しいので、使い勝手が良くありません。

以下のような指定をした場合、拡大時に左端に空白がありますが、そこをクリックしても反応しません( これ以上の詳細はサンプルより読み取る事ができませんでした )

※ おそらく、対象を画面中央に設置する必要がありそうです。
<script type="text/javascript">
if ( window[window.location.hostname+'.loadZoomooz'] !== true ) {
	window[window.location.hostname+'.loadZoomooz'] = 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=\"https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/jquery.zoomooz.min.js\"></"+"script>");
}
</script>
<script type="text/javascript">

$(function() {
	$(".gallery").click(function(evt){
		evt.stopPropagation();
		$(this).zoomTo({targetsize:0.9});
	});
	$("body").click(function(evt){
		$(this).zoomTo({targetsize:1.0});
	});
});
</script>
<pre>
▼ クリックすると、表示領域の 1.2倍になります( クリックすると元戻る )
<img
	class="gallery"
	src="https://lh3.googleusercontent.com/-ulnfI0dn2Sg/UiXUpNDBy3I/AAAAAAAAQE8/XDo4nrrauFc/s1200/Hitomi_Dragon_Rider2.jpg"
	style="border: solid 0px #000000;width:600px;"
>

<img
	class="gallery"
	src="https://lh6.googleusercontent.com/-9sisURI-vgQ/UoeYuH5OzSI/AAAAAAAARPo/77clCKquRGg/s800/1384606249563722.jpeg"
	style="border: solid 0px #000000;width:600px;"
>

</pre>



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


2013年11月14日


jQuery プラグインを使った、ブログ用ストリートビュー『最短コード版』

『Google ストリートビューのパノラマを自分のブログに設置する方法』と、『ブログの記事部分でロードする為の jQuery 用のコード』の手法を使って最短コードにしました
<script src="http://winofsql.jp/jquery/plugins/street_view.js"></script>
<script>
$(function(){
	$('#pano')
	.StreetView(47.615471,1.518008)
	.StreetViewPov(-42.14,9.13)
	.css("width","600px")
	.css("height","450px");

});
</script>
<div id="pano"></div>

関連する記事

jQuery のプラグインとしてストリートビューを利用する(2)


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



ブログの記事部分でロードする為の jQuery 用のコード

Google のホスティング使ってるので誰でも使えます。
1ページに二回実行されても、最初しかロードされません
<script>
if ( window[window.location.hostname+'.loadjQuery'] !== true ) {
	window[window.location.hostname+'.loadjQuery'] = true;
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
}
</script>



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