「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_text"></div>
<div class="loader_cover loader_cover-up"></div>
<div class="loader_cover loader_cover-down"></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(); ?>>
<!-- ローディング画面 -->
<div id="loading_container">
<div id="loading_text"></div>
<div class="loader_cover loader_cover-up"></div>
<div class="loader_cover loader_cover-down"></div>
</div>
<!-- ローディング画面 -->
<?php if ( function_exists( 'wp_body_open' ) ) wp_body_open(); ?>
<!-- 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;
width: 100%;
height: 100%;
z-index: 999;
text-align:center;
color:#fff;
}
#loading_text {
position: absolute;
top: 50%;
left: 50%;
z-index: 999;
transform: translate(-50%, -50%);
color: #fff;
width: 100%;
}
.loader_cover {
width: 100%;
height: 50%;
background-color: #fff;
transition: all .2s cubic-bezier(.04, .435, .315, .9);
transform: scaleY(1);
}
.loader_cover-up {
transform-origin: center top;
}
.loader_cover-down {
position: absolute;
bottom: 0;
transform-origin: center bottom;
}
.coveranime {
transform: scaleY(0);
}入力できたら、データを保存します。
「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.Line(loading_text, {
easing: 'easeInOut',
duration: 3000,
strokeWidth: 0.2,
color: '#4c6d70',
trailWidth: 0.2,
trailColor: '#bbb',
text: {
style: {
position: 'absolute',
left: '50%',
top: '50%',
padding: '0',
margin: '-30px 0 0 0',
transform:'translate(-50%,-50%)',
'font-size':'1.4rem',
color: '#4c6d70',
},
autoStyleContainer: false
},
step: function(state, bar) {
bar.setText(Math.round(bar.value() * 100) + ' %');
}
});
//アニメーションスタート
bar.animate(1.0, function () {
$("#loading_text").fadeOut(100);
$(".loader_cover-up").addClass("coveranime");
$(".loader_cover-down").addClass("coveranime");
$("#loading_container").fadeOut();
});
} 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/
その他のローディング
