3回にわたるSencha Touchチュートリアルで、worldweatheronline.comのWebサービスから天気情報をロードする簡単なユーティリティアプリケーション “Do I need my Umbrella”（傘は必要ですか）アプリケーションを作成します。天気コードに基づいて、このアプリケーションは傘が必要か必要ではないか予想できます。

このチュートリアルのPart IIでは、アプリケーションのテーマの作成を始めます。このチュートリアルのPart Iのコードを利用します。そのチュートリアルは ここ でご覧下さい。

追加のリソースです：
最後のアプリケーションコードをダウンロードできます — フルソリューション と スタイルシート があります。
チュートリアルのボーナスアイテム がいくつかあります。
カスタムテーマ付きのアプリケーションを ここ でご覧になれます。

このチュートリアルに必要なもの：

• Sencha Touch 2.3 以降
• Sencha Cmd 4.x
• Ruby上で動作するCompass & Sass
• モダンブラウザ
• エディタ

デフォルトのテーマから拡張する

デフォルトテーマに基づいたカスタムテーマを作成します。デフォルトテーマから拡張するのが良い理由は、たくさんのSencha Sass変数やmixinsが含まれているからです。それはAPIドキュメンテーションに記載されています。

デフォルトでは、Sencha Cmdでアプリケーションを生成しているときに、自動的に空のSassスタイルシート(app.scss)が入ったresourcesフォルダが生成されます。app.scssを開きましょう。

Sassスタイルシートは次のようになっています：

1
2
3
4
5
6

//(1) ここでSencha変数を定義して下さい
 
@import 'sencha-touch/default';
@import 'sencha-touch/default/all';
 
//(2) カスタムSass・Cssコードとmixinsをここで定義して下さい

上の(1)で全ての（Sencha）変数を定義して下さい：変数の直後にはmixinsを配置します。この順番を保つことが重要です。そうしないと、その変数の効果が消えてしまいます。@import の中身ではこの変数が使われます。

インポートの後に(2) カスタムCSS規則やmixinsを記述します。

はじめは最も簡単な変更ということでベース色を変更しましょう：

1

$base-color: #42282E;

ベース色を変更すると、ほとんどのSencha Touchコンポーネントが利用するプライマリ配色をセットします。

テストしましょう。コマンドラインのSencha Cmdで次のコマンドを実行して下さい：

sencha app watch

Sencha Cmd 4以降のバージョンではsencha app watchコマンドがあります。これをCompassコマンドと比較できます：compass watch。Sencha Cmdは保存をする度にアプリケーションを監視して、Sencha CmdがアプリケーションをビルドしてSassスタイルシートをコンパイルします。変更が検出されたら、アプリケーションとCSSが最新状態にするための最低限の作業を行いますので、Sassをリビルドする必要はありません。

Preview your application in a modern browser: . そのアプリケーションをモダンブラウザでプレビューして下さい： http://localhost/dinmu

さて、少し遊びましょう。Sencha Touchはテーマを単純にカスタマイズする為に利用できる良いSass変数とmixinsがあります。 正しい色の組み合わせを見つける素晴らしいツールがあります。 Adobe Kulerです。人気がある配色を次のURLで探して下さい： https://kuler.adobe.com/explore/most-popular/?time=month さて、これをDo I need the Umbrellaアプリケーションで色の変数として利用しましょう。

ボタン、アラートボックス、settingsとmainの画面バックグラウンドの色をセットしましょう：

1
2
3
4

$alert-color: #D6665A;
$confirm-color: #75A48B;
$page-bg-color: lighten(#D9CFB0,15%);
$form-bg-color: $page-bg-color;

同様に、全てのグラデーションを外しましょう：

1

$base-gradient: 'none';

下部のツールバーには 'light' のUIがあります。 下部のツールバー用の薄いスキンをスタイリングするためにmixinを生成しましょう。これにはsencha-toolbar-uiを利用できます。次のsenchaインポートで実装できます(2)：

1

@include sencha-toolbar-ui('light', #DC9B74, 'none');

カスタムCSSを生成する

さて、我々のCSSルールを実装しましょう。

最初はツールバーのタイトルテキストを変更します：

1
2
3
4
5
6
7

.title {
    .x-title {
        line-height: 2.5em;
        text-shadow: none;
        letter-spacing: -1px;
    }
}

次はフッターテキストを設置しましょう：

1
2
3
4
5
6
7
8
9

.footer {
    font-size: 0.6em;
    padding: 12px;
    text-align: right;
    letter-spacing: 0;
    a {
        color :#000;
    }
}

カスタムテンプレートにいくつかのスタイルが必要となります。フォントとフォント色を変更しましょう：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.textview {
    color: black;
    line-height: 1.2em;
    letter-spacing: -1px;
    padding: 0.8em;
    text-transform: uppercase;
 
 
    .yes {
        color: $alert-color;
    }
    .no {
        color: $confirm-color;
    }
    .temp {
        color: $confirm-color;
    }
}

In your Sass stylesheet, create the styles to tweak the settings form: 設定フォームを編集しましょう。Sassスタイルシートで、設定フォームを少し変更する為のスタイルを生成して下さい：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

.x-form-fieldset {
    .x-form-fieldset-inner {
        border: none;
        background: $page-bg-color;
    }
    .x-form-fieldset-instructions .x-innerhtml {
        color: #000;
    }
}
 
.x-form-label {
    background-color: lighten(#DC9B74, 32%);
}
.x-toggle-field .x-form-label {
    background: none;
    border: none;
    margin-bottom: 20px;
}
.x-toggle {
    position: absolute;
    right: 0;
}

カスタムフォントを実装する

Senchaインポートのすぐ上にフォントのインポートを追加して下さい。Google Fontsのサービスを利用します。このフォントサービスを利用すると、ホスティングされているフォントファミリーを見て、実装したいフォントを選べます：

1
2

@import url(http://fonts.googleapis.com/css?family=Oswald:700);
@import url(http://fonts.googleapis.com/css?family=Lobster);

では、フォントをセットしましょう。

ツールバーのタイトルには、次のルールを .x-title CSSクラスに追加して下さい：

1
2
3
4

font: {
    family: "Lobster";
    size: 1.2em;
}

テンプレートビューには、次のルールを .textview CSSクラスに追加して下さい：

1
2
3
4

font: {
    family: "Oswald";
    size: 2em;
}

パフォーマンスを手直しする

もしSencha Touchアプリケーションのパフォーマンスを最適化したいと思ったのなら、最も簡単なのはスタイルシートを最適化することです：とても効果的です。では、コンパイルされたCSSスタイルシートのファイルサイズを減少しましょう。

自動的にSencha Cmdでアプリケーションを生成した時に、コンパイルされたCSSスタイルシートは縮小されました。これはresources/sass/config.rbファイルのoutput_style設定で決まります。出力を人間が読めるようにさせたいですか？その場合はoutput_style値を:expandedにセットして下さい。ただそうするとファイルサイズは大きくなります。

Check the resources/sass/config.rb file, it should be set like this: resources/sass/config.rbファイルを確認して下さい。次のようになっているはずです：

1

output_style = :compressed

全てのSencha Touchフレームワークmixinsをインポートする代わりに、本当に必要なのをインポートしましょう。これでスタイルシートのサイズも小さくなるので、より速くダウンロードできます。

通常はmixinsを全てインポートしている@importの行をコメントアウトします。その後は自分でSencha Touch mixinsを全てリストアップして、Sencha Cmdが私のSassファイルを監視・コンパイルしていることを確認しています（sencha app watch）。

その後は利用してないクラスに基づいて、mixinsを一つ一つ外していきます。ただこれは少し難しいです：直接コードしたことがないクラスがあるかもしれないですが、それは他のクラスのサブクラスです、例えば+Class、または+Panel+。そのため、コンパイルエラーが発生しないようにターミナルを見ながら、それを一つ一つ外していくべきです。使用可能なSencha Touch mixinsのリストは次のURLをご覧ください： touch/resources/themes/[theme-to-extend-from]/all.scss.

@import ‘sencha-touch/default/all’ を 次のインポート定義に置き換えます：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

@import 'sencha-touch/default/src/_Class.scss';
@import 'sencha-touch/default/src/_Button.scss';
@import 'sencha-touch/default/src/_Panel.scss';
@import 'sencha-touch/default/src/_MessageBox.scss';
@import 'sencha-touch/default/src/_Toolbar.scss';
@import 'sencha-touch/default/src/carousel/_Carousel.scss';
@import 'sencha-touch/default/src/form/_Panel.scss';
@import 'sencha-touch/default/src/form/_FieldSet.scss';
@import 'sencha-touch/default/src/field/_Field';
@import 'sencha-touch/default/src/field/_Checkbox.scss';
@import 'sencha-touch/default/src/field/_Select.scss';
@import 'sencha-touch/default/src/field/_Slider.scss';
@import 'sencha-touch/default/src/field/_Spinner.scss';
@import 'sencha-touch/default/src/picker/_Picker.scss';
@import 'sencha-touch/default/src/slider/_Slider.scss';
@import 'sencha-touch/default/src/slider/_Toggle.scss';

たくさんのアイコンを利用していませんので、Pictosアイコンフォントを実装する必要はありません。この場合はなんKBかを節約できるので自分のアイコンフォントを利用しましょう。

この変数をSassスタイルシートの先頭、Sencha mixinsをインポートする直前に追加しましょう：

1
2

$include-pictos-font: false;
$include-default-icons: false;

次に、カスタムアイコンフォントを追加します。私はIcoMoonのウェブサイト: http://www.icomoon.io 経由でアイコンフォントを生成しました。 このチュートリアルのボーナスアイテムに入っています。dinmu フォントフォルダをresources/sass/stylesheets/fonts/　にコピーして下さい。

google fontのインポートの下にdinmu icon fontをインポートして下さい：

1
2
3
4
5
6
7
8
9
10

@font-face {
    font-family: 'Dinmu';
    src:url('stylesheets/fonts/dinmu/Dinmu.eot');
    src:url('stylesheets/fonts/dinmu/Dinmu.eot?#iefix') format('embedded-opentype'),
        url('stylesheets/fonts/dinmu/Dinmu.ttf') format('truetype'),
        url('stylesheets/fonts/dinmu/Dinmu.woff') format('woff'),
        url('stylesheets/fonts/dinmu/Dinmu.svg#Dinmu') format('svg');
    font-weight: normal;
    font-style: normal;
}

全てのインポートの下に、アイコンmixinを生成して、設定ボタンを表示して下さい：

1

@include icon('settings', 's', 'Dinmu');

その直後に、テンプレートビューのためにいくつかの面白いアイコンをコーディングできます：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

.rain:before,
.norain:before {
    font-family: 'Dinmu';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
 
    padding-right: 10px;
    font-size: 60px;
 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
 
.norain:before {
    content: "\53";
    color: $confirm-color;
}
.rain:before {
    content: "\52";
    color: $alert-color;
}

最後に、Do I need my Umbrella テーマが完成しました！ブラウザを開いて、 http://localhost/dinmu を実行して下さい。

アプリケーションを改善する次の手順は、プロダクションビルドの生成とこのアプリケーションをネイティブPhoneGapアプリケーションにポートすることです。これについては、このチュートリアルのPart IIIで説明します。

Senchaのテーマ生成に興味がありますか？ 12月から、Senchaは上級のExt JSテーマについてのクラスを開講します。世界中で行っている オープン形式トレーニング をご覧下さい。またはオンライントレーニングに参加して下さい。