jQueryjQueryとBarba.jsでpjax対応サイトを制作する【demo有り】ナビ部分は固定されていてコンテンツ部分だけが切り替わっていく。urlもきちんと変更されている。そんなサイトをご覧になったことはありますでしょうか。今回は『pjax』を使ってそんなサイトを制作する方法をご紹介します。具体的な要件は以下の通りです。軽量なプラグイン『Barba.js』を使ってpjax対応をするjQueryを使ってページ遷移時にアニメーション(フェード)をつけるページ遷移時にurlが変更されるナビゲーション部分を固定してコンテンツ部分だけが変わっていくまずは以下のリンクからデモをご覧ください。jQueryとBarba.jsでpjax対応サイトを実装するdemoヘッダー(背景が白い部分)は固定されており、リンクをクリックするとコンテンツ部分(背景がグラデーションの部分)のみがフェードで切り替わる。合わせてurlも変更されていることをご確認いただけましたでしょうか。解決方法を紹介していきます。参考までにCSSを紹介しておきます。問題点1:コンテンツ部分の内容やタイトルは差し代わるけどメタ情報が更新されない問題点2:読み込んでいたスクリプトがページ遷移すると効かなくなるまとめそもそも『pjax』とはひとことで言うと『pjax』とは、『pushState』と『ajax』の技術を組み合わせたjQeuryのプラグインのことを指します。これだけだと何のことだかさっぱりわかりませんね。具体的に説明していきます。API(履歴操作をするためのツール)の機能のひとつで、ブラウザの履歴に対する操作をします。これによってHTMLの一部のみを書き換える『ajax』でもブラウザの戻る/進む機能を実現できるようになりました。『ajax』とはカタカナ読みをすると『エイジャックス』。JavaScriptを利用しサーバとの間の通信(データのやり取り)を非同期で行うことができます。Googleマップなどが有名ですね。地図をスクロールさせると必要な部分だけが次々と読み込まれていきます。この必要な部分だけというのがポイントで使える情報はそのままに、不足している情報だけを取得。ユーザーにもサーバーにも負荷の少ない仕組みです。その仕組みを利用して、例えばヘッダーは固定でコンテンツ部分だけが入れ替わっていくサイトなどが登場してくるのですがひとつ問題がありました。Ajaxでページ遷移するとURLは更新されず、ブラウザの『戻る』が使用できなかったんですね。それを解決する方法が上記の『pushState』です。『pjax』まとめ先ほどのまでの説明を踏まえてまとめると『pjax』とは以下のような解釈(あくまでも個人的な解釈ですが)になります。『ヘッダーやフッターなど変わらない部分はそのまま残しておいて、コンテンツ部分だけを入れ替える。非同期通信なのでユーザーやサーバーにも優しい。ページ遷移時にはurlもきちんと変更されるためSEO的にもバッチリ。そんなサイトを作る方法の一つ。』といったところでしょうか。実装方法では、ここからは実際の流れにそって『pjax』対応のdemoサイトを制作していきます。今回は『Barba.js』というjQueryのプラグインを使用します。『Barba.js』をダウンロード簡単に紹介すると『Barba.js』とはページ遷移時に必要な部分だけを差し替えて高速化。アニメーションも付与できるプラグインです。以下のリンク(github)より必要なファイルをダウンロードします。詳細な説明や参考になるサイトも掲載されていますので一度読み込んでみることをおすすめします。ダウンロードはこちらから必要になのはdistフォルダ内にあるbarba.min.jsのみです。ダウンロードしたら任意のフォルダにアップし、『Barba.js』を読み込む記述をします。今回はページ遷移にアニメーションをつけるので一緒にjQueryも読み込んでおきます。type="text/javascript"></script>HTMLの記述demoサイトの記述を元に説明します。-->重要なのは以下の部分です。barba-wrapperおよびbarba-containerで囲まれた部分だけがページ遷移時に差し代わります。demoの例では固定のheader部分はbarba-wrapperの外側においているのでコンテンツ部分だけが差し代わるようになっています。-->続いてjsの記述アニメーションなどを実行させるとなるとコードが長くなります。管理のしやすさを考慮して別ファイルで読み込ませた方があとあと楽です。今回の例では『barba-custom.js』というファイルを作成して以下のようにhtmlファイルに読み込みました。type="text/javascript"></script>ここからはjsの記述をしていきます。barba-custom.js(ファイル名は任意)//Barba.jsを動かすのに最低限必要な記述。Barba.Pjax.start();たったこれだけ。この1行を記述するだけでアニメーションはありませんが最低限の動きはできるようになります。続いてアニメーションの設定をします。{//この関数は、遷移が開始されるとすぐに自動的に呼び出されます。//読み込みが終了し、古いページがフェードアウトするとすぐに、新しいページがフェードインします。{//this.oldContainerは古いコンテナのHTMLElementです。この場合はアニメーションでフェードアウトさせている。this;//this.newContainerは、新しいコンテナのHTMLElementです。//この段階では、newContainerはDOM上にあります(barba-container内にあり、visibility:hiddenで囲まれています)。$(this.newContainer);//古いコンテナをdisplay:none;にした後、新しいコンテナに初期値を設定。{//.done()の記述で古いコンテナを自動的にDOMから削除。returnに作ったトランジションを設定。FadeTransition;};説明を入れつつ記述をしていますが、簡単にいうと古いページの内容をフェードアウトさせて、新しいページの内容をフェードインさせています。それっぽくなってきましたね。参考までにCSSを紹介しておきます。demo用にざっくり作ってあるので参考までに。『Barba.js』は軽いし、使い勝手もいい方なのですが実際にサイト制作をするとなるともう少し記述を追加していく必要があります。問題点1:コンテンツ部分の内容やタイトルは差し代わるけどメタ情報が更新されないSEO的にはこの問題はかなり痛いですね。