PACEで超かんたんに読み込み中画面を作成できる
このブログサイトを立ち上げてから間もないため、正直Google検索からこのサイトへたどり着く人はまだいません。
しかし、Google Analyticsを眺めるとどうやらTwitterやInstagramからの流入は多少あるようです。（やっぱりブログ運営にSNSは必須ですね。勉強しよう。）
SNSからの流入先はトップページURLになりますが、まぁ味気ないなと。
個人的にはシンプル、ミニマルなデザインが好きなので画像を差し込んだり、色を派手にしたりということはしたくない。
それでいて「おっ！」っと読者の目を引くしかけをつくりたいなーと考えていたところ、みつけました。参考にしたいサイト。
フリーランスエンジニアとして活躍されていて、Youtubeで動画も投稿されている Kota Morishitaさん のポートフォリオサイトのトップページがまさにイメージ通りでした。
ソースを覗かせていただいたりWebで検索しているとどうやら PACE というJavaScriptライブラリで実装できるようだったので、さっそく自分のサイトにも実装してみることにしました。
PACEとは
JavaScriptとCSSを読み込むだけでかんたんにローディング画面をつくることができるライブラリです。
利用者がやることは、お好みのデザインを10種類以上のテンプレートから選択して、ダウンロードしたファイルをWebサイトに読み込ませるだけ。
めっちゃかんたん。すばらしいです。
ちなみにPACEは、
- Progress
- Automatically.
- Certain to
- Entertain.
の略のようです。
以下、このWordPressで作成したサイトに実装するまでの手順を解説していきます。
環境前提
わたしの環境はこのような状態です。
- WordPress 5.4.2
- テーマはCocoonを使用（Cocoon子テーマを適用）
JSとCSSをダウンロード
さきほどリンクを貼ったPACEのGithubページへアクセスして Download からJavaScriptファイルをダウンロードします。
つづいて Themes セクションでお好みの色を設定します。サイトの色味にあわせるとよいですね。
そして画面下部にあるデザインテンプレートから好みのデザインを選びます。わたしはLoading Barにしました。
COPY TO CLIPBOARD をクリックするとCSSがコピーできるので、テキストエディタに張りつけてファイルとして保存します。
ファイル名はなんでもいいですが、わたしは pace.css としました。
JSとCSSファイルが用意できたら、FTPなどでサーバへアップロードして下準備は完了です。
JSとCSSをWordPressで読み込む
公式ドキュメントに案内があるように、さきほど準備したJSファイルとCSSファイルをHTMLの head 要素内で読み込みます。
わたしのサイトのWordPressテーマはCocoonを使用していますので、公式ページ情報にしたがって head-insert.php を編集します。
WordPress管理画面の [外観] – [テーマエディター] から [tmp-user] – [head-insert.php] を選択して、ファイル読み込みコードを挿入します。
ファイルPATHはみなさんの環境で読み替えてください。
<?php if ( is_home() ): ?> <link rel="stylesheet" href="./pace.css"> <script src="./pace.min.js"></script> <?php endif; ?>
ここでひとつポイントがあって、1行目の if ( is_home() ) の部分。
これはサイトのトップページでだけ実行される条件分岐になります。
ぜんぶのページでローディング画面が表示されたらうっとおしいのでこのような実装としました。
この条件分岐はほかにも
| コード | 意味 |
|---|---|
is_page( ‘<URLスラッグ>’ ) | 特定の固定ページでのみ実行 |
| is_home() | ホームページ（トップページ）でのみ実行 |
| is_single(‘<URLスラッグ>’) | 特定の投稿ページでのみ実行 |
などもあったりします。（もっといろいろあると思います）
JSとCSSの読み込みは以上です。
ローディング中はコンテンツを非表示にする
ここまでの作業でローディング画面を表示できるようになりました。
しかし。。。
見づらい。。。
地味な色味もあいまって、これじゃあ読者に気づいてもらえません。
このような場合は ローディング画面を表示している間、それ以外の要素を非表示にする という実装にするみたいです。
実現するには3つのファイルを編集する必要がありました。
１．body-top-insert.phpへ追記
<?php if ( is_home() ): ?> <div class="pace-wrap"> <?php endif; ?>
２．footer-insert.phpへ追記
<?php if ( is_home() ): ?> </div> <?php endif; ?>
ここまででトップページ全体を pace-wrap というクラスでくるんでる状態です。
つぎに、くるんだpace-wrapを ローディング中は非表示にするCSSを追記します。
３．style.cssへ追記
.pace-running .pace-wrap {
display:none;
}
これで、ローディング画面の背景がまっしろになってくれました。
ローディング画面からトップページへふわっと切り替える
最後のカスタマイズです。
この状態でも最低限のやりたかったことは実現できているのですが、ローディング画面からトップページへの遷移がいきなりパッと切り替わってしまってダサいです。
トップページをいいかんじにフェードインさせることで理想の動作になりました。
コード追記対象は javascript.js です。
Pace.on('done', function(){
$('.pace-wrap').fadeIn();
});
これでひととおり実装が完了しました。
どのような動作をするのかは、ぜひこちらからご覧ください。
残課題：コンテンツが軽すぎて表示時間が短い
ご覧いただいたかたはお気づきかと思いますが、トップページが軽すぎてローディング画面の表示時間がとても短いです。。。
これは、記事数が増えると解決（？）するのか。
それともなんらかWaitをかけるようなJavaScriptカスタマイズをしたほうがいいのか。
Webの政界では 早い = 正義だと思うので、なんとも悩ましいです。笑
まぁひとまず、いろいろ勉強して記事作成に注力しましょうかね。
今回は以上です。
それじゃあまたね。
