SQLの窓

2015年07月17日


jquery.balloon.js + Google ドライブの webViewLink(仮想ディレクトリ) + Google ストートビュー画像

▼ Google ドライブに以下のような img 要素による HTML 記述を書いた、.txt ファイルを置いています
<img src="http://maps.googleapis.com/maps/api/streetview?size=300x200&location=48.873321%2C2.295613&fov=90&heading=-40.96&pitch=18.1&sensor=false" style="border: solid 1px #000000">
これは、Google の API を使用して、ストリートビューの一場面を画像化したものです。


jQuery + jquery.balloon.js + jQuery UI のエフェクトを使用してバルーンにアニメーション効果を適用しています。バルーンの中の HTML データは、Google ドライブの WEB ホステング機能を使ってテキストとして置いて、ajax で呼び出しています。

関係するページ
jquery.balloon.js のダウンロードと使い方のページ

jQuery プラグイン jquery.balloon.js で、画像吹き出しを使って吹き出しの中央に文章を配置する

Google Street View Image API
( Google Street View Image API では、JavaScript を使用せずに、静的(非インタラクティブ)なストリートビューのパノラマ画像やサムネイルをウェブページに埋め込むことができます。)

ストリートビュー内で移動しながらリアルタイムで画像 URL を取得するサービス
Google ドライブの 『webViewLink』という仮想ディレクトリは、access-control-allow-origin:* を返してくれるので、一般ブログ内からでも利用する事ができます。 アニメーションに関しては、slide では二回目以降に失敗する事があり、Firefox で顕著でした。これはテキストコンテンツではあまり起きなかったので、画像を使っている事が影響していると思います。jQuery のアニメーションは、特殊なものは環境や大きさ等が原因で失敗するものもあるようです。 凱旋門のストリートビュー写真が右から アニメーションするバルーンの中に表示 されます url の内容を ajax で取得して HTML としてバルーン内のコンテンツとして使用していまが、jquery.balloon.js では、url オプションの内容を ajax で読み込んで、バルーンの中身として使用してくれます 最初の スクリプトは、jQuery 関係のロードですが、ブログの記事毎に必要な場合のみロードする方法です
<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></"+"script>");
}
</script>
<script>
if ( !window.jQuery.ui ) {
	document.write("<"+"link rel=\"stylesheet\" href=\"//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css\">");
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js\"></"+"script>");
}
if ( !window.jQuery.balloon ) {
	document.write("<"+"script src=\"http://winofsql.jp/js/jquery.balloon.min.051.js\"></"+"script>");
}
</script>
<style>
.balloon_ajax {
	width: 300px;
	cursor: pointer;
}
</style>
<script>
$(function() {
	$( ".balloon_ajax" ).balloon(
		{
			url: "https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/ajax/street_view_img.txt",
			showDuration: 400,
			showAnimation: function(d) {
				this.show( {
					effect: "slide", direction: "right",
					duration: d,
					easing: "swing" 
				}); 
			},
			hideAnimation: function(d) {
				this.hide( {
					effect: "slide", direction: "right",
					duration: d,
					easing: "swing" 
				}); 
			},
			position: "right",
			tipSize: 20,
			offsetY: 0,
			offsetX: 30,
			css: {
				width: "300px",
				height: "200px",
				opacity: "1",
				color: "#333",
				fontSize: "16px",
				borderRadius: "10px",
				border: "solid 2px #A63814",
				padding: "10px"
			}
		}
	);

});
</script>
<pre class=w6>



<div class="balloon_ajax" id="slide_right_386699574"><img src="https://lh4.googleusercontent.com/-0l8Fqu9YYeE/VGWSwZ65BLI/AAAAAAAAXi4/3FWfh92yL8M/s198/mouse_over.png" style="border: solid 1px #000000" />
<b>凱旋門のストリートビュー写真が右から
アニメーションするバルーンの中に表示
されます
</b></div>
</pre>
この JavaScript のコードは、リアルタイム HTML で実行できます

▼ GN-キルゴを使った画像は、フリーフォントで簡単ロゴ作成で作成できます。



関連する記事



posted by lightbox at 2015-07-17 18:22 | プラグイン:jQuery | このブログの読者になる | 更新情報をチェックする

jQuery プラグイン jquery.balloon.js で、画像吹き出しを使って吹き出しの中央に文章を配置する

オンラインで実行

jquery.balloon.js で画像のバルーンを使いたい場合、最新の(少なくともバージョンが 0.5.1)ライブラリが必要です。

※ それより古いバージョンでは、デフォルトのコンテンツ設定を透明にする為の css: null が新しい jQuery のライブラリで動作しなかったからです。 

画像を使用するので、文字列と共存する為に手動で調整が必要です。その為、実際に DIV 内にコンテンツを作成して調整終了後、display:none で非表示にします。そして、jQuery の .html() で HTML 定義を取得して、contents プロパティにセットします。

tipSize は、0 に設定しないと、吹き出し用の三角部分が表示されて動作がおかしくなる可能性があります。

その為プラグイン側の処理は単純になっており、殆どは CSS の定義に依存しています
▼ マウスオーバーでバルーンが表示されます
プラグインダウンロードページ












▼ コンテンツ用( 実際は display:none で非表示にしておく )
画像吹き出し内
の中央に文章を配置
しています
<script>
if ( !window.jQuery ) {
	document.write("<"+"script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></"+"script>");
}
if ( window[window.location.hostname+'.loadBalloon'] !== true ) {
	window[window.location.hostname+'.loadBalloon'] = true;
	document.write("<"+"script src='http://winofsql.jp/js/jquery.balloon.min.051.js'></"+"script>");
}
</script>
<style type="text/css">
/* 画像用のコンテナです */
.balloonbox {
	/* 背景画像のみ指定しています */
	background: url(http://winofsql.jp/js/balloon/orange_balloon.png) center center no-repeat;
	/* 画像サイズに合わせています */
	width: 323px;
	height: 278px;

	/* vertical-align を指定できるようにする為に必要 */
	display: table-cell;

	/* 内部文字列を縦方向に中央に表示する為 */
	vertical-align:middle;
}
/* 文字列部分のコンテナです  */
.ballooninbox {
	/* 幅を設定します。高さは文字列に依存します */
	width: 300px;

	/* border の太さを0にすると、点線が消えます */
	border: dashed 1px #B8561D;
	font-weight: bold;
	font-size: 24px;
}
/* 文字列部分の配置用クラスです  */
.balloonalign {
	/* 文字列を中央に */
	text-align: center;

	/* PRE 全体を DIV 内で中央にして、上下調整を 30px で行っています */
	margin: 30px auto 0;
}
</style>
<script type="text/javascript">
$(function() {
	$('#image_balloon').balloon(
		{
			contents: $("#balloon_contents").html(),
			position: "bottom",
			offsetX: 100,
			tipSize: 0,
			css: null
		}
	);
});
</script>
<pre>
▼ マウスオーバーでバルーンが表示されます
<a id="image_balloon" title="こんな感じ" href="http://urin.github.io/jquery.balloon.js/" target="_blank">プラグインダウンロードページ</a>






















▼ コンテンツ用( 実際は display:none で非表示にしておく )
<div id="balloon_contents" style='border:solid 1px #c0c0c0;width:323px;'>
	<div class='balloonbox'>
		<pre class='ballooninbox balloonalign'>画像吹き出し内<br>の中央に文章を配置<br>しています</pre>
	</div>
</div>






</pre>
上下配置の為に 『display:table-cell』 と 『vertical-align:middle』を使用しているのですが、本来の contents エリアは内部的に position:absolute の為、display:table-cell が適用されないので、ラッパーをコンテンツ内に配置し、文章はさらにその中の PRE 要素で設定しています。

上下位置の微調整の為、.balloonalign 内の margin でさらに調整して画像の中央に文字列を配置しています。

関連する記事

CSSの 『display:table-cell』 と 『margin:auto』 と 『vertical-align:middle』 を使用して、吹き出し画像の中央に文章を表示する



関連する記事



posted by lightbox at 2015-07-17 18:22 | プラグイン:jQuery | このブログの読者になる | 更新情報をチェックする

2015年03月01日


jQuery のプラグイン jquery-color を使って、『青黒』なのか『白金』なのか、と言う『錯視』を再現しました。

色コードはそもそも、単純な数値では無いので、いろいろテクニックを使っても無理がある為、素直に既存の jQuery の プラグインで色を変化させています。

右半分の縦の二つの正方形の中の色は変化していません

右半分に注目して実行して下さい。

実行コード
<script type="text/javascript" src="http://winofsql.jp/jquery/plugins/jquery.color.js"></script>
<style>
#back_left {
	display:inline-block;
	background-color:#949494;
	width:200px;
	height:400px;
}
#back_right{
	display:inline-block;
	background-color:#C7BEA8;
	width:200px;
	height:400px;
}
#left_blue {
	position:absolute;
	top:100px;
	left:100px;
	width:100px;
	height:100px;
	border:1px #000 solid;
	background-color:#3041AB;
}
#left_black {
	position:absolute;
	top:200px;
	left:100px;
	width:100px;
	height:100px;
	border:1px #000 solid;
	background-color:#262A40;
}
#right_blue {
	position:absolute;
	top:100px;
	left:200px;
	width:100px;
	height:100px;
	border:1px #000 solid;
	background-color:#928CBB;
}
#right_black {
	position:absolute;
	top:200px;
	left:200px;
	width:100px;
	height:100px;
	border:1px #000 solid;
	background-color:#8C7D63;
}
</style>
<div style='position:relative;height:400px;'>

<div id="back_left"></div><div id="back_right"></div>

<div id="left_blue"></div>
<div id="left_black"></div>
<div id="right_blue"></div>
<div id="right_black"></div>

</div>

</div>
<script>
function doAction() {
	$("#back_right").animate({
		"backgroundColor":"#55516C"
	});
	$("#left_blue").animate({
		"backgroundColor":"#FFFFFF"
	});
	$("#left_black").animate({
		"backgroundColor":"#F5E687"
	});
}
function doAction2() {
	$("#back_right").animate({
		"backgroundColor":"#C7BEA8"
	});
	$("#left_blue").animate({
		"backgroundColor":"#3041AB"
	});
	$("#left_black").animate({
		"backgroundColor":"#262A40"
	});
}
</script>
<input type="button" value="実行" onclick='doAction()'> <input type="button" value="戻す" onclick='doAction2()'>
関連するリンク

jquery-color
Twitter の元となった、色配置の投稿





posted by lightbox at 2015-03-01 20:38 | プラグイン:jQuery | このブログの読者になる | 更新情報をチェックする

2014年12月04日


テーブル要素内のデータよりグラフを作成する jQuery プラグイン『jQuery-Visualize』をもっと使いやすく改造しました



概要

オリジナルはもう2年くらい処理の更新が無いのですが、問題点がいくつかあるので改造しました。問題点は、付属の css が中途半端なのと、上限と下限を設定できないので、一番大きい値がグラフの上限になり見にくいです。その上、Y軸のラベルの数字の間が自動なので100区切りとかになりません。そのあたりをオプションに追加しました。

enhance.js について

IE7 のエミュレーションでもグラフそのものは動作したので削除しています。

追加オプションと仕様変更



1) tableDisplay : デフォルトは true で、false にすると、データ元のテーブルを表示しない
2) top: グラフの上限
3) bottom : グラフの下限
※ yLabelInterval のデフォルトを 100 にして、Y軸の区切りの単位として変更
12月 1月 2月 3月 4月 5月 6月 7月 8月 9月 10月 11月
2013 712 1144 938 972 714 771 515 641 1051 1018 658 681
2014 857 1219 927 947 709 674 495 537 900 758 536 550
▼ 棒グラフ( dark 色 )


colors は、オプションで指定する場合は、データの数ぶん色を設定する必要があります。
タイトルは、th で指定する必要があります。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript"> 
if ( window[window.location.hostname+'.visualize'] !== true ) { 
	window[window.location.hostname+'.visualize'] = true; 
	(function(){
		var str="";
		str+="<link href=\"http://winofsql.jp/jquery/plugins/visualize/visualize-light.css\" type=\"text/css\" rel=\"stylesheet\"> \n";
		str+="<"+"script type=\"text/javascript\" src=\"http://winofsql.jp/jquery/plugins/visualize/excanvas.js\"></"+"script> \n";
		str+="<"+"script type=\"text/javascript\" src=\"http://winofsql.jp/jquery/plugins/visualize/visualize.jQuery.js\"></"+"script> \n";
		document.write(str);
	})();
} 
</script> 
<script type="text/javascript">
$(function(){
	$("#target_table").visualize({
		tableDisplay: true,
		type: "line",
		width: "400px",
		height: "200px",
		title: "電気使用量の推移",
		colors: ['#F5CE0A','#0AB2F5'],
		lineWeight: 2,
		top: 1300,
		bottom: 400,
		yLabelInterval: 100
	});
});
</script>
<style>
.visualize * {
	font-size: 12px!important;
	font-family: Arial,"メイリオ","MS Pゴシック";
}
.visualize .visualize-title {
	font-size: 24px!important;
	font-family: Arial,"メイリオ","MS Pゴシック";
}
.visualize { 
	margin: 20px 0 0 15px;
}
#target_table {
	border-collapse: collapse;
}
#target_table td, #target_table th {
	text-align: center;
	border: 1px solid #ddd;
	padding:2px 5px;
}
</style>
<table id="target_table">
<thead>
<tr>
	<td></td>
	<th>12月</th>
	<th>1月</th>
	<th>2月</th>
	<th>3月</th>
	<th>4月</th>
	<th>5月</th>
	<th>6月</th>
	<th>7月</th>
	<th>8月</th>
	<th>9月</th>
	<th>10月</th>
	<th>11月</th>
</tr>
</thead>
<tbody>
<tr>
	<th>2013</th>
	<td>712</td>
	<td>1144</td>
	<td>938</td>
	<td>972</td>
	<td>714</td>
	<td>771</td>
	<td>515</td>
	<td>641</td>
	<td>1051</td>
	<td>1018</td>
	<td>658</td>
	<td>681</td>
</tr>
<tr>
	<th>2014</th>
	<td>857</td>
	<td>1219</td>
	<td>927</td>
	<td>947</td>
	<td>709</td>
	<td>674</td>
	<td>495</td>
	<td>537</td>
	<td>900</td>
	<td>758</td>
	<td>536</td>
	<td>550</td>
</tr>
</tbody>
</table>


タグ:jquery
posted by lightbox at 2014-12-04 00:42 | プラグイン:jQuery | このブログの読者になる | 更新情報をチェックする

2014年11月26日


jQuery.selection(プラグイン) : テキストエリア内のカーソル位置や選択範囲に対して文字列を追加したり置き換えたりする。

2014/11/26 : jQuery.selection(プラグイン) のバグ対応。現在、Google Chrome のみ、選択後テキストエリアの最後までスクロールされています。中身を見ると、結局 Firefox でしか必要の無い処理の影響でした。以下の部分が変更内容です。
        setPos: function(element, toRange, caret) {
            caret = this._caretMode(caret);

            if (caret === 'start') {
                toRange.end = toRange.start;
            } else if (caret === 'end') {
                toRange.start = toRange.end;
            }

            var userAgent = window.navigator.userAgent.toLowerCase();
            if (userAgent.indexOf("firefox") > -1) {
                element.focus();
            }
            try {
                if (element.createTextRange) {
                    var range = element.createTextRange();

                    if (win.navigator.userAgent.toLowerCase().indexOf("msie") >= 0) {
                        toRange.start = element.value.substr(0, toRange.start).replace(/\r/g, '').length;
                        toRange.end = element.value.substr(0, toRange.end).replace(/\r/g, '').length;
                    }

                    range.collapse(true);
                    range.moveStart('character', toRange.start);
                    range.moveEnd('character', toRange.end - toRange.start);

                    range.select();
                } else if (element.setSelectionRange) {
                    element.setSelectionRange(toRange.start, toRange.end);
                }
            } catch (e) {
                /* give up */
            }
        },



テキストエリアで使う事が最も便利で有効ですが、通常の1行の入力フィールドでもかまいません。

使用可能なメソッドは 5つ

1) getPos
2) setPos
3) insert
4) replace
5) get

get は、一応メソッドとしての名前ですが、1〜4 以外の文字列を指定すると全て get となります。getPos と setPos は、選択位置の情報の取得と反映です。

insert では、サブメソッドがあって、before か after を使用し、最後のカーソルモードとして、keep か start か end を選べます。

ページ全体で使用可能 selection メソッド

こちらは、text か html かで選択部分の情報を取得します
ここを選択して html 取り出しすると

▼ テキストエリア内限定 ▼ ページ全体に対しての処理

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/jquery/jquery.selection.js"></script>
<script type="text/javascript">

$(function(){

	$("#text")
		.css({
			float: "left",
			width: "400px",
			height: "200px"
		});

	$("#insert1")
		.attr("type", "button")
		.val("前へ挿入")
		.css({
			display: "block"
		})
		.click(function(){
			$("#text").selection("insert",{ text: "文字列", mode: "before", caret: "keep" })
		});

	$("#insert2")
		.attr("type", "button")
		.val("後へ挿入")
		.css({
			display: "block"
		})
		.click(function(){
			$("#text").selection("insert",{ text: "文字列", mode: "after", caret: "keep" })
		});

	$("#replace")
		.attr("type", "button")
		.val("置き換え")
		.css({
			display: "block"
		})
		.click(function(){
			$("#text").selection("replace",{ text: "文字列", caret: "keep" })
		});

	$("#get")
		.attr("type", "button")
		.val("取り出し")
		.css({
			display: "block"
		})
		.click(function(){
			alert( $("#text").selection("get") )
		});

	$("#get_text")
		.attr("type", "button")
		.val("選択部分の text 取り出し")
		.css({
			display: "block"
		})
		.click(function(){
			alert( $.selection("text") )
		});

	$("#get_html")
		.attr("type", "button")
		.val("選択部分の html 取り出し")
		.css({
			display: "block"
		})
		.click(function(){
			alert( $.selection("html") )
		});

});

</script>
<b>ここを選択して <span>html</span> 取り出しすると</b><br><br>

<textarea id="text">aaa
bbb
ccc</textarea>
▼ テキストエリア内限定
<input id="insert1">
<input id="insert2">
<input id="replace">
<input id="get">
▼ ページ全体に対しての処理
<input id="get_text">
<input id="get_html">



IE11 のエミューレートテストでは、IE8 を含むそれより前は、.attr("type", "button") が動作せず、jQuery も 1.11.0 以前である必要があります( IE8 には addEventListener が無いので )

関連する記事

ノーマル JavaScript と比較。jQuery でクリックしたテキスト( SPAN 要素 と INPUT またはテキストエリア ) を選択状態にする


posted by lightbox at 2014-11-26 15:25 | プラグイン:jQuery | このブログの読者になる | 更新情報をチェックする

2013年10月25日


jQuery の Chosen プラグイン( 複数選択コンボボックス ) の使い方

Chosen

選択すると、ボタンが追加されて複数選択を右手のマウスだけで行う事ができます。
必要なファイルは、js と css と chosen-sprite.png の3つのファイルだけです。


<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
}
if ( window[window.location.hostname+'.loadChosen'] !== true ) {
	window[window.location.hostname+'.loadChosen'] = true;
	document.write("<"+"link rel=\"stylesheet\" href=\"http://winofsql.jp/jquery/plugins/chosen/chosen.css\">");
	document.write("<"+"script src=\"http://winofsql.jp/jquery/plugins/chosen/chosen.jquery.min.js\"></"+"script>");
}
</script>
<script type="text/javascript">
$(function() {
	// セレクタ
	$(".chosen")
		// プラグイン
		.chosen({
			width: "550px",
			max_selected_options: 3
		})
		// 変更時のイベント
		.change(function(evt, params){
			console.log(evt.type);
			if ( params.selected ) {
				console.log(params.selected+" が選択されました");
			}
			if ( params.deselected ) {
				console.log(params.deselected+" が選択解除されました");
			}
		})
		// リストが開いた時のイベント
		.on('chosen:showing_dropdown', function(evt, params) {
			console.log(evt.type);
			console.log(params);
		})
		// リストが閉じた時のイベント
		.on('chosen:hiding_dropdown', function(evt, params) {
			console.log(evt.type);
			console.log(params);
		})
		// 最大値以上を選択した時に発生するイベント( リストは開かない )
		.on('chosen:maxselected', function(evt, params) {
			console.log("---------------");
		})
		;
	}
);


</script>

<form>
<input type="submit" value="送信"><br>
<select name="sel_01[]" data-placeholder="あなたの好きな色を選択して下さい" multiple class="chosen">
	<option value="0"></option>
	<option value="1">赤</option>
	<option value="2">緑</option>
	<option value="3">青</option>
	<option value="4">紫</option>
	<option value="5">ピンク</option>
	<option value="6">オレンジ</option>
	<option value="7">黄色</option>
	<option value="8">茶色</option>
</select>
<br><br>
<select name="sel_02" data-placeholder="あなたの好きな色を選択して下さい"class="chosen">
	<option value="0"></option>
	<option value="1">赤</option>
	<option value="2">緑</option>
	<option value="3">青</option>
	<option value="4">紫</option>
	<option value="5">ピンク</option>
	<option value="6">オレンジ</option>
	<option value="7">黄色</option>
	<option value="8">茶色</option>
</select>
</form>



posted by lightbox at 2013-10-25 02:21 | プラグイン:jQuery | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり



フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり