先週の金曜日、弊社セミナールームにて、第二回目のありえるえりあミニ勉強会を開催しました。今回のテーマは、Sencha Touch アプリの見た目をカスタマイズする方法です。Sencha Touch で作ったアプリは、デフォルトのままでも十分綺麗ですが、アプリの個性を伝えるためにも、見た目はこだわりたい部分ですよね。
前回同様、今回も勉強会の内容を振り返りつつ、補足記事を書かせて頂きたいと思います。
勉強会で利用したスライド：
http://kawanoshinobu.github.com/arielarea-2
当日の Ustream 中継：
http://www.ustream.tv/recorded/22836796
Native vs Web
Sencha Touch の勉強会に参加するのは今回が初めてという方も多数いらっしゃったので、いきなり具体的な解説を始める前に、少し抽象的なところからお話を始めさせて頂きました。「Native vs Web」ということで、ネイティブアプリ（端末にインストールする形式のアプリ）に比べて、WEB アプリが優れている点・劣っている点、またその短所をカバーする手段として、Sencha Touch が頼りになることを紹介しました。
Sencha Touch のサンプルとしてご紹介した Watch List はなかなかインパクトがあったようです。Watch List は Sencha.Inc が開発したデモアプリで、バックエンドのコード（アプリ層に Node.js、ストレージに MongoDB、デプロイ先に Heroku を利用）も含めて、ソースコードが公開されています。
https://github.com/senchalearn/Watchlist
Powerd by Sass / Compass
Sencha Touch アプリといっても、実体は普通の WEB ページなので、CSS や HTML の Style 属性を使って見た目を変更できます。
コンポーネントの見た目を変更する一番手軽な手段は、コンフィグオブジェクトに見た目に関わるプロパティを指定する方法です。Style プロパティにスタイルシートのコードを記述することで、生成される HTML の Style 属性にその内容を反映させることができます。もしくは、各種プロパティ（width、height、margin、border、etc..）を利用しても同様のことが実現できます。その他、cls プロパティに CSS のクラス名を指定して、生成される HTML にクラス属性を埋め込み、CSS を使って見た目を変更する、ということも可能です。
このようにコンフィグオブジェクトで直接見た目に関わる定義を行うのはお手軽で便利ではあるのですが、全体的な色合いを変更したい場合に指定箇所が多くなったり、コードが大きくなるとメンテナンスが大変になったりと、煩わしい部分もあります。そんなときに出番なのが、Sencha Touch のテーマシステムです。テーマシステムを利用することで、少ない記述で、見た目を大きくカスタマイズすることができます。
Sencha Touch のテーマシステムは、Sass / Compass をベースに作られているので、それぞれの概要について簡単に紹介させて頂きました。Sass / Compass を基盤にして、その上に Sencha Touch 独自の変数・ミックスイン、そしてアイコンのセットを加えたものが、Sencha Touch のテーマシステムになります。
Theming is wicked easy!
Sencha Touch のテーマシステムを開発した David Kaneda さんは、いかに簡単に見た目を変更できるか、を意識してシステムを作られたようです。一番分かりやすいところで言うと、$base-color という変数をひとつ指定するだけで、アプリ全体の見た目を大きく変更することができます。また、全てのコンポーネントのグラデーションスタイルを変更する $base-gradient も強力な変数です。
テーマシステムで利用可能な変数は、ドキュメントに記載されているので、そちらを参照下さい。
http://docs.sencha.com/touch/2-0/#!/api/Global_CSS
また、コンポーネント毎にカスタムテーマを作ることができます。カスタムテーマはミックスインを利用して作成します。作成したカスタムテーマは、コンポーネントのコンフィグオブジェクトの ui プロパティにテーマ名を指定して利用します。一例として、sencha-toolbar-ui というミックスインを利用することで、ツールバーコンポーネントで利用可能なテーマが作成できることを紹介しました。
コンポーネント独自テーマの作成方法は、各コンポーネントのドキュメントに記載があります。以下は sencha-toolbar-ui の説明ページのリンクです。
http://docs.sencha.com/touch/2-0/#!/api/Ext.Toolbar-css_mixin-sencha-toolbar-ui
Sencha Touch のアイコンは画像ファイルではなく、CSS に base64形式のデータを埋め込んで、表示時に復元する、という方式を取っています。そのため、アイコンは、pictos-iconmask というミックスインを利用して base64形式にエンコードして CSS に埋め込みます。アイコンを利用するためには、 コンフィグオブジェクトの iconCls プロパティに CSS に埋め込んだファイル名（拡張子 .png を除いたもの）を指定します。
CSS の最適化も簡単にできるようになっています。コンポーネント毎に必要な定義を分割してくれていますので、アプリケーション用の scss ファイルから、不要なコンポーネント用のミックスインをコメントアウトするだけで、CSS から不要な定義を取り除くことができます。その他、デフォルトの定義（いくつかのアイコンを予め含めている、など）を変更する変数が用意されているので、それらを利用して、さらにファイルサイズを小さくすることも可能です。
Sass / Compass の活用方法について
WEB ページ制作のお仕事をされている @kamem さんに、Sass / Compass についての、さらに詳しい解説を行って頂きました。
発表資料は以下になります。
http://develo.org/sass_compass
便利そうだとは思いつつ、私自身、Sass や Compass をうまく活用できていないので、いろんなことができることを知って楽しくなりました。@kamem さんはご自身のWEBサイトでも、とても分かりやすく Sass / Compass について紹介されているので、ぜひご覧下さい！
http://develo.org/2012/02/26/2335.html
Sass / Compass はやり過ぎず、適材適所で使うべき、といったお話をされていて、なるほどと思いました。
まとめ
その後、弊社CTOの井上から、スマートフォンのユーザビリティテストについてお話させて頂きました。非常に面白い内容だったのですが、私の不手際で、Ustream の中継に失敗していました。申し訳ありません。。内容については、また別途ありえるえりあに記事を書く予定になっています。
次回のありえるえりあミニ勉強会では、Sencha Touch のコンポーネントシステムについて、若干マニアックな内容を扱ってみようかと考えています。他に発表して下さる方も探していますので、なにかネタがある方は、@kawanoshinobu 宛にご連絡頂けると嬉しいです。
時期は来月を予定していましたが、アルエルの年度末の都合で、開催が少し延びるかもです。HTML5 のメーリングリストなどで、また別途告知したいと思います。
最近のコメント