Yeoman で Ratchet を試してみた

Ratchet とは？

モバイルアプリ向けのフレームワークです。フレームワークといっても、MVC的なものではなく、jQuery Mobile のようなUIのフレームワークになっていて、Angular や Backbone などと組み合わせて使う事も出来ます。

もともとは、プロトタイピング用のツールとしてスタートしたようですが、Ratchet 2.0 になって、Bootstrap プロジェクトの一部となり、今後の発展が期待されるプロジェクトです。Bootstrap のプロジェクトの一部といいつつ、Bootstrap を使っているわけではなく、また less じゃなくて sass をベースにしてるみたい。

• Ratchet 本家
• Ratchet GitHub
• Introducing Ratchet 2
• Ratchetが真のフレームワークに，新たなホスト先も
• Ratchetを使ってネティブアプリに迫るwebアプリを作る

フットプリントは比較的小さく ratchet 2.0.2 では、下記のようなサイズになっています。
iOS とか Android に見た目をあわせようとしなければ、ratchet.js と ratchet.css だけで動作します。

ファイル	normal(bytes)	min(bytes)
ratchet.js	25577	10691
ratchet.css	24309	19595
ratchet-theme-android.css	12451	10333
ratchet-theme-ios.css	11851	9886

Yeoman で Ratchet

Ratchet そのものも小さくて比較的覚えやすく使いやすいフレームワークみたいなんですが、なんだかんだと開発環境を整備するのも面倒です。で、Yeoman。嬉しいことに、最新の Ratchet 2.0.2 に対応した generator があるようです。

• generator-ratchet https://github.com/abhishekoza/generator-ratchet

さっそく使ってみましょう。

$ npm install -g generator-ratchet
$ yo ratchet

Macbook Air で試したところ、なんだかターミナル画面が乱れて、mocha のあたりで止まってしまいます。ただ、yo ratchet の直後に yo webapp でよく見る 下記の質問が表示されていたので、

[?] Would you like to sass for your css? (y/N)

y って答えると bower.json が Conflict してるとか言われましたw なんじゃらほい？

で、これが通ったら… あれ？　なんだか普通の generator と違う。。 test とかいうディレクトリが勝手に出来てます… とりあえず test というディレクトリの下に、いろいろ出来ているようなので、test下に移動したうえで、下記を実行…

$ bower install
$ npm install

んで、下記を実行すると、ブラウザが立ち上がり、exampleページが表示され、とりあえずの開発環境が出来ていることがわかりました。

$ gulp watch

が、index.html というのがあったので、その中身を見てみると、mocha の spec が入ってます。gulp watch によりブラウザで表示されたのは、app/index.html のようです。なんだかビミョーな完成度の generator みたい。。

ただ、このままでは、素のHTMLが表示されてます。app/index.html で下記のように ratchet.css と iOS用の Theme を読み込むと、無事、スタイルが適用されました。画像は、Chrome Developer Tools で Device Emulation を有効にしてとったキャプチャ画像です。
後の事も考えて、ついでに js も読み込んでおきます。

app/index.html

        <!-- bower:css -->
        <link rel="stylesheet" type="text/css" href="bower_components/ratchet/dist/css/ratchet.css">
        <link rel="stylesheet" type="text/css" href="bower_components/ratchet/dist/css/ratchet-theme-ios.css">
        <!-- endbower -->

〜（中略）〜

        <!-- build:js scripts/vendor.js -->
        <script src="bower_components/ratchet/dist/js/ratchet.js"></script>
        <!-- bower:js -->

Ratchet で出来ること

Ratchet のサイトを見ていると、UI パーツが並んでいるだけのように見えて、一瞬、Bootstrap と何が違うんだろう？って思ってしまうかもしれません。ってか、自分が思ったので、改めて異なる点をカンタンにまとめてみました。

• iOS や Android の Native アプリに似た UIパーツが用意されていて、Bootstrap と同じような感じで これらの UIパーツを使うことが出来る
• モバイルに特化している分、ファイルサイズが小さい
• Ajax と history API を利用したページ遷移をカンタンに行うことが出来る（Push.js と呼んでいるらしい）

まぁ、特化したぶん、らくちんぽん　って感じです。
実際 ratchet.css の中を覘いてみると、かなりシンプルなCSSになっています。

また、いろいろと割り切った実装になっているみたいです。例えば、Modal のところに、下記のように書いてあります。

Modals are designed to only fire from links. Set the value of the toggle links href to the id of a modal.

実装を見てみると、下記のようになってました。潔い割り切りですねw

mordal.js

  var findModals = function (target) {
    var i;
    var modals = document.querySelectorAll('a');

    for (; target && target !== document; target = target.parentNode) {
      for (i = modals.length; i--;) {
        if (modals[i] === target) {
          return target;
        }
      }
    }
  };

Push.js を使ってカンタンページ遷移 ＋ History API

UI系については、サンプル見たら ほぼオシマイなので、Push.js を触ってみます。Push.js といっても独立したJSファイルになっているわけではなく、ratchet.js に含まれています。
Push.js については、本家よりも下記サイトに詳しい例が載っています。

• Ratchet’s Push.Js – Prototyping Mobile Apps with Multiple Screens

まずは、index.html に下記のようなリンクを加えます。特徴的なのは、aタグの中にある data-transitionで、fade, slide-in, slide-out が使えます。

index.html

              <li class="table-view-cell">
                <a class="push-right" href="page2.html" data-transition="slide-in">
                  <strong>Page Transition with Push.js</strong>
                </a>
              </li>

で、page2.html は index.htmlをコピーした上で、body の中身を下記のように変えておきました。

page2.html

        <header class="bar bar-nav">
          <a class="icon icon-left-nav pull-left" href="index.html" data-transition="slide-out"></a>
          <h1 class="title">Ratchet App</h1>
        </header>

        <!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
        <div class="content">
          <p class="content-padded">２ページ目だよ</p>
        </div>

これだけで index.html と page2.html の間が スライドイン、スライドアウトでページ遷移出来るようになります。さらに、このページ遷移は、Ajax を使って html を取得して 中身を置き換えているため、CSSやJSのリクエストを発生させることがありません。
また、ちゃんと HTML5 の History API を使ってページ遷移を保存してくれているので、Back などで戻ることも出来ます。

push.js

   if (/<html/i.test(responseText)) {
      head           = document.createElement('div');
      body           = document.createElement('div');
      head.innerHTML = responseText.match(/<head[^>]*>([\s\S.]*)<\/head>/i)[0];
      body.innerHTML = responseText.match(/<body[^>]*>([\s\S.]*)<\/body>/i)[0];
    } else {
      head           = body = document.createElement('div');
      head.innerHTML = responseText;
    }

    data.title = head.querySelector('title');
    var text = 'innerText' in data.title ? 'innerText' : 'textContent';
    data.title = data.title && data.title[text].trim();

まとめ

シンプルなモバイルアプリであれば、Ratchet を利用するとカンタンに UI を構築することが出来そうです。しかも、jquery などへの依存もなく、とても軽量です。

ただし、その分、いろいろと割り切りがあるようなので、少し凝ったことをしようと思うと、結局 別のライブラリが必要になってしまったりするかもしれません。
シンプルに割り切って使える場合には、ぜひ試してみると良いかと思います。