1. MVVMアーキテクチャを使用したOracle JETアプリケーションの開発
  2. Oracle JETアプリケーションでのCSSおよびテーマの使用

14 Oracle JETアプリケーションでのCSSおよびテーマの使用

Oracle JETには、Webアプリケーション全体にスタイリングを提供し、Oracle Redwood Design Systemを実装するRedwoodテーマが組み込まれています。Redwoodテーマでは、そのルック・アンド・フィールを実現するために、数多くのカスタム・プロパティ(CSS変数とも呼ばれる)が提供されています。Redwoodテーマを提供されたままの状態で使用することも、カスタム・プロパティを手動でカスタマイズすることもできます。

ノート:

Oracle JETリリース9.0.0以降、Redwoodテーマがすべての新しいJET Webアプリケーションのデフォルトのテーマです。

Oracle JETに付属するRedwoodテーマについて

Oracle Redwood Design Systemは、アプリケーションのルック・アンド・フィールに関するOracle標準です。これは、すべてのOracle製品オファリングのユーザー・インタフェースを統一するために全社的に実装されており、Oracle JETでRedwoodテーマとして実装されています。

Oracle JETではこの状況を利用し、この動的で先進的な設計システムを使用してツールキットのルック・アンド・フィールをリフレッシュします。また、JETウォーターフォール・レイアウトやJETストリーム・リスト・コンポーネントなど、Oracle Redwood Design Systemのユーザー・エクスペリエンスに依存するすべての新しいコンポーネントを導入します。

すべてのスタータ・テンプレートでRedwoodテーマが使用されます。すべてのアプリケーションはデフォルトでRedwoodテーマを使用して作成されるため、JETツールのcreateおよびserveコマンドを使用する際にテーマ・タイプを指定する必要がなくなりました。モバイル・プラットフォームに固有のテーマのバリエーションはありません。詳細は、「Redwoodテーマを使用したアプリケーションの作成」を参照してください。

Altaテーマから移行する既存のアプリケーションがある場合は、現行のJETリリースに移行し、Redwoodテーマ用のすぐに使用できるCSSで実行されるようにアプリケーションを構成できます。詳細は、RedwoodテーマCSSへの移行を参照してください。

Redwoodテーマのカスタマイズは、CSS変数を操作することでサポートされます。詳細は、「Oracle JETのCSS変数およびカスタム・テーマについて」を参照してください。

Redwoodテーマに付属するCSSファイル

Oracle JETには、Oracle Redwood Design Systemを実装するWebブラウザでの表示のために設計されたCSSファイルが含まれています。JETでは、Redwoodテーマに、CSSの縮小バージョンと読みやすいバージョンが含まれています。

Oracle JETリリース9.0.0以降、アプリケーション・テーマはRedwoodテーマに基づいており、これは以前のリリースで必要だった複数のテーマに代わる、モバイル・アプリケーションとブラウザ・アプリケーションの両方のためのテーマです。

Redwood CSSは、Oracle JETディストリビューションに同梱されており、/<app_root>/node_modules/@oracle/oraclejet/dist/css/redwoodフォルダにあります。Redwood CSSディストリビューションには、次のファイルが格納されています:

  • oj-redwood.css: すぐに使用できるRedwoodテーマのためのCSSの読みやすいバージョン

  • oj-redwood-min.css: すぐに使用できるRedwoodテーマのためのCSSの縮小バージョン

さらに、Redwoodテーマには次のCSSが含まれます。

  • oj-redwood-notag.css: タグ・セレクタなしのCSSの読みやすいバージョン

  • oj-redwood-notag-min.css: タグ・セレクタなしのCSSの縮小バージョン。

Oracle JETテーマ適用およびタグ・セレクタの詳細は、「ベースHTMLタグのJETスタイル設定の無効化」を参照してください。

常に、CSSおよびテーマを使用するための推奨される標準を使用してください。詳細は、「CSSおよびテーマを使用するためのベスト・プラクティス」を参照してください。

重要:

Oracle JET CSSディストリビューションのスタイル・クラスをオーバーライドしないでください。Oracle JETに同梱されているCSSファイルは、プライベートと見なされるので変更できません。このような変更を行うと、テーマを将来のリリースに移行できなくなる可能性があります。

Redwoodテーマを使用したアプリケーションの作成

Redwoodテーマは、Oracle Redwood Design SystemのOracle JET実装であり、JETリリース9.0.0以降で作成するアプリケーションのデフォルトのテーマです。

Oracle Redwood Design Systemは新しいOracleユーザー・エクスペリエンス設計言語であり、Redwoodテーマは新しいJET Webアプリケーションを作成する場合に推奨されるテーマです。

ojet createコマンドを使用して、Redwoodテーマ・ディストリビューションに付属するRedwood CSSファイルをデフォルトで使用するアプリケーションをスキャフォールドします。アプリケーションをビルドすると、JETツールによってredwood.cssがロードされます。

アプリケーションを作成すると、JETツールは、oraclejetconfig.jsonファイルのプロパティdefaultTheme=redwoodで構成された、すぐに使用できるRedwoodテーマ・ファイルを使用します。アプリケーションをビルドして実行する際に、ツールでredwood.cssを使用するのに必要なその他の構成設定はありません。 

{
	"paths": { 
        ...
	},
	"defaultBrowser": "chrome",
	"sassVer": "8.0.0",
	"defaultTheme": "redwood",
	"architecture": "mvvm",
	"generatorVersion": "17.1.0"
}

個々のJETコンポーネントのテーマおよびスタイルのカスタマイズは、JET CSS変数をオーバーライドすることでサポートされます。CSS変数のオーバーライドの詳細は、「カスタム・テーマおよびコンポーネント・スタイルの使用」を参照してください。

Redwoodテーマを使用してアプリケーションを作成するには:

  1. アプリケーションを作成します。
    ojet create my-web-app

    ツールにより、すぐに使用できるRedwoodテーマ用のCSSをロードするインジェクタ・トークンが含まれるindex.htmlファイルがsrcフォルダに作成されます。 

    <!-- This is the main css file for the default theme -->
<!-- injector:theme -->
<!-- endinjector -->
  2. アプリケーションの開発バージョンをビルドします。
    ojet build

    ツールにより、ビルドされたアプリケーション・ソースがアプリケーションのルートにあるwebビルド・フォルダに出力され、/web/css/redwood/17.1.0/webフォルダに、デフォルトのテーマredwood.cssなどの一連の使用可能なRedwoodテーマ・ファイル、フォントおよびイメージが移入されます。 

    AppRootDir/web/css/redwood/17.1.0/web
  fonts
  images
  redwood-notag-min.css
  redwood-notag.css
  redwood.css
  redwood.min.css

    接頭辞がoj-で接尾辞が-notagのテーマ・ファイルは、すぐに使用できるRedwoodテーマに代わるものであり、「カスタム・テーマおよびコンポーネント・スタイルの使用」で説明されているように、カスタム・テーマを使用できるようになります。

    ビルド出力フォルダ内のindex.htmlは、拡張されたCSSをredwood.cssからデフォルトでロードします。縮小CSSをredwood-min.cssからロードするには、アプリケーションをリリース・モードでビルドします。 

    ojet build --release
  3. アプリケーションを実行してすぐに使用できるRedwoodテーマをブラウザで表示します。
    ojet serve

Redwoodテーマのスケールの調整

アプリケーションとそのユーザーには、様々なスケール・ニーズと要件があります。Redwoodテーマでは、3つの異なるスケール・サイズがサポートされています。

Redwoodテーマでは、デフォルトで大規模サイズが使用されます。大規模なスケールは、密度が低いページに推奨され、読みやすさおよび人間のスケールに最適化されています。

中規模のスケールは、Redwoodのデフォルトのスケールよりもコンパクトで、ページの折りたたみの上により多くのデータを表示できるようにすることで効率を高めるように設計されています。

小規模なスケールは非常にコンパクトで、概要レベルの情報とUI密度を備えたキャンバススタイルのツール用に設計されています。このスケールはタッチ・フレンドリではないため、デスクトップ・アプリケーションでのみ使用する必要があります。

小規模または中規模スケールを使用するようにRedwoodテーマを変更するには、Oracle JETスケール・クラスoj-scale-smまたはoj-scale-mdをそれぞれ使用します。これらのクラスをアプリケーションのindex.htmlファイルのhtml要素に追加します。 

<html class="oj-scale-md">
   <!-- content -->
</html>

ページ全体がこれらのスケールのいずれかである必要があります。単一のページで異なるスケールを指定することはサポートされていません。

CSSおよびテーマを使用するためのベスト・プラクティス

WebアプリケーションでCSSおよびテーマを作成するための推奨されるスタイリング標準を使用してください。これらの慣習は、Oracle JETのすべてのテーマに適用されます。

標準 詳細 例

Oracle JETクラスをオーバーライドしない

oj-接頭辞を含むOracle JET CSSスタイル・クラスをオーバーライドする方法はありますが、パブリックかプライベートかに関係なく、いずれも使用できません。

エラー・アイコン オーバーライドされたOracle JETクラスの一例を次に示しますが、これは使用できません: 

.acme-branding-header .oj-button{
  color: white;
  background: blue;
}

モバイルファースト・デザインの使用

アプリケーションは、モバイル・ファーストである(つまり、電話やタブレットで動作する)ことが必要です。これは、タッチ・フレンドリである(たとえば、タップする対象のサイズを適切に調整できる)必要があることを意味します。モバイルではホバー動作がないため、ホバーに依存しない設計をする必要があります。

 

命名規則の遵守

CSSファイルには、.namespace-block-elementという命名規則を使用します。

たとえば、会社acmeを表すヘッダー要素を含むブランディング・バーを作成する場合は、ネームスペースとしてacme、ブロックとしてbranding、要素としてheaderを選択します。したがって、セレクタ名は.acme-branding-headerとなります。Oracle JETではセレクタ名にダッシュが使用されますが、Block, Element, Modifier (BEM)のように、別の命名規則を使用することもできます。

ページのベースCSS(たとえば、クライアント提供CSS)が自分のアプリケーションのCSSに影響を及ぼしたり、逆にアプリケーションのCSSがページのCSSに影響を及ぼすことを極力避けるために、ネームスペースを含めることが重要です。たとえば、次に示すように自分のCSSとクライアント提供CSSの両方でクラス名がbranding-headerの場合、自分のブランディング・ヘッダー・テキストの色が赤になります。

クライアントCSS:
.branding-header{color: red}

自分のCSS:
.branding-header{background-color: blue}

.branding-headerのみでなく.acme-branding-headerを使用することで、クライアントが同名のクラスを使用する可能性を大幅に減らせます。

.acme-branding-header

Oracle JETパブリック・クラスのみを使用する

Oracle®JavaScript Extension Toolkit (JET)のスタイリング・リファレンスに記載されているパブリック・クラスのみを使用します。他のすべてのOracle JETクラスはプライベートと見なされ、予告なしに変更される場合があります。

 

カスタムCSSの最小化

Oracle JETには、カスタムCSSの最小化に役立つCSSユーティリティ・クラスがあります。次のリストは、支援できるJETのCSSユーティリティ・クラスを示しています。

アプリケーションでOracle JET CSSユーティリティ・クラスを使用するときは、Oracle JET付属のテーマとの互換性も確認します。詳細は、『Oracle JETクックブック』のCSSユーティリティ・クラスのデモおよび『Oracle® JavaScript Extension Toolkit (Oracle JET) APIリファレンス』を参照してください。

 

CSSでフォント・ファミリを設定しない

アプリケーションは、必要に応じてアプリケーションがフォント・ファミリを変更できるように、ページのルートで一度テキストのフォント・ファミリを設定する必要があります。アプリケーションによって選択されたフォント・ファミリとの調和のため、CSSでフォント・ファミリを設定しないでください。

エラー・アイコン次のようにフォント・ファミリを設定しないでください。 

.acme-branding-header {
  font-family: arial;
}

フォント・サイズおよびCSSスタイルにREMを使用する

フォント・サイズや、相対的なサイズ設定によってルートのhtml要素のフォント・サイズに基づいてアプリケーションのスケール変更を可能にするその他のCSSスタイル・プロパティに、REM (root em)を使用することを検討します。Oracle JETコンポーネントはREMに依存しており、これにより、アプリケーションは、Oracle JETに付属するテーマの基礎となるCSSフォント・サイズに対する変更に適応できます。同様に、ピクセルや他の絶対単位ではなくrem単位を使用することで、アプリケーションはメリットを得ることができます。rem単位は、行の高さ、幅、高さ、パディング、マージンといったCSSプロパティなど、スケーラブルな長さの単位のメリットをHTMLスタイルで得られるところではどこでも使用できます。スタイルをhtmlタグに直接設定しない場合は、oj-htmlクラスを参照できます。 

.acme-branding-header {
  font-size: 1.2rem;
}

双方向(BIDI)スタイリングのサポートを追加する

Oracle JETアプリケーションでは、次に記載されているとおり、右から左(RTL)方向の言語に対してdir="rtl"を設定すると想定しています: <a href="use-css-and-themes-oracle-jet-apps.html#GUID-BA2DA252-465D-4813-BC1F-9641E6520BCF" title='指定した言語がデフォルトの左から右(LTR)方向ではなく、アラビア語やヘブライ語のように右から左(RTL)方向を使用する場合、HTMLタグのdir属性を指定する必要があります: テキスト方向の設定。この設定を使用すれば、CSSで左から右(LTR)およびRTLの両方の言語をサポートできます。dirを使用する必要性を最小限に抑えるには、CSSでCSS論理プロパティを使用することを検討してください。 

html:not([dir="rtl"]) .acme-branding-header {
  right: 0; }

html[dir="rtl"] .acme-branding-header {
  left: 0; }

高コントラスト・スタイリングのためにoj-hicontrastを使用する

Oracle JETは高コントラスト・モードを検出すると、必要に応じてCSSを変更するために使用できるoj-hicontrastセレクタをbody要素に配置します。「高コントラスト・モードの構成」を参照してください。 

.acme-branding-header {
  border: 1px;
}

.oj-hicontrast .acme-branding-header {
  border: 2px;
}

!importantの回避

値のオーバーライドで問題が生じるため、CSSでの!importantの使用は避けてください。可能な場合は、そのかわりにより高度な特異性を使用します。詳細は、Mozillaの特異性に関するページを参照してください。

警告アイコン!importantは使用しないでください。 

.acme-branding-header {
  font-size: 1.2rem !important;
}

イメージの使用の最適化

すべてのイメージ・システムにはメリットとデメリットがあります。アイコン・フォントが適切かどうかを判断するには、「イメージの使用」を参照してください。

イメージを使用する際は、常にパフォーマンスを考慮してください。ヒントについては、「Oracle JETアプリケーションへのパフォーマンスの最適化の追加」を参照してください

  

DOCTYPE要件

Oracle JETのテーマ適用が適切に機能するには、すべてのHTML5ページの冒頭に次の行を含める必要があります。

<!DOCTYPE html>

この行を含めないと、アプリケーションでCSSが正常に機能しない場合があります。たとえば、一部の要素が適切に配置されない場合があります。

ヒント:

ツール、またはサンプル・アプリケーションのいずれかを使用してOracle JETアプリケーションを作成する場合、この行はすでに追加されており、自分で追加する必要はありません。

テキスト方向の設定

アラビア語やヘブライ語など、指定した言語でデフォルトの左から右(LTR)方向ではなく右から左(RTL)方向を使用する場合は、<html lang=name dir="rtl">のように、htmlタグでdir属性を指定する必要があります。

たとえば、次のコードでは、「右から左方向」を有効にしてヘブライ語(イスラエル)(he-IL)ロケールを指定しています。

<html lang="he-IL" dir="rtl">

Oracle JETは、1つのページで複数の方向をサポートしていません。サポートされない理由は、ドキュメント・ツリー内の要素の近接度はCSS特性に影響しないため、ページで方向を複数回切り替えても適切に動作しないためです。次のコード・サンプルは例を示しています。

<style>
  [dir=ltr] .foo {color: blue}
  [dir=rtl] .foo {color: red}
</style>
<span dir="rtl">
  <span dir="ltr">
    <span class="foo">You might think I will be blue because dir=ltr is on,
                      a closer ancestor than dir=rtl. But css doesn't care
                      about proximity, so instead I am red
                      (because [dir=rtl] .foo {color: red} was defined last).
                      Isn't that surprising?
    </span>
  </span>
</span>

アプリケーションのローカライズおよび双方向サポートの追加の詳細は、「Oracle JETでの双方向(BiDi)サポートの有効化」を参照してください。CSS特性の詳細は、https://developer.mozilla.org/en-US/docs/Web/CSS/Specificityを参照してください。

イメージの使用

Oracle JETは、可能な場合は常にアイコン・フォントを使用して、Redwoodテーマによって提供されるイメージをレンダリングします。アイコン・フォントが可能でない場合、Oracle JETではSVGイメージを使用します。

イメージを使用する際には、次のトピックも役立ちます。

イメージに関する考慮事項

アイコンをロードする方法は、スプライト、データURI、アイコン・フォントなど多数あります。次に、イメージ戦略を選択する際に考慮する要因を示します。

  • テーマ適用可能: CSSを使用してイメージを変更できますか。1つのイメージを容易に置換できますか。

  • 高コントラスト・モード: アクセシビリティのために高コントラスト・モードでイメージが適切にレンダリングされますか。

  • 高解像度サポート: 高解像度(retina)ディスプレイに表示されるイメージは許容可能ですか。

  • イメージの制限: ユースケースに影響を与える制限はありますか。たとえば、単色で小さいSVGイメージのアイコン・フォントは、多くの場合、適切にレンダリングされません。

  • パフォーマンス: イメージ・サイズは要因の1つですか。異なる解像度や状態(disabled、enabled、hover、activeなど)に対してイメージの代替バージョンが必要ですか。

アイコン・フォントに関する考慮事項

アイコン・フォントは他のフォーマットに比べて利点があるため、Oracle JETは可能な場合は常にアイコン・フォントを使用します。

  • テーマ適用可能: イメージを置換するのではなく、スタイル・クラスを使用して色を変更できるため、テーマ適用が容易になります。

  • 高コントラスト・モード: アイコン・フォントはテキストと見なされるため、高コントラスト・モードでは最適です。ただし、高コントラスト・モードでは色に依存できないため、別の視覚的インジケータを使用して状態(active、hoverなど)を示すことが必要になる場合があります。たとえば、枠線を追加したり、アイコン・フォントのサイズを変更できます。Oracle JETと高コントラスト・モードの詳細は、「高コントラスト・モードの構成」を参照してください。

  • 高解像度: アイコン・フォントは高解像度(retina)ディスプレイに適切に表示され、代替アイコンは必要ありません。

  • パフォーマンス: CSSを使用してアイコン・フォントの色を変更できるため、状態の変更を示すための代替アイコンは必要ありません。高解像度ディスプレイの場合は代替イメージも必要ありません。

アイコン・フォントには短所もあります。単一イメージの置換が困難な場合があり、単色のみ表示されます。テキストの影を使用して、アイコン・フォントに陰影を付けることができます。

カスタム・テーマおよびコンポーネント・スタイルの使用

スキャフォールドしたアプリケーションにカスタム・テーマを追加すると、Oracle JETにより、アプリケーションのルック・アンド・フィールをカスタマイズできるCSS変数定義ファイルが追加されます。

Oracle JETのCSS変数およびカスタム・テーマについて

JETでは、リリース9.0.0でRedwoodテーマが導入されました。リリース10.0.0では、Sass変数ではなくCSS変数を使用した、すぐに使用できるRedwoodテーマに基づくテーマのサポートが導入されました。JETリリース11.0.0以降、JETで提供されるもう1つのすぐに使用できるテーマであるStableに基づくカスタム・テーマを作成することもできます。この2つのテーマ(RedwoodおよびStable)をベース・テーマと呼びます。

Redwoodテーマに対する今後の更新が開発したカスタム・テーマに影響を与える可能性を減らしたい場合は、カスタム・テーマのベース・テーマとしてStableテーマを選択します。Redwoodテーマへの今後の更新を継承する場合は、カスタム・テーマのベース・テーマとしてRedwoodを使用します。RedwoodテーマはOracleアプリケーションのルック・アンド・フィールを実装し、Oracleの要件に対応するために将来の変更が行われます。名前が示すとおり、Stableテーマは安定を目的としており、頻繁に変更される可能性は高くありません。それでも、OracleはStableテーマが変更されないことを保証できません。たとえば、コンポーネントの拡張機能を組み込むには、Stableテーマの変更が必要になる場合があります。最初のリリース(JETリリース11.0.0)時点では、StableテーマはRedwoodテーマと同じコンポーネント動作を実装します。

CSS変数を使用してアプリケーションをテーマ化するオプションは次のとおりです:

  • アプリケーションでRedwoodまたはStable CSSファイルを引き続き使用しながら、アプリケーションの/appRootDir/src/css/app.cssファイルに変数オーバーライドを追加します。限られた数のアプリケーション固有のオーバーライドをベース・テーマに追加する場合は、このオプションを選択します。
  • JET CLIを使用して、アプリケーションが使用する新しいカスタム・テーマを作成します。広範な変更を行う場合や、様々なアプリケーションで再利用される変更を行う場合は、このオプションを選択します。

これらのタスクを支援するには、テーマ・ビルダー・アプリケーション(下のリンク)を使用します。これには、CSS変数に対する変更の影響をプレビューできる様々なJETコンポーネントが含まれています。

JETでは、Sassは完全には排除されておらず、バンドル化でRedwoodテーマを使用するときには引き続きSassを使用します。また、メディア問合せなど、CSS変数がサポートされていない場合がいくつかあります。いくつかの例外で、Sass変数($screenSmallMinWidthや$screenSmallMaxWidthなど)が必要です。そのため、JET CLIでojet add themingを使用するとき、Sassは引き続きテーマ・ツールチェーンの一部です。Sassを使用して独自のスタイルを生成し、JET Sass変数に依存しない場合は、以前と変らずSassを使用できます。ただし、JET Sass変数に依存する場合は、そのようなSass変数のほとんどが使用できなくなります。JET Sass変数からCSS変数への移行法は、「Sassベースのテーマ・ビルダー - 「移行」タブ」を参照してください。

次のリンクを使用して、テーマ・ビルダーの各ページを参照してください:

ここでは、JETのテーマ・サポートに関する最新の重要な更新の一部を示します。

リリース イベント
JET 9.0.0 変更せずにすぐにRedwood CSSを使用できます。
JET 10.0.0

  • CSS変数のオーバーライドを使用してRedwoodテーマをカスタマイズできます。

  • Altaテーマは、JETリリース10.0.0では非推奨です。Altaを拡張する既存のテーマがあり、それを移行してRedwoodテーマを拡張する(かつCSS変数を使用する)場合は、手動プロセスとなります。変数の移行に関する情報は、テーマ・ビルダー - 移行タブに表示されます。アプリケーションのRedwoodテーマへの移行の詳細は、「RedwoodテーマCSSへの移行」を参照してください。Altaテーマでは引き続きSassを使用し、CSS変数の使用には切り替わりません。

JET 11.0.0 StableテーマまたはRedwoodテーマのどちらに基づいてカスタム・テーマをJETアプリケーションに追加するかを選択できます。Redwoodテーマに対する今後の更新が開発したカスタム・テーマに影響を与える可能性を減らしたい場合は、カスタム・テーマのベース・テーマとしてStableテーマを選択します。カスタム・テーマでRedwoodテーマへの今後の更新を継承する場合は、カスタム・テーマのベース・テーマとしてRedwoodを使用します。

JET CLIを使用したカスタム・テーマ・サポートの追加

Oracle JETツールを使用すると、カスタム・テーマをアプリケーションに追加できます。

JETツールを使用してアプリケーションにテーマ・サポートを追加すると、テーマ定義ファイルが追加されます。テーマのサポートの追加は、すぐに使用できるRedwoodまたはStableテーマに変更を行うための前提条件となるステップです。
テーマを作成すると、これらのテーマ定義ファイルがアプリケーションの/src/themesフォルダに生成されます。

テーマのサポートを追加するには:

  1. ターミナル・プロンプトで、アプリケーションの最上位ディレクトリから次のコマンドを入力し、テーマ・ツールチェーンをインストールします。
    ojet add theming
  2. カスタム・テーマを作成します。これにより、カスタム・テーマ用に名前が付けられたフォルダで、アプリケーションにカスタム・テーマ設定ファイルが追加されます。カスタム・テーマのベース・テーマとしてstableまたはredwoodテーマを選択する必要があります。Redwoodテーマに対する今後の更新が開発したカスタム・テーマに影響を与える可能性を減らしたい場合は、ベース・テーマとしてstableを選択します。カスタム・テーマでRedwoodテーマへの将来の更新を継承する場合は、redwoodを使用します。
    ojet create theme themeName --basetheme=stable|redwood

    たとえば、次のコマンドでは、ベース・テーマとしてstableテーマを使用するmyThemeという名前のカスタム・テーマが作成されます。 

    ojet create theme myTheme --basetheme=stable

    このコマンドによって、アプリケーションの/src/themesディレクトリに、カスタム・テーマ名の付いたフォルダが作成されます。 

    src
|   index.html
|   
+---css
|       
+---themes
|   
|   \---myTheme
|       |   theme.json
|       |   
|       \---web
|               myTheme.scss
|               _myTheme.cssvars.settings.scss
|               _myTheme.optimize-components.scss
|               _myTheme.sass.settings.scss

    上に示したディレクトリでは、webフォルダに、変更可能な.scssカスタム・テーマ設定ファイルが表示されています。これらのファイルの使用方法については、この項の最後に示します。

    • _<themeName>.cssvars.settings.scssは、カスタム・テーマの作成に使用するプライマリ・ファイルです。このファイルを編集して、アプリケーション全体でJETコンポーネントによって使用されるCSS変数値を設定します。したがって、たとえば、JET全体のプライマリ・テキストの色を変更するには、--oj-core-text-color-primaryの値のコメントを外して設定することで、このファイルを編集できます。
    • _<themeName>.optimize-components.sccsを使用すると、特定のJETコンポーネントのスタイルを指定して、テーマの全体的なCSSサイズをチューニングできます。JETコンポーネント・セット全体をスタイル設定する場合、このファイルを編集する必要はありません。
    • _<themeName>.sass.settings.scssは、CSS変数でまだサポートされていないテーマのその他のカスタマイズ可能な側面を定義します。これには、メディア・クエリーおよびレスポンシブ画面サイズが含まれます。ほとんどのテーマ適用では、このファイルを編集する必要はありません。
    • <themeName>.scssは、テーマの主要な集計ファイルであり、JETツールがビルド時にカスタムCSSを生成するために使用するものです。デフォルトでは、CSSオーバーライドをすべてのJETコンポーネントに適用するように構成されています。ロードするJETコンポーネントCSSを最小限にしたり、ベースHTMLタグのCSSをロードしないよう指定できる場合は、このファイルの編集が必要になることがあります。

    myThemeフォルダのtheme.jsonファイルには、0.0.1から始まる、テーマのバージョン番号が含まれます。

  3. オプションで、アプリケーションのルートでoraclejetconfig.jsonファイルを編集し、defaultThemeプロパティをojet create themeコマンドで指定したカスタム・テーマ名に設定します。
    {
	"paths": {
         ...
	},
	"defaultBrowser": "chrome",
       "sassVer": "8.0.0",
	"defaultTheme": "myTheme",
       "architecture": "mvvm",
	"generatorVersion": "17.1.0"
}

    このサンプルでは、myThemeは前のステップで示されているカスタム・テーマの名前です。oraclejetconfig.jsonファイルを編集すると、アプリケーションをビルドまたは提供するたびに、--theme=<themeName>ビルド・コマンド・オプションを省略でき、ツールによってカスタム・テーマがロードされます。

    アプリケーションにカスタム・テーマのサポートを追加した後、アプリケーションをビルドして実行すると、CSSによって、--basetheme引数の値として指定したすぐに使用できるRedwoodまたはStableテーマがロードされます。

    設定ファイルを使用してテーマをカスタマイズするには、次の追加タスクを実行します:

    また、Oracle JETクックブックの「CSS変数」の項には、前述のトピック・リストで説明したルック・アンド・フィールのカスタマイズ・タイプの例が含まれています。

JET CLIでのカスタム・テーマの変更

JETアプリケーションに追加するカスタム・テーマ内で、ベース・テーマで定義されたCSS変数をオーバーライドできます。

/src/themes/<themeName>/webフォルダにある生成されたファイル_<themeName>.cssvars.settings.scssを変更します。このファイルには、アプリケーション全体でJETコンポーネントに適用する変数の値を設定する:root内の使用可能なJET CSS変数のリストが含まれます。

始める前に:

  • 「JET CLIを使用したカスタム・テーマ・サポートの追加」の説明に従って、テーマ・ツールチェーンをインストールしてカスタム・テーマを構成します。themesフォルダがカスタム・テーマ設定ファイルとともにアプリケーション・ソースに追加されます。
  • 例については、Oracle JETクックブックのアプリ全体のテーマ適用に関する項を参照してください。
  • CSS変数とその値の概要は、JET APIリファレンス・ドキュメントのJET CSS変数に関する項を参照してください。
  • 必要に応じて、テーマ・ビルダー・アプリケーションをダウンロードしてインストールします。テーマ・ビルダー・アプリケーションではCLIを使用し、様々なJETコンポーネントを表示して、テーマの作成の効果を簡単に確認できます。「CSS変数テーマ・ビルダー - 「指示」タブ」を参照してください。

アプリケーションCSSでベース・テーマCSS変数をオーバーライドするには:

  1. /src/themes/<themeName>/webフォルダで、生成された_<themeName>.cssvars.settings.scssテーマ・ファイルを編集し、オーバーライドする:root下のCSS変数を変更します。

    たとえば、アプリケーションのすべてのJETボタンの高さを変更するには、次のようにJET CSS変数--oj-button-heightをオーバーライドします: 

    :root {
  ...
  --oj-button-height: 4rem;
  ...
  }
  2. /src/themes/<themeName>フォルダで、生成されたtheme.json構成ファイルを編集し、generatedFileTypeプロパティを適切な値に設定します:

    • "generatedFileType": "combined"

      CSSブレークポイントの値を変更する必要がある場合や、必要なCSSのみをダウンロードしてパフォーマンスを最適化する場合に使用します。このオプションを使用すると、JET CSSとカスタマイズが1つのカスタム・テーマ・ファイルに結合されます。このカスタム・テーマ・ファイルは、アプリケーションのJETバージョンをアップグレードするたびに再生成する必要があります。このオプションを使用してアプリケーションを提供すると、index.htmlページに次のエントリが表示されます: 

      <!-- injector:theme -->
	<link rel="stylesheet" href="css/myStableTheme/0.0.1/web/myStableTheme.css" id="css" />
<!-- endinjector -->

      CSSブレークポイントの値を変更する必要があるため、combinedを使用する場合は、テーマの集計ファイル(この例ではappRootDir/src/themes/<themeName>/web/myStableTheme.scss)で次のエントリのコメントを解除する必要もあります: 

      //@import "_myStableTheme.sass.settings.scss";

      その後、次のいずれかのファイルのコメントを解除する必要があります:

      // @import "oj/all-components/themes/stable/_oj-all-components.scss";
or:
// @import "_myStableTheme.optimize-components.scss";

      combinedを使用して必要なCSSのみをダウンロードしてパフォーマンスを最適化する場合は、テーマの集計ファイルで次の行のコメントを解除する必要があります: 

      // @import "_myStableTheme.optimize-components.scss";

    • "generatedFileType": "add-on"

      これはデフォルト値です。CSSブレークポイントの値を変更する必要がある場合や、必要なCSSのみをダウンロードしてパフォーマンスを最適化する場合は、変更しないままにします。このオプションを使用すると、テーマ・ファイルにはCSS変数オーバーライドのみが含まれるため、基本のStableまたはRedwood CSSファイルの後に個別にロードできます。新しいJETリリースにアップグレードするたびに、このテーマ・ファイルを再生成する必要はありません。Stableテーマをベース・テーマとして使用するカスタム・テーマ(myStableTheme)をアプリケーションが使用している場合、アプリケーションを提供するときにindex.htmlページに次のエントリが表示されます。 

      <!-- injector:theme -->
 <link rel="stylesheet" href="css/stable/11.0.0/web/stable.css" id="css" />
 <link rel="stylesheet" href="css/myStableTheme/0.0.1/web/myStableTheme.css" id="css" />
<!-- endinjector -->
  3. アプリケーションの開発バージョンをビルドします。
    ojet build --theme=<themeName>

    oraclejetconfig.jsonファイルでdefaultThemeプロパティを設定する場合は、--themeオプションを省略できます。

    ツールにより、ビルドされたアプリケーション・ソースがアプリケーションのルートにあるwebビルド・フォルダに出力され、/web/cssフォルダに、カスタム・テーマの作成時にベース・テーマとして指定したテーマ(RedwoodまたはStable)のCSS、およびオーバーライドが含まれるCSS(生成されたmyTheme.cssファイルなど)が移入されます。次のディレクトリ・リストは、ベース・テーマとしてStableテーマを使用する、テーマmyStableThemeの生成されたエントリを示しています。アプリケーションではappRootDir/src/themes/myStableTheme/theme.jsonファイルで"generatedFileType": "add-on"が使用されるため、ディレクトリ・リストにはstable.cssおよびstable.min.cssファイルが含まれます。 

    web
|   
+---css
|   +---fonts
|   +---images
|   +---myThemeStable
|   |   \---0.0.1
|   |       +---common
|   |       \---web
|   |               myThemeStable.css
|   |               
|   +---redwood
|   |   \---11.0.0
|   |       \---web
|   |           +---fonts
|   |           |       internal_iconfont.woff2
|   |           |       
|   |           \---images
|   |                   avatar-pattern1.png
|   |                   ...
|   |                   spinner_full.gif
|   |                   
|   \---stable
|       \---11.0.0
|           \---web
|               |   stable.css
|               |   stable.min.css
|               |   
|               +---fonts
|               \---images
|                       
+---js
\---themes
    \---myThemeStable
        |   theme.json
        |   
        \---web
                myThemeStable.scss
                _myThemeStable.cssvars.settings.scss
                _myThemeStable.optimize-components.scss
                _myThemeStable.sass.settings.scss

    接頭辞がoj-で接尾辞が-notagのテーマ・ファイルは、すぐに使用できるRedwoodテーマに代わるものであり、「カスタム・テーマおよびコンポーネント・スタイルの使用」で説明されているように、縮小されたCSSを使用できるようになります。

    縮小されたCSSをロードするには、アプリケーションをリリース・モードでビルドします。

    ojet build --release
  4. アプリケーションを実行します。
    ojet serve --theme=<themeName>

    この場合も、oraclejetconfig.jsonファイルでdefaultThemeプロパティを設定する場合は、--themeオプションを省略できます。

  5. オプションで、テーマを調整するには、アプリケーションの_<themeName>.cssvars.settings.scssテーマ・ファイル内のCSS変数を変更します。

    Oracle JET提供プロセスにより、実行中のアプリケーションがブラウザにすぐにリロードされ、CSS変数のオーバーライドの影響を確認できます。

  6. アプリケーションを終了するには、ターミナル・プロンプトで[Ctrl]キーを押しながら[C]キーを押します。

テーマ・ビルダーによるカスタム・テーマの変更

JETテーマ・ビルダー・アプリケーションを使用して、RedwoodまたはStableテーマで定義されたCSS変数をオーバーライドし、生成されたテーマ定義ファイルを再利用して独自のアプリケーションのテーマを設定できます。

テーマ・ビルダーは、CSS変数値をオーバーライドしてルック・アンド・フィールの変更内容をビジュアル化できる様々なJETコンポーネントを含むJETアプリケーションです。テーマ・ビルダーはJETアプリケーションであるため、テーマ適用のプロセスでは、カスタム・テーマの作成時にアプリケーションが依存するものと同じテーマ定義ファイルが使用されます。これにより、テーマ・ビルダー・アプリケーションを使用してカスタム・テーマを作成し、生成されたテーマ定義ファイルを独自のアプリケーションで再利用できます。または、「JET CLIでのカスタム・テーマの変更」の説明に従って、厳密にCSS変数の名前を知るためのツールとしてテーマ・ビルダーを使用し、JETツールを使用して独自のアプリケーションにカスタム・テーマを作成することもできます。

テーマ・ビルダーを使用するには、テーマ・ビルダー - 「指示」タブの説明に従ってアプリケーションをダウンロードします。次に、JET CLIでojet add themingおよびojet create themeコマンドを使用して、CSS変数をオーバーライドし、カスタム・テーマCSSを作成するために必要なテーマ定義ファイルを生成します。テーマ・ビルダーのカスタムCSSに問題がない場合は、テーマ・ビルダーで変更したテーマ定義ファイルをコピーする前に、テーマ定義ファイルからCSSを生成する独自のアプリケーションを準備します。

始める前に:

  • CSS変数テーマ・ビルダー - 「指示」タブ・アプリケーションをダウンロードしてインストールします。生成されたテーマ定義ファイルを変更してRedwood CSS変数をオーバーライドし、変更したファイルをアプリケーションで再利用します。
  • テーマ・ビルダーによって生成されたCSSを再利用するアプリケーションで、「JET CLIでのカスタム・テーマ・サポートの追加」の説明に従って、テーマ・ツールチェーンをインストールし、カスタム・テーマを構成します。themesフォルダがカスタム・テーマ定義ファイルとともにアプリケーション・ソースに追加されます。これは、テーマ・ビルダーのテーマ定義ファイルをコピーするフォルダです。

アプリケーションでテーマ・ビルダーによって生成されたCSSを再利用するには:

  1. テーマ・ビルダーをダウンロードし、テーマ適用をサポートするコマンドを実行した後、テーマ・ビルダーで、生成された/src/themes/<themeName>/web/_<themeName>.cssvars.settings.scssテーマ・ファイルを編集し、:root下のオーバーライドするRedwood CSS変数の変更を開始します。
  2. テーマ・ビルダー・アプリケーションの実行中に、CSS変数を変更し、作成したルック・アンド・フィールに問題がなくなるまで実行中のアプリケーションで変更をビジュアル化します。
  3. テーマ・ビルダーのルック・アンド・フィールに問題がなく、それ以上のカスタマイズがない場合は、ターミナル・プロンプトで[Ctrl]+[C]を押してアプリケーションを終了します。
  4. テーマ・ビルダー・アプリケーションで、/src/themes/<themeName>/webフォルダ内のすべてのテーマ定義ファイルをコピーし、テーマ適用を使用する準備ができているターゲット・アプリケーションの/src/themes/<themeName>/webフォルダに貼り付けます。
  5. テーマ定義ファイルを追加したアプリケーションの開発バージョンを構築します。
    ojet build --theme=<themeName>

    oraclejetconfig.jsonファイルでdefaultThemeプロパティを設定する場合は、--themeオプションを省略できます。

  6. アプリケーションを実行します。
    ojet serve --theme=<themeName>

    この場合も、oraclejetconfig.jsonファイルでdefaultThemeプロパティを設定する場合は、--themeオプションを省略できます。

  7. オプションで、テーマを調整するには、ターゲット・アプリケーションの_<themeName>.cssvars.settings.scssテーマ・ファイル内のCSS変数を変更します。

    Oracle JET提供プロセスにより、実行中のアプリケーションがブラウザにすぐにリロードされ、CSS変数のオーバーライドの影響を確認できます。

  8. アプリケーションを終了するには、ターミナル・プロンプトで[Ctrl]キーを押しながら[C]キーを押します。

カスタム・テーマでのCSSの最適化

デフォルトでは、アプリケーションをビルドすると、JETツールはすべてのRedwoodスタイル・クラスが有効なCSSをロードします。アプリケーションのコンポーネントで必要とされるスタイルのみを使用するようにCSSを構成できます。

JETツールによってプロジェクトの/src/themesフォルダに追加されたカスタム・テーマ設定ファイルを使用すると、特定のJETコンポーネント・スタイル・クラスの設定ファイル内のimport文をコメント設定したり、コメント解除することにより、Redwood CSSのサイズを減らすことができます。適切なインポート設定が完了したら、JETツールはCSS設定ファイルを処理し、指定されたJETコンポーネントについてのみCSSをロードします。

始める前に:

コンポーネントCSSを制限してCSSを小さくするには:

  1. アプリケーションの/src/themes/themeName/webフォルダで、themeName.scss集約ファイルを編集し、デフォルトですべてのJETコンポーネント・スタイルをインポートするimport文をコメント・アウトします。
    // The import statement contains redwood or stable, depending on the value that you
// supplied to the --basetheme argument when you created the custom theme.
//@import "oj/all-components/themes/redwood/_oj-all-components.scss";
or:
//@import "oj/all-components/themes/stable/_oj-all-components.scss";

    次に、含めるCSSを制御するファイルを使用したコンパイルを有効にするimport文のコメントを解除します。

    @import "_themeName.optimize-components.scss";
  2. _themeName.optimize-components.scssファイルを編集し、アプリケーションのJETコンポーネントに対するimport文のコメントを解除します。次の例は、--basetheme引数の値としてredwoodを使用するテーマを示しています。
    ...
//@import "oj/avatar/themes/redwood/oj-avatar.scss";
//@import "oj/badge/themes/redwood/oj-badge.scss";
@import "oj/button/themes/redwood/oj-button.scss";
@import "oj/buttonset-one/themes/redwood/oj-buttonset-one.scss";
@import "oj/buttonset-many/themes/redwood/oj-buttonset-many.scss";
//@import "oj/card/themes/redwood/oj-card.scss";
//@import "oj/chart/themes/redwood/oj-chart.scss";
...

    この例では、ボタンおよびボタン・セットのimport文のみがコメント解除され、それらのコンポーネントのCSSが含められます。_themeName.omptimize-components.scssファイルのimport文は、デフォルトではすべてコメント・アウトされています。

  3. アプリケーションがすでに実行されている場合は、_themeName.optimize-components.scssファイルに変更を保存した後、import文のコメント設定とコメント解除の効果をすぐに確認できます。それ以外の場合は、アプリケーションでライブ・リロードを有効にします。
    ojet serve
  4. アプリケーションを終了するには、ターミナル・プロンプトで[Ctrl]キーを押しながら[C]キーを押します。

CSS変数を使用したスタイル・コンポーネント・インスタンス

コンポーネント・インスタンスの外観をカスタマイズする場合は、セレクタ・レベルでCSS変数をオーバーライドするスタイル・クラスを作成し、そのスタイル・クラスをアプリケーションのHTMLのコンポーネント・インスタンスに適用します。

スタイル・クラスは、/src/cssフォルダのapp.cssファイルに、またはアプリケーションのテーマ適用時には/src/themes/<themeName>/webフォルダにある生成された_<themeName>.cssvars.settings.scssテーマ・ファイルに定義できます。_<themeName>.cssvars.settings.scssファイルには、アプリケーション全体でJETコンポーネントに適用する変数の値を設定できる:root内の使用可能なCSS変数のリストが含まれます。スタイル・クラスを定義して個々のコンポーネント・インスタンスをカスタマイズする場合は、スタイル・クラス定義をCSSオーバーライドとともに追加して、すべてのCSS変数の後のファイルの最後に表示されるようにする必要があり、:rootに含めることはできません。

ほとんどのカスタマイズはCSS変数を使用して行われますが、メディア問合せなど、いくつかの場合ではSass変数が必要になります。

始める前に:

  • 例については、Oracle JETクックブックのコンポーネントのスタイルに関する項を参照してください。
  • CSS変数とその値の概要は、JET APIリファレンス・ドキュメントのJET CSS変数に関する項を参照してください。
  • この対話形式のデモ・アプリケーションで使用可能なCSS変数について理解を深める場合は、必要に応じてCSS変数テーマ・ビルダー - 「指示」タブ・アプリケーションをダウンロードしてインストールします。CSS変数のオーバーライドによってデモ・ツールUIがどのように変化するかを学習するには、オンラインの指示に従ってテーマ定義ファイルを変更します。

JET CSS変数をオーバーライドしてコンポーネント・インスタンスをスタイル設定するには:

  1. アプリケーションにテーマ適用サポートを追加していない場合は、アプリケーションの/src/cssフォルダを開き、保持するアプリケーションCSSを編集します。特定のコンポーネントに適用するCSS変数オーバーライドを定義するスタイル・クラスを追加できます。

    たとえば、アプリケーションの特定のボタンの高さを変更するには、次のようにスタイル・クラス.demo-jumbo-buttonを作成し、クラスのJET CSS変数--oj-button-heightをオーバーライドします: 

    .demo-jumbo-button { 
  --oj-button-height: 4rem;
  }

    その後、アプリケーションHTMLで、必要に応じてクラスを使用してボタンのスタイルを設定できます。

    <oj-button class="demo-jumbo-button"></button>
  2. または、アプリケーションにテーマを適用する場合は、/src/themes/<themeName>/webフォルダにある生成済の_<themeName>.cssvars.settings.scssテーマ・ファイルにスタイル・クラスを追加できます。

    生成されたファイルを編集する場合は、スタイル・クラス定義をJET CSSオーバーライドとともに追加して、すべてのJET CSS変数の後のファイルの最後に表示されるようにする必要があり、:rootに含めることはできません。

  3. ライブ・リロードを有効にしてアプリケーションを実行するには、ojet serveを--themeオプションとともに入力し、アプリケーション用に管理しているCSSを指定します。
    ojet serve --theme=themeName

    oraclejetconfig.jsonファイルでdefaultThemeプロパティを設定する場合は、--themeオプションを省略できます。

  4. Oracle JETのライブ・リロードを使用してCSS変数のオーバーライドの影響をすぐに確認します。
  5. アプリケーションを終了するには、ターミナル・プロンプトで[Ctrl]キーを押しながら[C]キーを押します。

ベースHTMLタグのJETスタイル設定の無効化

Oracle JETでは、デフォルトで、スタイルがHTMLタグ要素(a、h1、h2など)に適用されます。この機能によって、要素が出現するたびにセレクタを適用する必要がないため、ページのコーディングが簡単になります。

デフォルトでカスタム・テーマのすべてのベースHTMLタグにスタイルを適用しない場合は、タグに配置できるスタイル・クラスをOracle JETで生成するように指定できます。ビルド時にロードされるベース・テーマCSSスタイルは、オプションでプロジェクトに追加できるカスタム・テーマ設定ファイル内のimport文によって制御されます。プロジェクトでCSS設定ファイルを使用するには、アプリケーションにテーマのサポートを追加してから、カスタム・テーマを作成する必要があります。

カスタム・テーマ設定ファイルをプロジェクトの/src/themesフォルダに追加すると、デフォルトですべてのJETコンポーネント・スタイルのインポートを有効にするimport文をコメント・アウトし、かわりにタグなしバージョンのimport文を追加できます。適切なインポート設定が完了した状態でアプリケーションをビルドすると、JETツールはCSS設定ファイルを処理し、すべてのJETコンポーネントのCSSをロードしますが、HTMLベース・タグのJETスタイル・クラスはロードしません。タグなしのインポートを有効にしてJETスタイルをHTMLタグに適用するには、目的のHTMLタグにJETスタイル・クラスを明示的に設定する必要があります。たとえば、次の<a class=oj-link>のように、HTMLアンカー・タグのリンクにJETスタイルを適用できます。

次の表は、デフォルトのOracle JETタグ・スタイルを使用するHTMLタグと、タグなしのimport文を有効にするときにオプションで適用できる対応するOracle JETスタイル・クラスを示しています。

HTMLタグ Oracle JETスタイル・クラス

html

oj-html

body

oj-body

a

oj-link

h1、h2、h3、h4

oj-header

hr

oj-hr

p

oj-p

ul、ol

oj-ul、oj-ol

始める前に:

ベースHTMLタグのJETスタイル設定を無効にするには:

  1. アプリケーションの/src/themes/themeName/webフォルダで、themeName.scss集約ファイルを編集し、すべてのJETコンポーネント・スタイルのインポートを有効にするimport文をコメント・アウトします。
    // The import statement contains redwood or stable, depending on the value that you
// supplied to the --basetheme argument when you created the custom theme.
//@import "oj/all-components/themes/redwood/_oj-all-components.scss";
or:
//@import "oj/all-components/themes/stable/_oj-all-components.scss";

    次に、import文を追加して、HTMLタグにオプションで適用できるOracle JETスタイル・クラスを使用したコンパイルを有効にします。

    @import "oj/all-components/themes/redwood/_oj-all-components-notag.scss";
or:
@import "oj/all-components/themes/stable/_oj-all-components-notag.scss";

    これにより、HTMLタグに適用できるスタイル・クラス(<a class=oj-link>など)が生成されます。

  2. アプリケーションがすでに実行されている場合は、スタイルの変更をすぐに確認できます。それ以外の場合は、アプリケーションでライブ・リロードを有効にします。
    ojet serve
  3. アプリケーションを終了するには、ターミナル・プロンプトで[Ctrl]キーを押しながら[C]キーを押します。