SQLの窓

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 プラグイン作成 | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

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

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
PHP正規表現チェッカー
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり