こんにちは。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">ページ1</a></li> <li><a href="page2.html">ページ2</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">ページ1</a></li> <li><a href="page2.html" class="pjax">ページ2</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">ページ1</a></li> <li><a href="page2.html" class="pjax">ページ2</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">ページ1</a></li> <li><a href="page2.html">ページ2</a></li> </ul> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-12"> <h2>ページ1への画面遷移</h2> <div> <div id="pjaxContent"> <div class="contentsArea contentsPage1"> ページ1 </div> </div> </div> </div> </div> </div> </body> </html>
上記ソースのid指定している箇所が
<div id="pjaxContent"> <div class="contentsArea contentsPage1"> ページ1 </div> </div>
「index.html」のクラス名「pjax」を指定したリンク押下時に取得されます。
以下のようなイメージです。
ページ1のリンクを押下すると・・・
緑色の箇所が「page1.html」より取得した箇所になります。
そして、コンテンツの取得と同時に、URL、ページタイトルも変更されます。
これが「Ajax」とは異なる点ですね。
最後に
今回は「pjax」にて静的なファイルを
対象にしたコンテンツ取得方法をお伝えしました。
このjQueryプラグインの「pjax」は、
コンテンツ取得後の処理も記述することもでき、
様々な用途で使用できるのではないでしょうか。
以上「pjax」についてお伝えしました。
ありがとうございます。