こんにちは。SD部の濱地です。
今回はjQueryプラグイン「pjax」についての紹介と
簡単な使い方について書きたいと思います。

pjaxとは

「pjax」とは「Ajax」と「pushState」を組み合わせた機能を
もったjQueryプラグインです。

通常、jQueryのajax()を使ってウェブページ内のコンテンツを入れ替えた場合、
ブラウザのURLは変更されません。

しかし、今回ご紹介する「pjax」を使用することによって、
コンテンツを入れ替えるのと同時に、URLの変更も行うことができるのです。

pushStateとは・・
HTML5から追加されたHistory APIのメソッドで、
ページ遷移せずに、ブラウザの履歴に追加することが出来ます。

対応ブラウザ

pushStateは、Chrome、Firefox、Safari、Operaの主要なブラウザはサポートしていますが、
IE9以下は未サポートになっています。
※pushStete未サポートのブラウザへは「History.js」を使うなどの対処が必要となります。
本ブログでは「History.js」についてはふれませんので、ご興味がある方は別途調べてみてはいかがでしょうか。

それでは、導入方法について見ていきましょう。

導入方法

今回、サンプルとして「pjax」が動作するパッケージ構成を以下のようにしました。
※デザイン関連について、「twitter bootstrap」を使用しています。

root
│ 　index.html
│ 　page1.html
│　 page2.html
│ 
├─css
│ 　　bootstrap.min.css
│ 
└─js
　　　jquery-2.1.4.min.js
　　　jquery.pjax.js

導入するの非常に簡単です。

「pjax」を使用したいファイルに、
「jquery-2.1.4.min.js」、「jquery.pjax.js」を読み込ませるだけです。

ここでは、「index.html」に各jsファイルの読み込み処理を記述します。

index.html

<script type="text/javascript" src="/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="/js/jquery.pjax.js"></script>

以上です。
たったこれだけで「pjax」が使用できる環境が整いました。
続いて使い方について、見ていきましょう。

使い方

まずサンプルとなるソースは以下の様に記述します。

index.html

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>トップ</title>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" />
<script type="text/javascript" src="/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="/js/jquery.pjax.js"></script>
<script type="text/javascript">
  $.pjax({
    area : '#pjaxContent',
    link : 'a.pjax'
  });
</script>
<style type="text/css">
 .contentsArea {
   border: 1px solid #000000;
   height: 200px;
   font: #ffffff;
   text-align: center;
   padding-top: 20px;
 }
 .contentsTop {
   background-color: #ffffff;
 }
 .contentsPage1 {
   background-color: #90ee90;
 }
 .contentsPage2 {
   background-color: #ffb6c1;
 }
 .contentsPage3 {
   background-color: #f4a460;
 }
</style>
</head>
<body>
 <div id="header" class="navbar navbar-default" role="navigation">
   <div class="container">
     <div class="navbar-header">
       <a class="navbar-brand" href="/">pjaxテスト</a>
     </div>
     <div class="collapse navbar-collapse navbar-top">
       <ul class="nav navbar-nav">
         <li><a href="page1.html">ページ１</a></li>
         <li><a href="page2.html">ページ２</a></li>
       </ul>
     </div>
   </div>
 </div>
 <div class="container">
   <div class="row">
     <div class="col-md-3">
       <p>
         以下のリンク押下で<br>
         pjaxを使用したコンテンツ入替え
       </p>
       <ul>
         <li><a href="page1.html" class="pjax">ページ１</a></li>
         <li><a href="page2.html" class="pjax">ページ２</a></li>
       </ul>
     </div>
     <div class="col-md-9">
       <h2>メインコンテンツ</h2>
       <p style="font-weight: bold; color: red;">↓以下のエリアをpjaxにて取得します。</p>
       <div id="pjaxContent">
         <div class="contentsArea contentsTop">トップページ</div>
       </div>
     </div>
   </div>
 </div>
</body>
</html>

以下が「pjax」の呼び出しを定義している箇所になります。

<script type="text/javascript">
  $.pjax({
    area : '#pjaxContent',
    link : 'a.pjax'
  });
</script>

「area」にコンテンツの入れ替えをする対象を指定します。
※ここでは、id属性「pjaxContent」が対象となります。

そして、特定のリンクに絞る場合は「link」を設定します。
ここでは、クラス名を「pjax」と指定しているリンクが対象となります。

<li><a href="page1.html" class="pjax">ページ１</a></li>
<li><a href="page2.html" class="pjax">ページ２</a></li>

次にコンテンツを入れ替えるの箇所を見ていきましょう。

<div id="pjaxContent">
  <div class="contentsArea contentsTop">トップページ</div>
</div>

このidを指定している箇所がコンテンツの入れ替え対象となります。
次にコンテンツを入れ替えるページを見ていきましょう。

page1.html


<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>ページ1</title>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" />
<style type="text/css">
.contentsArea {
  border: 1px solid #000000;
  height: 200px;
  font: #ffffff;
  text-align: center;
  padding-top: 20px;
}
</style>
</head>
<body>
  <div id="header" class="navbar navbar-default" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="/">pjaxテスト</a>
      </div>
      <div class="collapse navbar-collapse navbar-top">
        <ul class="nav navbar-nav">
          <li><a href="page1.html">ページ１</a></li>
          <li><a href="page2.html">ページ２</a></li>
       </ul>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h2>ページ１への画面遷移</h2>
        <div>
          <div id="pjaxContent">
            <div class="contentsArea contentsPage1">
              ページ１
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

上記ソースのid指定している箇所が

<div id="pjaxContent">
  <div class="contentsArea contentsPage1">
    ページ１
  </div>
</div>

「index.html」のクラス名「pjax」を指定したリンク押下時に取得されます。

以下のようなイメージです。

index.html
top

ページ1のリンクを押下すると・・・

index.html
page1

緑色の箇所が「page1.html」より取得した箇所になります。
そして、コンテンツの取得と同時に、URL、ページタイトルも変更されます。
これが「Ajax」とは異なる点ですね。

最後に

今回は「pjax」にて静的なファイルを
対象にしたコンテンツ取得方法をお伝えしました。

このjQueryプラグインの「pjax」は、
コンテンツ取得後の処理も記述することもでき、
様々な用途で使用できるのではないでしょうか。

以上「pjax」についてお伝えしました。
ありがとうございます。