SQLの窓

2015年07月29日


jQuery で、左右に並んだリストボックスの右側のデーターをダブルクリックしたら左へ転送してソートする処理

開発中です。旧システムの都合で、IE8 コンパチブルになっているので先頭の2行が必要になっていますが、最新の IEならば必要無いと思います( IE8 ではこれが無いと最初のダブルクリックが失敗する )

この後、左側のデータを全て送信する事になりますが、送信直前のイベント( onsubmit ) で、左のリストボックスを複数選択可に変更した後全て選択状態にします( PHP の場合は name="left[]" にしておきます )
<script>
// jQuery 初期処理
$(function() {

	// IE8 対応
	$("#right").focus();
	$("#right").prop("selectedIndex", 0);


	$("#right").on("dblclick", function(){

		var value = $(this).find(":selected").val();
		var text = $(this).find(":selected").text();

		$("#left").data("check",false);
		$("#left").find("option").each( function(){
			if ( $(this).val() == value ) {
				alert("既に登録されています");
				$("#left").data("check",true);
			}
		} );

		// 追加しない
		if ( $("#left").data("check" ) ) {
			return;
		}

		// ソートしない場合は、prependTo がベター
		$("<option>").val(value).text(text)
			.prependTo("#left");

		var selectList = $('#left option');

		selectList.sort(function(a,b){
			a = a.value;
			b = b.value;
			return a-b;
		});

		$('#left').html(selectList);
		
	});

});
</script>



タグ:jquery IE
posted by lightbox at 2015-07-29 17:23 | jQuery | このブログの読者になる | 更新情報をチェックする

2015年07月27日


スマホとPC で別の処理を記述できる jQuery のストリートビュープラグイン

スマホ対応をする為 userAgent の文字列を内部で使用していますが、StreetViewOnSh メソッドと StreetViewOnPc メソッドの引数としても再度渡しています。さらに、StreetView メソッドで作成した StreetViewPanorama クラスのインスタンスも引数として渡しているので、未実装の処理も追加で簡単に記述できます 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
$.fn.extend({
	StreetView : function(a,b){
		var pos = new google.maps.LatLng(a,b);
		// jQuery オブジェクトに StreetViewPanorama をセット(後で使用します)
		this
			.data( "pano", 
				new google.maps.StreetViewPanorama(
					this[0],
					{ position: pos }
				)
			);
		// プラグインの戻り値の無い処理の標準仕様として自分自身を返す
		return this;
	},
	// 向き	と 上下 の値をセットします
	StreetViewPov : function(a,b){
		var pov = {
			heading: a,  
			pitch: b 
		}
		// jQuery オブジェクトにセットした StreetViewPanorama を使用しています
		this.data( "pano" ).setPov(pov);
		// プラグインの戻り値の無い処理の標準仕様として自分自身を返す
		return this;
	}, 
	// 拡大率をセットします( 0 〜 5 / 小数以下あり )
	StreetViewZoom : function(a){
		// jQuery オブジェクトにセットした StreetViewPanorama を使用しています
		this.data( "pano" ).setZoom(a);
		// プラグインの戻り値の無い処理の標準仕様として自分自身を返す
		return this;
	},
	StreetViewOptions( a ) {
		// jQuery オブジェクトにセットした StreetViewPanorama を使用しています
		$( this ).data( "pano" ).setOptions(a);
		// プラグインの戻り値の無い処理の標準仕様として自分自身を返す
		return this;
	},
	StreetViewOnSh: function( callback ) {
		var ua = navigator.userAgent.toLowerCase();
		if ( ua.indexOf("iphone") > -1 || ua.indexOf("android") > -1 ) {
			(callback.bind(this,ua,this.data( "pano" )))();
		}
		return this;
	},
	StreetViewOnPc: function( callback ) {
		var ua = navigator.userAgent.toLowerCase();
		if ( ua.indexOf("iphone") <= -1 && ua.indexOf("android") <= -1 ) {
			(callback.bind(this,ua,this.data( "pano" )))();
		}
		return this;
	}
	

});

$(function(){
	$('#pano_40671578')
	.StreetView(40.671578,-73.962557)
	.StreetViewPov(-128,10)
	.StreetViewOnPc( function(userAgent,StreetViewPanorama){
		// PC の場合の処理
		this.css("width","600px");
		this.css("height","400px");

		// 追加のブラウザ判定に使用する
		console.log(userAgent);
		// 実装していない処理は、直接実行
		console.log(StreetViewPanorama.getPov())
	})
	.StreetViewOnSh( function(userAgent,StreetViewPanorama){
		// スマホ の場合の処理
		this.css("cssText","width:290px!important;height:290px!important");
		this.StreetViewZoom(2.5);

		// 追加のブラウザ判定に使用する
		console.log(userAgent);
		// 実装していない処理は、直接実行
		console.log(StreetViewPanorama.getZoom())
	})
	;

	// PC と スマホ 共通な場合
	$('#pano_40671578_b')
	.StreetView(40.671578,-73.962557)
	.StreetViewPov(-106.13,8.69)
	.StreetViewZoom(2.65)
	.StreetViewOptions({
		/* addressControl: false, */
		/* zoomControl: false, */
		/* panControl: false, */
		scrollwheel: false,
		disableDefaultUI: true
	})
	.css("width","600px")
	.css("height","480px")
	.css("margin-top","10px")
	;

});
</script>
<div id="pano_40671578"></div>
<div id="pano_40671578_b"></div>
スマホの処理として、表示サイズを強制的に変更する為に important を使用していますが、これは jQuery で important 設定する方法としてかなり前から公開されているもので、一度に全ての設定を行う必要があります。
	$('#pano_40671578')
	.StreetView(40.671578,-73.962557)
	.StreetViewPov(-128,10)
	.StreetViewOnPc( function(userAgent,StreetViewPanorama){
		// PC の場合の処理
		this.css("width","600px");
		this.css("height","400px");

		// 追加のブラウザ判定に使用する
		console.log(userAgent);
		// 実装していない処理は、直接実行
		console.log(StreetViewPanorama.getPov())
	})
	.StreetViewOnSh( function(userAgent,StreetViewPanorama){
		// スマホ の場合の処理
		this.css("cssText","width:290px!important;height:290px!important");
		this.StreetViewZoom(2.5);

		// 追加のブラウザ判定に使用する
		console.log(userAgent);
		// 実装していない処理は、直接実行
		console.log(StreetViewPanorama.getZoom())
	})
	;
実際問題スマホの環境では、さらに考慮すべき事項や、複雑なサイト環境によっては IFRAME を使わざるを得ない場合があり、簡単に行くとはかぎりませんが、場合を確実に分けて記述できるメリットはあると思います。


関連する記事
jQuery のプラグインとしてストリートビューを利用する

(callback.bind(this))(); で、無名 function で使用される this に this を引き継ぐ




posted by lightbox at 2015-07-27 15:08 | プラグイン作成(jQuery) | このブログの読者になる | 更新情報をチェックする

2015年07月23日


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

とにかく、ストリートビューは何かと面倒な事が多いので、jQuery の簡潔さでどの程度表現できるかやってみました。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
$.fn.extend({
	StreetView : function(a,b){
		var pos = new google.maps.LatLng(a,b);
		// jQuery オブジェクトに StreetViewPanorama をセット(後で使用します)
		$( this )
			.data( "pano", 
				new google.maps.StreetViewPanorama(
					$(this)[0],
					{ position: pos }
				)
			);
		// プラグインの戻り値の無い処理の標準仕様として自分自身を返す
		return this;
	},
	// 向き	と 上下 の値をセットします
	StreetViewPov : function(a,b){
		var pov = {
			heading: a,  
			pitch: b 
		}
		// jQuery オブジェクトにセットした StreetViewPanorama を使用しています
		$( this ).data( "pano" ).setPov(pov);
		// プラグインの戻り値の無い処理の標準仕様として自分自身を返す
		return this;
	}, 
	// 拡大率をセットします( 0 〜 5 / 小数以下あり )
	StreetViewZoom : function(a){
		// jQuery オブジェクトにセットした StreetViewPanorama を使用しています
		$( this ).data( "pano" ).setZoom(a);
		// プラグインの戻り値の無い処理の標準仕様として自分自身を返す
		return this;
	},
	StreetViewOptions( a ) {
		// jQuery オブジェクトにセットした StreetViewPanorama を使用しています
		$( this ).data( "pano" ).setOptions(a);
		// プラグインの戻り値の無い処理の標準仕様として自分自身を返す
		return this;
	}
});

$(function(){
	$('#pano1')
	.StreetView(40.671578,-73.962557)
	.StreetViewPov(-128,10)
	.css("width","600px")
	.css("height","400px")
	.css("margin-bottom","10px")

	$('#pano2')
	.StreetView(40.671578,-73.962557)
	.StreetViewPov(-106.13,8.69)
	.StreetViewZoom(2.65)
	.StreetViewOptions({
		/* addressControl: false, */
		/* zoomControl: false, */
		/* panControl: false, */
		scrollwheel: false,
		disableDefaultUI: true
	})
	.css("width","600px")
	.css("height","480px")
;

});
</script>
<div id="pano1"></div>
<div id="pano2"></div>
Google のサンプルはやたらと、オプションを一括で渡したがるので、とても解りにくいと思っていましたし、固定的で汎用性が無いかもしれませんが、これで十分なのでこのほうがいいかもしれません。
▼ ストリートビュー上のコントロールを排除して、マウスホイールによるズームを出来ないようにしています。
StreetViewOptions メソッドは、使用可能なオプションを後から設定しますが、ここで試しているようにいろいろな UI をキャンセルする場合に使用します。

heading と pitch と zoom は、こちらで動かしながら取得できます。画像だけで良い場合もこちらで URL を取得できます( 最後に設定変更ボタン )。




Google の API リファレンス

StreetViewPanorama class
Google Street View Image API
StreetViewPanoramaOptions



posted by lightbox at 2015-07-23 15:32 | プラグイン作成(jQuery) | このブログの読者になる | 更新情報をチェックする

2015年07月22日


jQuery の簡単なプラグインを $.fn.extend で作成( 0〜9のみ入力可能なフィールド )

プラグインとしては、一応 IE8、IE9、Chrome、Firefox、Opera、Safari で動作はしていますが、入力制限でうまく行かない場合があると洒落にならないので、実用としては考えていないコードです。

ただ、プラグインの考え方としては良く解りやすいと思います。対象となる入力フィールドに対して一括で jQuery で入力制限を行った上に、CSS で色とサイズと最大入力数も同時設定しています。

try 〜 catch が入って変な事になっているのは、IE8 に対応する為です。returnValue = false では、特にエラーになる事は無かったのですが(実際ではIEのみ実行にしたほうがよさそうです)、一応念のため。preventDefault は、IE8 以前ではエラーになるはずです。
<!-- 古いIE用に 1.9.1 を使用しています -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="numField" type="text">
<input class="numField" type="text">
<input class="numField" type="text">
<script>

// プラグインの作成( fn.extend )
$.fn.extend({ 
	numField: function(){
		$(this).on('keydown', function(evt) {
			// *********************************
			// 以下入力を受け付けるキーの処理
			// *********************************
			// 数字( 0〜9 )
			if ( 48 <= evt.keyCode && evt.keyCode <= 57 ) {
				return;
			}
			// テンキー( 0〜9 )
			if ( 96 <= evt.keyCode && evt.keyCode <= 105 ) {
				return;
			}
			// 矢印
			if ( 37 <= evt.keyCode && evt.keyCode <= 40 ) {
				return;
			}
			// DEL
			if ( evt.keyCode == 46 ) {
				return;
			}
			// タブ
			if ( evt.keyCode == 9 ) {
				return;
			}
			// バックスペース
			if ( evt.keyCode == 8 ) {
				return;
			}
			// *********************************
			// 以下入力を受け付けないキーの処理
			// *********************************
			// 古い IE 用
			if (navigator.userAgent.toLowerCase().indexOf("msie") > -1) {
				try{
					evt.returnValue = false;
				}catch(ex){}
			}
			try{
				// イベントがキャンセル可能である場合、
				// 上位ノードへのイベントの 伝播 (propagation) を止めずに、
				// そのイベントをキャンセルします。
				evt.preventDefault();
			}catch(ex){}
		});
		// プラグインの標準仕様として実行後は自分自身を返す
		return this;
	}  
});

// プラグインの実行
$(".numField").numField()
	.css({
		"background-color":"pink",
		"width":"70px"
	})
	.attr("maxlength",6);

</script>



タグ:javascript jquery
posted by lightbox at 2015-07-22 13:22 | プラグイン作成(jQuery) | このブログの読者になる | 更新情報をチェックする

2015年07月20日


jQuery でコンボボックスの選択されたオプションのテキストを取得する場合、optgroup を使っている場合は子孫選択でないと取得されないというお話 / find(子孫) と children(直近) の違い

要は、:selected Selector のお話です。

通常のコンボボックスですと、どちらでも正しく動きます。しかし、optgroup を使ってコンボボックス内に分類を作ってしまうと、option 要素の階層がが一つ深くなってしまうので選択した option 要素を取得できない事になります。

セレクタとして > を使う事はそもそもあまり無いですが、逆に必要な場合もあるので、メソッドの find(子孫) と children(直近) の違いとして覚えておくとイザという時に役に立つと思います

jQuery のコンボボックスの選択で調べると、たいていセレクタでのサンプルがヒットするのですが、.find で書いたほうが明確に意図を反映できると思うのです。(後々のメンテナンスの為に)

どうせ、onchange イベントでは $(this) から始まるので .find ですし 

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<select id="font" name="font">
	<option value="jiyunotsubasa">自由の翼フォント</option>
	<option value="kirieji" >切絵字1.0</option>

	<optgroup label="手書き">
		<option value="TanukiMagic" >たぬき油性マジック</option>
		<option value="setofont" >瀬戸フォント</option>
	</optgroup>

	<optgroup label="正統派">
		<option value="VL-PGothic-Regular" >VLゴシックフォントファミリ</option>
		<option value="ume-pgo4" >梅Pゴシック</option>
	</optgroup>

	<optgroup label="変化正統派">
		<option value="nukamiso_yamiyo_beta07" >ぬかみそ闇夜</option>
		<option value="kagamimoji-pgoth-v" >鏡文字Pゴシック-V</option>
	</optgroup>
</select>
<input type="button" value="子孫選択1" id="get_selected_text1">
<input type="button" value="子孫選択2" id="get_selected_text2">
<input type="button" value="チャイルド選択1" id="get_selected_text_child1">
<input type="button" value="チャイルド選択2" id="get_selected_text_child2">
<div id="result" style='padding:10px;border:1px solid #000;width:200px;'>
</div>
<div id="result2" style='padding:10px;border:1px solid #000;width:200px;'>
</div>
<script>
// 子孫選択( 正しい方法 )
$("#get_selected_text1").click(function(){
	alert( $("#font option:selected").text() )
});

$("#get_selected_text2").click(function(){
	alert( $("#font").find("option:selected").text() )
});

$("#font").change(function(){
	$("#result").text( $(this).find("option:selected").text() )
});

// チャイルド選択( ダメな方法 )
$("#get_selected_text_child1").click(function(){
	alert( $("#font > option:selected").text() )
});

$("#get_selected_text_child2").click(function(){
	alert( $("#font").children("option:selected").text() )
});

$("#font").change(function(){
	$("#result2").text( $(this).children("option:selected").text() )
});


</script>
表現方法で混乱します。子孫や Children とか、親子と parent とか言われるとごちゃごちゃになりそうです。ですから、この場合 find というメソッドがとても光って見えます
タグ:jquery select
posted by lightbox at 2015-07-20 13:54 | jQuery | このブログの読者になる | 更新情報をチェックする

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 | このブログの読者になる | 更新情報をチェックする
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 終わり