【デモあり】barba.js v2でシームレスなサイトを実現する方法

2023.07.12
Javascript

はじめまして！
WEB業界に入って1年目！
かけだしWEBデザイナーのウズラです。

私の記事では、WEB制作で得た知識をご覧の皆様に共有することで
成長してこう、という形になっています。

今回はページ移動をスタイリッシュにする「barba.js」について記述します。

1. 「barba.js v2」とは
- 1.1. 「pjax」とは
- 1.2. 実現できること
2. 「barba.js v2」を導入する
- 2.1. UNPKGから読み込む場合
- 2.2. jsdelivrから読み込む場合
3. Barba.jsの基本形
- 3.1. htmlファイルの準備
- 3.2. JavaScriptファイルの準備
4. barba.js v2のカスタマイズ
5. まとめ
6. 参考資料

「barba.js v2」とは

「barba.js v2」は簡単に言えば、「pjax」という技術を使ったライブラリの一つです。

そもそも「pjax」っなんだろう…
一緒に勉強していきましょう！！

「pjax」とは

「pjax」は「pushStatus（履歴を操作する機能）」と「ajax（JavaScriptでサーバーとのデータのやり取りを非同期で行う技術）」を組み合わせた技術です。

「ajax」はGoogleMapが特に有名です。地図をスクロールしてもページがロードされることなく必要な情報が取得できます。不足分の情報のみを取得するので、サーバー側・ユーザー側のどちらにも負荷が少なくなります。
しかし、「ajax」のみでは、ページ遷移してもURLが更新されず、ブラウザの「戻る」が使用できません。
ここで出てくるのが「pushStatus」です。
この機能によって、ページの一部を書き換えるだけでもURLを変更でき、ブラウザの「戻る」が使えるようになるのです。

実現できること

「pjax」は二つの機能で成り立っていることを説明しました。
次は何ができるのか解説します。

「pjax」では、一部だけ変更しながらURLも変更できます。
ということは、ヘッダーやフッター・ナビゲーションなどの共通部分を残してメインコンテンツの入れ替えのみでページ遷移を行うのです。
メリットとして、サーバーもユーザーにも負荷が少ないページになり、高速なページ遷移が可能です。
また、シームレスなページ移動が可能なので操作感がよくなります。

「barba.js v2」を導入する

barba.jsは最初に説明したように、pjaxライブラリの一つです。
「PJAX」や「jquey-pjax」ほど導入は簡単ではありませんが、アニメーション等のカスタマイズが豊富なため、凝った演出ができます。

今回はCDNでbarba.js v2を読み込みます。
barba.js公式ページの「DOCUMENTATIO」→「INSTALL」内の「Use with a CDN」から以下のどちらかのscriptタグをHTMLに設置してください。

UNPKG
jsdelivr

barba.js　公式

UNPKGから読み込む場合

<!-- unpkg -->
<script src="https://unpkg.com/@barba/core"></script>

jsdelivrから読み込む場合

<!-- jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/@barba/core"></script>

Barba.jsの基本形

これからbarba.js v2を使えるようにします。

htmlファイルの準備

barba.js v2を読み込んだら、例としてこのようにHTMLを書きます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body data-barba="wrapper">
　　<!-- <footer>など、ページ間で変化しないコンテンツをここに配置 -->
    <!-- リンク用ナビ -->
    <ul>
        <li><a href="./index.html">TOP</a></li>
        <li><a href="./about.html">ABOUT</a></li>
    </ul>
    <main data-barba="container" data-barba-namespace="top">
　　<!-- ここにページ間で変化する内容を配置 -->
    </main>

　　<!-- barba.jsの読み込み -->
    <script src="https://cdn.jsdelivr.net/npm/@barba/core"></script>
</body>
</html>

ページ遷移させたいので、リンク先のページも作成しておきます。
今回は動作確認のためだけなので、index.htmlを複製して、sectionクラスのdata-barba-namespace属性を「about」に書き直した「about.html」を同じ階層に配置しました。

<body data-barba="wrapper">
　　<!-- <footer>など、ページ間で変化しないコンテンツをここに配置 -->
    <!-- リンク用ナビ -->
    <ul>
        <li><a href="./index.html">TOP</a></li>
        <li><a href="./about.html">ABOUT</a></li>
    </ul>
    <main data-barba="container" data-barba-namespace="top" class="top">
　　<!-- ここにページ間で変化する内容を配置 -->        
    </main>

　　<!-- barba.jsの読み込み -->
    <script src="https://cdn.jsdelivr.net/npm/@barba/core"></script>
</body>

bodyタグには「data-barba=”wrapper”」という属性と値が設定してあります。

その中のmainタグに「data-barba=”container”」といいう属性と値を設定します。

body・mainタグである必要はないですが、「wrapper」の中に「container」が内包されている構造を守ってください。※about.htmlも同様に設定

JavaScriptファイルの準備

次に、barba.jsを起動させるための記述をしていきます。
htmlファイルにscriptタグを配置し、コードを記述するかJavaScriptファイルを読み込ませます。

<!-- JavaScriptファイルを読み込む -->
<script src="./js/custom.js"></script>

<!-- タグ内にJavaScriptを記述する -->
<script></script>

記述する内容はこちらです。

barba.init({
 
});

これでindex.htmlとabout.html間でリンクする際の非同期通信が可能になります。

※ファイルをローカルサーバーなどにアップロードして確認してください。

barba.js v2のカスタマイズ

上記の内容で非同期通信（ページ間移動でロードが発生しない通信）が可能になりました。
しかし、ビジュアル面で地味なのでアニメーションを付けていこうと思います！

デモページ

今回は下記のようなページ遷移を目指していきます。

ページ遷移する際に幕が上がり、ヘッダー以外のコンテンツ部分が入れ替わるようなアニメーションです。

Demoページ

用意するファイル

barba.js（今回はCDNで読み込み）
anime.js
htmlファイル2つ以上
スタイルシート（CSS/SCSS）
barba.jsカスタム用JavaScriptファイル
※htmlファイルのscriptタグ内に記述してもよい
anime.jsカスタム用JavaScriptファイル
※htmlファイルのscriptタグ内、またはbarba.jsカスタム用JavaScriptファイル内に記述してもよい

anime.jsについて

anime.jsは軽量なJavaScriptアニメーションライブラリです。CSSだけでは実装できないアニメーションを簡単に導入・カスタマイズできます。

また、jQueryに依存しないのでanime.jsの読み込みのみで動くことも特徴です。

anime.jsは公式サイトからインストール、解凍します。格納されたlib/anime.min.jsをサーバーのフォルダにコピーし、htmlファイルの中で読み込ませてください。

カスタマイズ方法については、公式サイトを参照してください。

anime.js　公式サイト

また、公式サイトを日本語訳したサイトがあります。こちらは非公式なので、最新情報が反映されていない場合があります。公式サイトと比較しながら閲覧してください。

anime.js　公式サイト
日本語訳（非公式）

htmlの記述

bodyの終了タグの前に、JavaScriptファイル読み込みの記述をします。

barba.jsの基本形を記述したのち、data-barba=”container”とクラス名topが設定されたタグの中に変化させたいコンテンツを記述します。　
ここではh1タグにクラス名「title」をマークアップした「TOP PAGE」という文字を記述しました。

about.htmlは、h1内の文字を「ABOUT PAGE」に変更します。また、data-barba=”container”が設定されたタグのクラス名をaboutにしてください。

sectionタグ（変化させたいコンテンツ）の外に、クラス名maskを設定したdivタグを記述してください。この要素がページ遷移時の幕アニメーションになります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- スタイルシート読み込み -->
    <link rel="stylesheet" href="./css/style.css">
</head>
<body data-barba="wrapper">
    <!-- ページ間で変化しないコンテンツをここに配置 -->
    <header>
        <ul>
            <li><a href="./index.html">TOP</a></li>
            <li><a href="./about.html">ABOUT</a></li>
        </ul>
    </header>

    <section data-barba="container" data-barba-namespace="top" class="top">
          <!-- 変化させたいコンテンツをここに配置 -->
          <h1 class="title">TOP PAGE</h1>
    </section>
　　
    <div class="mask"></div><!-- スライドする要素 -->

    <!-- JavaScriptファイルの読み込み -->
    <!-- barba.js (CDN) -->
    <script src="https://cdn.jsdelivr.net/npm/@barba/core"></script>
    <!-- anima.js (ファイルの読み込み) -->
    <script src="./js/lib/anime.min.js" defer></script>
    <!-- barba.js/anime.js カスタマイズ用JavaScriptファイル -->
    <script src="./js/custom.js"></script>
</body>
</html>

CSSの記述

@charset "UTF-8";

/* ブラウザで設定されたmargin/paddingの削除 */
*,*::before,*::after{
    margin: 0 0;
    padding: 0 0;
}

/* 共通設定 */
header ul{
    display: flex;
    justify-content: center;
    list-style: none;
    gap: 20px;
    margin: 20px;
}
header ul li a{
    display: block;
    padding: .5rem 1rem;
    background-color: #fff;
    border: double #333 2px;
    color: #333;
    width: 100px;
    text-align: center;
    text-decoration: none;
}
header ul li:hover a{
    background-color: #333;
    border: double #333 2px;
    color: #fff;
    transition: linear .3s;
}
.title{
    text-align: center;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translateX(-50%);
}
.mask {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100vh;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
    background: rgb(255, 255, 162);
}

/* index.htmlのスタイルシート */
.top{
    background-color:teal;
    min-height: 500px;
    position: relative;
}
/* about.htmlのスタイルシート */
.about{
    background-color: lavenderblush;
    min-height: 500px;
    position: relative;
}

JavaScriptの記述

下記のように記述します。

各詳細はコメントに書いてある通りです。

現在のページを離れる時と次のページを表示するときの処理と簡単なアニメーションをbarba.js側で記述し、anime.js側でアニメーションをより詳細に動かす処理（アニメーション）を追加します。

メソッドについては公式サイトを参照してください。

// barba.jsの設定
barba.init({
    transitions:[{
        name:'default-transition',
        // 現在のページを離れる時のフック
        leave:function(data){
            //現在のページを離れる時のアニメーションを設定する
            return new Promise(function (resolve, reject) {
                leaveAnimation(data.current.container);
                setTimeout(function () {
                    resolve();
                }, 800)
            });
        },
        // 次のページを表示する時のフック
        enter:function(data){
            // 次のページに入った時のアニメーションを設定する
            enterAnimation(data.next.container);
        }
    }]
});

// animation.jsの設定
// 現在のページを離れる時のアニメーション
function leaveAnimation(e) {
    anime.timeline().add({
        easing: 'easeOutSine',
        targets: e.querySelector('.section-01'),
        duration: 500,
        opacity: [1, 0],
        translateY: [0, '-15px']
    }).add({
        easing: 'easeOutSine',
        targets: '.mask',
        duration: 400,
        translateY: ['100%', 0]
    }, '-=200');
}
// 次のページを表示する時のアニメーション
function enterAnimation(e) {
    anime.timeline().add({
        easing: 'easeInSine',
        targets: '.mask',
        duration: 300,
        delay: 200,
        translateY: [0, '-100%']
    }).add({
        easing: 'easeInSine',
        targets: e.querySelector('.section-01'),
        duration: 400,
        opacity: [0, 1],
        translateY: ['15px', 0]
    }, '-=100');
}