iOSではAuto Layoutと呼ぶデザインの定義を行う機能が提供されています。使いこなすのはとても大変というイメージがありますが、今後画面サイズが増えたり、向きが変わった時などを考えるとなるべく対応しておいた方が良い仕組みと言えます。 そんなiOSのAuto LayoutをJavaScriptで実装しようと考えているのがAutoLayout.jsです。レイアウトデザインをテキストで定義するのが特徴です。

AutoLayout.jsの使い方

例えばサンプルを実行したところです。

画面幅を変更しても問題ありません。

bodyの内容は次のようになっており、デザインに関する定義はありません。

<div id="left">
  <div id="text">AutoLayout.js DOM Example:</div>
  <pre id="vfl"></pre>
</div>
<div id="right">
  <div id="child1"><div>child1</div></div>
  <div id="child2"><div>child2</div></div>
  <div id="child3"><div>child3</div></div>
  <div id="child4"><div>child4</div></div>
  <div id="child5"><div>child5</div></div>
</div>

そしてまず大きく分けて右と左のカラムについて定義します。

// main layout
autoLayout(undefined, [
    '|-[left(right)]-[right]-|',
    'V:|-[left]-|\nV:|-[right]-|'
]);

次に左側のレイアウト。

// left layout
autoLayout(document.getElementById('left'), [
    '|-[text]-|',
    '|-[vfl]-|',
    'V:|-[text(20)]-[vfl]-|'
]);

最後に右側を定義しています。

var exampleVFL = [
    '|-[child1(child3)]-[child3]-|',
    '|-[child2(child4)]-[child4]-|',
    '[child5(child4)]-|',
    'V:|-[child1(child2)]-[child2]-|',
    'V:|-[child3(child4,child5)]-[child4]-[child5]-|'
];
autoLayout(document.getElementById('right'), exampleVFL);

AutoLayout.jsでは他のビューと比較したサイズや演算子、並び順の定義ができます。さらにウィンドウ幅によって計算も変わりますのでCSS3のメディアクエリで定義するよりも手軽にレスポンシブなデザインが実現できそうです。

AutoLayout.jsはJavaScript製のオープンソース・ソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です

IjzerenHein/autolayout.js