フォローする

ビデオチュートリアル - デザインの幅が広がるjQuery -

まずはじめに

このページでは、動的ページを制作する際に便利なjQueryメソッドを目的別に紹介しています。
皆さまが実践を通して学べるよう練習用オファーを用意していますので、よりデザインの幅が広がるようお役立てください。

※グロースハッカー作成のデザインを利用せず、お客様ご自身でデザイン案を作成する場合、KaizenPlatformによるデザイン案の審査は行われません。
エディター及びJavaScript・jQueryのご理解が不十分なままデザイン作成を行ってしまうと、思わぬページ崩れの発生に繋がりますので、ご注意ください。
デザイン作成の前に、このページと、他の2つのチュートリアルもご覧ください。
ビデオチュートリアル - エディターの使い方 -
ビデオチュートリアル - jQueryの書き方 -

実装方法

  • 練習用オファーを開き、画面右上の「デザイン案を作成する」をクリック
  • JSサンプルコードをエディター画面のJavaScriptタブにコピー&ペーストし「反映」ボタンをクリック
  • CSSサンプルコードをエディター画面のCSSタブにコピー&ペーストし「反映」ボタンをクリック
  • 最後にエディター画面の「プレビュー」ボタンをクリックし、反映後のページを確認

複数要素への繰り返し処理

- eachメソッドを使って繰り返し処理を実装する -

要素の一部を別要素へ複製する

Goal

「価格」を物件名の横へ複製する

jq3-case1.png

Code

  • JS
  • CSS
  • 
    $('.list-wrap .list-subwrap').each(function(){
    	var currentPrice = $(this).find('.list-right th:contains("価格")').next('td').text();
    	$(this).find('.cat-name').after('<p class="add_price">'+currentPrice+'</p>');
    	$(this).find('.cat-name,.add_price').wrapAll('<div/>');
    });
    

About code

1行目

$('.list-subwrap .list-subwrap').each(function(){
	// 処理
});

このコードは、各物件に対し繰り返し処理を行うためのeachメソッドを実装しており、 このeachメソッドの中に行いたい処理を記述していきます。

2行目

var currentPrice = $(this).find('.list-right th:contains("価格")').next('td').text();

このコードは、価格の金額のみ取得するための処理を記述しています。

価格部分のHTMLソースをみるとclassやidが付与されていないため、containsメソッドで“価格”という文字列を指定し、その次のtd要素(価格の数値)を取得し、それらの処理を新たに指定した変数(currentPrice)に代入しています。

ちなみに、eq()セレクタでtd要素(価格の数値)を指定することも可能ですが、物件によっては価格が2番目以降に表示される可能性があり、固定の順番でしか指定できないeq()セレクタは不向きといえます。なので今回は”価格”という文字列を軸に取得しています。

3行目

$(this).find('.cat-name').after('<p class="add_price">'+currentPrice+'</p>');

このコードは、物件名の後ろにpタグを追加し、そのpタグにJSコード2行目で取得した価格を挿入する処理をしています。

4行目

$(this).find('.cat-name,.add_price').wrapAll('<div/>');

このコードは、物件名と挿入した価格をまとめてdivタグで囲う処理をしています。

今回、物件名と挿入した価格をCSSのinline-blockで横並びに表示させたいのですが、「更新情報」がない物件ですと物件画像が物件名の左側に回り込んでしまうので(floatさせてるため)、回り込を回避させるためにdivで囲っています。

jQueryリファレンス
each()
contains()
next()
find()
text()

要素を移動する

Goal

「資料請求」ボタンを移動し、目立たせる

jq3-case2.png

Code

  • JS
  • CSS
  • 
    $('.btn-subwrap').each(function(){
    	var currentBtn = $(this).find('.btn-documentreq');
    	$(this).find('.btn-detail').after(currentBtn);
    });
    

About code

1行目

$('.btn-subwrap').each(function(){
	// 処理
});

このコードは、各物件に対し繰り返し処理を行うためのeachメソッドを実装しており、 このeachメソッドの中に行いたい処理を記述していきます。

2行目

var currentBtn = $(this).find('.btn-documentreq');

このコードは、findメソッドで資料請求ボタン(.btn-documentreq)を探し、その処理を変数(currentBtn)に代入しています。

3行目

$(this).find('.btn-detail').after(currentBtn);

このコードは、詳細を見るボタン(.btn-detail)の後ろに、JSコード2行目で取得した資料請求ボタン(currentBtn)を移動させています。

jQueryリファレンス
each()
find()
after()

要素を折りたたむ

Goal

「口コミ」をクリックすると中のコンテンツが開閉する

jq3-case3.png

Code

  • JS
  • CSS
  • 
    $('.list-subwrap').each(function(){
    	$('.realvoice-subwrap',this).wrapAll('<div class="toggle-area"></div>');
    });
    $('.title-realvoice').click(function(){
    	$(this).next().slideToggle();
    	$(this).toggleClass('open');
    }); 
    

About code

1〜3行目

$('.list-subwrap').each(function(){
	$('.realvoice-subwrap',this).wrapAll('<div class="toggle-area"></div>');
});

このコードは、1つもしくは2つ以上の口コミ要素(.realvoice-subwrap)を新しいブロック要素(<div class="toggle-area"></div>)で囲む、という動作をeachメソッドを使い物件一覧すべてに繰り返し実装しています。

もしeachメソッドを使わず「$(".realvoice-subwrap").wrapAll('<div class="toggle-area"></div>');」で実装した場合、全口コミ要素が一番上の物件に集約されてしまうため、必ずeachメソッドで繰り返し処理を実装する必要があります。

また、基本的にはJSコード4〜7行目だけで要素の折りたたみを実装できますが、サンプルページのHTML構造上、各物件の口コミ要素が2つ以上ある場合、toggle系メソッドの対象が1つ目にしか適応されず2つ目以降が折りたたまれません。

そういった不具合を防ぐため、口コミ要素が1つだけの場合も2つ以上ある場合も、まとめて新しいブロック要素で囲み全て折りたたまれるよう対処する必要があります。

4〜7行目

$('.title-realvoice').click(function(){
	$(this).next().slideToggle();
	$(this).toggleClass('open');
}); 

このコードは、口コミタイトル「.title-realvoice」をクリックすると口コミ要素が開閉する、という動作を実装しています。

そして開閉することをデザイン上わかりやすく表現するために、開閉時それぞれに別のスタイルを適応し、口コミタイトルをクリックすると新しいクラス名「.open」が追加され、再びクリックすると「.open」が消えるよう、JSコード6行目で実装しています。

デザインに関しては、CSSソース4〜5行目の擬似要素(:after)とcontentプロパティを使い、口コミタイトル横に「+」アイコンと「−」アイコンが表示されるよう実装しています。

jQueryリファレンス
each()
wrapAll()
slideToggle()
toggleClass()

文章を省略する

Goal

「注目」コメントの2行目以降は「続きを読む」をクリックで展開

jq3-case4.png

Code

  • JS
  • CSS
  • 
    if ($('.txt-point').outerHeight() > 50) {
    	$('.txt-point').addClass('read_more_area onhidden');
    	$('.read_more_area').append('<div class="read_more_btn">続きを読む</div>');
    }
    $('.read_more_btn').click(function(){
    	$(this).hide();
    	$(this).parent('.read_more_area').removeClass('onhidden');
    }); 
    

About code

1〜4行目

if ($('.txt-point').outerHeight() > 50) {
	$('.txt-point').addClass('read_more_area onhidden');
	$('.read_more_area').append('<div class="read_more_btn">続きを読む</div>');
}

このコードは、注目コメント(.txt-point)の高さが50px以上の場合、ブロック要素(<div class="read_more_btn">続きを読む</div>)を追加する、という処理を実装しています。

また、注目コメントに新しいクラス名(.read_more_area)と(.onhidden)を追加する、という処理をJSコード2行目で実装していますが、これは注目コメントの2行目以降が「続きを読む」をクリックで展開する、という処理をJSコード5〜8行目とCSSソースで実装しているためです。

5〜8行目

$('.read_more_btn').click(function(){
	$(this).hide();
	$(this).parent('.read_more_area').removeClass('onhidden');
});

このコードは、JSコード1〜4行目で追加した新要素、続きを読む(.read_more_btn)をクリックすると、注目コメントの2行目以降も全て展開する、という処理を実装しています。

なお、「続きを読む」の背景色やテキストのデザインに関しては、cssソース3〜4行目で実装しています。

jQueryリファレンス
addClass()
append()
hide()
parent()
removeClass()

特定要素の有無で処理を分岐

- if文を使って条件分岐を実装する -

URL判定で条件分岐

Goal

URLごとに異なるバナーを表示させる

jq3-case5.png

Code

JS

var currentUrl  = location.href;
if(/tokyo/.test(currentUrl)){
	$('.wrap02 h2').after('<div class="addBanner"><a href="#"><img src="https://cdn.kaizenplatform.net/v2/attachments/000/285/753/b64c4a751273d38c5abd216829a526b9bafa7f3e.jpg"></a></div>');
} else if(/osaka/.test(currentUrl)){
	$('.wrap02 h2').after('<div class="addBanner"><a href="#"><img src="https://cdn.kaizenplatform.net/v2/attachments/000/285/783/1a11f8c0692507d893c0af363939bba73031a0c8.jpg"></a></div>');
}

About code

1行目

var currentUrl  = location.href;

location.href は、現在ブラウザで開いているURLをJavaScriptで取得するコードです。
これを currentUrl という文字列の中に代入します。
この様に、文字列の中にJavaScriptの処理を代入することを、変数化と言います。
これ以降のコードでは currentUrl を location.href と同じ意味で利用できます。

2〜4行目

if(/tokyo/.test(currentUrl)){
	$('.wrap02 h2').after('<div class="addBanner"><a href="#"><img src="https://cdn.kaizenplatform.net/v2/attachments/000/285/753/b64c4a751273d38c5abd216829a526b9bafa7f3e.jpg"></a></div>');
}

このコードは、if文の中で .test() というメソッドを使って、現在のURLに tokyo という文字が含まれているかどうかを判定します。
含まれていた場合には、 h2 要素の後ろに東京のバナーが含まれたdivを追加します。

4〜6行目

else if(/osaka/.test(currentUrl)){
	$('.wrap02 h2').after('<div class="addBanner"><a href="#"><img src="https://cdn.kaizenplatform.net/v2/attachments/000/285/783/1a11f8c0692507d893c0af363939bba73031a0c8.jpg"></a></div>');
}

この部分では、else if で更に条件を追加します。
今度は osaka という文字がURLに含まれているどうかを判定します。
含まれていた場合には、h2 要素の後ろに大阪のバナーが含まれたdivを追加します。

jQueryリファレンス
location.href
test()
if...else

UA判定で条件分岐

Goal

デバイスに適したアプリダウンロードバナーのみを表示させる

jq3-case6.png

Code

JS

var currentUa = navigator.userAgent;
if(/iPhone/.test(currentUa)){
	$('.app-android').hide();
} else if(/Android/.test(currentUa)){
	$('.app-ios').hide();
}

About code

1行目

var currentUa = navigator.userAgent;

navigator.userAgent は、ページを開いているユーザーエージェントをJavaScriptで取得するコードです。
これを currentUa という文字列の中に代入します。
この様に、文字列にJavaScriptの処理を代入することを、変数化と言います。
これ以降のコードでは currentUa を navigator.userAgent と同じ意味で利用できます。

2〜4行目

if(/iPhone/.test(currentUa)){
	$('.app-android').hide();
}

このコードは、if文の中で .test() というメソッドを使って、現在のユーザーエージェントに iPhone という文字が含まれているかどうかを判定します。
含まれていた場合には、 .hide() を使ってGoogle Playのアプリリンクのみを非表示にします。

4〜6行目

else if(/Android/.test(currentUa)){
	$('.app-ios').hide();
}

今度はelse if文で、現在のユーザーエージェントにAndroidという文字が含まれているかどうか判定します。
含まれていた場合には、先ほど度は逆に、App Storeのアプリリンクのみを非表示にします。

jQueryリファレンス
navigator.userAgent
test()
hide()
if...else
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています
他にご質問がございましたら、リクエストを送信してください

0 コメント

サインインしてコメントを残してください。