約3年ぶりのデザイン変更！

前回の記事で、WordPressのテンプレート作成を始めた事を書きましたが、ついに使える段階まで来ましたで試験的に当ブログで公開中です！！

コンセプトは「シームレス」

ここ数年間の間にWebもどんどん進化していっており、特に自社サイトのデザインや、ECサイトのデザインだと当たり前のように派手に動きまくるサイトだったりページの読み込みがそこまで意識させられないような作りになっていたり、使う側も「あーこんなことができる時代になったんだなー」エクスペリエンスに訴えかけるページが増えてきました。

自分もこんなことができたらなぁー、と漠然とそんな感じで考えて、「そうだ！思う限りシームレスなWordPressテンプレート作ってみよう！」とデザインのことは二つ次にユーザー体験に焦点を当てて、今まで書き溜めた記事をもうちょっと面白く見られるサイトを目指して作成を開始したのでした。

ほぼお手製！

いろんな動きや、小難しい仕組みはjQueryのライブラリとしてすでにかんたんに使えるようになっているものが多いのですが、今回自分でテンプレートを作るにあたっては最低限のライブラリのみ使用して、いわゆるデザイン系のjQueryは使わないルールで作成を開始しました。

「シームレス」を実現すべく、PJAXをわかり易く簡単に使えるためのライブラリ「Barba.js」は使用する事にしました。

なので、今回私が使用したライブラリは以下の３つ

• jQuery


• _(lodash)


• Barba.js

ほぼ、現在のWeb制作の基底ライブラリであるjQueryと配列に魔法をかけるlodash、そしてPJAXのBarba.jsです。

「ユーザー体験」を大切に！

PJAXは非同期でデータを取得するAJAXとブラウザの履歴に情報を追加できるpushStateの合わせ技です。通常の遷移とは違う方法で、ページが「遷移した」情報をもたせることが可能となります。

そのPJAXは色々な手続きがあって少しむずかしいので、煩わしさを簡略化して私みたいなへなちょこプログラマでも扱えるようにライブラリ化されたものがBarba.jsです。

当サイトでは記事一覧ページと各ページと固定ページをBarba.jsを用いてシームレスな遷移を実現しています。

ページを移動する際にローディング画面とアイコンのくるくるをして記事がスライドで表示してくるような、少し変わった見せ方をもって「なんか面白いなー」と感じてもらえるようなユーザー体験を目指して開発してみました。

Barba.jsの苦労ポイント

ここで、Barba.jsを扱ってみて苦労したポイントを少し紹介しておきます。

Barbaコンテナを意識する

当たり前なのですが、barba-container要素しか入れ替わらないので、それより外にあるものは更新されません。JSファイルも然りですので、ページごとに読み込ませているJSファイルなどがあれば、barba-container内に入れてしまいましょう。

ページ読み込み後に動かすJSファイルならonloadなどを使って実行時期も見誤らないようにしましょう。

遷移後のJSは読まないので読み込ませる

Barbaコンテナ内のJSは取ってくるだけでは動かなかったので、scriptで別ファイルのものは読み込んで、インラインJSの場合は実行するコードを入れました。

    Barba.Dispatcher.on('newPageReady', function (currentStatus, oldStatus, container, newPageRawHTML) {

        // あと読みのjsファイルの実行
        var js = container.getElementsByTagName("script");
        if(js != null){
            var jsCount = js.length;
            for(var i = 0; i < jsCount; i+=1){
                if(js[i].src !== ''){
                    var addJs = document.createElement("script");

                    addJs.src = js[i].src;
                    document.body.appendChild(addJs);

                }else{
                    eval(js[i].innerHTML);
                }
            }
        }

Transition中はコンテナがダブる

Transition実行中はBarbaコンテナがoldContainerとnewContainerの2種類に分かれるので、newContainerなどで走るJS内でgetElementByIdで要素を取得している場合は、idが一時的に2つある事になってしまい、getElementByIdは上から1つ目の要素を取ってくる仕様なので古いコンテナの要素を取ってきてしまって正しく動かない状態で随分ハマってしまいました。

Transitionの最後にdone()を呼ぶことで新しいコンテナが一つになるので、させたい処理をさせるには時期を見て実装するのが良いと思います。

課題は残るが、動いてよかった。

GW中になんとかしようと思ったのですが、結局はGW中には完結できずにひっぱって翌日曜日になんとか形になったかなーという感じです。なんとかなった！

まだエラーが出たり、デザイン面でまだまだ甘いところがありますけど、ちょこちょこ直していこうと思います〜。