Seesaaブログでスマホのスライドショーを実装

こんにちは! Benです。

前回、Seesaaブログでパソコン版のスライドショーを実装するときの留意点を書きましたが、スマホ版はそのままでは行きませんでした。あれから色々と調べて解析したところ、スマホでもできるようになりました。その要点は以下のとおりです。
  • スマホページは広告表示用にjQueryを使用している(つまりすでに読みこんでいる)
  • この広告の常に画面下部に表示され、画面を動かすたびにアニメーション(スクリプト)が起動する
  • 結果として、スクリプト同士がぶつかりスライドショーが起動しない

20160207a.PNG

パソコン版はこのように普通にコードもスライドショーも表示されます。ですが、スマホはすでにjQueryが読み込まれて頻繁に実行されています。

20160207b.PNG
グーグルクロームの開発者ツールを使ってみてみました。予期せぬエラーが生じてスクリプトが実行されていないようです。ちなみにFireFoxでもこのような開発者向けのツールがあり、WEBページのデバッグなどにとっても重宝しています。

20160207e.PNG
エラーが発生した位置を調べてみたら、何の変哲もない全く問題ないところでした。何回か実行してその位置が微妙にずれることから、そこがエラーの原因でなく、その場所に差し掛かった時に他との兼ね合いで止まってしまったのでは。と推察しました。

20160207c.PNG
そこで、スマホ版のHTMLソースを確認すると、最後のフッターのところにありました。蛍光ペンで示したjQueryの読み込みです。そのあとでそれを使ったスクリプトも読まれているので、この処理と衝突しているのでしょう。

20160207d.PNG
このようなスマホ版の動作環境をPCで確認したり、スマホ版のソースを確認するには、Chromeの拡張機能であるUser Agent Switcherが便利です。単にレスポンシブデザインの確認でしたら、ブラウザの幅を狭めればできますが、スマホ専用ページの確認は「私はスマホよ!」とWEBサーバをだます必要があります。



 
衝突を回避する方法をネットで調べ、その方法を利用しました。ご覧のような記述にして衝突を回避しています。$jはjでなくても構いません。ちなみに今回バッティングする広告はかなり頻繁にいろんなタイミングで実行されるので、どうしてもスライドショーが途中で止まってしまうこともありますが、左右にフリックすればちゃんと切り替わります。

20160207f.PNG
その結果、ご覧のようにスマホでも見ることができるようになりました。画像は先ほどのChromeのスマホ拡張機能ですが、かなり忠実に再現されていて驚きました。バッティングしていた広告までしっかりと出てきます。ちなみに今はjsファイルの読み込みを全てbody内で行っています。確認のため、下にスライドショーを表示します。うまく表示されますように!
(2016.02.07 23:35 追記) 午前中の書きかけから公開していたようです。 途中の記事を閲覧されたかた、すみませんm(__)m 午後10時過ぎに本記事は完成しました。

この記事へのコメント


この記事へのトラックバック