ページ遷移のやり方について

Question

いつもお世話になっております。

楽天goldで特集を制作する際、ページ遷移のロードを高速化し、
アニメーションを入れたくて、こちらの記事を参考に↓
https://liginc.co.jp/358224
Pjaxを使ってみたのですが、ページ遷移は高速化されたのですが、
アニメーションが反映されず、遷移先のページは読み込み途中のままになってしまいます。
設置のやり方が悪いのか、コードが読み込まれていないのでしょうか？
ご教示の程お願いいたします。

テストURL(右側のバナーをクリックすると遷移されます)
http://tokeiten.co.jp/Test/monitor-test/test.html

Accepted Answer

ECマスターズの田中です。

test.htmlを拝見すると、
確かにCSSの問題は解決しているようで何よりです。
念のため、補足いたします。

Barba.jsは、遷移先のページの内容を
現在のページの「id="barba-wrapper"」要素内に読み込む、
という処理を行っております。

そのため、同要素で囲まれていない部分、
つまり、タグの中は更新されないため、
遷移先のページのタグにしか記載されていない要素、
（今回の場合はxc-style.css）が読み込まれず、
表示崩れの原因となってしまいます。

今回のようなトラブルを防ぐために、
Barba.jsを導入するページ同士では
同じ外部CSS・JSファイルを読み込ませる構造を
想定していただきますようお願いします。

楽天のヘッダー・フッター・レフトナビや
一般的なブログのように、
共通の枠組みの中でページの内容だけが変わっていく様子を
イメージしていただければ、わかりやすいかと思います。

次に、アニメーションが適用されない原因についてお話します。

https://liginc.co.jp/358224
上記ページにて、
「さらに、app.jsに次のコードを追記します。」
以降のソースをご参照ください。

このソースの中で、
ページ遷移が始まった時の処理を定義し、
「Barba.Pjax.getTransition」に登録することで、
遷移時の処理を登録しており、

ページで紹介されているとおりの動作を行わせたい場合、
このソースどおりに「Barba.Pjax.getTransition」への登録を
行う必要があるのですが、

https://www.rakuten.ne.jp/gold/tokeiten/feature/monitor-citizen/test.html
にて読み込まれている
https://www.rakuten.ne.jp/gold/tokeiten/feature/monitor-citizen/js/script.js
https://www.rakuten.ne.jp/gold/tokeiten/feature/monitor-citizen/js/pjax.js
以上２つの外部JSファイルの中で、
まったく別の処理が「Barba.Pjax.getTransition」に
登録されております。

２つの外部JSファイルから該当の処理を取り除いた上で、
代わりに、ページで紹介されているとおりのソースを
ご登録いただきますようお願いします。

また、xc-monitor.html で発生している
２つのエラーの原因をお知らせいたします。

同htmlファイル、28行目に書かれている
$(window).load(function(){
ですが、この書き方ですと、
「ページ読み込み完了時に動作する」ではなく、
「別のページの内容を読み込む」関数が実行されてしまいます。
http://semooh.jp/jquery/api/ajax/load/+url,+data,+callback+/

上記1行を、
$(function(){
に置き換えていただきますようお願いします。

続いて、
https://www.rakuten.ne.jp/gold/tokeiten/feature/monitor-citizen/js/theme-scripts.js
にて、２箇所に記載されている
jQuery('a[href^=#]').click(function() {
の中で、#が"に囲まれておらず、文法エラーを起こしておりますので、
jQuery('a[href^="#"]').click(function() {
に置き換えていただきますようお願いします。

最後に、Barba.jsを使う際に心がけていただきたい点がございます。

Barba.jsによるページ遷移を行った場合、
$(function(){〜 や window.onload など、
ページ読み込み完了時のイベントが発生しないため、
代わりに、Barba.Dispatcherを活用する仕組みになっております。

https://www.willstyle.co.jp/blog/1080/
上記ページの「イベント」をご参照ください。

ページ遷移後、スライダーなどのJavaScriptによる仕組みが
動作しない場合などがございましたら、
上記「Barba.Dispatcher」を利用した登録を
お試しいただきますようお願いします。

Answer

ECマスターズの田中です。

Chromeのデベロッパー ツールを見ると、
pjax.jsの１行目で「Barbaは定義されていません」という
エラーが発生している旨の表示がございます。

barba.min.jsを読み込む前にpjax.jsを
読み込んでいることが原因ですので、
barba.min.js用タグの直後にpjax.js用のタグを移動していただき、
改善されるかどうか、ご確認いただきますようお願いします。

Answer

位置を移動させてみましたが、特に変わりなく、
なぜかアニメーションがPC上でF12でスマホ表示からPC表示に
戻したときに動いていました……。

Answer

ECマスターズの田中です。

Chromeのデベロッパー ツールを見ると、
同じくpjax.jsの５行目で「querySelectorメソッドはありません」という
エラーが発生している旨の表示がございます。

そこから原因をたどると、
４行目で「sidebar」というクラスの要素を見つけようとして、
ページ内に見つからなかったことが原因となっております。

この部分にて、どのような動作を行おうとされていたのか、
改めてご確認いただきますようお願いします。

他にも、２箇所でJavaScriptエラーが発生しております。

エラーの内容はデベロッパー ツールのConsoleタブにて、
発生した箇所は、下記スクリーンショットの赤枠部分を
クリックすることでご確認いただくことができます。
https://ec-masters.gyazo.com/6f1438972e6e7c4d4452754522dfbbd9

エラーが発生すると、そこでJavaScriptの処理が止まり、
組み込んだはずの機能が動作しない、という現象につながります。
JavaScriptエラーが発生しない状態に修正していただいた上で、
改めて、正常に動作するかどうか、
ご確認いただきますようお願いします。

Answer

sidebarを読み込もうとしているエラーは直せたのですが、
script.jsで起こっているエラーは直そうとコードをいじってしまうと、
レスポンシブに切り替わったとき、メニューが出なくなってしまいます。
もう一つjqueryでエラーが起こっているようなのですが、ローカルにある
jqueryではないようでした…。
高速遷移は動いているようなのですが、CSSと遷移アニメーションだけ
読み込まれないようです。

別の方法でページ遷移の方は試したほうが良いのでしょうか。

テスト環境(gold)
https://www.rakuten.ne.jp/gold/tokeiten/feature/monitor-citizen/test.html

Answer

ECマスターズの田中です。

> script.jsで起こっているエラーは直そうとコードをいじってしまうと、
> レスポンシブに切り替わったとき、メニューが出なくなってしまいます。

現在、script.jsで発生しているエラーは
「FastClick」が見つからない、というものですが、
どのようにエラーを修正されておりますでしょうか。

ソースから察するに、

JS/jQueryでFastClick.jsを使ってスマホのclickイベントの300ms遅延をなくす
http://ithat.me/2016/11/06/js-jquery-smartphone-click-event-300ms-delay-fastclick

上記「FastClick.js」が読み込まれていないことが原因のため、
このライブラリを読み込むと解決するかと思いますが、
そうすると、メニューが出なくなる、ということでしょうか。

もう１つ発生しているエラーは、
ページ読み込み時の処理（window.onload）で
「id="wrap"」の要素のclassをクリアする処理をしようとして、
要素が見つからず、エラーの原因となっております。
こちらは、どのように修正しようとされましたでしょうか。

デベロッパー ツールにて、先述の赤枠部分をクリックされた後、
https://ec-masters.gyazo.com/bd684a6cccf4af474ae85d1806d7f34e
上記画像の赤枠部分、 {} となっているマークをクリックすることで
ソースが整形されて読みやすくなりますので、ご活用いただければ幸いです。

原因を把握していないエラーを残したままページ作りを行われますと、
新しい仕組みを導入しようとしてもまったく反映されない、
想定外の崩れ方をする、などのトラブルにつながりやすくなり、
トラブルが発生した場合の修正も難しくなります。

赤文字のエラーが出なくなった状態にした上で、
それでも遷移時にうまく動作しない場合に、
別の方法を導入すべきか、ご検討いただきますようお願いします。

Answer

申し訳ございません。
知識不足で、メニューを動かしているコードも巻き込んで
消してしまっていたのが原因でした。

エラーを改善してアップロードしましたが、特に変わりなく
遷移先ページのCSSが読み込まれない・アニメーションが発生しない
状態です。
ただローカル環境でのプレビューでは、アニメーションは
反映できてませんでしたがCSSは読み込めていました。

遷移先のページを再読み込みすればCSSもちゃんと読み込まれるのですが、
その際画像のようなエラーが発生しており、このエラーも原因の一つでしょうか？
知識不足で聞いてばかりになってしまい申し訳ございません。
ご教示していただければ幸いです。###HR######IMG0701ba004c7ffdef143d31d1df36c3cd0.jpegIMG0######BR###

Answer

ECマスターズの伊藤です。

頂いておりますご質問についてですが、
担当より、明日以降に回答させていただきます。

恐れ入りますが、ご回答まで今しばらくお待ちくださいますよう
お願いいたします。

Answer

いつもお世話になっております。
前回の回答でエラーを改善しても動かないと返信をしましたが、
CSSが読み込まれない問題は解決いたしました！
ただアニメーションの方が何度いじっても反映されないのは
そのままなので、アドバイスの方いただけたら幸いです。

Answer

ご回答ありがとうございます。
丁寧にご説明していただいたおかげで、なんとか
エラー修正やBarba.jsの理解が深まりました。

アニメーションが動かない問題以外はスムーズに動くようになりました！
ありがとうございます。
アドバイスいただいた通りに処理を行っても、アニメーションだけ
なにも変化がなく(私の見落としかもしれませんが)他のソースも見直してみます。

Answer

アニメーションが動かなかったのは、URLが相対パスじゃなったからでした！
ありがとうございます！