フロントのエンド

Web開発をがんばりたいブログ

JavaScript

「Barba.js」で pjax 対応サイトにして遷移の体感速度を上げる

by:
16/09/01

タイトルと画面の一部分だけを入れ替えてページ遷移の体感速度をいい感じに上げてくれるpjax。

pjax自体も導入はそこまで難しくはないんですが、「Barba.js」を使ったら簡単すぎてひっくりこけたので導入メモ。このサイトで使っています。160901現在。

luruke/barba.js: Create badass, fluid and smooth transition between your website's pages.

詳しくは Barba.js のリポジトリのリドミを読んでくれという感じなのですが

luruke/barba.js: Create badass, fluid and smooth transition between your website's pages.

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

本体を読んで、

<script src="https://cdnjs.cloudflare.com/ajax/libs/barba.js/0.0.10/barba.min.js" type="text/javascript"></script>

本体はCDN版もあるよ。↑。

<div id="barba-wrapper">
  <div class="barba-container">
    ...Put here the content you wish to change between pages...
  </div>
</div>

Ajax で読みたい部分に対して#barba-wrapperを付けて、実際入れ替わる部分は.barba-containerクラスを付けておきます。

で、準備が出来たら

// Please note, the DOM should be ready
Barba.Pjax.start();

実行。

捕捉

pjax させたくないリンクには.no-barbaをつける。

pjaxさせたいリンクをprefetchさせて、遷移の体感速度をさらに上げる場合はBarba.Prefetch.init();を実行。リンクにマウスホバーでクリックする前にもうすでにリンク先を先読みに行きます。

確かにめちゃ早い気がする。

Analyticsを使っている場合。

Barba.Dispatcher.on('newPageReady', function() {
        //アナリティクスに送信
        ga('send', 'pageview', window.location.pathname.replace(/^\/?/, '/') + window.location.search);

        //他にも何かございましたら
    });

pjaxが終わった後に実行したいアレコレを登録。

newPageReadyを使ってpjaxが終わった後にさせたい処理をアレコレ。

スポンサーリンク

遷移の際のトランジションがすごい

Barba.js

コンテンツ部分が変わっているにもかかわらず、ネイティブアプリみたいな挙動しててすごい。

パネルとかタブかよ!ってくらいスムーズ。

トランジションまではまだ手が回ってないけども、もう少し時間が出来たらじっくり向き合いたい。

pjax 固有のデメリットも知っとこ

デメリットというか、ちょっと詰まるというか、理解してないとしんどいこともあるよと。

pjaxのtips – Qiita

例えば、ヘッダーは title 以外は変わらないので、metaとかは最初のページのまま。

SNSボタンもたいていはうまく動かない。

部分的にコンテンツが差し替わってるって理解して対策するなり妥協しないと、けっこう時間とられる。

pjaxっていうか、Barba.jsのdocumentも読もうな!という話しではある。

Barba.js かなり話が早くて楽

個人的には驚くべき簡単さでpjax出来るので、しばらく様子を見ていきたい!

楽だ。

Barba.js

コメントを残す