2017年 1月 の投稿一覧

JavaScriptとYoutubeApiを活用してお手軽にマウスイベントで動画を制御する方法

マウスイベントで動画の挙動を調整する記述を書きます。


<iframe class="popupYT" src="https://www.youtube.com/embed/09PPdToGepo?rel=0&enablejsapi=1" width="800" height="450" frameborder="0" allowfullscreen=""></iframe>


	$(function(){
	    var $playerWindow;
	    $('.movie').mouseover(function(){
	        $playerWindow = $(this)[0].contentWindow;
	        videoControl("playVideo");
	    });
	    $('.movie').mouseout(function(){
	        $playerWindow = $(this)[0].contentWindow;
	        videoControl("pauseVideo");
	    });
	    function videoControl(action){
	        $playerWindow.postMessage('{"event":"command","func":"'+action+'","args":""}', '*');
	    }
	});

	/*----- 処理のタイミングを前後に分ける方法 -----*/
	$(function(){
	    $.when(
	      //前の処理を記述する
	    ).done(function() {
	      //後の処理を記述する
	    });
	});

JavaScriptでURLのパラメーターやアンカー(#以降の部分)に応じて処理を分ける場合

URLのパラメーターに応じて処理を分ける場合


	$(function(){
		var urlParam = location.search.substring(1);
		if(urlParam) {
			var param = urlParam.split('&');
			var paramArray = [];
			for (i = 0; i < param.length; i++) {
				var paramItem = param[i].split('=');
				paramArray[paramItem[0]] = paramItem[1];
			}
			if (paramArray.id == 'hoge') {
				//パラメーターが「hoge」だった場合の処理を入れる
			} else {
				//パラメーターが「hoge」でなかった場合の処理を入れる
			}
		}
	});

URLのアンカー(#以降の部分)に応じて処理を分ける場合


	$(function(){
		var urlParam = location.search.substring(1);
		if(urlParam) {
			var param = urlParam.split('&');
			var paramArray = [];
			for (i = 0; i < param.length; i++) {
				var paramItem = param[i].split('=');
				paramArray[paramItem[0]] = paramItem[1];
			}
			if (paramArray.id == 'hoge') {
				//パラメーターが「hoge」だった場合の処理を入れる
			} else {
				//パラメーターが「hoge」でなかった場合の処理を入れる
			}
		}
	});

スマホではclickイベントよりもタッチイベントを使おう!

スマホで特定の要素をタップさせた時の処理を指定したい場合はclickよりも「タッチイベント」を指定したほうが反応速度がいいです。


$(function(){
	var spTouch = ('ontouchstart' in document) ? 'touchstart' : 'click';
	$(".hoge").on(spTouch,function() {
		//タッチ後に実行させたい処理を書く
	});
});

jQueryで特定の文字数以降は「…」と省略させる方法

長々とした文章がある時に表示の都合上何文字以上は省略させる処理を行いたい時がある。


<p class="cutText">ペンパイナポーアッポーペン</p>


$(function(){
	var $setElm = $('.cutText');
	var cutTxt = '7'; // 何文字まで表示させるか
	var addTxt = ' …'; // 文字の最後に表示させるテキスト

	$setElm.each(function(){
		var textLength = $(this).text().length;
		var textTrim = $(this).text().substr(0,(cutTxt))

		if(cutTxt < textLength) {
			$(this).html(textTrim + addTxt).css({visibility:'visible'});
		} else if(cutTxt >= textLength) {
			$(this).css({visibility:'visible'});
		}
	});
});

するとこのような感じで表示されます。↓↓

ペンパイナポー…

lazyload(レイジーロード)の使い方

lazyload(レイジーロード)は画像を非同期読み込みに設定してページ速度を改善する為のプラグインになります。

プラグインは以下のサイトからダウンロードしましょう。


<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/jquery.lazyload.min.js"></script>
<script>
	$(function($){
		if ($('img.lazy').size()>0) {
			$('img.lazy').lazyload({
				threshold: 300,
				skip_invisible: false,
				effect: 'fadeIn',
				effect_speed: 300,
				placeholder : "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
			});
		}
	});
</script>

<img src="images/hoge.jpg" width="640" height="480" alt="">

//以下のようにimgタグのclassにlazyを付与して、scrをdata-originalに変更するだけ。↓↓

<img class="lazy" data-original="images/hoge.jpg" width="640" height="480">

lazyloadのトリガーはスクロールなので、googleBOTには捕捉されません。。

画像SEOを重視する可能性があるのであれば対策が必要になってきます。

jQueryで特定の要素の有無を判別する方法

たまに特定の要素があるかないかで処理を分けたい時とかあったりします。

そんな時に重宝するのが.lengthになります。

1.「.laength」を使用して「#hoge」が存在した時に処理を実行したい場合


$(function(){
	if($('#hoge').length){
		//ここに「#hoge」が存在した時実行したい処理を書く
	}
});

2.「.laength」を使用して「#hoge」が存在した時と存在しなかった時


$(function(){
	if(!($('#hoge').length)){
		//ここに「#hoge」が存在しなかった時実行したい処理を書く
	}
});

3.「.laength」を使用して「#hoge」が存在した時と存在しなかった時

$(function(){
	if($('#hoge').length){
		//ここに「#hoge」が存在した時実行したい処理を書く
	} else {
		//ここに「#hoge」が存在しなかった時実行したい処理を書く
	}
});

他にも数に応じて処理を変える方法として以下のような方法があります。

「.hoge」の中のliタグの数に応じてそれぞれ処理を変える例

$(function(){
	var hoge = $('.hoge');
	$(hoge).each(function(){
		var num = $(this).find('p').length;
		if(num === 1) {
			//「.hoge」の数が1の時に実行したい処理を書く
		} else if(num === 5) {
			//「.hoge」の数が5の時に実行したい処理を書く
		} else {
			//「.hoge」の数が1でも5でもない時に実行したい処理を書く
		}
	});
});

JavaScriptで「return false;」ってよく出てくるけど、そもそも何なのか?

基本的にreturn false;はa要素のclickイベントを設定する時に必要だと考えておけば問題ありません。

a要素にclickイベントを設定する時はイベントの最後にreturn false;を設定することは忘れずに。

なぜこれが必要になってくるのかというと、clickイベントの実行後にreturn false;がないとリンク先に移動してしまうからです。


$(function(){
	$("a").click(function(){
		$("img").attr("src","dog.jpg").attr("alt","ワンワン");
		return false;
	 });
});

jQueryでサイト内リンクをクリックした時にスムーススクロールをさせる

以下のコードをそのままコピペすれば使えます。

$(function(){
	$('a[href^=#]').click(function() {
		var speed = 800;//スクロール速度
		var href= $(this).attr('href');
		var target = $(href == '#' || href == '' ? 'html' : href);
		var position = target.offset().top;
		$('body,html').animate({scrollTop:position}, speed, 'easeOutCirc');
		return false;
	});
});

JavaScriptでの文字列切り出し

JavaScriptでの文字列切り出し処理には、3種類の方法があります。

slice

文字列.slice(開始位置 [,終了位置])

こちらは開始位置と終了位置を指定する方法です。

終了位置は省略でき、省略すると最後まで切り出しがされます。終了位置は末尾が0です。

また、開始位置をマイナス値にすることで、後ろからの桁数を指定することが可能です(右端からの切り出し)。

var str = "0123456789";

str.slice(2);      //"23456789"
str.slice(-3);     //"789"
str.slice(5, -1)); //"5678"

substr

文字列.substr(開始位置 [,切り出す長さ])

開始位置と切り出す長さを指定します。(開始位置をマイナス値にすると、後からの桁数になります。また、長さは省略することが可能です。省略すると最後まで切り出します。)

var str = "0123456789";

str.substr(5);     //"56789"
str.substr(1,7);   //"1234567"
str.substr(-4,2)); //"45"

substring

文字列.substring(開始位置 , 終了位置)

開始位置と終了位置を指定します。(終了位置は省略できません。)

開始位置より終了位置の方が大きいと引数が逆になります。

var str = "0123456789";

str.substring(5,7);    //"56"
str.substring(4,20);   //"456789"
str.substring(3,-1));  //"0123"