Apricot

Hello!

Welcome to Project Apricot (Anzu), App UI Build Kit.




What is Apricot?


ApricotはアプリのUIを簡単にデザインするためのツールです。 つくりたいアプリ画面のレイアウトを画像としてペイントして、Apricot Kit を用いてビルドすることで、 HTML, CSSファイルが自動生成されます。つまり、絵を描き、少しのデザイン設定を書くだけでウェブアプリやChrome AppのUIを構築することができるのです。 ここで描いたデザインファイルは単なる画像ですので、他のプロジェクトでの再利用や、他の開発者との共有が簡単に行えます。 また、Apricot JS APIを用いることで生成されたUI要素をJavaScriptで操作することも可能です。

Get Started.


ApricotはPreview版ですので、今後の開発によって仕様が変更になることがあります。

Step0. 準備をする

環境の確認


Apricotのビルド機能ではPython 2.7以降が必要です。また、Windowsで使用する場合は、コマンドを入力するためのターミナルとして Cygwinなどを予めご用意ください。また、画像処理用のPythonライブラリとしてPillowを使用していますので、 こちらも下記のコマンドを実行してインストールしてください。
$ pip install Pillow
Apricotで生成したアプリをChrome Appsとして起動したい場合は、Google Chrome も必要です。

Apricotプロジェクトを入手


ビルドに必要なプログラムやサンプルアプリが含まれているApricotのリポジトリを GitHubからCloneするためには、下記のコマンドを実行してください。
$ git clone https://github.com/daiz713/Apricot.git
あるいは、こちらからZipファイル(apricot-0.0.4-pkgA.zip)をダウンロードして解凍してもOKです。 以降の説明は後者の方法でダウンロードしたものを用います。

Step1. パーツ画像を描く


通常のペイントソフトを用いて、色が異なる複数の長方形を描きアプリのレイアウトをデザインしてください。 描き終えた画像は好きなファイル名を付けてPNG形式で保存してください。 ここで保存したファイル名は以降「パーツ名」として使用されます。 画像は1枚でも、複数枚でも結構です。ここでは例として以下の3枚のパーツ画像を用意しました。


base.png



card.png



panel.png



使用するすべてのパーツ画像はプロジェクトの「original」フォルダ内に配置してください。

Step2. レシピを書く


このステップでは、先ほど用意したパーツ画像の組み合わせを明確にするためにレシピファイルを作成します。 ここで指定したパーツ画像がUIを構築する際に使用されます。 レシピファイルは単なるテキストファイルです。以下のように記述します。
; セミコロンで始まる行は注釈です。
; ビルド対象のパーツ名を記述します。
; アプリUIのベースとなるパーツには`*`マークを付けてください。

base *
card
panel
このファイルも好きな名前で保存してください。レシピファイルは必ずプロジェクトの「original」フォルダ内に保存してください。 このファイルの名称は以降「レシピ名」として使用されます。レシピファイルのサンプルはこちらをご覧ください。 後述する Step.5 で、ビルドしたアプリをChrome Appsとして起動する場合、ウィンドウのサイズは「ベースとなるパーツ」のサイズと等しくなります。

Step3. マニフェストを書く


レシピで指定したパーツ画像はApricotのプログラムによってHTMLコードにコンパイルされます。 このときに、パーツ画像内に描かれた長方形の1つ1つはdiv要素として表示されます。 Apricotではこれらのdiv要素をbrickと呼びます。 brickはデフォルトでは単なるdivタグですが、JSON形式のmanifestファイルを用いることで他のタグとしての役割(role)やHTMLタグの属性(property)、 スタイル(design)などを指定することができます。例えば、manifestファイルはのサンプルはこちらのようになります。 以下のようなルールで記述されています。
apricot.manifest =
    "パーツ名": {
       "brick_ブリック番号": {
           "role": "html-タグ名",
            "property": { ... },
            "design": { ... }
       }
    },
    ...
};
manifestを保存する際ファイルの名称は「レシピ名_manifest.js」として、プロジェクトの「www」フォルダ内に保存してください。
マニフェストに関する詳細ページはただいま準備中です。

Step4. ビルドする


ターミナルでシェルスクリプトanzu.shを実行します。anzu.sh は以下のように引数を3個与えて実行します。
$ sh anzu.sh build レシピ名 ユーザー定義のスクリプトファイル名
例えば、original/myRecipe と www/app.js, www/app.css を参照してApricot UI のアプリをビルドする場合は、
$ sh anzu.sh build myRecipe app
のように実行します。何も表示されずに終了すれば成功です。 ビルド作業は環境によっては時間がかかることがあります。

Step5. アプリを実行する


Step4 でビルド生成されたリソースはwwwフォルダ内に格納されています。 つまり、アプリをApricotで作成したアプリをリリースする場合はwwwフォルダのみを配布すればOKです。 これらのうち、アプリのメインファイルはwww/index.htmlという名称で保存されています。 index.htmlをブラウザで表示させてみましょう。
また、Chrome Appsとして起動することも可能です。この場合はChromeの拡張機能管理ページから、「パッケージ化されていない拡張機能を読み込む...」 ボタンからApricotプロジェクトのwwwフォルダ内を選択して読み込んでください。 実行すると以下のようなアプリが起動するでしょう:)

ビルドされたアプリのLive Demo


Mac OS XでChromeを使用している場合は以下のコマンドを実行することでも index.html をChrome Appsとして起動することができます。
$ sh anzu.sh ca

Extra. Apricot API でUIを操作する


www/stjフォルダ内のapricot.jsには、Apricotパーツやブリックを操作するためのAPIが多数用意されています。 ウェブブラウザのコンソール画面で
$ apricot.api
と入力することで、利用可能な最新のAPIがリストアップされます。サンプルアプリの動作を記述しているwww/app.jsでは、 いくつかのApricot APIのデモが書かれていますので参照ください。
APIのリファレンスページはただいま準備中です。また、APIの仕様は今後変更される可能性があります。


Content available under the CC-By 3.0 license
Copyright (C) 2015, daiz.