まずはじめに
このページでは、動的ページを制作する際に便利なjQueryメソッドを目的別に紹介しています。
皆さまが実践を通して学べるよう練習用オファーを用意していますので、よりデザインの幅が広がるようお役立てください。
※グロースハッカー作成のデザインを利用せず、お客様ご自身でデザイン案を作成する場合、KaizenPlatformによるデザイン案の審査は行われません。
エディター及びJavaScript・jQueryのご理解が不十分なままデザイン作成を行ってしまうと、思わぬページ崩れの発生に繋がりますので、ご注意ください。
デザイン作成の前に、このページと、他の2つのチュートリアルもご覧ください。
ビデオチュートリアル - エディターの使い方 -
ビデオチュートリアル - jQueryの書き方 -
実装方法
- 練習用オファーを開き、画面右上の「デザイン案を作成する」をクリック
- JSサンプルコードをエディター画面のJavaScriptタブにコピー&ペーストし「反映」ボタンをクリック
- CSSサンプルコードをエディター画面のCSSタブにコピー&ペーストし「反映」ボタンをクリック
- 最後にエディター画面の「プレビュー」ボタンをクリックし、反映後のページを確認
複数要素への繰り返し処理
- eachメソッドを使って繰り返し処理を実装する -
要素の一部を別要素へ複製する
Goal
「価格」を物件名の横へ複製する
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
「資料請求」ボタンを移動し、目立たせる
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)を移動させています。
要素を折りたたむ
Goal
「口コミ」をクリックすると中のコンテンツが開閉する
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行目以降は「続きを読む」をクリックで展開
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ごとに異なるバナーを表示させる
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
デバイスに適したアプリダウンロードバナーのみを表示させる
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 コメント