日々、雑雑と。

いろいろなことを垂れ流し

サイトを大改造:Barba.jsを導入してページ遷移を高速化

はじめに

最近は1つのWebページにヘッダ、フッタ、メインコンテンツ、サイドバーとたくさんの情報を詰め込むため、何かと容量がでかくなる。すると、いちいち別のページに映るたびに、メインコンテンツ以外の共通している要素を再度読み込みなおす必要があり、全体の読み込みの遅さに影響を与える。Barba.jsを使うと、余分な読み込みを省き、更新が必要な箇所だけを置き換えてくれる。今回は、Barba.jsの最低限の実装を行う。

Barba.jsとは

Barba.jsは、ページ遷移時に部分の要素だけを差し替えることが可能で、ページ遷移の高速化が可能になる。元々はページ遷移にアニメーションを付与するのがこのライブラリの主な使い方だが、今回はアニメーション部分には触れず、超簡潔に実装する。

参考にしたページ

coliss.com
ここにBarba.jsのデモと実装方法が一通り書かれている。

書き方

ファイル構成

Dir/
┝barba.min.js // Barba.jsの本体
┝barba_dispatcher.js // Barba.jsの制御用プログラム
┝index.html
┝to.html

下準備

jQueryを前提として要求するため、併せて読み込む。
Barbaをダウンロード・解凍して、公開ディレクトリのどこかにbarba.min.jsを置いておく。後はHTMLのヘッダで読み込む。
barba_dispatcher.jsはページ遷移完了後の処理を行うプログラムで、詳細は後述。

index.html (head内)
<head>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="/js/barba.min.js"></script>
<script type="text/javascript" src="/js/barba_dispatcher.js"></script>
</head>

ページ遷移

id「barba-wrapper」とclass「barba-container」をdivタグの属性に付与。コンテンツを追記する。最後に、javascriptでBarba.Pjax.start()を行ってBarbaのメインを実行させる。
barba-wrapper内にあるリンクでページ遷移を行うと、barba-container内の要素が、遷移先のbarba-containerの要素に丸ごと置き換えられる。
下記の場合だと、index.htmlのbarba-container内がto.htmlのbarba-container内に置き換わる。

index.html (body内)
<body>
 <div id="barba-wrapper">
  <div class="barba-container" data-namespace="index">
   <!-- ここにコンテンツを追記 -->
   <h1>タイトル</h1>
   <p>文書文書文書</p>
   <a href="./to.html">TO</a>
  </div>
 </div>
<script>
 $().ready(function(){
  Barba.Pjax.start();
 });
</script>
</body>
to.html(body内)
<body>
 <div id="barba-wrapper">
  <div class="barba-container" data-namespace="to">
   <!-- ここにコンテンツを追記 -->
   <h1>ルトイタ</h1>
   <p>書文書文書文</p>
   <a href="./index.html">INDEX</a>
  </div>
 </div>
<script>
 $().ready(function(){
  Barba.Pjax.start();
 });
</script>
</body>

ページ遷移後の処理

Barba.jsで遷移を行った場合、遷移後のHTML内にある、$(document).ready等のjavascriptプログラムは実行されない。遷移後にJQueryや自作プログラムを自動的に動かしたいときは、Barba.jsが用意した関数に、行いたい処理を追加する。
Barba.Dispatcher.onは、Barba.jsに関わる様々なタイミングで関数を呼び出すことができる。今回は、ページが読み込まれた時に指定した関数をコールバックするようにした( $(document).readyに相当 )。current.namespaceには、今いるページ内の、「barba-container」クラスのdata-namespace属性にある文字列が代入される。

barba_dispatcher.js
Barba.Dispatcher.on("newPageReady", function(current, prev, container, raw){
  switch(current.namespace)
  {
    case "index":
      // なにかしらの処理(index.html)
      break;
    case "to":
      // なにかしらの処理(to.html)
  }
});

まとめ

今回はBarba.jsを導入してページの高速化を図ってみた。アニメーションについては全く触れなかったが、元々はそれがメインなので、アニメーション機能は充実している。もっとイケてるWebサイトを作りたい人は是非挑戦してみてはどうだろう。

おまけ:Barba.jsを導入してみたサイト

雑雑横丁 -トップページ-
自分のサイトです。