pjaxを使用したときのアンカーリンクについて

Question

いつもお世話になっております。

何度もpjaxについて質問していて大変恐縮ではあるのですが、
遷移先ページのアンカーリンクがうまくいかず、前回解決していただいた
絞り込みとスクロールに関しても、スクロールが指定通りのところに動きません。
https://www.willstyle.co.jp/blog/1722/
↑こちらの記事を参考に試してみたのですが、jsの入れ方が良くなかったようで、
エラーが起こって遷移時のアニメーションすら動かなくなってしまいました。

jsを元に戻してアップロードはしているのですが、キャッシュをクリアしても
戻っておらずエラーが起こったまま……
楽天goldはCSSとJSは反映に遅れがあるのでしょうか…？

ご教示していただきたいです。

Accepted Answer

ECマスターズの田中です。

> 別のテストページでも見てみたところ、
> Barba.Dispatcher.on("newPageReady", function(){
> をいれているところすべてにエラーがでており、改めて
> 作った特集ページを見てみますと、同じように
> Barba.Dispatcher.on("newPageReady", function(){
> でエラーが出ておりました。

こちらは、
「xc-monitor.html」や「wicca-monitor.html」の
ことでよろしいでしょうか。

これらのページで
「Barba is not defined」のエラーが出ているのは、
Barba.Dispatcherなどを利用する前に
barba.min.jsが読み込まれていないことが原因です。

ページの末尾に移動されているようですので、
差し支えなければ、
他のJavaScriptでBarbaを利用する前に
barba.min.js用のscriptタグをご設置いただきますようお願いします。

こちらのエラーを解決した上で、
改めて、トリプル上での動作をご確認いただきますようお願いします。

Answer

ECマスターズの田中です。

仕様が公開されていないため、あくまでも体感ですが、
楽天GOLDには、アップロードされたファイルを
サーバ側でキャッシュする仕組みが入っており、
特にJSファイルの反映は遅れがちになる印象がございます。

反映されない場合は、JSファイルのURLの末尾に

（前略）/script.js?2
（前略）/script.js?3
（前略）/script.js?200109-01

など、任意のパラメータを追記して、
今までアクセスしたことのない新しいURLとしてアクセスすると
最新の情報を読み込むことができますので、
scriptタグ内のURLを書き換えてお試しいただければ幸いです。

エラーの原因特定は、実際に表示されている様子を確認する必要がございますので、
エラーの確認できるページをご用意の上、
URLをお知らせいただきますようお願いします。

Answer

ご回答ありがとうございます！
絞り込み動作がうまく反映されなかったのは反映の遅れが原因でした。

また、縦メニューのtopに外部リンクを張っているのですが、外部リンクに飛びません……。
同じページ内の商品へ飛ぶ外部リンクには飛ぶので、メニューバーに貼った
外部リンクのみ飛ばない原因が分かりません。
URLやJSを見直しましたが特に間違っているようなところは見当たらず…。
いろいろな動作を詰めすぎて動作されていないのでしょうか？

Answer

外部リンクが動作しないURL
https://www.rakuten.ne.jp/gold/tokeiten/feature/monitor-citizen/test.html

Answer

ECマスターズの田中です。

test.htmlをChromeで開いて
デベロッパー ツールのConsoleを開くと、

Uncaught ReferenceError: element is not defined
    at Object. (pjax.js:70)

という赤文字のエラーが表示されており、
「pjax.js:70」をクリックすると、

if (!element.href.startsWith(site_url)) {
    element.setAttribute('target','_blank');
    return false;
}

を実行しようとしてエラーが発生しておりました。

エラーは「elementは定義されていません」という内容です。
本来であれば、ページ内すべてのタグに対して
繰り返し処理を行うような記述があるはずなのですが、
その部分が抜け落ちているように見受けられます。

改めて、この部分の記述について、ご確認いただきますようお願いします。

Answer

一度エラーをない状態に戻しまして、動作を確認したところ
やはりメニューの外部リンクのみ飛ばないようになっていました。
メニューだけ特別なないかを入れた覚えはないので、CSSが悪うのかJSが
ぬかっているのか分かりません…。
 target="_blank"を入れれば外部リンクに飛んでくれる認識だったのですが、
pjaxを使う場合は追記でなにかしないといけないのでしょうか。

Answer

ECマスターズの田中です。

test.htmlの構造を確認しましたところ、
https://www.rakuten.ne.jp/gold/tokeiten/feature/monitor-citizen/js/script.js
にて記載されている

        $("nav a,#top_right a").on("click", function(t) {
            t.preventDefault(),
            $("body").addClass("loaded")
        })

上記部分（に含まれるpreventDefaultメソッド）により、
タグ内のタグは、本来のタグとしての動作が無効化されており、
リンクとして動作させたい場合は、その動作をJavaScriptで定義する必要があります。

タグ内に書かれたページ内リンク（wicca-monitor.htmlの #mo など）は、
JavaScriptによって動作が定義されているため動作しております。
サイト内リンク（xc-monitor.htmlなど）が動作している理由については
突き止められなかったのですが、
Barba.js本来の動作に関連するものと考えられます。

この記述を利用しているのは、どの仕組みになりますでしょうか。
Barba.js以外だと思うのですが、一度ご確認いただきますようお願いします。

Answer

jsの方を確認し、特に影響のないコードでしたので、削除しましたら
外部リンクへ飛ぶようになりました。

また、https://www.rakuten.ne.jp/gold/tokeiten/feature/monitor-citizen/wicca-monitor.html
のscrt-coverでカーテンのように開くアニメーションをCSSで見様見真似で記述してみたのですが
真っ白なまま動かない状態です…。
動作のイメージはコチラを参考に↓
https://sakic.jp/demo/jquery/scroll-curtain-animation/

CSSのみで動くアニメーションで実装したかったのですが、難しいでしょうか。

Answer

ECマスターズの伊藤です。

> CSSのみで動くアニメーションで実装したかったのですが、難しいでしょうか。

参考サイトを拝見したところ

要素が画面の上から300pxのところまで
スクロールされたら、shouクラスを追加することで
アニメーションを実行

といった形になっています。

同様に、スクロールされたときにアニメーションを実行
したいというようであれば

アニメーションを実行をする条件が
jsを使用しないと判定できないため
CSSのみでは、実装していただくことができません。

Answer

ご回答の方ありがとうございます！
jsでアニメーションを追加します！

また、楽天goldで作成したWEBページをYahoo!用にも作成したのですが、
高速遷移がされず、普通に読み込みをされるのですが、変更したところが楽天URLのものを
Yahoo!URLに変更しただけなので、なぜYahoo!の方では高速遷移が効かないのか分かりません。
楽天goldとYahoo!では反映の仕組みが違うのでしょうか？

楽天ページ
https://www.rakuten.ne.jp/gold/tokeiten/feature/monitor-citizen/index.html
Yahoo!ページ
https://shopping.geocities.jp/tokeiten/kikaku/monitor-citizen/index.html

Answer

ECマスターズの田中です。

いただいたページを確認したところ、
確かにほぼ同等のソースが掲載されているようです。
原因を詳しく調査の上、改めてご返信いたしますので
今しばらくお待ちいただきますようお願いします。

Answer

ECマスターズの田中です。

残念ながら、原因特定には至っていないのですが、
安定したページ作りを行うにあたり、
２点修正いただきたい点がございます。

１点目ですが、
Yahoo!ページの、notosansjp.cssのURLが
http:// で始まっており、読み込みに影響が出ておりますので
https:// に修正をお願いします。

２点目、こちらはどちらのページもなのですが、
ソースを良く見たところ、
タグの上に




タグが記載されていることがわかりました。
こちら、タグの直後に移動していただきますようお願いします。

タグはHTML文書であることを、
タグは文書に関する情報を宣言する部分であることを、
タグはページに実際に表示する内容であることを、
それぞれ定義する、HTMLによる構造の大元となるタグです。
タグの外にタグやタグを書くのは、文法違反となります。

ブラウザは文法違反を見つけても、
それらしく内部で解釈して、問題がないかのように
ページを表示してくれますが、

開発者ツールで確認すると、
の上に書いたはずの各タグが
の中に強制的に移動されており、
もともとタグ内に記載されているはずの各タグも
つられてタグの中に移動されていることがおわかりいただけると思います。
https://ec-masters.gyazo.com/fc966d1ec529839cb56c396ab2d22fe1

Barba.jsとしても、対象が想定外の場所にかかれておりますので、
何らかの影響によって動作不良が起こる可能性もございます。
Barba.jsに限らず、導入されている他のプラグイン群も然りです。

この構造を修正することで、ページ遷移が正しく動作する可能性は低いかと思いますが、
正しいタグ構造のもと、問題点をなるべく見つけやすくするという観点からも、




この２つのタグを、実際の表示内容を示すタグの直後に
移動していただきますよう、お願いいたします。
（xc-monitor.htmlなど、Barba.jsを利用する他のページも同様です）

Answer

ありがとうございます。
ご指摘いただいた箇所を修正しまして、Yahoo!の方を再度確認しましたが
高速遷移がされておらず、また、人物ごとに絞り込むsortも反応しませんでした。
楽天の方は問題なく動いております。
pjax自体Yahoo!トリプルと相性が良くないのでしょうか。

Answer

ECマスターズの田中です。

楽天GOLD然り、Yahoo!トリプル然り、
HTMLの中に独自のソースを仕込む仕様となっており、
Yahoo!トリプル用のソースが原因で動作が停止している、
という可能性はございます。

いただいたページでは複雑な仕組みが複数同時に動作しており、
原因の調査が非常に困難となっておりますので、
回答まで今しばらくお時間をいただきますよう、
よろしくお願いいたします。

かとうさんでも、
Barba.jsのみを導入したテストページをご用意いただくなど、
単純な構造で動作するかどうか、
動作する場合は、それに各種仕組みを肉付けするとどうなっていくか、
といった形で、ご確認いただければ幸いです。

Answer

ありがとうございます。
別のテストページでも見てみたところ、
Barba.Dispatcher.on("newPageReady", function(){
をいれているところすべてにエラーがでており、改めて
作った特集ページを見てみますと、同じように
Barba.Dispatcher.on("newPageReady", function(){
でエラーが出ておりました。

楽天の方ではなかったので、Yahoo!事態Barbaがあまりよろしくないものでしょうか。
大変お手数おかけしますが、よろしくお願いいたします。

Answer

タグ設置を変更しましたらエラーの方がなくなりました。
長い時間質問に答えてくださりありがとうございます！