画像をスワイプでスライドさせる「swipe.js」が使いやすくてスマートフォン向け。

まずはここにスマートフォンでアクセスしてみてください。



サイト上部の写真を左側にスワイプすると、隠れていた画像に切り替わります。

これは「swipe.js」（http://swipejs.com/）というライブラリを使用しています。

読み込みと設定は以下のように行います。

<script src="swipe.js"></script>
<script>
new Swipe(document.getElementById('slider'));
</script>

あとは、ページ内にこんな感じで設置します。

<div id='slider'>
    <ul>
        <li style='display:block'><img src="/images/top-001.jpg"></li>
        <li style='display:none'><img src="/images/top-002.jpg"></li>
        <li style='display:none'><img src="/images/top-003.jpg"></li>
    </ul>
</div>

簡単すぎて鼻血でそう…(ﾟ∀ﾟ)


一応、縦でも横でも拡大して表示されるようにwidthをパーセント指定してあげたりとか、marginやpaddingなどのCSS設定をしてあげる必要はありますが、ライブラリの組み込み自体はとても簡単です。


本家のデモでは

    #position {
      text-align:center;
      font-size:27px;
      line-height:1.3;
      color:#697279;
      display:block;
      position:absolute;
      top:0;
      left:50%;
      margin-left:-75px;
      width:150px;
    }
      #position em {
        display:inline-block;
        padding:0 3px;
        font-style:normal;
        text-shadow: 0 -1px 0 rgba(0,0,0,.35);
        font-family:sans-serif;
      }
      #position em.on {
        color:#fff;
      }

というCSS設定と

<nav>
    <a href='#' id='prev' onclick='slider.prev();return false;'><em>prev</em></a>
    <span id='position'><em class='on'>＆bull;</em><em>&＆bull;</em><em>＆bull;</em></span>
    <a href='#' id='next' onclick='slider.next();return false;'><em>next</em></a>
</nav>

というコードで、マウスクリックによるスライダーとしての機能も持たせてます。
軽量だし、単体で動くのでわりと組み込みやすいんじゃないでしょうか。


ただ、GoogleMAP-APIとの相性がすこぶる悪い。
一緒のページに組み込んだら、反応が鈍くなって大変でした。

一応、Google-MAPを単体で別ページに…という表示方法にして回避しましたが。


サンプルページは個人的にこんな感じの情報サイトがあったらいいな～ということで作成したものです。
今年はこれをベースに、スマホ向けの色々な情報サービスをリリースしていこうかと思ってます。


月額の広告収入モデルということを考えると、まずは客単価の高いマーケットからですかね。
スマホで中古車を検索するかどうかはわかりませんが、やっぱり単価が高いと言えばクルマ。

あとは不動産関係とか。
今回のライブラリはスワイプで室内をぐるりと見渡せる…という使い方ができますね。

飲食店は、夜関係じゃないと客単価が安いので難しそう。


EC-CUBEもスマホ対応しているし、組み合わせることでグルーポンみたいなクーポン系サイトも出来ますね。


今年は（も？）忙しくなりそうな悪寒…(´・ω・)


つか、いまだにスワイプとフリックの違いが納得いかない。