HOME > 開発者向けBLOG > Sencha Touch >  Sencha Touch 2.2.0.alpha リリース

Technology Note 開発者向けBLOG

Sencha Touch

Sencha Touch 2.2.0.alpha リリース

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

本日、Sencha Touch 2.2.0 alpha がリリースされました。 Sencha社の公式ブログで、そのうちアナウンスされるかもしれませんが(ベータまでされないかもしれませんが) 先に取りで、記事を執筆いたします。 ダウンロードは、こちらからどうぞ。 内容は、主にリリースノートの翻訳です。





IE10 サポート

WebkitではないIE10に、初めて対応したアルファリリースです。 ブラウザは、私たちが必要とするより多くの、CSS機能をサポートしていっています。(主にFlexible Box Layout) IE10も同じく、Pointer Eventsを提供します。

これは他のブラウザも、残りのWebkit CSS仕様と、Javascriptをサポートしなくてはならないことを意味します。 1番影響があるのはfont-facesを使用時のwebkit-masksでしょう。

CSSがプラットフォーム間で、全く違う動きをすることがあり得て、SASSを再構築しました。 そして、CSSサイズを管理可能にするため、いくつか新しいオプションを提供します。


app.jsonでのプラットフォーム判定

開発者は、プラットフォーム別にUIを維持したい場合もあります。 これを簡単に行うために、目的のプラットフォームに対して、明示的にリストを作成して、CSSファイルを指定する新しいオプションを提供します。 以下は、異なるCSSファイルが、異なるプラットフォームでロードされる設定を示した例です。 プラットフォーム判定は、マイクロローダーが行います。今後この機能を改良していきますので、期待してください。

"css": [
{
    "path": "../../resources/css/base.css",
    "update": "delta"
},
{
    "path": "resources/css/sencha-touch.css",
    "platform": ['chrome', 'safari', 'ios'],
    "update": "delta"
},
{
    "path": "resources/css/android.css",
    "platform": ['android'],
    "update": "delta"
},
{
    "path": "resources/css/bb.css",
    "platform": ['blackberry'],
    "update": "delta"
},
{
    "path": "resources/css/wp.css",
    "platform": ['ie10'],
    "update": "delta"
}
]

テーマ作成に関する変更

Sencha Touch 2.2におけるテーマ体系は、大きく改良されました。 すべてのコンポーネントに対する基本的な色とレイアウトだけからなる’ベース’に、デフォルトのテーマを提供する形にしました。 従って、新しい’デフォルト’テーマも、他の新しいテーマも’ベース’上に作られるようになります。 利用できるトランジションについて、全SASSの行をレビューした。 そして、粗雑なつくりと必要の無い部分について削除しました。

また、-webkit-maskの代わりに、Pictos Fontを利用するようにしました。 既存のpictos-iconmask mixinは、利用せずに新しいアイコン用のmixinと入れ替えました。 この変更によって、あなたがボタンやタブにiconMaskを追加する必要はありません。


SASSのアップグレード

まだアルファ版なので、新しいSASSは、手動で作っています。 これらは、次の機能強化の時に、コマンドツールで自動化されます。 Sencha Touch 2.2 SASS に更新するのは直接手動で行わなくてはなりません。 全ての変数は、まだ動きます。 しかし、新しいベーステーマが必要とする@importは必須です。


2.1:
@import 'sencha-touch/default/all';
2.2:
@import 'sencha-touch/base';
@import 'sencha-touch/base/all';
@import 'sencha-touch/default';
@import 'sencha-touch/default/all';

あるいは、単純にapp.jsonファイルにrerouces/cssのbase.cssを加えることで、Sencha Touchデフォルトのテーマを利用できます。


app.json:
"css": [
{
        "path": "../../resources/css/base.css",
                "update": "delta"
},
{
        "path": "resources/css/app.css",
        "update": "delta"
}
]
app.scss:
@import 'sencha-touch/default';
@import 'sencha-touch/default/all';

コンポーネントmixinsを使う場合、ちょっと変更されていて、劇的にSASSコンパイル時間を向上させています。 もはや@importを通してminxとして含まれません。


2.1:
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
2.2:
@import 'sencha-touch/default/panel';
@import 'sencha-touch/default/buttons';
@import 'sencha-touch/default/sheet';

そして、最後にアイコンを利用する場合、iconMaskをJSに含める必要はありません。


パフォーマンス改善

アニメーションキュー

Fastbookプロジェクトに、導入された最初の項目で、 AnimationQueueクラスをフレームワーク内に実装しました。 しかしまだ完全な実装までは、かなりの時間がかかります。


リスト更新

私たちは、絶え間なくリストのパフォーマンス向上に挑んでいて、複数のステージを考えています。 Sencha Touch 2.1の無限リストは、見える部分に必要な最小のアイテム描画にしました。 そして、スクロールしている間、リストの内容が更新されるようにして、それぞれのリストアイテムが正しい位置に表示されるようにしました。

2.2 アルファでは、わずかにスクロールダウン、またはスクロールアップするときの動作を変更しました。 画面に最大2つのアイテムを表示するだけで、良くなりました。

PAGETOP