非同期遷移(Barba.js)に関する覚書:メリットとデメリットとその解決策

Barba.jsの概要

Barba.jsは、非同期遷移をかなり容易に実装できるJSライブラリである。ライセンスはMIT License。

 

WordPressサイトでも導入可能だが、導入コストは高い。一般的なウェブサイトだと、さほど必要ない技術だろう。ただ、デザイン性やページ遷移にこだわったサイトを制作する際は強い味方になる。

Barba.jsの仕組み

index.php


<body id="barba-wrapper">
<div class="barba-container">
barba-containerに囲われた部分が変更される。それ以外は変更されない。
</div>
</body>

 

メリット

  1. ページを跨いだシームレスなアニメーションが実現できる。
  2. ページ全体ではなく必要な箇所のみを読み込んで書き換えるため、ページ読み込みのスピードが増す。

 

デメリット

初心者が既にコンテンツが投稿されている既存サイトに非同期処理(barba.js)を導入する時は、かなり骨の折れる作業になる。

具体的に、以下の状況で不具合が生じる。他に確認していない不具合もあると思う。

  1. この要素外でidやclassを変更することでCSSを書いている場合
  2. WordPressのプラグインを使用している場合
  3. CodePenの埋め込みコードを利用している場合は修正し直す必要がある
  4. この要素外でメタタグや構造化データを指定している場合

barba-container要素外でidやclassを変更することでCSSを書いている場合

例えばbody要素にclassやidを指定して、CSSを指定している場合は効かなくなる。

WordPressのプラグインを使用している場合

例えば人気プラグインであるShortcodes Ultimateなども効かなくなる。

barba-container要素外でメタタグや構造化データを指定している場合

ページ変遷時に情報が更新されない。

解決策

1.の解決策

barba.jsのスプリクトにて、各ページにJavaScriptでCSSを指定することで解決する。

2.の解決策

プラグインによって対応が異なる。

Shortcodes Ultimateの場合は自前のCSSファイルにてデザインを指定し直すことで改善できる。

3. の解決策

更新されるようにbarba.jsのスクリプトにて、更新されるように指定する必要がある。方法については調査中。

 

まとめ

初心者が既存サイトに非同期処理(barba.js)を導入する際は、上記の課題を考慮する。

サイト設計によっては、HTMLやCSSの様々な箇所を書き直す必要がある(結構骨が折れる)ためbarba.js導入の際は、新たなサイトを構築する姿勢でのリニューアルが好ましい。

 

[rns_reactions]
.