ITエンジニア/デザイナ向けにオープンソースを毎日紹介

デモがありますのでぜひ実際触ってみるべき!

Webのオーサリングツールと言えば長らくDreamweaverが中心でした。それ以外になると一気に手打ちになってしまったりします。最近ではCSSフレームワークを用いることも多いので、それでもさして不便ではありません。

とは言えWebアプリケーションのような複雑なUIを考えた場合、やはりオーサリングツールが欲しいところです。さらに言えばDreamweaverよりも柔軟にデザインができるものが。そんなツールを願っている方に見て欲しいのがStyloです。

これが画面です。Webベースだと思えないほど充実した機能を備えています。
これが画面です。Webベースだと思えないほど充実した機能を備えています。

大きさを変えたり、文字を入力したり。
大きさを変えたり、文字を入力したり。

オブジェクトをドラッグした時に隣接するオブジェクトの上辺や中心にスナップする補助線が出てくれるのが格好いいです。

色の変更はピッカーを使って。透明度まで決められるのがいい感じですね。
色の変更はピッカーを使って。透明度まで決められるのがいい感じですね。

半透明なので文字が見えています。
半透明なので文字が見えています。

コンテクストメニューも実装されています。カット、コピー、ペースト、配置の変更など自在です。
コンテクストメニューも実装されています。カット、コピー、ペースト、配置の変更など自在です。

オブジェクトを重ねたところ。
オブジェクトを重ねたところ。

Styloはまだソースを見る機能こそないものの、HTMLとスタイル設定でここまでのオーサリングを可能にしています。まるでドローソフトウェア並です。ワイヤーフレームデザインにも使えそうです。

開発はCoffeeScriptで、SpineというJavaScriptフレームワークを使っています。この二つの組み合わせを体験する上でも貴重なソフトウェアと言えそうです。

StyloはCoffeeScript/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

Stylo

maccman/stylo

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2