Webの技術でスマホアプリのプロトタイプを作成「Clank」
ClankはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。
スマートフォンやタブレットのネイティブアプリを開発するのは時間を要しますので、Webの技術を使ってプロトタイピングを作りスクラップ&ビルドで色々試してみるのが良いでしょう。そこで使えるのがClankです。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-19 11.29.13.1376920461.png)
ファイル構成はこのようになっています。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-19 11.30.00.1376920466.png)
例です。シンプルな表示です。これはiPhone4のサイズです。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-19 11.30.24.1376920470.png)
Galaxy風のサイズです。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-19 11.30.39.1376920473.png)
画面に文字を追加したりするのも簡単です。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-19 11.31.07.1376920477.png)
こちらは公式サイトのデモです。iPhone4の枠表示版。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-19 11.31.13.1376920482.png)
iPhone5のサイズ。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-19 11.31.18.1376920486.png)
水平表示もできます。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-19 11.31.30.1376920491.png)
フォーム表示。色々な入力パターンに対応しています。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-19 11.31.41.1376920495.png)
スライダー。スワイプ操作で切り替えます。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-19 11.31.48.1376920500.png)
テーブル表示。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-19 11.31.53.1376920504.png)
アラート。
Clankでは多彩なコンポーネントに加えて、各種でバイス向けの枠を表示できるのが特徴です。ステータスバーに表示する時間も指定できるなど細かいカスタマイズが可能です。Clankを使えばスマートフォンアプリのモックアップがさくさく作れるでしょう。
MOONGIFTはこう見る
プロトタイプの作成方法は色々です。一番早いと思われるのは手書きかも知れません。次に専用のモックアップ、ワイヤフレームを描くツールを使った方法で、さらに形になってくるとWebベースのツール（Clankのような）が使えるようになります。
iOSでは画面遷移に伴うステータスの管理が難しいため、スクラップ&ビルドで試すというのは難しいです。そこでWebアプリを使ってみるのが良いでしょう。さらにうまくいけばPhoneGapでラッピングして〜といった展開も考えられます。