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

外部リンクが動作しないURLhttps//www.rakuten.ne.jp/gold/SHOP-URL/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/SHOP-URL/feature/monitor-citizen/js/script.jsにて記載されている $("nav a,#top_right a").on("click", function(t) { t.preventDefault(), $("body").addClass("loaded") })上記部分（に含まれるpreventDefaultメソッド）により、

Answer

jsの方を確認し、特に影響のないコードでしたので、削除しましたら外部リンクへ飛ぶようになりました。また、https//www.rakuten.ne.jp/gold/SHOP-URL/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/SHOP-URL/feature/monitor-citizen/index.htmlYahoo!ページhttps://shopping.geocities.jp/tokeiten/kikaku/monitor-citizen/index.html

Answer

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

Answer

ECマスターズの田中です。残念ながら、原因特定には至っていないのですが、安定したページ作りを行うにあたり、２点修正いただきたい点がございます。１点目ですが、Yahoo!ページの、notosansjp.cssのURLがhttp:// で始まっており、読み込みに影響が出ておりますのでhttps:// に修正をお願いします。２点目、こちらはどちらのページもなのですが、ソースを良く見たところ、タグの上に

タグが記載されていることがわかりました。こちら、タグの直後に移動していただきますようお願いします。タグはHTML文書であることを、タグは文書に関する情報を宣言する部分であることを、タグはページに実際に表示する内容であることを、それぞれ定義する、HTMLによる構造の大元となるタグです。タグの外に

タグや

タグを書くのは、文法違反となります。ブラウザは文法違反を見つけても、それらしく内部で解釈して、問題がないかのようにページを表示してくれますが、開発者ツールで確認すると、の上に書いたはずの

各タグがの中に強制的に移動されており、もともとタグ内に記載されているはずの

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

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

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

カテゴリーから探す