Ratchet試してみた(3) Push.jsでSPAっぽく

RatchetはPush.jsを利用して、Ajax+History APIでのページ遷移を簡単に利用できます。つまりSPAっぽいことが簡単にできるわけです。

• 参考1: Components · Ratchet
• 参考2(こちらのほうが詳しい): Ratchet's Push.Js - Prototyping Mobile Apps with Multiple Screens

Push.jsを使ってとありますが、Push.jsはratchet.jsに含まれているので、特に準備もなく使えます。

使い方

とりあえず遷移元と遷移先のHTMLファイルを用意しておきます。ここではそれぞれindex.htmlとhoge.htmlとします。

まず遷移元のファイルを作ります。遷移先へ移るためにa要素を書くわけですが、そこにdata-transition属性を追加すると、SPAっぽい画面遷移になります。値はfade, slide-in, slide-outの3つで、選択したものが遷移時のエフェクトになります。例えばこんな感じです。

<div class="content">
  <div class="card">
    <ul class="table-view">
      <li class="table-view-cell">
        <a class="navigate-right" href="hoge.html" data-transition="slide-in">
          hogeへ
        </a>
      </li>
    </ul>
  </div>
</div>

こうなりました(headerは別途つけました)

これでクリックすると、右にスライドしながら遷移します。通信の中身を見てみると

index.htmlからページ遷移無くhoge.htmlを読んでいることがわかります。楽ちんですね！

せっかくなので、hoge.htmlからindex.htmlへ戻るボタンも作りましょう。headerの左にボタンを付けて、data-transitionはslide-outにしてみました。

<header class="bar bar-nav">
  <a href="index.html" data-transition="slide-out">
    <button class="btn btn-link btn-nav pull-left">
      <span class="icon icon-left-nav"></span>
      Index
    </button>
  </a>
  <h1 class="title">hogehoge</h1>
</header>

それっぽいのができました。

と、えらく簡単にSPAっぽいものを作ることができます。

ちなみに、Push.jsによるチェックをしたくないときは、data-ignore属性の値をpushとしておくとよいです。

<a href="http://www.google.com" data-ignore="push">Google<a>

という感じで、ささっとネイティブっぽい画面を作りたい場合に、Ratchetは結構使えるんじゃないかと思います。