2014-10-27

Bloggerスマホページのスワイプ挙動を無効化する

Bloggerのスマホページは標準でスワイプ機能があります。
どういう機能かといいますと、、

  • 左スワイプで1つ前の投稿を表示
  • 右スワイプで1つ先の投稿を表示
この挙動は便利機能として実装されているらしいのですが、表示しているコンテンツによっては全部表示されないのでスワイプして横スクロールをしたいときに困ります。

ということで無効化してみようと思います。



あまり良くないやり方


多くの方はすでにやり方を記載していますが、多くはjavascriptでスワイプアクションを実施するイベントリスナーを無効化するというもの。

(例)
<b:if cond='data:blog.isMobile'>
<script type='text/javascript'>
(function() {
 window.addEventListener = null;
})()
</script>
<style>
canvas {display: none;}
</style>
</b:if>

これの何がダメかというと、全てのイベントリスナーを無効化しているので、今後自分のページに何かしらjavascriptのプラグインのようなものを設置して動きのあるページにしたいときに恐らく動かないです・・・・

まあ、今後そういうことは一切しないことがわかっている前提であれば上記のやり方で問題ありません。

多少リスクの少ないやり方


<b:if cond='data:blog.isMobile'>
<script type='text/javascript'>
(function() {
  var ele = document.getElementById("main");
  ele.addEventListener = null;
})()
</script>
</b:if>

イベントリスナーを無効化する要素を"main"配下のみに絞っています。
でも"main"に何かしらイベントアクションで動きあることをしたいときにやはりうまくいきません。


現時点で最もリスクの少なそうと思われるやり方



<div class='blog-pager' id='blog-pager'>タグにある_blog-pager-newer-linkという記載と_blog-pager-older-linkという部分を適当に違う名前にして処理が動かないようにします。
ここでは_blog-pager-newer-link_dummyと_blog-pager-older-link_dummyというふうにしています。

javascriptコンソールエラーも出ていないようなので一旦これで様子見とします。
(一番いいのはBlogger公式がこの機能のOn/Offを設定できるよう対応してくれるのがよいのですが・・・)