• Javascript「swup」の基本的な使い方！【実装例あり】

Javascript「swup」の基本的な使い方！【実装例あり】

Javascript「swup」の基本的な使い方！【実装例あり】

swupはウェブサイトでページ遷移時のトランジションをスムーズにするためのライブラリです。以下に、swupの基本的な使い方をご紹介します。

目次

概要

swupの基本の使い方として、ページ内容をswupのラッパーに包む方法があります。
おおまかな概要としては、サイト全体の共有パーツ（ハンバーグメニュー・フッターなど）は「swup」のラッパー外に置き、遷移する内容を「swup」のラッパーの中に置きます。

HTMLファイルとしては、大まかに下記のような流れで構成することができます。

パーツ内容
共有パーツ１メタデータ
スタイルシート
ハンバーグメニュー
背景・サイトラッパー等
swupのラッパーページコンテンツ
画像
文字など
共有パーツ２フッター
スクリプトなど

WPにインストールする方法

ワードプレスに「swup」を実装する際は、header.phpとfooter.phpにラッパー要素を設置することで簡単にインストールすることができます。

header.php

<!DOCTYPE html>
<html lang="ja">
<head> ... </head>
<body>
...
<!-- swupのラッパーのスタート -->
<div id="swup" class="transition-fade">

footer.php

...		
<!-- swupのラッパーのフィニッシュ -->
</div> 
<footer> ... </footer>
<script　type="module"　src="<?= get_template_directory_uri() ?>/js/common.js"></script>
</body>
</html>

上のfooter.phpのブロックの中で、common.jsのジャバスクリプトファイルをモジュール（”module”）として呼び出しています。理由は次の”common.js”セクションでご説明します。

common.js

import Swup from 'https://unpkg.com/swup@4?module';

JavaScriptファイルの先頭でImport API（importタグ）を使用し、CDNから「swup@4?module」をインポートします。

swupの公式ページではこの形式が標準的に使用されており、そのため、スクリプトタグの中で「type=”module”」を設定する必要があります（footer.php参照）。これはJavaScript（ES6）のモジュールとしてファイルを読み込むためのルールです。

カスタマイズについて

「const swup = new Swup(); 」というコードは、インポートされた”Swup”クラスから新しいオブジェクト（const swup）を定義するコードです。つまり「swup」を初期化するコードで、これを記述するだけでswupを動かすことができます。

common.js


const swup = new Swup({
　　　animateHistoryBrowsing: false,
　　　animationSelector: '[class*="transition-"]',
　　　animationScope: 'html',
						
...

　　　timeout: 0 
});

swupにはいろいろなアニメーションがあり、パラメーター（オプション）の設定によって挙動を調整することができます。記述としては、オブジェクトを定義する際、上記コードのようにパラメーターとして渡します。

パラメーターの詳細は以下の通り。

「animateHistoryBrowsing」・・・・ブラウザの戻る/進むボタンによってトリガーされる訪問に対してアニメーションをスキップするかどうかを設定します。デフォルトはfalseです。trueに設定すると訪問時にアニメーションが実行され、htmlタグにis-popstateクラスが追加されます。


「animationSelector」・・・・アニメーションのタイミングを検出するためのセレクタを設定します。Swupは新しいページのコンテンツを表示する前に、このセレクタで指定された要素上で行われるすべてのCSSトランジションとキーフレームアニメーションが完了するのを待ちます。デフォルトは ‘[class*=”transition-“]’ です。


「animationScope」・・・・入力/出力アニメーションの異なるフェーズをスタイル付けするためにアニメーションクラスを追加する要素を設定します。デフォルトでは、これらのクラスがhtmlタグに追加されますが、’containers’に設定するとコンテンツコンテナ自体にクラスが追加されます。

この他にも多くのパラメーターがありますが、詳細は下記URLをご参考ください。

・swupオプション

style.css

/*.is-changingというクラスは、jsにてトランジションの開始から完了までhtml要素に反映されます。*/

html.is-changing .transition-fade { 
transition: opacity 250ms;
/*ここに記載されている数字はトランジション全体のスパンです。*/
opacity: 1; 
}

/*.is-animatingクラスは、アニメーションスタートから新しいページの読み込みが完了するまでのスパンです。*/
html.is-animating .transition-fade { 
opacity: 0; 
 }

どのトランジションが現れるのか、どのスピードで再生するのかは基本的にCSSで制御するようになっています。上のコードでは、ページ内容が一旦フェードアウトしたあと、新しいページが読み込まれたらフェードインするというアニメーションになっています。

https://swup.js.org/assets/images/swup-lifecycle.svg

どのように、もしくはどのタイミングでトランジションされるのか、上記リンク先のlifecycleグラフ（画像）で説明してあります。

・swup – Lifecycle

html.is-changing .swup-overlay:before {
	transition: transform 250ms linear;
	opacity: 1;        
}

html.is-animating .swup-overlay:before {
	transform: translate3d(0%, 0, 0);
}

html.is-rendering .swup-overlay:before {
	transform: translate3d(100%, 0, 0);
}

上のコードは、.is-changing, .is-animating, .is-renderingというフッククラスを利用し、左からのスワイプアニメーションを実現しています。

実装例

→プロジェクトをプレビューする（GitHub Pages）
→ファイルをダウンロードする (GitHubリポジトリ）

トラブルシューティング

swupを使っているサイトではページの切り替え時にトランジションがあるため、他のJavaScriptとの干渉が起こる可能性があります。以前に読み込んだページの動作が無効になるケースもあるので、もしトラブルが起きることがありましたら、下記のJSの書き方に変更してみてください。

import Swup from 'https://unpkg.com/swup@4?module';

const swup = new Swup();

document.addEventListener('DOMContentLoaded', function () {    
    startPage (); 
 /*新しいページが読み込み完了になる直前にstartPage()関数を呼び出す*/
    swup.hooks.on('content:replace', () => {
      startPage();
    });  
});

function startPage() {
/*ここはJSコードです*/
}

「swup.hooks.on(‘content:replace’ …」はswupのフックの一つです。このフックは、ページとページを切り替える時だけに実行されます。意味としては、｛｝に入っているコード（ここではstartPage();）は、リンク先のページが読み込み完了となる直前に実行されるようになっています。

上のlifecycleチャートでは他のフックも説明されていますので、ぜひ参考にしてみてください！

お問い合せはBSTへ！

無料WordPressテーマ