APIというものが追加されました。(正確には以前からあったけれども、今回のPJAXに繋がる機能が追加されました)難しいことは考えず、Javascriptとかで利用できる項目が増えたって思ってもらえればわかりやすいかなと。APIが何をするかと言うと、画面を遷移せずにURLを変更したりすることができます!そして、ご存知AJAXは非同期通信で狙ったデータを入れたり、データを変更したりすることができます。この二つの機能を兼ね備えたのがPJAXという訳です。実際何がどうなるの?ホームページを見ていると、たまにヘッダーとか全く変わらずにコンテンツだけ変わって、さらにURLも変わっている。みたいなページを見たことないでしょうか?初めて見た時はなんじゃこれ!?と思ったものです。APIというものに辿り着き、今回のPJAXに辿り着きました。今回作ってみたデモを見てみてください。footer</p></footer></body>ありがちな感じにしてみましたっ!ロゴがあって、ナビがあって、コンテンツが2カラム。Change</a></div></section></body>こちらは簡単に違いがわかるように1カラムレイアウトに変更しましたっ!さて、ここで注目してほしいのは、index.htmlと違ってヘッダーやフッター部分はなく、コンテンツのみの表記にしています。-100%;}}特に変わったことはないですね!注意点としては、animationとかkeyframes、transitionはまだプレフィックスが必要なので注意ですね!ちなみにボクはgulpで自動化しております。});});今回のデモの場合はこんな感じですっ!ボタン押してページ遷移してる風、さらにURLも変わっているでしょう!?next.htmlにはヘッダー、フッターを書いていないのに存在しているでしょう!?これがPJAXだ!!DEMOこれを作るにあたってボクも色々調べながらやったのですが、見るサイトによって書き方が違っていたので少しとまどいました・・・PJAXプラグインっていくつかあるのかな・・・?ボクが使ったプラグインは上記の書き方で動きました!今回のデモでは上と下の二箇所にボタンを設置しましたが、下のボタンを押した時は一旦一番上までスクロールしてから遷移する。いうのを作りたかったのです。いうことは上のボタンを押したらすぐにページ遷移、下のボタンを押した場合はスクロール分の時間を待ってからページ遷移処理が必要なので、それぞれの時間の調整が必要だったのですが、少し戸惑いました・・・ポイントは$.pjaxの中のwaitの部分!!一つしか無理だと思ってたのですが、関数でもいけるというのを発見しました。