• Web

jQueryプラグイン「pjax」でスムーズにページ遷移するサイトの作り方

pjax

「pjax」とは「Ajax」と「pushState」を組み合わせたもので、非同期通信をしながらURLを変更することができる「jQueryプラグイン」です。
各ページの差分だけ読み込み、描画するので、転送量削減ができ時間短縮を図れますし、ページ遷移時のエフェクトも追加できたり、カスタマイズ性に優れています。検索エンジンからのマイナス点もない非常に優秀なプラグインです。


「Ajax」と「pushState」が何なのかというと・・・

  • Ajax
    ページを遷移せずにサーバーからデータだけを非同期でとり、サイトに描画する仕組みのことで、「Google Maps」などに使用されています。
  • pushState
    「HTML5」で導入されたURL操作のAPIで「Ajax」を使用して非同期なサイトを作る時などにアドレスが変更されない問題を解消してくれます。

1. デモ

前置きが長くなりましたが、実際に「pjax」と「CSS3」を使用した簡単なデモを用意したので確認して頂ければと思います。

pjax Demo

※CSS3 animationを使用してるので、IE9以下の方はアニメーションが動きません。
今回、これを作る工程を説明していきます。

2. ダウンロード

「pjax」のバージョンは「2.34.1」を使用します！
動かすには「jQuery」が必須になりますので、こちらもダウンロードするか、Googleにホストされているファイルを読み込みましょう。
「pjax」は「Faster Now」からダウンロードしてください。ダウンロードは下記URLより。

3. HTML

「HTML」はPAGE1とPAGE2、二つのファイルを用意します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>PJAX-Page1</title>
<style>
html, body { height: 100%;}
body { margin: 0; padding: 0;}
#content { background: #61c5bb; min-height: 100%;}
h1, p { text-align: center;}
h1 { color: #fff; margin: 0; padding: 18% 0 1%;}
a {
	background: rgba(79,77,71,.1);
	border-radius: 5px;
	color: #fff;
	text-decoration: none;
	width: 200px;
	display: block;
	margin: 0 auto;
	padding: 16px 0;
}
a:hover { background: rgba(79,77,71,.05);}
</style>
</head>
<body>
<div id="content">
	<h1>PAGE1</h1>
	<p><a href="index2.html">移動する</a></p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/jquery.pjax.js"></script>
<script>//ここにpjaxのscriptを書く</script>
</body>
</html>

PAGE1には「jQery」と「pjax」を読み込ませ、「div」は「id=“content”」とし、見やすいようにスタイルを加えておきます！

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>PJAX-Page2</title>
</head>
<body>
<div id="content">
	<h1>PAGE2</h1>
	<p><a href="index.html">戻る</a></p>
</div>
</body>
</html>

こちらは「pjax」が動いているか直ぐにわかるようにスタイルは書かず、必要最小限のマークアップにしておきます。
「div」には先程と同様の「id」を設定しておきましょう。

4. 「pjax」の設定

「PAGE1」の「script」部分に記述していきます。

$(function(){
	$.pjax({
		area : '#content',
		link : 'a:not([target])'
	});
});

pjaxのサイトで「API」の「Core」をみて頂けると大体わかるかと思いますが、使用の際は「$.pjax({});」と記述をします。Coreは「area」と「link」をまずは使います。

area

更新範囲を設定するもので、更新先で一致しない場合はエラーを返します。今回は一箇所のみの更新ですが、複数設定することもでき、その際はカンマで区切って指定します。

link

「pjax」を使用する「a」タグの設定で、初期値は「a:not([target])」となっています。特定の箇所のみ「pjax」を使用したい場合は「class」などを指定して、「a」タグにその「class」を付与するといいかと思います。

この状態でファイルをサーバーに上げてテストしてみてください。「pjax」が動いていれば「PAGE1」から「PAGE2」へスタイルが引き継がれていることが確認できます。

5. CSS3 animation

「pjax」で「ページ遷移」を早くしたのにアニメーション入れる必要ないでしょ！となりますが、ページによっては早すぎて変わったのかが解り辛いこともあります。
ここではユーザーにページが切り替わったことを伝える手段として、アニメーションを使用しますが、注意すべき点があります。

ユーザーの待ち時間の許容は一般的に3秒とされており、これを過ぎると約60%のユーザーが訪問を諦めるというデータがありますので、テンポの良いアニメーションを取り入れるよう意識しておきましょう。

それとCSS3を使う際には、各ブラウザの対応状況は調べるようにしておきましょう。対応状況は以下の通りです。

CSS3 Animation

IEは10以降、ベンダープレフィックスが必要なのはwebkit系のみなので記述を忘れないようにしましょう。

.fadeOut {
	-webkit-animation: fadeOut .5s cubic-bezier(.55,0,.1,1) both;
	animation: fadeOut .5s cubic-bezier(.55,0,.1,1) both;
}
.fadeIn {
	-webkit-animation: fadeIn .5s cubic-bezier(.55,0,.1,1) both;
	animation: fadeIn .5s cubic-bezier(.55,0,.1,1) both;
}

クリックされた直後のアニメーション「.fadeOut」と、更新されたときのアニメーション「.fadeIn」を作りました。プロパティの中身は左から

animation-name

キーフレームを適用する際に使用する名前を設定します。

animation-duration

キーフレーム一回分のアニメーションの時間を設定できます。ここでは「.5s（0.5秒）」。

animation-timing-function

アニメーションの進行の割合を設定します。値には「ease」「linear」などのキーワード、もしくは「cubic-bezier(x1,y1,x2,y2)」の値が指定可能です。詳細はこちら。

設定した値「cubic-bezier(0.55,0,0.1,1)」は「Material Design」の「Swift Out」に近いアニメーションになるようにしています。

animation-fill-mode

アニメーションの実行前、実行後にどのようなスタイルを適用するかを設定できます。
「none」「forwards」「backwards」「both」の値があり、それぞれ「適用しない」「キーフレームの最後の値を適用」「キーフレームの最初の値を適用」「forwards、backwardsの両方適用」となっています。

6. @keyframesの設定

「animation」の流れを制御するためのもので、アニメーション中に到達するポイントを設定することが可能です。

@-webkit-keyframes fadeOut { to { opacity: 0; -webkit-transform: scale(1.2); }}
@keyframes fadeOut { to { opacity: 0; -webkit-transform: scale(1.2); transform: scale(1.2); }}
@-webkit-keyframes fadeIn { from { opacity: 0; -webkit-transform: scale(.8); }}
@keyframes fadeIn { from { opacity: 0; -webkit-transform: scale(.8); transform: scale(.8); }}

「@」のあとに「keyframes」と「animation-name」で設定した名前を記述します。webkit系はベンダープレフィックスが必要なので、こちらも忘れずに記述しましょう。

中身に「from」「to」がありますが、「%」表記もでき「from」は「0%」と同じで「アニメーションの始まりで{}内のスタイルに変化」、「to」は「100%」と同じで「アニメーションの終わりで{}内のスタイルに変化」となります。

アニメーション途中の値を変更したい場合は「50%」のプロパティを追加すると、アニメーション中盤で設定したスタイルに変化します。

8. アニメーションのタイミングを設定する

「pjax」にもどって、先ほど作ったアニメーションのタイミングを設定しましょう。

$.pjax({
	area : '#content',
	link : 'a:not([target])',
	ajax: { timeout: 2500},
	wait: 500
});
$(document).bind('pjax:fetch', function(){
	$('body').css('overflow', 'hidden');
	$('#content').attr({'class': 'fadeOut'});
});
$(document).bind('pjax:render', function(){
	$('#content').attr({'class': 'fadeIn'});
	$('body').css('overflow', '');
});

Core部分に「ajax」と「wait」、Event部分も追加しました。

ajax:{timeout:2500}

読み込みに2500ミリ秒（1000で1秒）かかる場合は通常遷移に移行。前述した「CSS3 animation」で3秒以内にはページを切り替えておきたいので、気持ち手前の「2500」を設定しています。

wait

コンテンツ更新までの最低待ち時間を設定できます。クリック直後のアニメーション「.fadeOut」が終わるまで、ページの更新は待って欲しいので、アニメーションが終わる「.5s」つまり「500」を設定しています。

pjax:fetch

データ取得前に発生するイベントを設定できます。
ここでは「body」に「overflow:hidden」のスタイルを、「#content」にアニメーション「.fadeOut」を適用させます。
「overflow」に関しては、アニメーションで拡大した際にでるスクロールバーを消すための処理です。

pjax:render

script要素を除くDOMの更新後発生します。
ここで「#content」に「.fadeIn」アニメーションを適用させ「body」の「overflow」を解除しています。

詳しくはpjaxのサイトで「API」の「Event」をみて頂ければと思います。

以上です！
説明不足な点も多々あるかと思いますが、やってみれば簡単ですので、是非アニメーションや「pjax」の内容を変更して色々と試して頂ければ幸いです。

  • このエントリーをはてなブックマークに追加

記事を書いた人

アバター画像

Webディレクター / デザイナー

前川 洋輝

Hiroki Maekawa

高校生のとき、窓際の席でよく外をみてボーッとしてたら、友達から「いつもどこみてるの？」ときかれて「宇宙かな・・・」といったら「サイコ野郎」と言われてしまうくらい痛い青春時代を送りました。青春を取り戻すため、タイムマシンを作れる人を探す活動をしています。

コメント

コメントする

ブログカテゴリー

TOP