HTML/JavaScriptを使ってAndroidモックアップアプリをさくさく作ろう!「Fries」
FriesはHTML/JavaScriptを使ってAndroidモックアップアプリを開発できるソフトウェアです。
Androidの普及はiOSを抜き去り、アプリもどんどん増えています。そんな中にあって必要になるのが素早くAndroidアプリを作る技術です。今回はWebブラウザを使ってモックアプリを作っていけるFriesを紹介します。
[](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.1368494554.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.1368494562.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.1368494570.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.1368494577.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サイト、アプリで元の形のまま維持しているケースは多くありません。進化や変化を受け入れることで、開発はよりスムーズになるはずです。