Apricot 2.0 の紹介 - #daiizメモ

Apricot とは

ペイントアプリで描かれた画像ファイルの長方形部分を、HTMLのdiv要素に置き換えて、HTMLファイルを生成する自作のツールです。例えば下記の画像には、

sample.png

塗り潰し色が異なる8個の長方形があるので、この画像をApricotで処理すると、8個のdivを含むHTMLが出力されます。デフォルトでは、画像中の長方形の位置や色はそのままHTMLに反映されます。専用の設定ファイルを書くことにより、これらは変更することができます。

「Apricot Beta 」は、Apricotのプロトタイプが約1日で生まれた後、それからどのように発展させていくか模索していた頃のバージョンです。これの開発は8月をもって終了しました。このバージョンを通して得た課題を踏まえて、「Apricot 2」の開発を開始しました。

Apricot 2で使われる各種名称は、Betaとは異なります。

図面です。最初の節で「画像ファイル」と呼んでいたものを「図面ファイル」と呼びます。例えば、Apricotのコード中で図面ファイルsample.pngを新規に読み込む場合は

var zumen = new Zumen({id: 'foo'}, 'sample', true);

のように書きます。Zumenは図面ファイルが無くても下記のように生成できます。

var zumen = new Zumen({id: 'foo'});

この場合は内部にBrickが無い空の図面が生成されます。

ブリックです。最初の節で「画像ファイルの長方形部分」などと表現していたものです。長方形部分はそれぞれブリックとして処理されます。Apricotは、図面ファイル内の色が異なる長方形の各々に対して

var brick_foo = new Brick({id: 'sample-0'});

とデザインを設定するためのメソッドを実行してブリックを生成しています。そして、これらのbrickはzumenに追加されてゆきます。つまり、これと同様に

var brick_bar = new Brick({id: 'bar'}).is('button');

を実行すれば、自前にブリックを用意することもできます。ブリックを生成したときデフォルトではdivとなりますが、is(要素名)を用いることで任意のHTML要素にすることができます。このようにして生成されたbrickをzumenに追加するためには以下のようにします。

zumen.addBrick( [ brick_foo, brick_bar ] );

いまの例では、zumenに対してaddBrickをしましたが、brickに対してaddBrickをすることも可能です。

これまでの説明において「デザインを設定」などと書かれていた部分で活躍します。Apricotでは、zumenやbrickのデザイン設定などはaddRecipe()やsetRecipe()というメソッドで設定します。これらのメソッドで設定できるRecipeは、さらに3つに分かれています。

メソッドの具体的な使い方はサンプルをご覧ください。たいてい以下のように使います。

brick_bar.addRecipe('design', {
    Width: 400,
    BrickColor: '#e9e7e4',
});

この辺りの仕様は今後変更になる可能性があります。

ビューです。これは生成したzumenをHTMLに変換して出力する仕事を担います。これまで扱ってきたzumenをHTMLに変換するには、まず、生成したviewにzumenを追加します。

var view = new View();
view.addZumen( [ zumen ] );

zumenを生成した際に、第3引数にtrueを与えていたため、このzumenはHTMLで出力されたときに最初から表示状態になっています。複数の図面を組み合わせてビューを構成することを考えて、図面のデフォルトは非表示（false）になっています。

viewの内容を表すHTMLファイルを出力するためには、generateHTML()を使います。

view.generateHTML('index.html', {
    'sample-0': 'my-div'
}, {
    'sample-0': 'a b c'
});

第1引数で出力するHTMLファイルの名前を指定します。第2, 3引数は、

第2引数: zumen, brickに割り当てられているidを変更することができます。例では、new Zumen()したときに自動で割り当てられたid「sample-0」を「my-div」に変更しています。
第3引数: zumen, brickに割り当てられているidのHTML要素に対して、classNameを与えることができます。例では、idが「sample-0」の要素に対して「a」「b」「c」というクラス名を追加しています。

を表しており、これらは省略可能です。

Apricot2が出力するのは、ただのベタ書きHTMLのみであるため、出力後はjQueryやAngularJSなどでもスムースに操作できます。

また、出力したHTMLをChromeアプリとして実行するために必要なファイルを生成するメソッドもあります。

view.generateChromeAppManifest('My App', {
    width : 480,
    height: 640
});

を実行すると、manifest.jsonとbackground.jsが生成されます。

GitHubにあります。以下のページからご利用ください。

Apricot2を実行するためにはnodeとpythonが必要です。その他必要なパッケージなどは使い方.mdの冒頭の方法でインストールできます。ファイルの配置はおおまかに、特に大切なものについて

のようになっています。

node render.js [レシピファイル名]

を実行すると、res/レシピファイル名.js を参照し、zumen/から必要な図面ファイルを取得して読み取り、www/にHTMLを出力するという一連の処理が行われます。

Apricotについてのご意見、ご感想など、大募集中です。よろしくお願いします。🍣