HOME > 開発者向けBLOG > Ext JS >  Sencha Fashionのご紹介

Technology Note 開発者向けBLOG

Ext JS

Sencha Fashionのご紹介

こんにちは、ゼノフィaoyamaです。

今回はSencha Cmd 6 から導入されたFashionについてご紹介します。

Sencha Fashionとは

Fashionはひとことで言えば、SASSコンパイラのJavaScript実装です。

これまでSencha CmdではSASSのコンパイルにrubyによるコンパイラを利用してきました。
しかし以下の点を考慮して、JavaScriptでのSASSコンパイルに移行しました。

  • rubyへの依存からの脱却
  • コンパイル速度の向上

こうしてできあがったのが Sencha Fashion です。

仕組みについて

実装自体は、Sencha Cmd の内部にあります。
(インストールディレクトリ/extensions/sencha-fashion/)
コマンドとして利用する場合には、PhantomJS上で動作させています。
以下のスクリーンショットはSencha Cmdで sencha app build を実行したときのものです。
ruby ではなくphantomjsが動作していることがわかります。

PhantomJS

さて、JavaScriptで実装されたということは、ブラウザ側で動作させることも可能ということになります。
Sencha Cmdでこれを実現するためには、sencha app watchを用いたライブリロード機能を利用する必要があります。

  • sencha app watch
    AppWatch

クエリにFashionを利用するパラメタを追加して、ブラウザからアクセスします。

  • http://localhost:1841/?platformTags=fashion:1 初期状態

この状態で、ブラウザからサーバにロングポーリングが行われ、SASSファイルの更新を監視します。

  • ロングポーリングしている状態 LongPolling

サーバサイドでSASSが変更されたタイミングでブラウザに変更されたSASSファイルが送信されます。
このSASSファイルをASTに分解し、JavaScritのオブジェクト構造として保持します。
このオブジェクト形式からCSS文字列として出力することで、描画されているスタイルを変更します。

  • 動作の流れ 概要図

以下はグローバル変数である$base-colorを変更した場合の画面です。

  • カラー変更 カラー変更1

メリット

上記の仕組みにより、コンパイル速度が改善されました。またJavaScript上で動作するため、JavaScriptでプラグインを追加することもできます。より詳細な内容は以下のサイトをご参照ください。

Sencha Fashion

また一番大きなメリットとして、一度JavaScriptの形に落としこんでいるため、ブラウザ側のロジックでスタイルを変更することができます。これはブラウザ側でテーマシステムが構築できることを意味しています。

たとえば、Fashionの操作APIを利用すると、コンソール上で以下を実行するだけでスタイルが変更されます。

Fashion.setVariables({ "$base-color": "blue"});

  • ブラウザ上でのカラー変更 カラー変更2

まとめ

これまでSASSのコンパイルに悩んでいた方には、速度面の恩恵だけでも十分かもしれません。
しかし、この機能はそれ以外にも面白い可能性を秘めていると思います。
ぜひ触ってみて、フィードバックをいただければと思います。

Sencha Forum

<

>

PAGETOP