Yeoman で Ratchet を試してみた 


Ratchet とは？
---------

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

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

* [Ratchet 本家](http://goratchet.com/)
* [Ratchet GitHub](https://github.com/twbs/ratchet)
* [Introducing Ratchet 2](http://blog.getbootstrap.com/2014/02/25/ratchet-2/)
* [Ratchetが真のフレームワークに，新たなホスト先も](http://www.infoq.com/jp/news/2014/04/ratchet-2-real-framework-new-hom)
* [Ratchetを使ってネティブアプリに迫るwebアプリを作る](http://befool.co.jp/blog/chainzhang/use-ratchet-to-build-mobile-web-app/)


フットプリントは比較的小さく 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


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

```bash:
$ npm install -g generator-ratchet
$ yo ratchet
```

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

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

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

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

```bash:
$ bower install
$ npm install
```

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

```bash:
$ 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 も読み込んでおきます。

```html: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 -->
```

![スクリーンショット 2014-07-05 17.01.27.png](https://qiita-image-store.s3.amazonaws.com/0/32059/40724604-4eb7-c6b3-ae29-5ddd6cdea1a0.png "スクリーンショット 2014-07-05 17.01.27.png")


Ratchet で出来ること
-----------------

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

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

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

また、いろいろと割り切った実装になっているみたいです。例えば、[Modal](http://goratchet.com/components/#modals) のところに、下記のように書いてあります。

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

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

```javascript: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](http://www.sitepoint.com/ratchets-push-js-prototyping-mobile-apps-multiple-screens/)


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

```html: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 の中身を下記のように変えておきました。

```html: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 などで戻ることも出来ます。

```javascript: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();
```

![スクリーンショット 2014-07-06 10.17.32.png](https://qiita-image-store.s3.amazonaws.com/0/32059/1e8f7ced-525d-a668-6c57-77a96c5411a2.png "スクリーンショット 2014-07-06 10.17.32.png")


まとめ
-----

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

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