「progressbar.js」を使ったローディング画面の実装
今回は、以下のようなトップページにアクセスした時の「ローディング（読み込み）画面」の実装を試してみます。
「progressbar.js」というライブラリを使ったものです。1から作るよりも簡単に導入できちゃいます。
https://kimmobrunfeldt.github.io/progressbar.js/
今回は、WordPressの環境で、テーマは「Arkhe」を使っています。
SWELLにも対応したローディング画面を実装したい方はぜひ参考にされてみてください。
また、トップページでリロードする度に表示されるのは面倒なので、「ブラウザが開いている間は滞在を記録」して、2回目以降は、トップページが表示されてもローディング画面が表示されないように設定。
早速、やってみます。
Arkheの「子テーマ」をアップロード・有効化
今回はコードを上書きしたりするため、Arkheがバージョンアップした時にも対応できるよう、WordPressにArkheの「子テーマ」をアップロードしていきます。
事前に子テーマをダウンロードして、アップロードしておきます。
そして、テーマを有効化させます。
子テーマが有効化できれば、準備完了です。
「progressbar.js」ファイルの設定
「progressbar.min.js」をダウンロードする
「github」上で、ライブラリをダウンロードすることができます。
https://github.com/kimmobrunfeldt/progressbar.js
上記サイトより、ダウンロードし、「progressbar.js/dist/progressbar.min.js」を取得して下さい。
「progressbar.min.js」をアップロードする
ダウンロードができたら、Webサーバ上に「progressbar.min.js」ファイルをアップロードします。
上記のパスでアップロードができれば、次のステップに進みます。
「header.php」ファイルの設定
親テーマから子テーマへ「header.php」を複製する
親テーマから「header.php」ファイルを子テーマに複製します。
複製が完了したら、次のステップに進みます。
複製した「header.php」を編集する
複製した「header.php」にローディング画面を表示させるための「HTML」のコードを書きます。
追加する内容は以下の2つです。
<!-- jquery 読み込み -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script><!-- ローディング画面 -->
<div id="loading_container">
<div id="loading"></div>
</div>
<!-- ローディング画面 -->実際に書き込むと以下のようになります。
<!DOCTYPE html>
<html <?php language_attributes(); ?> <?php Arkhe::root_attrs(); ?>>
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, viewport-fit=cover">
<!-- jquery 読み込み -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<?php
wp_head();
$setting = Arkhe::get_setting(); // SETTING取得
?>
</head>
<body <?php body_class(); ?>>
<?php if ( function_exists( 'wp_body_open' ) ) wp_body_open(); ?>
<!-- ローディング画面 -->
<div id="loading_container">
<div id="loading"></div>
</div>
<!-- Start: #wrapper -->
<div id="wrapper" class="l-wrapper">
<?php
// ヘッダー
do_action( 'arkhe_before_header' );
Arkhe::get_part( 'header' );
do_action( 'arkhe_after_header' );
?>
<div id="content" class="l-content">
<?php do_action( 'arkhe_start_content' ); // テーマ側でも使用 ?>
<div class="l-content__body l-container">
「jQuery」は、<head></head>内に追記をして読み込ませます。
「ローディングのHTMLコード」は、<body></body>内の上の方に記述をしておきます。
反映が完了したらファイルを保存します。
「loading.css」ファイルの設定
「loading.css」を新しく作成する
「loading.css」を作成します。
作成した「loading.css」を編集する
以下の内容を書き込みます。
@charset "utf-8";
/*========= LoadingのためのCSS ===============*/
#loading_container {
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
background: #fff;
}
#loading {
font-size: 1rem;
text-align:center;
color: #4c6d70;
width: 100px;
height: 100px;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}入力できたら、データを保存します。
「loading.js」ファイル（JavaScript）
「loading.js」を新しく作成する
「loading.js」を作成します。
作成した「loading.js」を編集する
以下の内容を追加します。
前半の記述で1回目のアクセスか、2回目のアクセスか判別し、後半の記述で実際にアクセスチェックを行っています。
1回目のアクセスであれば、「progressbar.js」を使ったローディング画面を表示。
2回目のアクセスであれば、「jquery」でloaderをremoveさせています。
// 同じ日付で「2回目」以降のアクセスなら「ローディング画面非表示」にする設定
var flg = null;
var check_access = function () {
// sessionStorageの値を判定
if (sessionStorage.getItem('access_flg')) {
// 2回目以降
flg = 1;
} else {
// 1回目
sessionStorage.setItem('access_flg', true);
flg = 0
}
return flg;
}
// アクセスチェック
var $i = check_access();
const loader = document.getElementById("loading_container");
if ($i == 0) {
// 1回目アクセスの処理
var bar = new ProgressBar.Circle(loading, {
color: '#4c6d70',
strokeWidth: 4,
trailWidth: 1,
easing: 'easeInOut',
duration: 2000,
text: {
autoStyleContainer: false
},
from: { color: '#aaa', width: 1 },
to: { color: '#4c6d70', width: 4 },
step: function (state, circle) {
circle.path.setAttribute('stroke', state.color);
circle.path.setAttribute('stroke-width', state.width);
var value = Math.round(circle.value() * 100);
if (value === 0) {
circle.setText('');
} else {
circle.setText(value);
}
}
});
// フォント・フォントサイズを指定。
bar.text.style.fontFamily = '"Noto Sans Japanese", sans-serif';
bar.text.style.fontSize = '1.4rem';
bar.animate(1.0, function () {
//アニメーションが終わったらフェードアウト
$("#loading_container").delay(500).fadeOut(800);
});
} else {
// 2回目アクセスの処理
// 読み込ませないようにすぐ要素を取り除く
loader.remove("loading_container");
}こちらもファイルを保存しておきます。
「function.php」（PHP）
最後に、作成・追加してきた「loading.css」「progressbar.min.js」「loading.js」をそれぞれ「function.php」で読み込ませます。
子テーマにはもともと、「function.php」のファイルが存在しているので、そちらに追記をします。
add_action( ‘wp_enqueue_scripts’, function() { 〜 の部分があるので、以下のようにスタイルシート（CSS）とスクリプトファイル（JS）を読み込ませます。
add_action( 'wp_enqueue_scripts', function() {
// 開発時にブラウザキャッシュされないように、最終変更日時をクエリとして付与
$time_stamp = date( 'Ymdgis', filemtime( ARKHE_CHILD_PATH . '/style.css' ) );
wp_enqueue_style( 'arkhe-child-style', ARKHE_CHILD_URI . '/style.css', [], $time_stamp );
// スタイルシート読み込み
wp_enqueue_style('loading_css', get_stylesheet_directory_uri(). '/assets/css/loading.css');
// スクリプトファイル読み込み（ローディング）
wp_enqueue_script('progressbar', get_stylesheet_directory_uri() . '/assets/js/progressbar.min.js', array('jquery'), '1.0.0', true);
wp_enqueue_script('loading_js', get_stylesheet_directory_uri() . '/assets/js/loading.js', array('jquery'), '1.0.0', true);
} );以上で作業は完了です！
円型のローディング以外にも、ラインや、セミサークル（半円）などなども実装できるのでぜひ活用してみてください！
https://kimmobrunfeldt.github.io/progressbar.js/
その他のローディング
そのほかにもローディングの実装もまとめているので、ぜひチェックしてみてください。
