barba.jsをWordPressで導入してみた。非同期画面遷移で体感速度アップ
- 沖縄移住10年目。海でぼぉーっとオカヤドカリを見つめ、コーヒーとかビール飲んでれば幸福な人生です。最近は「昆虫細密画」を描くのにハマってます。
※記事の情報は執筆時点のものとなります(6年前の投稿)
目次
もう古いのかもしれないけど、barba.jsってやつが素敵だったので導入してみました。
非同期に画面遷移をおこなえるようにするjs。
どんなものかは、公式のデモを見てください。すぐわかります。
いいですよね。
読み込み時パッと白くなるような野暮なインタラクションがなくなり、スムーズに画面が遷移していますね。URLのとこもちゃんと変わってるからブログみたいなページものサイトでも使えるし。
オサレやーん
- スポンサーリンク
Barba.jsをWordpressに導入
というわけで本番たたき台でもある、私の個人Wordpressブログ（みなみのひげブログってのが昔あった）で試しました。
参考にしたのはこの辺のページ。
- Barbaドキュメント翻訳 | Barba – にほんご。
- Pjax（非同期画面遷移）でシームレスな画面遷移ができるBarba.js
- jQueryとBarba.jsでpjax対応サイトを制作する【demo有り】 | oku-log
- 【爆速】WordPressで始めるpjax入門
ドキュメントの日本語翻訳！
英語だとすぐ集中力が切れる私にはありがたいです。
あと個人的には最後のQiitaのページ、javascriptについたコメントが理解しやすかったです。
細かな調整は大変ですが、とりあえず動くようにすること自体はそこまで難しくないです。
基本的には公式のドキュメントを見ながらやるとできるかと思います。
Barba.js メリット・デメリット
先に導入して感じたメリデメを。
- メリット
- ・非同期でシームレスな画面遷移を実現
- ・URLもちゃんと変わる。ページものでもアプリライクなアニメーションに
- ・体感的にページの遷移速度が上がる
- デメリット
- ・title以外のheadのメタデータが更新されない
- ・barba.js以外のスクリプトがページ遷移時に読み込まれない
- ・ページ遷移しても自動でページトップに行かない（スクロールしたところにとどまっている）
ウェブページがシームレスな遷移になる。何といっても魅力はこれ。
一方で、デメリットは「更新」関係。
他のスクリプトが読まれなかったり、head内のメタタグが更新されなかったりします。
デメリットはbarba.js側にカスタムのjavascriptを書くことで解決できます。ちなみに便利なカスタムのスニペットが、こちらのページにまとめられていました。
世の中はは優しさがあふれています..。ジーン。
Barba.jsはenque_scriptで読み込む
読み込むファイルは２種類。
- barba.min.js
- barba-custom.js（自分で作る）
WordPressの場合、wp_enque_scriptってのがあるので、「function.php」にそれを書いて読み込みます。
barba.jsはテーマ内に”js”フォルダをつくって、そこから読み込んでいます。
WordPressはプラグインとかテーマで色々読み込むのでwp_enque_scriptt（エンキュースクリプト）ってやつで読み込み管理できるようになってますから、それを使う方が良いでしょう。
使ってない場合は、一応、普通に外部スクリプトとして読み込んでも大丈夫です。
非同期で読み込みたいところをタグで囲う
以下のタグで囲った部分が非同期に読み込みされます。
WordPressのテーマだと、この辺が対象のページなります。
- index.php
- home.php
- page.php
- single.php
- archive.php
- category.php
- tag.php
- search.php
要はこんな感じの構造ですね。
もちろんテーマのHTML構造によって変わってくるので、とりあえず非同期で読み込みたい部分をタグで囲うと覚えればOKです。
タグは複数指定できない
DOM上に同じIDが重複して存在するようにはできません。barba.jsは重複させても先に指定したタグの中身しか更新しないです。
barba-custome.jsにカスタマイズのjavascriptを書く
barba.jsを読み込ませて、タグを入れたらカスタマイズのjsを書きます。こんな感じ。
jQueryとjsがごちゃってるのは私の拙さです。すみません。
ページ遷移時のスクリプトの処理がけっこう大変
「getWritten」のfunctionは、記事中の「Gistの埋め込みスクリプト」が動かなくて、追加で書いたものです。
こういう画面遷移時のスクリプトをもう一度動かす処理がけっこう大変でした。
こちらの記事に詳しく書いていますので、同じような状況が起きたかたは読んでみてください。
※記事で紹介したコードは動作を保証するものではございません。必ず自己責任で使用してください。コードを使う際はテストを行い、動作検証をおこなってください。