シームレスなページ遷移を！PJAXの実装に便利な軽量プラグイン Barba.js の使い方

Barba.js

今回はPJAXを比較的簡単に実装し、シームレスなページ遷移を実現するjavascriptプラグイン「Barba.js」を紹介します。

ちょっと前まではサポートブラウザの関係でいまいち仕事では使えることが少なかったPJAXですが、IE9以下をほぼ考えなくても良くなってきている昨今ならどんどん使っていけるのではないでしょうか。
というわけで、こちらサポートブラウザはpushStateが使えるモダンブラウザ＆IE10+っぽいです。

用意するもの

まずはGitHubからプラグインを手に入れましょう。
いろいろ入っていますが、とりあえず最低限必要なのはbarba.min.jsのみです。
ただ、Barba.jsを作動させたりトランジションを書いたりする用の外部jsも用意しておくといいかもしれませんね。

<script src="barba.min.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>

基本的な使い方

Barba.jsではhtml側で下記のような決まったDOM構造が必要になります。
PJAXでページ遷移させるすべてのページに入れてあげてください。

<div id="barba-wrapper">
  <div class="barba-container">
  このbarba-containerの中身がAjaxで遷移するエリアとなります。
  </div>
</div>

そして、Barba.js作動ようの外部jsに必要な最低限の記述は以下のみです。

Barba.Pjax.start();

まあ、これだけでもPJAXはしっかり動きますがサンプルの情報量の少なさでは一瞬で切り替わってしまってあまり実感できないと思います。
なぜかというとデフォルトの状態ではトランジション効果は設定されていません。
トランジション効果は自分で設定、作成することで実装することが出来ます。

Transitionの作り方、設定の仕方

公式ドキュメントのTransitionの項目に載っているサンプルを例に、作り方と設定の仕方をざっくりと解説してみます。

まず、新しいTransitionを設定するには下記の記述が必要なようです。

// returnに作ったトランジションを設定します。
Barba.Pjax.getTransition = function() {
  return FadeTransition;
};

Barba.Pjax.start();

次は肝心のTransitionの設定です。
このプラグイン自体にjQueryは要らないんですが、アニメーションをつける手間を削減するためにjQueryを入れています。

var FadeTransition = Barba.BaseTransition.extend({
  start: function() {
    //startはトランジションが起動した直後の一番最初に呼び出される。

    //promise.allを使うと、配列で渡された処理が全て終わった後に.thenを実行。
    //この場合は.newContainerLOadingと.fadeOutが終わってから.thenが実行される。
    Promise
    .all([this.newContainerLoading, this.fadeOut()])
    .then(this.fadeIn.bind(this));
  },

  fadeOut: function() {
    //古いページコンテンツに対して行う処理。
    //ここでは、animateを使って、fadeoutさせている。
    return $(this.oldContainer).animate({ opacity: 0 }).promise();
  },

  fadeIn: function() {
    //startに記述したallによって、fadeOutが終わったらこのfadeIn関数が呼び出されている。

    var _this = this;
    //ここでのnewContainerは、ajaxで読み込まれてきた新しい方の.barba-containerにあたる。
    var $el = $(this.newContainer);

    //opacity:0;になっていた古いbarba-containerをdisplay:none;に。
    //こちらおそらくfadeIn発動時古いbarba-containerの初期設定として。
    $(this.oldContainer).hide();
    //こちらも新しいbarba-containerの初期設定。
    //visiblityがあるのは、デフォルトではこれがhiddenになってるっぽいから。
    $el.css({
      visibility : 'visible',
      opacity : 0
    });

    $el.animate({ opacity: 1 }, 400, function() {
      //.done()をつけることで古いbarba-containerのDOMは削除され、transitionが終了する。
      _this.done();
    });
  }

});

このようにPromiseを使って設定する、「画面遷移前のアニメーション」と「画面遷移後のアニメーション」を作り込むことによってシームレスでアプリっぽい画面遷移を実装していきます。

Barba.jsは戻るボタンや進むボタンに対しても対応してくれているので、細かいことは気にせず遷移アニメーションに取り組めるのが良いですね。

では、今回はこの辺で。

JavaScriptの理解を深めた人がさらにもう一歩先に進むための本
-Amazonでみる