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

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

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

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

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

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

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

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

• Material Design Hierarchical Display本家
• Material Design Hierarchical DisplayのGitHub

phptemp_mdhd_170309.zip

サンプルです。

• 組み込み済みサンプル

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

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

• コンテンツSEOのためのWEBサイトテンプレート（PHP）

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

<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）は、基本的にはページが表示された時に要素にアクションを追加するようになっていますが、トリガーをつくればトリガーを引いた時にもコンテンツ要素にアクションを加えることが出来ます。

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

<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」の使い方のAMPページ