HOME > コラム > jQuery/JS Chips > コンテンツ要素をタイル状にする「Material Design Hierarchical Display」の使い方

コンテンツ要素をタイル状にする「Material Design Hierarchical Display」の使い方

コラム

久しぶりのjQueryプラグインの実装レッスンのコラム記事です(笑)
Material Design Hierarchical Displayは、親要素に特定のタグを入れ、その中にある子要素をタイル状にして表示するjQueryプラグインです。
そして、animate.cssを使い、タイル状になった子要素のコンテンツにアクションを生み出すという感じです。
Material Design Hierarchical Displayのデフォルトの仕様は、子要素をタイル状にして表示する、という仕様です。
本家でもそうですが、animate.cssを使い、そのタイル状になった子要素にアクションを追加しています。
オプションでアクションの仕様も変えることが出来るようなので、色々なチャレンジすることで面白い動作をするのではないでしょうか。
「ちょっとは役に立ったかな?」や「ちょっと面白いな(笑)」みたいなことを感じられましたら、シェアして頂けますと幸いです。

jQuery/JS Chipsに投稿したコラム記事

コンテンツ要素をタイル状にする「Material Design Hierarchical Display」の使い方

コンテンツ要素タイル状に表示することが出来るjQueryプラグイン

Material Design Hierarchical Displayは、コンテンツ要素をタイル状にして表示することが出来ます。
また、animate.cssを加えて使うことで、それらタイル状になったコンテンツ要素にアクションを加えることが出来ます。

本家サイトでは、デフォルト仕様における表示のサンプルと、animate.cssを使ってアクションを起こしているサンプルが表示されていました。
当サイトでは、基本的な使い方とanimate.cssを使った時のサンプルを見て頂けるようにしました。

基本的にはanimate.cssを使うことになると思いますので、ダウンロード用ファイルにはanimate.cssをつけているバージョンにしています。

アクションを起こすためのjavascript記述が若干面倒かもしれませんが、基本的にはコピペでもお使い頂けます。
気を付けるポイントというほどのことはないですが、小難しい部分もありますので、何度も読み返して頂ければと思います。

それでは進めていきたいと思います。

本家サイトとGitHub

本家サイトとGitHubです。
プラグイン一式をダウンロードして頂けます。

ダウンロードと組み込みサンプル
組み込み済みファイルのダウンロード
phptemp_mdhd_170309.zip
組み込み済みサンプル

サンプルです。

「私はSEMラボラトリーです。」という表記の部分が今回の挙動するコンテンツ要素になります。

元になるWEBサイトテンプレート(PHP)について

当サイト内の「SEOの基礎知識」の中のコンテンツです。

ポイント
追加で読み込ませたファイル

追加で読み込ませたファイルは以下のファイルです。

<link href="/css/sample.css" type="text/css" rel="stylesheet" />
<link href="/css/animate.min.css" type="text/css" rel="stylesheet" />
<link href="/css/zmd.hierarchical-display.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="/js/jquery.zmd.hierarchical-display.min.js"></script>

今回、jQueryファイルは、1.7以降のバージョンでないといけません。
当サイトでは、2.1.4に差し替えています。

sample.cssは、当テンプレート用の追記cssでして、PC、スマホ、タブレット用の記述を併せた内容で記載しています。

テンプレート内のコンテンツ要素の記述

id="top-example"が親要素になります。

<div id="top-sample">

<div id="top-example" data-animation="hierarchical-display" data-animation-in="bounceIn" data-speed="3">
<div>私</div>
<div>は</div>
<div>S</div>
<div>E</div>
<div>M</div>
<div>ラ</div>
<div>ボ</div>
<div>ラ</div>
<div>ト</div>
<div>リ</div>
<div>ー</div>
<div>で</div>
<div>す</div>
<div>。</div>
</div>

</div>

「 data-animation="hierarchical-display" 」の記述が親要素になるタグ記述です。
そして、この親要素の中に、オプションを記述しています。

data-animation-in="bounceIn"
data-animation-out="bounceOut"
data-speed="3"

本家サイト内にあるコードペンのページでオプション例を確認してください。

コードペンでは、オプションを選べるプルダウンを選んでボタンをクリックする、、、という流れでトリガーを引いています。
Material Design Hierarchical Display(animate.css)は、基本的にはページが表示された時に要素にアクションを追加するようになっていますが、トリガーをつくればトリガーを引いた時にもコンテンツ要素にアクションを加えることが出来ます。

トリガーを設定するjavascript記述

ということで、トリガーになる部分の記述を抜粋します。

<script>
$(document).ready(function() {

var el = $('#top-example');

var resetAndStart = function (el) {
	el.children().last().off('webkitAnimationEnd animationend');
	el.data('zmd.hierarchicalDisplay', false).hierarchicalDisplay();
}

// Action
$('#action').change(function() {
	var value = $(this).val();
	el.data('action', value);
	resetAndStart(el);
});

// Speed
$('#speed').change(function() {
	var value = $(this).val();
	el.data('speed', value); 
	resetAndStart(el);
});

// Animation In
$('#animationIn').change(function() {
	var value = $(this).val();
	el.data('animation-in', value);
	el.children().each(function () {
	$(this).attr('class', '');
});
resetAndStart(el);
});

// Animation Out
$('#animationOut').change(function() {
	var value = $(this).val();
	el.data('animation-out', value);
	el.children().each(function () {
	$(this).attr('class', '');
});
resetAndStart(el);
});

// Start Animation button handler
$('#start').on('click', function() {
	el.children().each(function () {
	$(this).attr('class', '');
});
if ($('#action').val() == 'show') {
	el.removeClass('in');
}
if ($('#action').val() === 'hide') {
	el.addClass('in');
}
resetAndStart(el);
});

// Block button when animation starts, unblock when ends
el
.on('show.zmd.hierarchicalDisplay', function () {
	$('#start').attr('disabled', true).css('opacity', '0.3');
})
.on('hide.zmd.hierarchicalDisplay', function () {
	$('#start').attr('disabled', true).css('opacity', '0.3');
})
.on('shown.zmd.hierarchicalDisplay', function () {
	$('#start').attr('disabled', false).css('opacity', '1');
})
.on('hidden.zmd.hierarchicalDisplay', function () {
	$('#start').attr('disabled', false).css('opacity', '1');
})

// Add active class class to elements onclick just for fun
$('#top-example').on('click', 'div', function () {
	$(this).toggleClass('active');
})

});
</script>

上記の中に「 #action 」や「 #speed 」や「 #start 」のような感じで「 id 」があります。
この「 id 」をクリックしたり選択することでトリガーが完成になります。

配布テンプレートのヘッダに記述しています。
配布テンプレートの中にはトリガーは一つしか設置していません。
これは本家の挙動の通りのトリガーです。

子要素をクリックして頂くと、影が出来るわけですが、子要素をクリックをすることで active をオンにしています。
そうしますと、sample.css内の記述の通り、 active 状態の装飾が効くというわけですね。

// Add active class class to elements onclick just for fun
$('#top-example').on('click', 'div', function () {
	$(this).toggleClass('active');
})

この部分がそのトリガー部分です。

ということで、上手く調整して使ってみてくださいね。

最後に動作確認

小難しいお話は置いといて、とりあえず正常に動作すれば設置完了です。

ただ、このあたりのロジック的なことは憶えておいて損はありません。
インターフェイスの挙動の幅広さは最近のjQueryプラグインの多くに見られる傾向ですので、色々なjQueryプラグインをカスタマイズしたいと思うのであれば、一つずつコードを追って理解した方が賢明かなと思います。

その他、補足

WEBサイトテンプレート(PHP)の修正にあたって、以下の点に配慮しています。

  • 今回、サンプルにしたWEBサイトテンプレート(PHP)は「 phptemp_160202.zip 」です。
締め

久しぶりのjQueryプラグインに関する記事でした。
久しぶりのせいか、ぼく自身、楽しむことが出来た気がします(笑)

インターフェイスの面白さ(と言っていいか分かりませんが)がだいぶと広がりつつあるように見受けています。
アイデアなのか、技術のなのか、どちらが先行しているか分かりませんが、インターフェイスの面白さがユーザー満足度を高めているシーンを散見しています。

本項のスクリプトがどこまで活躍出来るスクリプトかは分かりませんが、インターフェイスのデザインに幅広さを持たせることが出来ることは間違いないと思います。
ということで、是非、ワンポイント程度にでも使ってみてください。

執筆 : 清水 隼斗

コンテンツ要素をタイル状にする「Material Design Hierarchical Display」の使い方の通常ページ