Barba.js(Pjax)でのサイト作成で学んだ9の注意点。とその解決法。

Barba.jsはユニークなページ遷移を簡単に実装させてくれる素晴らしいライブラリです。しかし、Barba.jsを導入すると少なからず問題点が発生します。ここではBarba.jsを使用してWeb作成してわかった8つの注意点とその解決方法についてご紹介します。
Barba.jsを使ったWebサイトの導入についてはこちらを御覧ください。

Pjax(Barba.js)でスムーズな画面遷移を実装する方法!5分で完了!サンプルあり!

ヘッドタグ内のタグ置換に注意

Barba.jsでは特定のエリアのみを更新するため、<head>タグ内がページ遷移ごとに自動で更新されません。そのため、開発者側で更新する必要があります。以下のJSを追記することで<head>タグ内を更新する事ができます。*こちらは@grenouille220さんのコードを参考にさせていただきました。また、リンク先にはjQueryを使わない方法も記載されていますので興味のある方は御覧ください。

特定の画面でのみ読み込むスクリプトがある場合

サイトの負荷軽減や読み込み速度を上げるために、特定のページでのみ使用するスクリプトはそのページでのみ読み込みたい場合があります。そんなときににも先程のheadTagsに対象のスクリプトを指定しておくことでそのページへの遷移時に読み込む事ができます。
(注意)サイトのメインスクリプトを画面毎に読み込み直すことはPjaxのメリットがなくなってしまうため避けましょう。どうしても読み込み直したいスクリプトがある場合は、できるだけ小さいファイルサイズにしてメインファイルとは分けましょう。

Third-Partyのスクリプトを利用する場合は注意

Third-Partyのスクリプトはライブラリ内で初期化処理(window.addlister('load', function(){…}))などを行っている事が多々あります。Pjax(Barba.js)を利用した場合はあくまで擬似的な画面遷移となるため、初期化処理が画面遷移毎に呼ばれることはありません。そんなときにもheadTags内に対象のスクリプトを記載してやることで、新しく読み込み直す事ができるため、初期化処理を実行させることが出来ます。

Google Analyticsへのページビュー送信に注意

Google AnalyticsやTag Managerで解析を行う場合は画面遷移時にページビューを送信してやる必要があります。上記のコードでどちらにも対応可能です。

コンテナ外のコンテンツ更新に注意


例えば、Mainエリアをコンテナとしてページ毎に更新する場合はHeader、Sidebar、Footerはデフォルトでは更新されません。しかし、実装を初めてからどうしてもコンテナ外の更新が必要になるケースが発生してくると思います。例えば、wordpressで開発を行う場合、bodyタグのクラスがページ毎に切り替わり、それを元に各ページのスタイルを切り替える事が多々あります。その場合にはBodyタグのクラスをページ毎に切り替えてやる必要があります。Bodyのクラスを置換する際は以下のスクリプトを使用してください。また、Body以外の置換の場合でもnewPageRawHTMLに遷移先ページのHTMLが格納されているので、同じ要領で正規表現で抜き出して置換する事が可能です。

 

モバイル画面表示時の注意

モバイルはデスクトップに比べて端末のスペックが低いため、リッチなアニメーションでPjax遷移を使用する場合には注意が必要です。モバイルで画面遷移時のアニメーション動作がカクカクする時はBarba.jsを無効にし、デスクトップでのみ有効にしましょう。

 

拡張子付きリンクの種類に注意

Barba.jsではチェックをカスタマイズすることでPjax遷移させないように出来ます。以下のコードはBarba.jsの公式で公開されているPjax遷移を判定をカスタマイズするコードです。(参照

You Can Add Your Custom Check Here部分にコードを追記してあげることでチェックのカスタマイズをすることが出来ます。今回はここにPDFやJPGなどのメディアファイルへのリンクが押された場合にPjax遷移を抑止するコードを追記します。

ポイント

if文でURLの後方一致を行っています。必要に応じてno_barba_extensionsに拡張子を追加してください。また、その他にも.no-barbaクラスをリンクに付与してやるとPjax遷移させないようにできます。(Barba.js公式参照

アンカーリンクの処理に注意

デフォルトのpreventCheckでは「#」を含むURLは全てPjax遷移しないようにチェックが入っています。しかし、同じドメイン内であっても別ページであれば、Pjax遷移させたいときがあります。そんな時はこちらを使用します。(こちらは「Barba.jsを使うときに設定しておくと便利なスニペット」で紹介されているものを使わさせていただきました。)

また、アンカーリンクの場合は画面遷移後のスクロール処理も行ってやる必要があるため、ついでにこちらも追記してやります。

アニメーションがカクつく場合

Pjax遷移を行う場合にはやはりアニメーションを付けたいと思います。しかし、アニメーションをリッチにすればするほどアニメーションがちらついたり、動作がカクつくことが度々あります。そんなときには以下を試してみてください。

ハードウェアアクセラレーションをONにする

その他の3Dプロパティーを無効にする

こちらはWebkitブラウザのみ適用されます。backface-visibilityは要素の裏側の描写の定義に使用するプロパティーです。基本的には要素の裏側は使用する必要ないので、hiddenとすることで余計なレンダリングを排除します。perspectiveは3Dの奥行きの定義です。backface-visibilityと合わせて定義することでチラつきを解消できるケースがあります。

will-changeプロパティーを使用する

will-changeを付与することでスムーズなアニメーションを実現できます。will-changeは問題が解消しない場合の最終手段として使用することが推奨されており、多用するとメモリを大量に消費するなどの弊害があります。必要ない場合は使わないようにしましょう。また、使用する際は必ず、適切なプロパティーを指定してください。will-changeプロパティーについてはこちらを参照してください。

おまけ*非推奨

コンテナ内で取得したスクリプトを実行したい場合は以下のコードを加えます。

eval()はセキュリティーの脆弱性を招くので、使用は推奨されませんのでお気を付けください。

まとめ

この記事ではBarba.jsを導入する際の注意点についてご紹介しました。Barba.jsを利用したサイトを実際に開発・運用している所感としては基本的には実装次第でPjaxによる問題は解決することが出来ます。一番のネックになりそうなところはThird-Party製のJSライブラリとの相性だと感じています。(実際、設計段階で使用検討していたJSライブラリが動かず、変更することがありました。)Pjaxの導入にあたっては、要件・設計の段階で使用検討しているJSライブラリと合わせて簡単なテストを行うことをおすすめします。

最新記事