本日、アプリUI開発ツール「Apricot」のPreview版をリリースしました。
What is Apricot?
Apricot*1はアプリのUIを簡単にデザインするためのツールです。 つくりたいアプリ画面のレイアウトを画像としてペイントして、Apricot Kit を用いてビルドすることで、 HTML, CSSファイルが自動生成されます。つまり、絵を描き、少しのデザイン設定を書くだけでウェブアプリやChrome AppのUIを構築することができるのです。
Apricotでできること
Sample 1
下のような一枚のPNG画像を描いてビルドすると、
以下のようなChromeアプリ画面を生成することができます。
これは、ウィンドウの背景に元の画像が表示されているのではありません。画像に描かれている色の異なる長方形領域の一つ一つがdiv要素としてレンダリングされています。
これにより、それぞれのdiv要素をJavaScriptで操作してあらゆる動作をさせることが可能になります。
Sample 2
Apricotレシピファイル, Apricot manifestファイル を使用した場合、さらに高度なことができます。
以下のような複数枚（3枚）のPNG画像を組み合わせてビルドし、さらに、マニフェストで指定されたHTMLタグ情報などを用いて、
次のようなUIデザインを実現することができます。
また、付属する Apricot JS API には、自動生成されたdiv要素を複製・移動・消去したり、綺麗なアニメーションで扱うためのメソッドが用意されています。
Get Started
Apricotで用いるアプリUIデザインの基本データは一般的な画像ファイルですので、Google Photos や SNS などで簡単に共有することができます。 今後の開発ではAPIの拡充, マテリアルデザインの対応やビルドツールのGUI化などを進めていく予定です。
より詳しい情報は下記の特設サイトをご覧ください。
http://daiz-projects.appspot.com/0/apricot/index.html
ぜひ一度お試しいただき、ご感想や追加機能のご意見などを頂けると嬉しいです！
Links
*1:英単語「Apricot」は日本語では「杏の実」ですが、ここでは「Application Development Convenience Kit」の掛詞です。
