Developer

魁!小野の塾 小さな管理機能を作ってみようの巻 第5話
2021.03.18
Lv2

魁!小野の塾 小さな管理機能を作ってみようの巻 第5話

小さな管理機能を作ってみよう 第5話

初心者向け、PHPプログラム構築講座です。
初心者といっても、PHPの勉強を少し行い、LAMP環境が自分で構築でき、少しアプリケーションを作成しているレベルを対象とします。
まったくの初心者の場合は、わからない部分が出てくると思います。
できるだけ細かく説明は入れていきますが、説明がわからない場合は、PHPやMySQLの初心者講座をご覧ください。

対象のスキルレベル

  • LAMP環境の構築
  • PHP言語が読める
  • HTML, CSS, Javascriptが少しわかる
  • Bootstrapのドキュメントをみて、HTMLが書ける
  • Ajax(非同期通信)を利用したことがある
  • SESSIONを利用したことがある

構築環境

  • Windows10
  • XAMPP(PHP7.3.2, MariaDB 10.1.38)

Dashboard実装 カード部分に動きを付ける

前回作成した、カード部分に、少しエフェクト(アニメーション効果)を付けていきたい欲求を満たしていきたいと思います。
カード部分は、回ったり、大きくなったりすると面白いのですが、今回は枠がつくイメージにしたいと思います。
色々なサイトで、エフェクト用のcssが公開されていますので、参考にしていきます。

※参考 CSSによるカードレイアウトのマウスオーバー(ホバー)のアニメーション

参考サイトより、スケールインを使ってみたいと思います。ソースを表示部分をクリックするとcssのソースが表示されます。内容は以下になります。

スケールインCSS
.sample-border-scale-in .card {
    position:relative;
}
 
.sample-border-scale-in .card::before {
    position:absolute;
    top:0;
    left:0;
    display:block;
    box-sizing:border-box;
    border:5px solid #0091ff;
    width:100%;
    height:100%;
    content:"";
    opacity:0;
    transform:scale(1.2);
    transition:transform 0.3s, opacity 0.3s;
}

.sample-border-scale-in .card:hover::before {
    opacity:1;
    transform:scale(1);
}

このままでも利用できるのですが、少し修正していきます。sample-border- を抜いていくだけですが。

スケールインCSS 修正後
/* カード要素自体のスタイル */
.scale-in .card {
	position:relative;
}

/* カード要素の直前に要素を追加し、スタイルを適用します。 */
.scale-in .card::before {
	position:absolute;
	top:0;
	left:0;
	display:block;
	box-sizing:border-box;
	border:3px solid #ccc;
	border-radius: .25rem;
	width:100%;
	height:100%;
	content:"";
	opacity:0;
	transform:scale(1.2);
	transition:transform 0.3s, opacity 0.3s;
}
/* マウスポインタのオンマウス時 */
.scale-in .card:hover::before {
	opacity:1;
	transform:scale(1);
}

参考サイトのサンプルソースを見てみると、.card がついている要素の親要素に .card-box が存在しています。今回は .card の親要素は .col-lg になっていますので、そこに .scale-in クラスを付加すればうまく動くはずです。

簡単に説明なのですが、::before は、疑似要素 と言います。指定した要素の直前に、要素を追加します。

.scale-in 半角スペース .card::before と記載されている場合、.scale-in クラスが付加されている、孫要素に対して、.card クラスが付加されている要素の前に、CSSを適用するという意味になります。

子要素の指定の場合は、.scale-in > .card::before 半角スペースではなく、大なり(>)を利用します。

:hover は、疑似クラス と言います。マウスポインタが要素に重なった際に、適用されるクラスになります。

※参考 【初心者向け】CSSの擬似要素と擬似クラスを理解しよう!
※参考 疑似クラスと疑似要素
※参考 今更聞けない擬似要素、擬似クラスについて

styleをhead要素の中に指定して、HTMLを修正します。

index.html(抜粋)コンテンツエリア

・・HEAD要素内

<style>
	/* コンテンツエリアから非表示の枠がはみ出した時に、横スクロールバーを非表示にするため */
	.contents {
		overflow: hidden;
	}
	/* カード要素自体のスタイル */
	.scale-in .card {
		position:relative;
	}
	/* カード要素の直前に要素を追加し、スタイルを適用します。 */
	.scale-in .card::before {
		position:absolute;
		top:0;
		left:0;
		display:block;
		box-sizing:border-box;
		border:3px solid #ccc;
		border-radius: .25rem;
		width:100%;
		height:100%;
		content:"";
		opacity:0;
		transform:scale(1.2);
		transition:transform 0.3s, opacity 0.3s;
	}
	/* マウスポインタのオンマウス時 */
	.scale-in .card:hover::before {
		opacity:1;
		transform:scale(1);
	}
</style>

・・省略

<main class="contents">
	<section class="container-fluid">
		<header>
			<h1><i class="fas fa-tachometer-alt"></i> DASHBOARD</h1>
		</header>
		<div class="row">
			<div class="col-lg mb-3 scale-in">
				<div class="card shadow-sm">
					<div class="card-body text-center">
						<h3>ユーザ登録数</h3>
						<p class="display-3">0</p>
					</div>
				</div>
			</div>
			<div class="col-lg mb-3 scale-in">
				<div class="card shadow-sm">
					<div class="card-body text-center">
						<h3>部署登録数</h3>
						<p class="display-3">0</p>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-lg">
				<div class="card">
					<div class="card-body">
					</div>
				</div>
			</div>
			<div class="col-lg">
				<div class="card">
					<div class="card-body">
					</div>
				</div>
			</div>
		</div>
	</section>
</main>

マウスをカードの上に乗せると、以下のようになるかと思います。

※アニメーションしていなくて申し訳ないですが、カーソルがカードの上を追加するたびに、アニメーションします。

続いて、数字の部分をカウントアップしてみたいと思います。見た感じのインパクトが絶大です!

数字のカウントアップは、色々なやり方がありますが、今回はjQueryのanimate関数を利用して作成していきたいと思います。

※参考 .animate()
※参考 .animate() 英語

開始値:指定要素のテキスト要素
終了値:指定値
時間:何秒で終了するか

上記の内容で、関数 countUp を作成していきます。外部ファイルを作成し、内容を入れていきます。

assets/js/script.js
/** 
 * 指定要素の内容を、指定値までカウントアップします。
 * 
 * @param $el 指定要素
 * @param end 終了値
 * @param duration 終了までの時間(ミリ秒)
 */
function countUp($el, end, duration){
	/* 要素に開始値を設定(指定要素のテキスト) */
	$({value: $el.text()}).animate({value: end}, {
		duration : duration,	// 終了時間の設定(ミリ秒)
		progress : function(){	// 一ステップ毎に呼び出されます。
			$el.text(Math.round(this.value));	//値は四捨五入して表示します。Math.roundがないと小数点が表示されます。
		}
	});
}

外部ファイルをHTMLに読み込んで、countUpを実行すると、カウントアップされます。
分かりやすく、対象部分には、クラスを付けていきます。

Bootstrap5からjQueryがなくても動くようになっております。ここではjQueryを利用しますので、CDNを追加します。
また、外部ファイルとして、script.jsを作成しましたので、こちらも定義しておきます。

index.html(抜粋)コンテンツエリア
	・・・省略

	<main class="contents">
		<section class="container-fluid">
			<header>
				<h1><i class="fas fa-tachometer-alt"></i> DASHBOARD</h1>
			</header>
			<div class="row">
				<div class="row">
					<div class="col-lg mb-3 scale-in">
						<div class="card shadow-sm">
							<div class="card-body text-center">
								<h3>ユーザ登録数</h3>
								<p class="display-3 userEntry">0</p>
							</div>
						</div>
					</div>
					<div class="col-lg mb-3 scale-in">
						<div class="card shadow-sm">
							<div class="card-body text-center">
								<h3>部署登録数</h3>
								<p class="display-3 deptEntry">0</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-lg">
					<div class="card">
						<div class="card-body">
						</div>
					</div>
				</div>
				<div class="col-lg">
					<div class="card">
						<div class="card-body">
						</div>
					</div>
				</div>
			</div>
		</section>
	</main>

	<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
	<script src="assets/js/script.js"></script>
	<script>
	$(function(){
		/* .userEntryをユーザ登録数につけています。350人まで2.5秒でカウントアップします。 */
		countUp($('.userEntry'), 350, 2500);
		/* .deptEntryを部署登録数につけています。50人まで2.5秒でカウントアップします。 */
		countUp($('.deptEntry'), 50, 2500);
	});
	</script>
</body>
</html>

画面を表示すると、カウントアップされると思います。

これで、上のカード部分の実装はひとまず終了です。

魁!小野の塾