Sencha Touch 2.2での新しいテーマ

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

この記事は、US Sencha社ブログ New Themes in Sencha Touch 2.2を翻訳したものです。

Sencha Touch 2.2 Sencha Touch 2.2はテーマに対する新しい機能を提供しています。異なるプラットフォーム毎にアプリケーションのCSSをカスタマイズできるようになります。プラットフォームとはChrome、Internet Explorer 10、SafariなどのブラウザーあるいはAndroid、Blackberry 10、Windows Phone、Microsoft Surface Pro、RTなどのデバイスカテゴリーです。 Sencha Touchでは、アプリケーションは現在使われているプラットフォームを検出することができ、そのプラットフォームに対する適切なテーマを適用します。この方法でSencha Touchでは、あなたのアプリケーションが動作するデバイスやブラウザごとに外観をカスタマイズする力を提供します。

Windows Phoneのサンプルテーマ:

Sencha Touchはカスタマイズ出来るベーステーマとSencha Touch、Internet Explorer 10、Blackberry 10デバイス用のビルトインテーマを提供します。新しい Sencha Cmd 3.1 でインストールされる Sass を使ってテーマを生成できます。 Sencha Cmdは Ruby 1.9.3 Ruby 1.9.3 で動作し、あなたのアプリケーションにカスタムテーマやCompassとSassでパッケージされたテーマを提供します。

ベーステーマを開始点として利用できます。ベーステーマはフレームワークだけの為の最小なスタイリング情報が含まれています。そこからCSSを利用して自分のカスタムテーマを生成できます。

次のサンプルはアプリケーションのapp.jsonから持ってきたものです、これだとプラットフォームがiOSの場合にはAppleというテーマをロードします。

"css":  [
 {
  "path": "resources/css/sencha-touch.css",
  "platform": ["ios"],
  "Theme": "Apple"
 } ]

アプリケーションを実行している最中にURLのテーマパラメータを利用してテーマをテストできます：
http://localhost/sdk/touch/examples/kitchensink/index.html?theme=Apple

プラットフォーム

プラットフォームによってアプリケーションが動作している環境によって特定のリソースをアプリケーション内にロードできるようになります。次のサンプルではプラットフォームがChrome、Safari、iOS、Android、Firefoxの場合はsencha-touch.cssファイルが有効になります:

"css":   [ 	
{
  "path": "resources/css/sencha-touch.css",
  "platform": ["chrome", "safari", "ios", "android", "firefox"]
} ]

複数のプラットフォームも指定でき、それを使ってJSリソースをロードできます。次のサンプルではプラットフォームがChrome、Safari、iOSの場合はvendorfiles.jsリソースをロードします：

"js":   [
 {
  "path": "vendorfiles.js",
  "platform": ["chrome", "safari", "ios"]
} ]

上記の各サンプルではアプリケーションを実行しているデバイスがリソースに指定したプラットフォームと合致する場合にだけリソースをロードします。 URLの?platformパラメータを使うとプラットフォームの機能をテストできます。

次のサンプルはInternet Explorer 10をURLテストします:
http://localhost/sdk/touch/examples/kitchensink/index.html?platform=ie10

platformConfig 関数を使うとアプリケーション内からもプラットフォームがどのデバイスで動作しているか検出できます。

次は使用可能なプラットフォームです：

Phone
Tablet
Desktop
iOS
Android
BlackBerry
Safari
Chrome
IE10
Firefox

アイコン

Sencha Touch 2.2テーマの一つの要素は新しくフォントとしてアイコンを利用することです。以前はアイコンのスケーリングでは、アプリケーションがアイコンの図を描画したり、再描画してたり、スケーリングしたり、それぞれのブラウザやデバイスに表示する度に変更する必要があり、大きいオーバーヘッドが必要でした。

アイコンはこのボタンシンボルのようになります：

新しいTouch 2.2では、アイコンは現在フォントとして扱われるので、このため図を再描画する必要がなくなって素早く拡大縮小をできるようになりました。アイコンはボタンやタブ表示されます。

既に存在しているアイコンをフォントに切り替えるにはPictos Server、Pictonic、icomoon.io、 http://fontstruct.com/ が利用できます — 全ては無料かトライアルサブスクリプションで利用できます。

Pictosフォントを使う

Pictosフォントは無料アイコンのコレクションを提供します。 http://www.pictos.cc でPictosフォントで使用可能な文字の全てのリストを見ることができます。 Sencha TouchはPictos Font Pack に無料アクセスを提供します:

Sencha Cmdを利用してアプリケーションを生成するとあなたのアプリケーションファイルにフォントライブラリがコピーされます。

Sencha Touchは勝手に実際のアイコンにアイコン名をマッピングしますので、それをアプリケーション内で利用できます。

次のサンプルをご覧ください:

1	{ xtype: 'button', iconCls: 'home', title: 'Home' }

または、Compassのiconミックスインを使って指定されたアイコンフォントのキャラクターをアプリケーションで使うiconClsにマッピングできます。

1	@include icon('home', 'H');

他のアイコンフォントを使う

アプリケーションで使えるフォントはPictosフォントだけではありません。もし他のフォントを知っているとか、あなたのアイコンをフォントにコンバートしたら、iconミックスインを使って簡単にそのフォントを使ことができます。

Pictosフォントと同じようにアイコンに利用されるiconClsと文字を指定する必要があります。さらに、アイコンフォントの名前も指定する必要があり、それは持っているフォントアイコンのフォントファミリーと一致しなければなりません。さらにicon-font ミックスインを使ってフォントがCSSに含まれている事を確認する必要があります。

このサンプルはカスタムMyFontのHomeアイコンを指定します：

1	@include icon('home', 'H', 'MyFont');

次のサンプルはicon-font mixinを利用してPictosフォントをインクルードする方法を紹介します：

1	@include icon-font('Pictos', inline-font-files('pictos/pictos-web.woff', woff, 'pictos/pictos-web.ttf', truetype,'pictos/pictos-web.svg', svg));

最初のパラメータはフォントフェイスの名前で、これはフォントファミリーと一致する必要があります。二番目のパラメータはCompass関数のinline-font-filesにフォントファイルのWOFF、TIF、SVGバージョンへのパスを渡しています。inline-font-filesは、フォントファイルをCSSファイルの中にインラインでbase64エンコードします。

他の良いアイコンフォントのリストです (有料のものも無料のものもあります) http://css-tricks.com/flat-icons-icon-fonts/

まとめ

我々の新しいSencha Touchテーマでは、アプリケーションを特定なモバイルデバイスとプラットフォームをターゲットにする能力があります。テーマとアイコンはあなたのアプリケーションの外観をより魅力的にしつつパフォーマンスも高めます。 Sencha Touchテーマでは様々なデバイスのタイプに渡って、あなたのアプリケーションを一貫して表示できます。統一性があるとドキュメンテーションとサポートの需要が減りつつコストが下がって新しい機能を生成することに集中できます。

Sencha