はじめに
個人で使うiphone用webアプリみたいの作るときに使えるCSSテンプレートみたいのないかなーと思ったら、bootstrapの亜流でそれっぽいのがあったので使ってみた。
公式サイト
http://goratchet.com/
こういうのが作れる（exampleより）
アイコンはRatchiconsというアイコンフォントがいくつか用意されている。
※Ratchetは本来はHTML・CSS・JSのみでモバイルアプリを作成するためのものですが、今回私はRailsアプリのUI作成用のひな形として利用しました。
ダウンロード
上記リンクにとんだ先ででっかく表示されている"Download Ratchet"ボタンをクリックすると、なぜか公式サイトのコードのzipがまるごとダウンロードされるという意味不明なことになっている。
本物のRatchetは下記から手に入る。
https://github.com/twbs/ratchet/releases/download/v2.0.2/ratchet-2.0.2-dist.zip
ちなみにhttp://goratchet.com/getting-started/の "Download Ratchet" ボタンのリンク先はこっちである。
中身
下記にあるように単なるcss,js,fontのセットなんで、普通にアプリのそれっぽい場所に配置してそれっぽくパス指定すると使える。
ratchet/
├── css/
│ ├── ratchet.css
│ ├── ratchet.min.css
│ ├── ratchet-theme-android.css
│ ├── ratchet-theme-android.min.css
│ ├── ratchet-theme-ios.css
│ ├── ratchet-theme-ios.min.css
├── js/
│ ├── ratchet.js
│ └── ratchet.min.js
└── fonts/
├── ratchicons.eot
├── ratchicons.svg
├── ratchicons.ttf
└── ratchicons.woff
使い方
下記の3つのルールさえ守れば、簡単にそれっぽい見た目のモバイル用webページが作成できる。
- barクラスを持つ要素をbodyの中に必ず書くこと。
- 画面スクロールを許可したい範囲はcontentクラスのdivで囲むこと。
- metaタグは必ず書くこと。下記みたいなやつね。
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
感想
- 構造が単純でカスタマイズしやすい
- モバイル以外を切り捨てて、ソッコーなんかのサイトを作りたいときには強力だと思った。
注記
- 基本的なデザインの思想が「インライン」。テーブルや画像むけのコンポーネントは用意されていない、それらが必要な場合は、自作するか他をあたる方が良い。
- 画面下部固定のタブバーを使用するとき、.contentの中身がタブバーに隠れてしまって表示されなくなるので、微調整が必要。