RatchetはHTML/CSS/JavaScriptを使ってiOSアプリのモックアップを素早く作るフレームワークです。

iPhoneアプリを開発する際にまずプロトタイプを作ることが多いですが、Xcodeなどを使って作っていては時間がかかると感じるかも知れません。そこでもっと手軽に手早くモックが作れるRatchetを使ってみましょう。


デモサイトです。


ヘッダー、フッターは動かないでスクロールします。


チケットページに遷移しました。


フォームです。奇麗です。


設定ページ。ボタンの色も指定できます。


こちらはキッチンシンク。


タイトルだけでもこんなにパターンが。


タブバーも色々。


ボタンも大きさ、バッジ付きなど色々。


リスト。


リストにバッジをつけられます。


ボタン付きバッジ。


フォーム。

Ratchetの利点はHTML/CSS/JavaScriptで構成されているということです。記法に沿ってパーツを組み合わせていくだけでiPhoneアプリのようなUIが出来上がります。HTMLであればちょっとした文言の変更や動作の確認であれば十分かも知れません。

RatchetはHTML/CSS/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

MOONGIFTはこう見る

Ratchetのレベルは非常に高く、Webアプリケーションであればこのままリリースできてしまうのではないかと思ってしまうくらいです。実際のiOSアプリにおいては細かなユーザビリティが求められるので、Ratchetで十分とは思いませんが、それでもプロトタイプとしての動作確認であれば十分でしょう。

Ratchetで一度作って満足するのではなく、スクラップアンドビルドで何度も何度も繰り返し作るべきです。書き方を覚えてしまえば非エンジニア、非デザイナーであってもすぐに使いこなせます。自分の思いを形にして表現すれば、より伝わりやすくなるでしょう。

Ratchet

maker/ratchet