#daiizメモ

Scrapboxに夢中

Release: ApricotでアプリのUIデザインをもっと簡単に

本日、アプリ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」の掛詞です。