テーマとSass

Sencha Advent Calendar 2014 16日目の記事です。

ども、@kotsutsumiです。

@martini3oz さんが、記事冒頭に書いていたので、同じ感じで。 先日大阪出張の最終日に、THE KIDDIEのライブに行ってきました。

音楽もさることながら、揺紗やユウダイを始め、THE KIDDIEのメンバを話をしていると、ホント普段周りにいる考え方と色々違って、本当に刺激になるし、クリエイターという共通のステージでやっていくにあたり、色々考えさせられるものですし、 僕にとっては、プログラム以外はあんまり遊びといった遊びもしないので、唯一の趣味でしょうか。精神的なリフレッシュになります。 クリスマスの25日には、渋谷公会堂でのライブ、嫁さんと２人でいけそうなので、楽しみにしっかり仕事したいと思います。

---

さて、本日は、テーマとSassについてです。

ADCなんで、あまり突っ込んだネタはいつもどおりかけないんですけどw まず、Sencha Ext JSにおける、テーマ、そしてSassの違いを理解しましょう。

結局は、CSSでDOMを装飾する

Sencha Ext JSを利用しようが、他のライブラリを利用しようが、要するにDOMをCSSで装飾して見た目を表現しているのは、みなさんもご存じかと思います。 ただ、注意が必要なのは、Sencha Ext JSを利用して外観を変更して行くに当たり、ここで止まることです。

「どうせCSSでしょ、Sassも使った方が楽だよね」

くらいの感覚でのぞみ

「Sencha Ext JSは、外観変更するのが、やりにくい」

だの抜かす馬鹿者がいるんですが、決してそんなことはありません。 すぐに素の状態からオレオレでやった方がいいみたいな発想になることは、今の時代非常に危険ではないかと思います。

Sass / Compass そして、テーミングフレームワーク

Senchaのテーマは、Sass / Compassを利用した上になりたるテーミングフレームワークで形成されています。 もちろんローレイヤーでは、一つ一つのCSSクラスに対して装飾を行っています。

その構造は、マニュアルにも記載されているとおり、下記のような構造になっています。

よくみかける、青いテーマはNeptuneと呼ばれるテーマで、Ext JS 5から導入された白っぽいテーマは、Crispといい、Neptuneテーマを継承しています。 テーマは、ベースのテーマを決定し継承することができます。

さぁ、テーマを作らねば！いや、それは間違い

CSSのテーマと呼ばれる物は、Wordpressを始め着せ替えるためのCSS群を差しますし、それはExt JSでも同様です。 ただ、自分のアプリケーションに対して、テーマを必ずしも作る必要があるかどうかを、これをみて判断してください。

部分的な修正などは、sassを直接書いて対応できる

テーマと作らずとも、必要な部分に必要なCSSを適用する程度で良い場合は、Sassを記述します。

srcディレクトリ以下に、main.scssなどファイルを配置して、

をかければ適用されます。

結局、生でCSSやSassを書くの？

書いてもいいですが、Sencha Ext JSの良い部分は、マルチブラウザ対応ですよね。 見た目を変更するためのMixinsが用意されています。 例えば、ボタンの見た目を変えたいときに、イチイチ背景を指定したりしません。

http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.button.Button

実際にSassには、以下のように記述してmixinを利用します。

これだけでは、適用されず、uiに指定した名前を、ボタンコンポーネントのuiコンフィグオプションに指定する必要があります。

もちろん、mixinが用意されていない物は、Sassで対応していきます。

テーマは？

テーマは、上記の様にSassで作っていくと、いくつも共通な部分が出てくると思います。 それらをまとめてテーマにするのは、再利用可能ですし、非常に効率的なので、その場合はテーマを作成すると良いでしょう。

テーマは、Sencha Cmdのパッケージ管理下で管理されます。

Sencha Cmdでテーマを生成すると、

が生成されます。 ディレクトリの仲には、nodeのnpmのようなpackage.jsonが配置されています。

最後のextendで、どのテーマを継承するかを指定できます。

テーマを利用するように設定する

テーマのアクティブ化は、app.jsonで行います。

後は、Sassを記述するだけなので、同じ手法で見た目を変更していくことができます。

まと麺

いやぁ、昼飯のつけ麺、上手かった。

さて、よく勘違いしがちな、「Ext JSの見た目を変更＝テーマを作らなくてはいけない」ってことではない、ということが分かっていただけたでしょうか。 さらに、Sassを利用している点、mixinたちは非常に優秀にできています。 Ext JSがサポートしているブラウザでの見た目を保証してくれるわけですね、JSはマルチブラウザ対応なのに、CSSは、自力で…　って対応してるのにバカっぽいですよね。 積極的に、mixinを利用して装飾していくことで、JSコードのように、マルチブラウザ対応が行われるという点も安心感があります。

そして、もちろんIE8も対応しているので、CSSで表現できない部分には、自動的に画像スライサーが画像を生成配置してくれますので、見た目の互換性はばっちりです。

2015年は、Sencha カンファレンス 2015 を始め、様々なイベントを、SenchaやXenophyでも計画しています。 来年は、このSencha製品に関しても、様々な良いUPDATEを皆さんにお伝えできそうなので、楽しみにしていてください。

明日は、@uno_yuta さんです。