FriesはHTML/JavaScriptを使ってAndroidモックアップアプリを開発できるソフトウェアです。

Androidの普及はiOSを抜き去り、アプリもどんどん増えています。そんな中にあって必要になるのが素早くAndroidアプリを作る技術です。今回はWebブラウザを使ってモックアプリを作っていけるFriesを紹介します。

[![](http://images.moongift.jp/2013/05/Screenshot 2013-05-13 10.30.12_thumb.1368494550.png)](http://images.moongift.jp/2013/05/Screenshot 2013-05-13 10.30.12.1368494550.png)
デモです。左側にAndroid端末のモックが出ています。

[![](http://images.moongift.jp/2013/05/Screenshot 2013-05-13 10.30.24_thumb.1368494554.png)](http://images.moongift.jp/2013/05/Screenshot 2013-05-13 10.30.24.1368494554.png)
シンプルなタイトルを表示した例。

[![](http://images.moongift.jp/2013/05/Screenshot 2013-05-13 10.30.30_thumb.1368494558.png)](http://images.moongift.jp/2013/05/Screenshot 2013-05-13 10.30.30.1368494558.png)
メニューを追加した例。

[![](http://images.moongift.jp/2013/05/Screenshot 2013-05-13 10.30.35_thumb.1368494562.png)](http://images.moongift.jp/2013/05/Screenshot 2013-05-13 10.30.35.1368494562.png)
メニューアイコンをタップするとメニューが表示されます。

[![](http://images.moongift.jp/2013/05/Screenshot 2013-05-13 10.30.41_thumb.1368494566.png)](http://images.moongift.jp/2013/05/Screenshot 2013-05-13 10.30.41.1368494566.png)
タブ。

[![](http://images.moongift.jp/2013/05/Screenshot 2013-05-13 10.30.45_thumb.1368494570.png)](http://images.moongift.jp/2013/05/Screenshot 2013-05-13 10.30.45.1368494570.png)
ボタン。

[![](http://images.moongift.jp/2013/05/Screenshot 2013-05-13 10.30.48_thumb.1368494574.png)](http://images.moongift.jp/2013/05/Screenshot 2013-05-13 10.30.48.1368494574.png)
リスト。

[![](http://images.moongift.jp/2013/05/Screenshot 2013-05-13 10.30.55_thumb.1368494577.png)](http://images.moongift.jp/2013/05/Screenshot 2013-05-13 10.30.55.1368494577.png)
複数行のリスト。

[![](http://images.moongift.jp/2013/05/Screenshot 2013-05-13 10.30.57_thumb.1368494581.png)](http://images.moongift.jp/2013/05/Screenshot 2013-05-13 10.30.57.1368494581.png)
iScrollにも対応しています。

Friesを使って作法に則って進めるとAndroid 4.0系のUI風モックアップアプリが簡単に作成できます。簡易的に作成できるなら、どんどん試して色々な機能を試すことができます。さらにPhoneGapなどでラッピングすればAndroidネイティブ風のアプリケーションになってしまいそうです。

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

MOONGIFTはこう見る

iOSであればRatchetが同様の機能を提供します。どちらもHTMLを使ってどんどんモックアップを作っていけるのが特徴です。こうしたスクラップ&ビルドを繰り返すことで、目指すべき形に徐々に近づけていくことができます。

最初から理想的な形にするのはとても難しいです。だからこそカジュアルにはじめて、何度も失敗を積み重ねつつ考えるべきなのです。有名なWebサイト、アプリで元の形のまま維持しているケースは多くありません。進化や変化を受け入れることで、開発はよりスムーズになるはずです。

Fries

jaunesarmiento/fries · GitHub