pjaxできれいなURL+非同期画面遷移!

こんにちは。荒井です。
Facebookもtwitterもgoogleも画面遷移のときには、非同期で次のページを読み込むような作りになってますね!

これは、ajaxで次のページを読み込むのと同時に「History API」というHTML5の機能を使って、URLを更新することで実現してます。
pjax
毎回全部読み直さないから通常の画面遷移よりも早いし、URLが変わるから履歴に残るし、良いことばっかり!!SEO的にも「#!」を使ったやつより良いよっていうのを何かで読みました!!!
これからWebサービスを作るなら、導入したいですね!!!
これpjaxを使えば簡単に導入できるんです!!!よし!!!

PJAX!!

pjax!!!pjaxとは、GithubのChris Wanstrathって人が作ってるjqueryプラグインです。
上で説明した、History APIとajaxを使った非同期の画面遷移を簡単に導入することができます。
pjaxという名前は、URLを変更するときに使用するpushStateというメソッド名 と ajax を組み合わせたものです!!!

PJAXを導入する

githubからダウンロードして、jqueryの後で、HTMLでダウンロードしたjavascriptを読み込みます!
↓こんな感じ

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.pjax.js"></script>

pjaxのgithubを見るとREADMEにbowerを使った導入方法も書いてあります!

javascriptで更新する部分を指定する

if ($.support.pjax) {
  $(document).pjax('a[data-pjax]', '#pjax-container')
}

↑こう書くと、data-pjax属性があるaタグをクリックした場合、idがpjax-containerの部分を更新するようになります。
$.support.pjaxでブラウザがpjaxに対応しているかを確認しています。

$(document).on('submit', 'form[data-pjax]', function(event) {
  $.pjax.submit(event, '#pjax-container')
})

↑こう書けば、submitでもpjax使えます。

サーバ側の対応

pjaxを使ってサーバにリクエストがあると、X-PJAXというヘッダを送ります。サーバ側ではこのリクエストヘッダを確認して、X-PJAXがリクエストヘッダにある場合、レイアウト部分は返さないようにします。

railsで書くとこんな感じです!

class PjaxController < ApplicationController
  layout 'pjax' # pjax用のレイアウトファイルを使ってる

  def index
    render layout: false if request.headers['X-PJAX'] # ここが大切
  end
end

デモ

pjaxを使った画面遷移と通常の画面遷移を比べられるようにデモを作りました!!
デモ
ソース

pjax_demo

おわり

pjaxでWebページがさくさくだ!!

コメントを残す

メールアドレスが公開されることはありません。

ABOUTこの記事をかいた人

主に、WEBサイトやスマホアプリの構築に従事。新たな技術を積極に取り入れ、プロジェクトに貢献。テック系の情報などにも精通しており、世界で通用するスーパーハッカーを目指している。2009年、株式会社ヘッドウォータース新卒入社。 twitter: @yujiroarai qiita: @yujiroarai