カテゴリー: JavaScript (1ページ / 5ページ)

Adobe AIR HTMLLoaderでGoogle Maps JavaScript API(バージョン3.28.7)が使えなくなった。>>フローズンバージョン(v=3.20)指定で表示できた。

デジタルサイネージの施設情報で利用しているGoogleMapが表示されなくなったと。
構成は
-Windows7
-AdobeAIR : 3.なんとか。
-Gogolemap: v3(指定なし)

とりあえずフローズンバージョン(v=3.20)指定で表示できました。

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={YOUR_API_KEY}&v=3.20"></script>

バージョニング
https://developers.google.com/maps/documentation/javascript/versions?hl=ja

バージョンが最新バージョン、リリースバージョン、フローズンバージョン3つしか無く
どんどん新しいものに変わっていくらしいので、将来的にはダメダメそう(AIRがふるいWebkitなので。。

早くElectronなどに変更したほうがよいのかも。

Youtube IFrame Player APIでスマホで autoplayが効かない件と解決法。

少しハマったのでめもします。

Youtube IFrame Player APIを使っていて、オリジナルデザインのボタンを1タップで再生したい。
ただし、Chrome や Safari などのモバイル ブラウザでは、HTML5

$('#オリジナルボタンセレクタ').click(function(){
    //PlayerをNEW
    var player = new YT.Player('{ELEMENT_ID}',{
        videoId:'{YOUR_VIDEO_ID}',
        playerVars: {
            autoplay: 1,
        },
        events:{
            //ONReadyしたら再生
            onReady:function(){
                player.playVideo();
            }
        }
    });
});

どうにもユーザーのマウスイベント経由だけど、ダメみたい。(間にイベントの非同期準備できなところが挟まるからかも?)
以下のようにすると解決しました。

//イベントの先にplayerをnew
var player = new YT.Player('ELEMENT_ID',{
    videoId:'YOUR_VIDEO_ID',
    playerVars: {
        autoplay: 0,
        enablejsapi:1,
    },
    events:{
        onReady:function(){
            //onReadyのところでボタンイベントを準備
            $('YOUR_BTN_ID').click(function(){
                player.playVideo();
            });
        },
        onStateChange:function(e){

        }
    }
});

Monaca/OnsenUI:Ajax通信中にモーダルを表示を数行で簡単に実装しました。

ons.ready(function() {
	
	var $modal = $('');
	$('body').append($modal);
	ons.compile($modal[0]);
	//$modal.css('background-color','rgba(255,255,255,0.7)'); //モーダルを白に変更
	$.ajaxSetup({
		beforeSend:function(){
			myModal.show();
		},
		complete:function(){
			myModal.hide();
		}
	});
});

bxsliderで最後の画像が最初に来るのは、autoオプションを外すとなおった。(window.onloadにするだけではだめだっっった)

$(function(){ ほげほげ〜 }); → window.onloadに修正だけではダメだったので、
autoは最初OFFにして表示、pauseのタイミングで2番目のスライドに移動&startAuto()で解決した。

window.onload = function(){
    var $bxslider = $('#bxslider');
    var pauseTime = 10000;
    $bxslider.append(slideHtml);
    var slider = $('#bxslider').bxSlider({
	startSlide:0,
	auto:false,
	speed: 1300,
	autoControls: false,
	pause: pauseTime
    });
    setTimeout(function(){
	slider.goToSlide(1);
	slider.startAuto();
    },pauseTime);
};

JavaScriptデバッグオブジェクトconsole

var o = {
	name:'yama',
	age:37,
	male:'male',
	skill:{
		programing:'1',
		design:'2',
		communication:'1'
	}
};
var a = [123,123123,1231231,123,123,534,53,45];
var xml = 'yama39';

console.log('index!!');
console.info('info');
console.warn('worning');
console.error('error');
console.dir(a);
console.log(a);
console.dirxml($('#main'));

jquery.cookie.jsでのCookieの削除

新しいバージョン

$.removeCookie('the_cookie');

古いバージョンの場合

$.cookie('the_cookie','',{expires:-1});

注意が必要

$.cookie('the_cookie',null);
$.cookie('the_cookie'); // 'null' String

と した後に取得すると’null’の文字列が返って来るケースがあり(13/11 Mac Chrome )

JavaScriptの難読化されたコードを整形フォーマットしてくれるサイト

以下のサイトが精度がよいようす。

url
http://jsbeautifier.org/

もとのライブラリ(physon)はこちら

url
https://github.com/einars/js-beautify
perlの JSDecoderで上手くデコード出来ないコードも整形できました。

GoogleMaps API カスタムOverlayViewのマウスイベント設定

マウスイベントが拾えずはまった。メモ

panes.overlayLayer.appendChild(img);  //×とするとひろえず
panes.overlayMouseTarget.appendChild(img);  //◯とすると拾えた

JSRenderでのカスタムエスケープの方法[JavaScript]

以下のとおりせっていする。メモ

ソースで変換関数を設定

$.views.converters({
 loc: function (value) {
 return nl2br(commentEscape(value));
 }
});

テンプレート

<p>{{loc:message_body}}</p>

 

jQueyのajax()関数で、success関数に引数を渡す方法はクロージャー

jQueryのajax()関数で、successの関数に引数を渡したい。
以下の用に無名関数とか書いちゃえばいいんだけど、スコープが広くりすぎるとなにか気持ち悪い。
そんなときはクロージャがいいな。

var Hoge = {
	fuga : function(url,id){
		$.ajax({
			dataType : 'json',
			url : "hogehoge",
			context : this,
			success : function(json,status,xhr){
				this.uga(id,json,status,xhr);
			}
		});
	},
	uga : function(id,json,status,xhr){
		alert(id);
	}
}

ちゃんと調べてないのですが、たぶんsuccessが実行されるまで変数urlなどへの参照を保持する必要があり微妙にメモリを食いそう。
それよりなによりクロージャーを使えば以下のとおりすっきりできました。
可読性がいい。

var Hoge = {
	fuga : function(url,id){
		$.ajax({
			dataType : 'json',
			url : "hogehoge",
			context : this,
			success : uga(id)
		});
	},
	uga : function(param_id){
		var id = param_id;
		return function(json,status,xhr){
			alert(id);
		};	
	}
}

1 / 5ページ

Powered by WordPress & Theme by Anders Norén