外部CSSファイルの有無でiPadでの操作性に相違があるかを検証

更新
2012年01月04日(金)

iPadでの操作性や表示不具合の改善を模索している記録第6回目です。当サイト作者が作成した次のテンプレートについてです。

概要

  1. 次のページに対する返答です。

  2. 2012年1月4日追記:質問者の返答放棄により未解決のまま終結しました。

    テンプレートお借りしていましたが、変更することにいたしました。
    ありがとうございました。
    2013年01月04日(金) 13:15 TAKAKO

原因特定に向けて

サンプルページ

  1. キャプチャ画像や報告いただいた内容を元に、原因かもしれないと思う部分に変更を加えました。以下にいくつかのケースを挙げます。外部CSSなしのページはCSSによる装飾がないので、ページが崩れているように見えて正常です。

    1. case 1 (vege、画像サーバ、外部CSSなし)
    2. case 2 (vege、unmei.in、外部CSSあり)
    3. case 3 (vege、unmei.in、外部CSSなし)
    4. case 4 (eye、画像サーバ、外部CSSなし)
    5. case 5 (eye、画像サーバ、外部CSS/主要JSなし)

質問

  1. 2chのログによると、iPadでの追尾広告は2012年12月6日ごろから表示され始めたようですが、この認識で合っていますか。

  2. 当テンプレートはいつから使用されていますか。

  3. 当テンプレート使用開始当初からiPadでの操作性が今のような状況でしたか。

  4. それとも、当テンプレート使用開始当初は問題がなかったが、しばらくしてiPadでの操作性がよくなくなったのですか。

  5. もし途中からiPadでの操作性がよくなくなったのであれば、その前後でなんらかのプラグインを追加したとかテンプレートを編集したりしましたか。

  6. ios5.1.1とのことですが、iOS6にしない理由は何ですか。

  7. 以下の展開を理解できません。他サイトの追尾状況をたずねているのに、なぜ当サイトの状況を返答するのですか。再三記載しているとおり、当サイトには今回の件に関してなんの対処もしていません。

    >記事内でリンクしている他サイトの追尾状況はどうですか。
    試してみました。
    そのうちの一例です。
    下画はカスタムプレートのサイトマップをiPadで開いた時です。
  8. 再度たずねます。記事内でリンクしている他サイト(http://hamusoku.com/)のパソコン版ページの追尾状況はどうですか。iPod touch 5ではスクロールが止まってから所定の場所に移動しますが、iPadやiPhoneではどうですか。

  9. 公式テンプレートを試したのは1つだけですか。当テンプレートと同じような状況になるテンプレートはありませんでしたか。

今までの経緯まとめ

  1. 操作性が悪くなっている原因はJavaScriptのどれかか、iPadのバグ、もしくはその組み合わせです。理由は次のとおりです。

    • JSを無効にすると操作性が快適になる
    • iPad以外では問題がない
  2. 愛猫チェリッシュにamazonウィジェットを設置すると操作性が悪くなりました。よって、amazonウィジェットと何かが競合していると仮定しています。その競合候補は次のとおりでした。

    • iPadで表示されるfc2追尾広告
    • iPad(iOS5)のバグ
    • 当テンプレートのCSS
  3. fc2公式テンプレートでは、amazonウィジェットを設置しても操作性に問題がないとのことで、iPadで表示されるfc2追尾広告は候補から外れ、候補は2つになりました。

  4. iPhoneとiPod touch 5では、記事本文エリアでの操作性が良くなかったので、当該部分に絞ってCSSを変更したところたまたま改善されました。しかし、iPadでは様々な場所を検証いただきましたが、場所による相違がなさそうです。よって、絞込みが困難です。

  5. iPhoneとiPod touch 5ではCSSの変更で操作性の改善ができたので、iPadでも同じような方法で対処できると考えました。しかし、外部CSSファイルの書き方次第で操作性が変わるかどうかをシラミ潰し的に検証する前に、外部CSSファイルの有無でamazonウィジェットが操作性を阻害するかどうかを調べた方がよさそうです。そのためにCSSファイルを読み込まないページの操作性を検証します(上記サンプルページ)。これにより、当テンプレートのCSSとamazonウィジェットの相性について分かります。

  6. 外部CSSファイルの有無で操作性が変わらないなら、CSSではない他の部分(HTMLかJS)と競合していると判明します。

  7. fc2blog用の画像サーバにサンプルページをアップロードするだけでなく、作者の別サイトのサーバにもアップロードしました。アップロードするサーバによってページの操作性が変わるとは思えませんが、念のため検証します。fc2blog用の画像サーバにHTMLファイルをアップロードした場合、なんらかのJSなどが勝手に挿入されているかもしれないので、その可能性を考慮しています。

  8. 以下の部分から、amazonウィジェットというよりもiPadのバグが原因な気がします(今のところ)。iPadのバグが原因でamazonウィジェットが想定外の挙動をし、その結果愛猫チェリッシュではamazonウィジェットが原因のように見えているのかもしれません(あくまでも推測)。

    両サイドバーのプロフィール・ダイエット★マメグラフ・
    楽天/アマゾン・プロフの各プラグインを全て非表示にしてアップして
    iPadにて閲覧確認してみました。
    スクロール / フリック / ピンチイン・アウト は引っ掛かりがありスムーズな動作は見られません
  9. よって、AppleにiPadの操作性がどういう場合に悪くなるのかを問合せいただき、原因が判明すればそれを当方に連絡いただければ解決出来る可能性が高まります。

  10. ちなみに書いておくと、iPhoneやiPod touch5で記事本文エリアに0.5秒程度の引っかかりがあったのは、当テンプレートに問題があったのではなく、iPhoneなどがCSSを正しく反映できていなかったからです。iPhoneなどは一部のCSSを解釈できないので、その部分を省いたところiPhoneなどでの引っかかりが解消されました。

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)