jQueryとBarba.jsでpjax対応サイトを制作する【demo有り】

続いてjsの記述

アニメーションなどを実行させるとなるとコードが長くなります。
管理のしやすさを考慮して別ファイルで読み込ませた方があとあと楽です。
今回の例では『barba-custom.js』というファイルを作成して以下のようにhtmlファイルに読み込みました。

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

ここからはjsの記述をしていきます。
まずは最低限の記述から。

barba-custom.js（ファイル名は任意）

//Barba.jsを動かすのに最低限必要な記述。
Barba.Pjax.start();

たったこれだけ。
この1行を記述するだけでアニメーションはありませんが最低限の動きはできるようになります。
続いてアニメーションの設定をします。

barba-custom.js（先ほど記載したBarba.Pjax.start();よりも前に記述）

//Barba.js用トランジション設定
var FadeTransition = Barba.BaseTransition.extend({
start: function() {
//この関数は、遷移が開始されるとすぐに自動的に呼び出されます。

//読み込みが終了し、古いページがフェードアウトするとすぐに、新しいページがフェードインします。
Promise
.all([this.newContainerLoading, this.fadeOut()])
.then(this.fadeIn.bind(this));
},

fadeOut: function() {
//this.oldContainerは古いコンテナのHTMLElementです。この場合はアニメーションでフェードアウトさせている。
return $(this.oldContainer).animate({ opacity: 0 }).promise();
},

fadeIn: function() {
var _this = this;
//this.newContainerは、新しいコンテナのHTMLElementです。
//この段階では、newContainerはDOM上にあります（barba-container内にあり、visibility：hiddenで囲まれています）。
var $el = $(this.newContainer);

//古いコンテナをdisplay:none;にした後、新しいコンテナに初期値を設定。
$(this.oldContainer).hide();
$el.css({
visibility : 'visible',
opacity : 0
});

$el.animate({ opacity: 1 }, 400, function() {
//.done（）の記述で古いコンテナを自動的にDOMから削除。
_this.done();
});
}

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

説明を入れつつ記述をしていますが、簡単にいうと古いページの内容をフェードアウトさせて、新しいページの内容をフェードインさせています。
だいぶそれっぽくなってきましたね。

参考までにCSSを紹介しておきます。

demo用にざっくり作ってあるので参考までに。

body {
font-family: 'Josefin Sans', sans-serif;
background: #fff;
height: 100vh;
overflow: hidden;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #e3be08!important;
}
header {
background: #fff;
overflow: auto;
top: 0px;
left: 0px;
width: 100%;
padding: 35px;
text-align: center;
}
header h1 {
margin-bottom: 30px;
font-size: 40px;
font-weight: bold;
display: block;
line-height: 1;
letter-spacing: 0;
padding: 0 20px;
}
nav li {
display: inline-block;
}
nav li a {
font-size: 18px;
padding: 20px;
}
nav li:first-child a:hover {
color: #70e4d0!important;
}
nav li:nth-child(2) a:hover {
color: #e0b15c!important;
}
nav li:nth-child(3) a:hover {
color: #f3bbc3!important;
}
#barba-wrapper {
padding: 0;
width: 100%;
}
.inner {
display: table;
width: 100%;
}
.inner .content{
display: table-cell;
vertical-align: middle;
text-align: center;
}
.inner h2{
font-size: 30px;
margin-bottom: 50px;
margin-top: 0;
}
.inner ul li{
display: inline-block;
padding: 10px 20px;
}
.inner ul li a{
background: rgba(79,77,71,.1);
border-radius: 5px;
padding: 18px 50px;
color: #000;
font-size: 18px;
display: block;
line-height: 1;
}
.inner ul li a:hover{
color: #000!important;
background: rgba(79,77,71,.05);
}
.page-1.inner {
background: -webkit-gradient(linear, left bottom, right top, color-stop(1%, #7be7d7), color-stop(40%, #7be7d7), color-stop(40%, #7be7d7), color-stop(100%, #86a4e3));
background: -webkit-linear-gradient(45deg, #7be7d7 1%, #7be7d7 40%, #7be7d7 40%, #86a4e3 100%);
background: -webkit-linear-gradient(45deg, #7be7d7 1%, #7be7d7 40%, #7be7d7 40%, #86a4e3 100%);
background: linear-gradient(45deg, #7be7d7 1%, #7be7d7 40%, #7be7d7 40%, #86a4e3 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7be7d7', endColorstr='#86a4e3', GradientType=1);
}
.page-2.inner{
background: -webkit-gradient(linear,left bottom,right top,color-stop(0%,#ddb14f),color-stop(100%,#ea6c30));
background: -webkit-linear-gradient(45deg,#ddb14f 0,#ea6c30 100%);
background: -webkit-linear-gradient(45deg, #ddb14f 0, #ea6c30 100%);
background: linear-gradient(45deg,#ddb14f 0,#ea6c30 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ddb14f', endColorstr='#ea6c30', GradientType=1);
}
.page-3.inner{
background: -webkit-gradient(linear,left bottom,right top,color-stop(0%,#f2c8c5),color-stop(100%,#f686bc));
background: -webkit-linear-gradient(45deg,#f2c8c5 0,#f686bc 100%);
background: -webkit-linear-gradient(45deg, #f2c8c5 0, #f686bc 100%);
background: linear-gradient(45deg,#f2c8c5 0,#f686bc 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2c8c5', endColorstr='#f686bc', GradientType=1);
}

Barba.jsを使うにあたっての問題点と解決方法

『Barba.js』は軽いし、使い勝手もいい方なのですが実際にサイト制作をするとなるともう少し記述を追加していく必要があります。

問題点1:コンテンツ部分の内容やタイトルは差し代わるけどメタ情報が更新されない

SEO的にはこの問題はかなり痛いですね。でも安心してください。ちゃんと解決策はあります。
『Barba.js』で用意されているイベントを以下のように追記して、メタ情報も更新されるようにします。

barba-custom.js

Barba.Dispatcher.on('newPageReady', function( currentStatus, oldStatus, container, newPageRawHTML ) {

//head内のタグを更新
if ( Barba.HistoryManager.history.length === 1 ) {  // ファーストビュー
return;
}
var $newPageHead = $( '<head />' ).html(
$.parseHTML(
newPageRawHTML.match( /<head[^>]*>([\s\S.]*)<\/head>/i )[ 0 ],
document,
true
)
);
var headTags = [ // 更新が必要なタグ
"meta[name='keywords']",
"meta[name='description']",
"meta[property^='og']",
"meta[name^='twitter']",
"meta[itemprop]",
].join( ',' );
$( 'head' ).find( headTags ).remove(); // タグを削除
$newPageHead.find( headTags ).appendTo( 'head' ); // タグを追加
	
return false;
	
});

これでページ遷移した際にメタ情報も合わせて更新されるようになりました。

問題点2:読み込んでいたスクリプトがページ遷移すると効かなくなる

例えばdemoサイトでは画面全体の高さからヘッダーの高さを引いた数値をコンテンツ部分の高さにするために以下のようなスクリプトを記述しています。

jQuery(function($){
var winHeight = $(window).height();
var headerHeight = $('header').innerHeight();
var innerHeight = winHeight - headerHeight ;
$('.inner').css("height", innerHeight + "px");
});

最初に開いたページではこの記述がちゃんと読まれるのですが、ページ遷移のタイミングでこのスクリプトを読み込む記述がないのでページ遷移をするとスクリプトが効きません。demoでいうと高さが取得出来ずコンテンツ部分の下に余白が出来てしまいます。

そこで先ほどのメタ更新と同じようにページ遷移時にスクリプトを読む記述を追記します。

barba-custom.js

Barba.Dispatcher.on('newPageReady', function( currentStatus, oldStatus, container, newPageRawHTML ) {

//ページ読み込み時にスクリプトを再読み込み
var winHeight = $(window).height();
var headerHeight = $('header').innerHeight();
var innerHeight = winHeight - headerHeight ;
$('.inner').css("height", innerHeight + "px");
	
return false;

};

これでページ遷移してもスクリプトが反映されるようになりました。

まとめ

今回はdemoサイトを使って『pjax』を実装する方法を紹介しました。
『pjax』にも、使用したプラグイン『Barba.js』にもまだまだ出来ることはあって奥は深いですが、まずは少しずつ試してみてはいかがでしょうか。