BootstrapやjQuery UIのコンポーネントを使ったプロトタイプ作成ツールなどのWebアプリを開発できるツール -Wamer
Post on:2015年3月31日
Webページのプロトタイプ作成ツールやWordPress, Bootstrapなどのテーマ作成ツールなど、再利用可能な独立したユニットを組み合わせWebアプリを開発できるオンラインツールを紹介します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015033108.png)
Webアプリをゼロから作ると非常に大変ですが、Wamerを使うと効率良く開発することができます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015033105-01.png)
SketchはWamerで作成されたプロトタイプ作成ツールで、マウス操作で簡単にWebページを制作できます。
まずは、ページのレイアウトを決めます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015033107-01.png)
レイアウトの一覧
ドキュメントにマウスで大きさを指定すると、すぐにレイアウトを描けます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015033105-02.png)
レイアウトを反映
コンポーネントの配置も同じ要領です。
一覧から、コンポーネントを選択。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015033107-02.png)
jQuery UI コンポーネントの一覧
ドキュメントに配置します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015033105-03.png)
コンポーネントを反映
他にも、Bootstrapのコンポーネントやオリジナルのコンポーネントを用意することもできます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015033107-03.png)
Bootstrap コンポーネントの一覧
作成したプロトタイプはWebページとして表示されることも可能です。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015033106.png)
プロトタイプをパブリッシュ
Sketchの機能は非常に豊富で、使い方は下記ページをご覧ください。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015033105-04.png)
sponsors