どうも。
WEBおじさんです。
激務とネタ切れですっかり更新がご無沙汰になっておりましたが、いいネタが見つかったので備忘録も兼ねて更新しようと思います。
さて、今回は私が現在請け負っている案件でクライアントから相談というか質問というか、なんかそんな感じで頂いたご意見から調査したものです。
そして、先に言っておきますが今回は制作案件ではないため、いつものデモはありません。
なので、少しわかりづらいかもしれませんが、できるだけわかりやすく書くつもりなのでご了承ください。
今回クライアントから頂いたご意見というのが、「スマホでスクロールしたときに少しの間コンテンツが消え、スクロール後ちょっと経つとページがちゃんと表示されるんだが、これはどうにかならないか？」ということでした。
正直、「コイツ何言ってんだ」と思いましたが、スマホでサイトを開き、スクロールしてみると、「なるほど、確かになんか再読み込みしているかのような感じで一瞬ページがなくなるな」という感じで症状が確認できました。
まぁでも、もう何年もスマホを使っているのでたまーにそういうサイトもあったりして、サイト制作の側から言うと「なんか裏側でJSとかが動いてたりして、その副作用的なものだなー」という感じで、サイトが表示されないわけじゃないので気になっていませんでしたが、やっぱ気になる人は気になるんだなーと思って、まぁ管理費ももらってるし今後のためにも調査、検証することにしました。
いい機会なので、私が調査・検証をする際の手順みたいなのを解説しながら今回のケースの解説をしていこうと思います。
※私の場合の手順ですので、全ての制作サイドの方々に当てはまるわけではありませんので、悪しからず。
【まず、症状が発生するデバイスを特定する】
これは非常に重要なことですね。一番大きな切り分けといっても過言ではありません。
どういうことかというと、スマホサイトの場合はiOSとandroidという2つのOSがあり、それぞれで違う動きをする場合があります。PCで例えるなら、WindowsとMacですね。
まぁ、WEBサイトの場合は実はOSではなくブラウザソフト側のケースが多かったりするので、OS自体にはあまり関係なかったりするのですが、まぁそれでもスマホの場合はPCよりは発生するケースが多かったりするので、一応最初に確認しておきます。
もちろん、ブラウザもiOSならSafari、Chrome、Firefox、androidならChromeとFirefoxくらいで表示の確認をします。
先ほども言いましたが、WEBサイトの場合、表示に関するプログラム言語はHTML、CSS、JSが主なので、ほとんどの場合は端末（OS）に対するバグではなく、対ブラウザのバグです。
今回もそうなんだろうと高を括っていたのですが、iPhoneでは症状が確認でき、なんとandroidでは症状が確認できないではありませんか！
なんと！これはラッキー！
なぜかというと、対象が一つに絞られたからです！
両方で発生する症状の場合、片方は治ったのに片方は治らない、というケースもあるからです！
これは棚ボタですね～！
とはいっても、症状が改善した後の最終チェックで両方の端末で動作チェックするんですけどねｗ
ということで、ブラウザチェックもしたところ、やはりiPhoneではすべてのブラウザで症状が確認でき、androidでは症状が発生しませんでした。
とりあえず、今回の検証対象端末はiPhoneということで進めていきます。
【次にクライアントサイドプログラムを削除した状態のHTMLを作ってサーバーへアップ、表示を確認する】
何のトラブルに対してもそうですが、トラブルが発生した際、原因を究明するために必ず必要になるのが【切り分け作業】です。
ハッキリ言ってこれが一番重要です。
プログラムを作る際に【設計】が重要なようにトラブル改善の為には【切り分け作業】が重要です。
では【切り分け作業】とは何か？
原因を探るために、大きなカテゴリでトラブルが発生するかどうかを切り落としていく作業です。
例えば、「Aの場合は症状が出るがBの場合は症状が出ない」という場合はAの状態でのことを考えておけばいいですよね？
さらに、Aの状態で且つ「Cの場合は症状が出ない」という場合はCの場合以外のことで検証をを行う、というように症状が発生する範囲を狭めていき、原因を特定するのです。
今回のような、バグに近いサイト表示に関する場合の検証の第一段階として、JSが干渉しない状態のHTMLのみのファイルを作成し、サーバーにアップして表示を確認します。
なぜかというと、サイト表示の際にバグの原因として考えられる多くのケースがJSなどのクライアントサイドのプログラムだからです。
今回のサイトはGTMとかコンバージョンタグとか、いろんな外部プログラムのタグも入っていたので、一旦それらも含め読み込んでいるJSを全て排除したHTMLファイルを作成し、サーバーにアップして表示を確認しました。
しかし改善されず。
絶対JSだと思っていた私は、不意の一撃を喰らいました。
「ヤバイ。どうしよう。」
【原因が特定できない場合は「あの方」。】
原因が特定できない場合、または原因が特定できても改善させる方法がわからない場合は、やはりあの方に頼らざるを得ません。
そう。Mr.Google！
Google先生に聞いてみました。
・・・返答あらず。ガーン。
「なにィー！Google先生は何でも知ってるのではなかったかー！」
検索するキーワードがいけないのかと思い、キーワードを変更しつつ、出てくる検索結果を10ページ目くらいまで目を皿のようにして見ていきましたが、なぜか症状改善のヒントすらなく。
【最終手段はアナログで。】
今回は特殊なケースとも言うべきですが、いくら調査をしても改善策がない、という場合はアナログ的な方法をとります。
できればやりたくはありません。
なぜなら、非常に時間がかかるからです。
でも、サイトページ表示のケースでJSが原因ではないという場合は意外と時間がかかりません。
なぜなら、HTML内でも切り分けができるからです。
HTMLの場合、私はまず、外部ファイルを削除し、テキストのみの表示にすることにします。それでも改善されなければHTMLを半分くらいずつ削って表示確認をします。
今回の場合、外部ファイルを削ったところで症状が改善されました！ということで、外部ファイルのどこかに原因があることがわかりました。
【原因がわかったら改善策へ一直線】
原因が何なのかが特定出来たらあとはその改善方法を調べたり検証して解決となります。
今回、原因はJS以外の外部ファイルの読み込みに原因があることが発覚したのでどの外部ファイルかを調査した結果、なんと！
原因は「GoogleFonts」だったのです。
あんなに絶対的に信頼していたGoogle先生のサービスに原因があるとは夢にも思わず。
さらに、このことが原因と分かって改善策を求めにGoogleで検索してもやはり改善策は出てこず。
今回の症状自体改善させようと思っていないのか、原因不明で諦めているのか、誰も何も記事にはしていないのです。
とりあえず、クライアントさんには原因を伝え、改善策の為に検証を始めました。
この当時、linkタグでGoogleフォントを読ませていたのですが、cssのimportで読み込ませるよう変更してみましたが変わらず。
そうなったらもうあと一つしか方法はありません。
フォントをDLし、同サーバーへアップしてフォントを読み込ませる。正直この方法は使いたくなかったのですが、これしかないのでやってみたところ、初回の読み込み時、テキストの表示が少し遅れますがスクロール時の症状が改善されました。
クライアントへ状況の報告をし、スクロール時の症状の改善の方がイヤだということで、今回のトラブルシューティングは完了。
ということで、一旦終息を迎えた今回のトラブル。
もう一度、同じ症状で苦しんでいる方々の為にお浚いします。
「iPhoneでスクロールした際に読み込み時のように一瞬表示がなくなり、ちょっとすると読み込まれる」という症状が出る場合は「GoogleFontsを使っていないか」をまず確認してください。
GoogleFontsを使っていない場合でも恐らく原因は外部ファイルの読み込みにあると思いますので、その辺を集中的に調査・検証していけば改善されるはずです。頑張ってみてください。
ということで、今回はトラブルシューティング講座みたいな感じでしたね。お客さんがいる場合はこういうの非常に大事ですので、参考にしてくださいねｗ
ということで、また。