Horizon雑記HOMEブログ運営この記事WordPressのページキャッシュのせいでis_mobile()を使った分岐が死んでいた2019/12/201+1!55+1!自分でis_mobile()wp_is_mobile()などを使ってWordPressをカスタマイズしている人はちょっと注意した方がいいかもしれません。ページキャッシュによって、意図したデバイスでの分岐が得られなくなっている可能性がかなりあるからです。この発見に至る経緯、原因と対策についてまとめます。くじあるとき些細な異常を見つけたなにが起きている?対策は?AdSenseだけ困ったおわりにあるとき些細な異常を見つけたスマホでなんとなくこのブログをチェックしていたとき、オリジナルで作った専用メニューがちゃんと動作しないことがあるのを発見。JSはちゃんと読み込まれている、PCのデベロッパーツールだとちゃんと動く、たまに動くことがある、、、などでもう「???」です。ページネーションも意図した表示になっていないことにも気付きました。PCとスマホで表示を変えているんですが、自分でfunctions.phpに書いて作ったものなので「アルゴリズム間違ってたのかな?」とか思って直す→その場で確認するとOK!→翌日確認するとまたダメ→規則性不明→「???」という感じ。どちらの実装にもis_mobile()関数を使ってデバイスの分岐を行っているという共通点がありました。以前、サーバー引っ越しをしたときに高速化やキャッシュ系機能のまとめを行ったのですが、このときに「ページキャッシュ用のプラグイン」も導入していました。【Xサーバー/Cocoon】キャッシュ系高速化機能の兼ね合いについてまとめてみたエックスサーバーとCocoonに環境が移行されるのを機に、キャッシュプラグインについての理解と高速化機能全体の整理を行いました。そのときのメモをまとめています。どちらかだけの利用の場合でもお役に立てる。milmemo.netゆえに立てた仮説はis_mobile()によってPC(スマホ)で表示されたHTMLがそのままキャッシュされ、PHPの分岐を通る前にそのHTMLが出力されてしまっているとなりました。実際のところ、is_mobile()を削除しなくても手動でキャッシュを削除した直後は意図した表示になっていました。これが決め手で原因を確信。なにが起きている?なにが起こっているのか整理します。分かっているのは以下。is_mobile()の分岐内にいても、JavaScriptは読み込まれるどのページでどうキャッシュが使われるかは不規則(に見える)スマホ側でPC用の表示になってしまうことはあるが、PCでスマホ用の表示になったことは一度も確認できていない上2つはどうでもいいんだけど、3つめはポイントです。Cache」の設定を見た感じどうやらビンゴ。そもそも無料版ではここはONにできない。いうかそもそもスマホのときはキャッシュで表示されてなかったんかい!まあ結果的に解決したので気にしない気にしない...。対策は?対策は大きく2通りに分かれます。ページキャッシュをやめるis_mobile()をやめる当然です。高速化の費用対効果からページキャッシュは外せない。なるとis_mobile()を使うのを全面的にやめるしかないです。前述した2つの異常はCSSで簡単に対応可能だったのであっさり削除できました。PC時に不要なJSが1つ多くなるけど、誤差だよ誤差。レポートのためを思って同じ場所でもPC用とスマホ用で広告ユニットを分けていました。今は整理中なので命名規則がめちゃくちゃです。単純にそれぞれに適したユニットに出し分けたいとも思っていた。最近のAdSenseチームの取り組みを見ると「できる限りサイト運営者が選べる広告の種類数は減らし、Googleが極力レスポンシブで勝手に出稿する」みたいな印象を受けます。いうわけで、「いい機会だし」と思ってAdSenseはPCもスマホも1つにまとめました。久しぶりに新しい広告を作ったけど、ほぼレスポンシブの設定しかなくて設定項目もめちゃ少ない。2019年はAdSenseのアップデートが盛んでしたね。公式ヘルプを見てもなるべくレスポンシブから固定設定に変えないことが推奨されているし、これで良さそう。あと注意点として、AdSenseにdisplay:none;などのCSSをあてるのはポリシー違反になるので気をつけてください。レスポンシブ対応で表示を変えるときは決まった対応が必要です。参考→AdSenseヘルプフォーラムおわりに「ただのif文を使った分岐なのに、それだけでページキャッシュを使うと破綻するなんて、そんなことあり得る?」と激しく思ったんですが、そもそも表示するたびに表示が変わるような分岐ってis_mobile()以外にはないという事実に改めて気付き、驚きました。テーマファイルでも死ぬほど使われているif文ですが、それらは毎回分岐結果が変わるものではありません。設定の値を取得する現在のページの種別を取得するなどなど、だいたいはこんなところ。定期的なキャッシュ更新が行われていれば全く問題がないんですよね。Cacheでも記事更新や投稿のたびにキャッシュは自動削除されるようになっています。昔「レスポンシブデザインをis_mobile()で」という間違いだらけの作業を反省したこともあったのに、またこいつに困らされるとは...。理由は後ろで追記しています。これはすごく異端児な方法で、ネット上を検索してみてもやっている人なんていなかったので参考になるかは分からな...milmemo.net今後この関数を使うことはないなという気がしています。Cacheの設定で「モバイルのときはキャッシュで表示しない」という設定があったので、そこにチェックを入れればたぶん解決していた...。隣なのになぜ気付かなかった...。いうのは根本的に解決したほうが将来的にも良いはずなので、今回は良かったはずです。うん、そう思おう()みるみ本業は大手電機メーカーの技術職。仕事を楽しみつつ、好きなことだけを書いているこのブログでも収入を得ています。趣旨は「オリジナリティ」。僕以外の人では絶対に書けないであろう、独自性のある要らねぇ情報をお届けしています。当ブログ「みるめも」にいらした方は、ぜひ「はじめましての10記事」からどうぞ。コメントをキャンセルメールアドレスが公開されることはありません。メールアドレスは公開されませんのでご安心ください(外部アカウントとのアバター画像連携に利用されています。その他プライバシーポリシーはこちら)。名前とメールアドレスは必須項目ではありませんが、お名前はぜひご記入いただけると嬉しいです。コメントはこちらで承認の作業を行うまでは表示されません。コメント名前メールアドレスサイトみるみ大手ホワイト電機メーカーに就職するも、「ひょっとして僕の人生はこのまま終わるのか...?」と絶望。文章を書くのが大好きだったのでとりあえずブログを開始。言いながら仕事自体は楽しんでやっているので、「技術職」というカテゴリも用意しつつ色んなネタを扱ってます。誰も書かないような、オリジナリティと独自性のあるテーマを大切にしています。Horizon8雑記9Amazonのほしいものリストたった1つお水だけ登録してます。このお恵みでもっとブログ頑張ります。Harpについて老...【打楽器をひたすら紹介!】吹奏楽でよく使われる打楽器を超主観的に紹介してみる中澤建治2020/02/23こんばんは。タスカーに興味をもっています。