Contents アプリケーションのスタイル設定とは CSS リソースの使用 Ext JS および Sencha Touch テーマ Sencha Touch テーマ Sencha Touch 2.2 Sencha Touch 2.3+ Ext JS テーマ Ext JS 4.2 Ext JS 5.0 テーマ継承の構造 Ext JS テーマの継承 Touch のテーマの継承 QuickThemes Sencha Touch 2.3+ QuickThemes Ext JS 4.2 QuickThemes Ext JS 5.0 QuickThemes テーマの適用 テーマのカスタマイズ テーマのエクスポートまたは保存 テーマの除外 グローバル変数の変更 変数の検索 変数値の割り当て 色変数 グラデーション変数 Sencha Touch のグラデーション Ext JS のグラデーション フォントファミリー変数 テーマのコンパイル 変更された変数 コンポーネントの UI Ext JS における UI の変更 Sencha Touch での UI の変更 カスタム UI の作成 SCSS リソース Architect からピッカーの使用 画像変数 スタイル設定への画像の取り込み コンポーネントへの画像の添付 画像コンテナの作成 SCSS の画像

アプリケーションのスタイル設定

アプリケーションのスタイル設定とは

アプリケーションのスタイル設定はコンポーネントの外観を調整することを意味します。これらの調整には色、色グラデーション、フォント、マージン/パディングなどがあります。Architect ではいくつかの方法で行うことができます。

以下の方法を使用できます。

  • プロジェクトに適用されるテーマの変更
  • コンポーネントのスタイルを記述するカスタム CSS ルールの作成
  • JavaScript でコンポーネントのスタイルを直接設定

本ガイドは主に最初の 2 つの箇条書きを中心に扱います。開始する前に、スタイル設定とテーマ設定の違いについて説明しましょう。

スタイル設定はテーマ設定を含む全体的な用語ですが、CSS への直接的な変更も含まれます。これらの変更はプロジェクトの中で独立したリソースとして実装されます。

テーマ設定は Ext JS 4.2+、Ext JS 5+、Sencha Touch 2.2+ テーマ SCSS への変更に関するものです。テーマ SCSS は、変数を変更する、コンポーネント UI を作成する、または付加的なオーバーライドを追加することによって変更できます。その後、テーマはプロジェクトに適用できるパッケージとしてコンパイルされます。

各 Sencha フレームワークにはアプリケーションで使用できる数々のテーマが含まれています。Architect 3.1 では、次のいずれかの方法でアプリケーションにテーマを適用できます。

  • Architect 外でテーマを作成し、Sencha Cmd でコンパイルし、 出力される CSS ファイルを含めます。この CSS ファイルは、テーマを Architect アプリケーションの CSS リソースとして定義します。

  • ツールボックスでフレームワークのテーマの 1 つを選択し、プロジェクトに追加して適用します。プロジェクトに含められるテーマの数に制限はありませんが、適用できるのは 1 度に 1 つのみです。

  • プロジェクトでテーマリソースを選択してツールボックスのテーマをカスタマイズします。これで、コンポーネント単位に整理されたテーマの外観を定義するすべての変数を表示できるようになります。さらに、それらをサポートするコンポーネントの新しい UI を作成できます。カスタム SCSS リソースを追加することによって、これらの UI を拡張できます。変更はだたちにコンパイルされ、Architect キャンバスでプレビューできます。

  • テーマを他のプロジェクトで使用したり他のユーザーが使用できるように、ツールボックスに保存するか外部ファイルにエクスポートします。

CSS リソースの使用

CSS リソースは、ビューコンポーネントのカスタムスタイルを格納した CSS ファイルです。CSS リソースを追加するには、ツールボックスで見つけてプロジェクトのリソースに追加します。CSS リソースを追加したら、URL コンフィグを CSS ファイルの場所に設定します。

一般的に、URL コンフィグにメインの app.html ファイルへの相対パスを与えることが推奨されます。相対パスを使用すると、ファイルのコンテンツを Architect のコードエディタで編集できます。インスペクタで CSS リソースを選択し、コードビューに切り替えます。これで、CSS コードを編集して対象となる .css ファイルを更新し、キャンバスに再適用できます。指定したローカルパスにファイルがない場合、プロジェクトの保存時またはビルド時に Architect によって作成されます。

Architect は CSS リソースを設定したら、ロードしようとします。成功すると、Architect によりカスタムの CSS がキャンバスに適用され、アプリの設計時にカスタムのスタイルを見ることができます。Architect 以外の方法で CSS ファイルが変更された場合、キャンバスの上にある [Refresh CSS（CSS を更新）] ボタンをクリックしてファイルをリロードしキャンバスに再適用できます。

作成した CSS をキャンバスにロードして適用すると、カスタムのスタイルでベースのフレームワークスタイルを上書きできます。これがキャンバス上のコンポーネントの表示を崩す場合があります。ほとんどの場合、CSS スタイルはテーマやフレームワークスタイルの後に適用されるので優先されます。フレームワーク内で発生しない CSS クラスを使用することをお勧めします。これにより、ベースとなる CSS との競合の可能性を排除できます。

Ext JS および Sencha Touch テーマ

Sencha フレームワークには Ext JS 4.2+、Ext JS 5+、Sencha Touch 2.2+ で構築されたアプリケーションに適用できる様々なテーマが含まれています。

Sencha Touch テーマ

Sencha Touch プロジェクトには次のテーマが用意されています。

Sencha Touch 2.2

  • Default - Sencha Touch プロジェクトに使用するデフォルトのテーマ。このテーマは、簡単に変更できるように特別に設計されており、カスタムテーマのベースとして最適です。

  • Blackberry - BlackBerry 10+ デバイス向けのテーマ。このテーマは BlackBerry Action Bar、Action Menus、Context Menus、Application Menus をサポートします。

  • Windows Phone - Windows Phone および Microsoft Surface といった Internet Explorer 10 以降のデバイスのテーマ。

Sencha Touch 2.3+

  • Default - Sencha Touch プロジェクトに使用するデフォルトのテーマ。このテーマは、簡単に変更できるように特別に設計されており、カスタムテーマのベースとして最適です。

  • Blackberry - BlackBerry 10+ デバイス向けのテーマ。このテーマは BlackBerry Action Bar、Action Menus、Context Menus、Application Menus をサポートします。

  • Windows Phone - Windows Phone および Microsoft Surface といった Internet Explorer 10 以降のデバイスのテーマ。

  • Cupertino - iOS7+ ベースのデバイスのテーマ。

  • Cupertino Classic - iOS6 ベースのデバイスのテーマ。

  • MountainView - Android ベースのデバイスのテーマ。

  • Tizen - Tizen ベースのデバイスのテーマ。

Ext JS テーマ

Sencha Ext JS プロジェクトには次のテーマが用意されています。

Ext JS 4.2

  • Classic - クラシックブルーの Ext JS テーマです。

  • Gray - ‘ext-theme-classic’ を継承します。classic と同じですが、グレー調です。

  • Access - アクセシビリティのテーマです。‘ext-theme-classic’ を継承します。これは、Ext JS 4.2 WAI-ARIA アクセシビリティ要件用に作成されたレガシーテーマです。下位互換性を維持するために残されていますが、aria テーマのほうが優先されます。

  • Neptune - モダンなボーダレステーマです。‘ext-theme-neutral’ を継承します。このテーマは、簡単に変更できるように特別に設計されており、カスタムテーマのベースとして最適です。

Ext JS 5.0

  • Classic - クラシックブルーの Ext JS テーマです。

  • Gray - ‘ext-theme-classic’ を継承します。classic と同じですが、グレー調です。

  • Neptune - モダンなボーダレステーマです。‘ext-theme-neutral’ を継承します。このテーマは、簡単に変更できるように特別に設計されており、カスタムテーマのベースとして最適です。

  • Neptune Touch - Neptune と同じですが、タッチスクリーンデバイスで使用するために拡大されたコンポーネントが含まれます。

  • Crisp - モダンな最小構成のテーマです。ext-theme-neptune’ を継承します。

  • Crisp Touch - Crisp と同じですが、タッチスクリーンデバイスで使用するために拡大されたコンポーネントが含まれます。

  • ARIA - アクセシビリティのテーマです。ext-theme-neptune’ を継承します。

テーマ継承の構造

Ext JS テーマの継承

Ext JS テーマはパッケージ内に整理され、基本的に階層化されています。‘ext-theme-base’ はベースとなるテーマで、フレームワークコンポーネントのレイアウト情報を含みます。‘ext-theme-neutral’ は ‘ext-theme-base’ から継承し、すべてのコンポーネントに対してグローバル変数とルールを設定します。すべてのテーマは何らかの方法で ‘ext-theme-neutral’ から継承されます。

さらに、Ext JS 5.0 では ‘ext-theme-neptune-touch’ と ‘ext-theme-crisp-touch’ でタッチスクリーンデバイスのコンポーネントのサイズを調整できるように、タッチサイズ指定用のサブパッケージが含まれます。

以下のチャートは Ext JS 5 でテーマの継承がどのように行われるかを分かりやすく説明しています。

Ext JS テーマに関する詳細につていは、Ext JS のテーマ設定ガイドを参照してください。

Touch のテーマの継承

Touch はベースやニュートラルテーマと同じ基本的な構造に従います。ただし、デフォルトその他のプラットフォーム特有のテーマはニュートラルテーマパッケージの上に構築されます。デフォルトテーマのみ設定可能な変数があります。その他のテーマは特定のプラットフォームの外観を再現しているだけなので、細かい設定はできません。

Touch テーマに関する詳細につていは、Touch のテーマ設定ガイドを参照してください。

QuickThemes

Sencha Ext JS 4.2+、Ext JS 5+、Touch 2.3+ には Architect 3.1 内にいくつかの QuickThemes が含まれています。QuickThemes を使用することによって、テーマの幅広いバリエーションを数クリックだけで作成できます。これにより、コンポーネントをすべてカスタマイズする必要がなくなり、テーマ設定を容易に行うための明確なパスを提供します。

Touch と Ext JSでは、以下の Quick Themes が利用できます。

Sencha Touch 2.3+ QuickThemes

  • デフォルト

Ext JS 4.2 QuickThemes

  • Neptune

Ext JS 5.0 QuickThemes

  • Neptune

  • Neptune Touch

  • Crisp

  • Crisp Touch

テーマの適用

フレームワークのテーマ、カスタムで追加されたテーマ、QuickThemes はすべてツールボックスの “themes” で見つけることができます。次のいずれかの方法で、ツールボックスのテーマをプロジェクトに適用できます。

  • テーマをキャンバスパネルの空白の領域にドラッグする。

  • テーマを [Inspector（インスペクタ）] パネルのリソースノードにドラッグする。

  • [Inspector（インスペクタ）] パネルでリソースノードを選択し、テーマをダブルクリックする。

プロジェクトにテーマを追加すると、Architect はこのテーマをプロジェクトに適用するかどうか尋ねます。

プロジェクトに含められるテーマの数に制限はありませんが、適用できるのは 1 度に 1 つのみです。異なるテーマを適用するには、[Inspector（インスペクタ）] パネルでテーマを右クリックし、[Apply Theme（テーマを適用）] を選択します。同様に、プロジェクトからテーマを削除またはコピーすることができます。

ツールボックスからプロジェクトのテーマのリソースを簡単にカスタマイズできます。また、ライブラリの theme コンフィグの値を変更することによって、フレームワークのカスタマイズできないテーマを適用することもできます。フレームワークのテーマのいずれかを選択するだけです。この組み込みのテーマはリストの先頭に表示され、その他のカスタムテーマはすべて末尾に表示されます。

注意:ツールボックスからプロジェクトにテーマを適用したら、theme コンフィグを変更してもプロジェクトからテーマは削除されません。適用されなくなるだけです。ライブラリで theme 設定を行うのはカスタムテーマを適用するのと同じ効果があります。

テーマのカスタマイズ

開始する前に、Ext JS 4.2 および Sencha Touch 2.2 以前のフレームワークバージョンのカスタムテーマを作成することはできないのでご注意ください。さらに、カスタムテーマは Ext JS または Sencha Touch のいずれかで作成する必要がありますが、両方では作成しないでください。両フレームワークで共有する単一のテーマは作成できません。

以下はテーマをカスタマイズする一般的な手順です。

  1. 先に説明したように、Sencha に定義されているテーマの 1 つをプロジェクトに適用します。

  2. このテーマを [Project Inspector（プロジェクトインスペクタ）] で選択します。たとえば、「MyCrispTheme」というような名前で表示されています。コンフィグパネルで File Name を変更することでテーマの名前を変更できます。

  3. “Theme” アコーディオンヘッダーをクリックして、コンポーネントでグループ化されたグローバル変数のリストを表示します。これらの変数を変更することでテーマを必要に応じてカスタマイズできます。グローバル変数を変更すると、そのコンポーネントのすべてのインスタンスの外観に影響します。コンポーネントのインスタンスを 1 つだけ変更する場合は、以下の UI セクションを参照してください。

テーマのエクスポートまたは保存

カスタムテーマを作成して名前を付けたら、[Project Inspector （プロジェクトインスペクタ）] ウィンドウでそのテーマを右クリックしてドロップダウンメニューを開き、テーマをツールボックスに保存するか他のユーザーと共有できるファイルにエクスポートします。

カスタムテーマをツールボックスに保存する場合、開いたポップアップウィンドウで、テーマの表示名や、使用されるカテゴリとグループを定義します。

カスタムテーマをファイルにエクスポートする場合、ポップアップウィンドウが表示されるので、ファイル名や .xdc ファイルを書き出す場所を定義します。

ほかのユーザーは、このファイルをダウンロードしてから、[Edit（編集）] メニューバーアイテムの [Import Component（コンポーネントのインポート）] リンクを使用してインポートできます。

テーマの除外

Architect テーマをプロジェクトに含めない場合は以下のシンプルな手順に従います。

  1. ライブラリリソースを選択し、組み込みのテーマ（classic や default など）を選択します。
  2. [include CSS （CSS を含める）] ボックスのチェックマークを外します。

グローバル変数の変更

グローバル変数の値を変更することによって、テーマの多くの要素をカスタマイズできます。

[Theme（テーマ）] アコーディオンが選択された状態で、任意のクラス名の左側にある三角形をクリックして、そのコンポーネントのグローバル変数を表示します。

それぞれの変数名は説明なしでも分かるようになっていますが、大半は詳細な説明のあるツールチップが用意されています。さらに、Ext JS の「CSS 変数」セクションと Touch API リファレンスページに変数名が文書化されています。

各変数にはグリッドにリスト表示される人間が読むことができる “display name” に加えて、 “real name” または “scss-name” があります。このような変数値の構文は $ 記号から始まります（たとえばベースカラー変数の場合、$base-color）。これは、変数をリンクする際に使用できる変数参照です。2 つの変数のタイプが同じである場合、一方の値フィールドにもう一方の scss 名を使用できます。

Ext.Class および Ext.Component に定義される変数はルートレベルです。これらの変数はコンポーネントを直接変更しませんが、派生するクラスのために更新するとテーマの全体的な外観が変わります。

コンポーネントの変数は、コンポーネントが相互に継承関係にある場合を除き、別のコンポーネントに定義されている変数を参照しないのが一般的です。

変数の検索

以下の命名規則で検索するためにフィルタパネルを使用することによって、変更対象の変数を見つけて変更できます。

  • クラス名
  • 変数名
  • $variable-real-name
  • value:variable-value
  • val: variable-value
  • type:variable-type（文字列、色、番号）

変数を選択したら、新しい値を追加できます。設定可能な値は変数のタイプによって異なります。使用できない値を入力すると、通常はコンパイル時にコンパイラーでエラーが発生します。以下、いくつかの異なる変数について説明します。

変数値の割り当て

色変数

色変数には現在の色の値のプレビューを表示する統合カラーピッカーが用意されています。

色をクリックしてカラーピッカーを起動し、プロジェクトのコンポーネントに使用する色を設定します。

本ガイドでカラーピッカーについては後述します。

グラデーション変数

グラデーション変数には現在のグラデーションとグラデーション曲線のプレビューを表示する統合グラデーションピッカーが用意されています。グラデーションは同じコンポーネントに対して選択した色に対して作用する関数でグレーとしてプレビューできます。ただし、適用されている場合、グラデーションは正確な色を表示します。

色のグラデーションでは、任意の領域を段階的に埋める一定範囲の色を指定します。

Architect では各フレームワークに定義されているグラデーションすべてをサポートしています。

Sencha Touch のグラデーション
bevel recessed matte linear glossy
Ext JS のグラデーション
一般 パネル タブ（バー） グリッド ボタン
bevel panel-reverse tabbar grid-header glossy-button
glossy panel-header tab grid-header-over glossy-button-over
recessed tab-active grid-row-over glossy-button-pressed
matte tab-over grid-cell-special
matte-reverse tab-disabled

フォントファミリー変数

フォントファミリー変数には選択できる多数の事前設定フォントが用意されています。これらは一般にウェブで安全に使用できるフォントファミリーです。ただし、他のフォントやフォントファミリーの組み合わせを手動で入力することもできます。

アプリケーションでウェブフォントを使用する方法は次のとおりです。

  1. [Code Editor（コードエディタ）] で css/scss ファイルを編集して、ウェブフォントを含む @font-face ルールを使用できるようにします。

  2. [Config（コンフィグ）] タブを開いて SCSS 行の右にある “+” 記号をクリックすることにより、プロジェクトのテーマリソースに SCSS セグメントを追加します。

  3. SCSS セグメントがその他のテーマより先に実行されるように、compile/include の順序を設定します。これを行うには、「SCSS Resource」行にある矢印をクリックして「Compile order」行を追加します。ドロップダウンメニューで beforeVariables を選択します。

  1. 使用する webfont コードをプロジェクトに追加します。

上記の手順に従うと、インストールされたフォントのフォント名をフォントファミリー変数の値としてテーマで利用できるようになります。

テーマのコンパイル

デフォルトでは、テーマは変数を変更するたびに再コンパイルされます。コンパイルの進捗バーは [Config（コンフィグ）] パネルの最下部に表示されます。変数のいずれかに無効な値が設定されていると、コンパイラーから警告が返されます。

進捗バーの左にある「A」ボタンをクリックすると自動コンパイル機能をオフにできます。「A」ボタンと進捗バーの間にあるボタンをクリックすると手動でコンパイルできます。

コンパイルバーが [Config（コンフィグ）] パネルの最下部に表示されます。

コンパイルバーがオレンジの場合（上記の通り）、自動コンパイルはオフであり、前回のコンパイル実行時以降に変数値が変更されています。

コンパイルバーが赤の場合、コンパイルエラーを示しています。

変更された変数

変更後にテーマにリスト表示されている各変数と UI にチェックボックスが用意されました。このチェックボックスを切り替えると、コンポーネントの元の外観と変更されたコンポーネントの値を素早く比較できます。

グリッドの各変数は次に挙げる 3 つの状態のいずれかとなり、左側のマージンにあるインジケーターバーで示されます。

  • デフォルト状態（インジケーターバーはグレー） – 変数にはデフォルト値が設定され、チェックボックスは非表示です。

  • 有効状態（インジケーターバーはブルー） – この変数の値は変更済みです。チェックボックスはチェックマークがついた状態で表示されます。チェックマークをクリックして無効状態にできます。有効状態と無効状態を切り替えると素早く 2 つの値を比較できます。

  • 無効状態（インジケーターバーはオレンジ） – この変数の値は変更済みですが、オフに切り替えられています。これは、テーマをコンパイルした場合に値がユーザー定義されず、デフォルト状態であるかのようにコンパイルされることを意味します。

有効状態と無効状態は共に、変数に表示される値はユーザーが適用したものとなります。

変数の値を元の値に戻すには、変数名を右クリックして表示されるドロップダウンメニューで [Reset（リセット）] を選択します。これを行うと変数はデフォルト状態となります。デフォルト値が表示され、インジケーターバーはグレーとなり、チェックボックスは表示されません。

コンポーネントの UI

UI には、さらにコンポーネントインスタンスの基本的な変数を上書きする一連の変数があります。一方、テーマのグローバル変数はそのコンポーネントのインスタンスすべてに対して有効です。

テーマが適用されていると、UI が有効なコンポーネントを選択できます。有効かどうかは UI アコーディオンがあるかどうかで分かります。 [Config（コンフィグ）] パネルには、値 Global または Default を持つ UI コンフィグも表示されます。一部のコンポーネントには事前に用意されたフレームワーク UI が含まれるため、この状態はコンポーネントとフレームワークにより異なります。

Ext JS における UI の変更

UI をサポートするコンポーネントには UI コンフィグがあります。

たとえば、変更していないデフォルトの Ext JS テーマを使用している場合、テーマ設定インターフェイスを使用できません。この方法で UI コンフィグを変更するには、使用する UI の有効な名前を知っていることが必要です。

簡単な例として、Ext JS の「Left / Top / Bottom」レイアウトテンプレートを使用してプロジェクトを開きます。

  1. leftPanel コンポーネントを選択します。
  2. コンフィグフィルタを使用して「ui」を検索します。
  3. ui コンフィグの値を「default」から「light」に変更します。
  4. パネルのタイトルの背景が白に変化し、テキストが黒に変化します。

Sencha Touch での UI の変更

一部の UI 変数は Sencha Touch プロジェクトの個別のコンポーネントに対して設定できます。そのコンポーネントを選択してキャンバスに表示される歯車をクリックすると、利用できる UI のリストが表示されます。

以下のように UI 値を変更することで、コンポーネントの外観を瞬時に変更できます。

カスタム UI の作成

デフォルト UI は変更または削除することはできません。UI を変更するには、カスタムバージョンを作成する必要があります。

コンポーネントに対して専用 UI を作成するには、「+」記号をクリックして新しい UI タイプを追加します。これらの UI はデフォルトで “Untitled {x}” と名前が付けられます。UI の名前を変更するには、UI パネルの右端にある歯車をクリックして、表示されるポップアップウィンドウに希望する名前を入力します。選択したコンポーネントで UI がサポートされていない場合、UI のドロップダウンセレクタと「+」ボタンは表示されません。

UI タイプを作成すると関連するすべての変数が表示されます。

新しい UI をコンパイルしたら、新しいコンポーネントをキャンバスまたはインスペクタにドラッグできます。最初に、選択した新しいコンポーネントがデフォルトの UI で表示されます。これを変更するには、UI ボックスの右の矢印をクリックして、新しい UI を選択するだけです。以下のように、カスタム UI がコンポーネントに適用されます。

SCSS リソース

場合によっては、変数を調整するだけでは足りません。

このようなことを実現するため、Archiect には 2 種類の変更できる SCSS リソースが用意されています。

  • テンプレート SCSS - テンプレートに追加できる SCSS セグメントです。リスト、データビューなど、データによって生成されるコンテンツのスタイルを設定する際に役立ちます。このセグメントはテンプレートに属し、適用されるカスタムテーマに関係なく存在します。さらに、CSS 競合を避けるためにテンプレート特有となるように、これらの SCSS リソースはカスタムクラスでラップされます。

  • テーマ SCSS - テーマのルートに追加できる SCSS セグメントです。

SCSS リソースを追加するには、テンプレートまたはテーマを選択して、コンフィグペインの SCSS コンフィグの隣にある + ボタンをクリックします。

コードエディタのツールバーで SCSS リソースを編集する場合に利用できる便利なアクションが用意されています。

  • [Insert Tpl Structure（テンプレート構造を挿入）] は正しい SCSS 構文のテンプレートのデータから CSS クラス名を挿入します。これにより、テンプレートのスタイル設定を素早く行うことができます。

  • [Insert Color（色を挿入）] ではカラーピッカーを使用して色をエディタに挿入します。色を選択すると、起動時にその色がカラーピッカーで表示されます。

注意:Architect では一般的に SASS を詳しく理解する必要がないようにしています。ただし、詳しくはSASS リファレンスガイドを参照することもできます。

また、テーマ SCSS では、コンパイルの順序をテーマの別の部分に相対する形で指定できます。

  • beforeVariables にはカスタムテーマの変数を宣言する前の SCSS リソースが含まれます。
  • beforeFramework には実際のフレームワークのロード前かつ Architect で設定された変数の後の SCSS リソースが含まれます。
  • afterFramework にはフレームワークを含めた後の SCSS リソースが含まれます。通常、カスタムの CSS のオーバーライドを配置するにはこれが最も好ましい場所です。

Architect からピッカーの使用

カラーピッカーでは、テーマをカスタマイズする際に適切な色を選択するのに役立つ、カスタマイズ可能なパレットを提供しています。

右上の大きな四角には、現在適用されているカラーパレットが表示されます。次のいずれかの方法で、パレットに別のベースカラーを選択できます。

  • パレット画面の色相スライダーを好みの色になるまで動かします。
  • 色相スライダーが好みの色になるまで、HSVA スライダーバーを調節します。
  • 画面下にある四角い色見本の 1 つをクリックして、あらかじめ用意されたパレットか表示したパレットを選択します。
  • ベースカラーの 16 進値を [Hex] フィールドに入力します。
  • RGB 値を [RGB] フィールドに入力し、適切なコントラストを設定します。
  • パレットの四角の右側にある 4 つの縦の円柱は、HSV システムに従って色の品質属性をコントロールするスライダーバーです。
    • Hue（色相） – 基本色
    • Saturation（彩度） – 色相の優勢度
    • Value（明度または輝度） – 色の全体的な明度、または色の強さ
    • Alpha – 透明度

これらの値は、円柱でカーソルを上下させるか、各円柱の下にあるボックスに絶対値を入力して調整できます。カラーパレットの四角の下にあるボックスの RGB システムを利用して色を指定することもできます。

カラーピッカーで値を変更すると、メインパレットの四角い表示にある色相セレクタが動いて、現在選択している色を正確に表示します。拡大されたこの色の見本も、右上にある長方形に表示されます。

結果が期待通りであれば、[OK] ボタンをクリックします。これによって、変数の色が自動的に更新され、テーマが新しく定義された色でコンパイルされます。ウィンドウの右下部に進捗バーが表示され、コンパイラーの進捗を表示します。コンパイルが完了すると、キャンバスに表示されるプロジェクトのコンポーネントで使用されているパレットが新たに定義したものに変わっています。

以下はカスタムテーマで色を変更する際のヒントです。

  • scss 名をコピーするには、変数名を右クリックして、ドロップダウンメニューで [Copy SCSS reference（SCSS リファレンスをコピー）] を選択します。

  • 何らかの計算を行う値を持つ変数は、カラーピッカーを使用するか有効な CSS カラー名または 16 進値を設定した場合、色の絶対値により上書きされます。

  • 新しい色を選択する場合、画面右下の [Add（追加）] をクリックして四角い色見本を画面に追加するか、パレットの右上の色のプレビューから色をドラッグして追加できます。その他の変数を同じパレットに設定する場合。変数を選択してパレットの色を示す四角い色見本をクリックするだけです。

  • 色見本をパレットメニューにドラッグすると、表示を再配置できます。パレットから見本を削除するには、パレット外にドラッグ＆ドロップします。パレットメニューのコンテンツはプロジェクト間およびフレームワーク間にわたっています。

画像変数

一部のアイコンと画像はテーマに関連しています。例えば、チェックボックスと各種トリガーの外観です。テーマを選択して [Images（画像）] タブをクリックすると、関連画像のリストが表示されます。1 つの画像を複数のコンポーネントに使用できます。

スタイル設定への画像の取り込み

Sencha Architect では、アプリケーションのスタイル設定に画像を取り込めます。

コンポーネントへの画像の添付

ボタンやその他のコンポーネントに画像を添付できます。

以下の方法でコンポーネントに画像を追加します。

  1. 画像をプロジェクトツリーの project/resources/ ディレクトリの分かりやすい場所に格納します。このディレクトリの画像はキャンバスで描画し、 Ext JS および Sencha Touch プロジェクトのプレビューおよびビルドプロセスからアクセスできます。

注意:Architect プロジェクトのファイル構造に関する詳細は、Project Files を参照してください。

  1. 画像を添付するコンポーネントを選択します。

  2. [Config（コンフィグ）] パネルに移動し、Icon コンフィグを選択します。

  3. 画像を保持している .png ファイルの URL を指定します。絶対パス名も使用できますが、mainapp.html ファイルに対する相対パスを使用すると、最大限の柔軟性を確保できます。

画像コンテナの作成

ロゴやその他の画像を異なるビューで反復的に使用する場合、画像を保持するカスタムのコンポーネントを作成します。

  1. 画像をプロジェクトツリーの project/resources/ ディレクトリの分かりやすい場所に格納します。

  2. コンテナを作成し選択します。

  3. [Config（コンフィグ）] パネルに移動し、html コンフィグを探します。このコンフィグに <img src="path/to/my/image.png"/> のような値を設定します。

  4. コンポーネントの幅と高さを、画像の幅と高さに一致させます。

  5. このコンテナをカスタムコンポーネントとして保存します。

これで、必要に応じてロゴを含むコンポーネントを簡単にドラッグ＆ドロップできるようになりました。

SCSS の画像

画像をプロジェクトツリーの project/resources/ ディレクトリの分かりやすい場所に格納します。

SCSS コードの画像を参照します。

url('project/resources/your-image-folder/your-image.png').
Last updated