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

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

初心者向け、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

[css highlight=””] .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);
}
[/css]

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

スケールインCSS　修正後

[css highlight=””] /* カード要素自体のスタイル */
.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);
}
[/css]

参考サイトのサンプルソースを見てみると、.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（抜粋）コンテンツエリア

[html highlight=”43,51″]

・・HEAD要素内

・・省略

<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>
[/html]

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

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

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

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

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

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

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

assets/js/script.js

[javascript highlight=””] /**
* 指定要素の内容を、指定値までカウントアップします。
*
* @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がないと小数点が表示されます。
}
});
}
[/javascript]

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

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

index.html（抜粋）コンテンツエリア

[html highlight=”14,22,45,47,48-55″] ・・・省略

<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>