12.1.3 テーマ・スタイルおよびテーマ・ローラーの使用

テーマ・スタイルは、ベースCSSに追加されるCSSです。開発者は、テーマ・ローラー・ユーティリティを使用してアプリケーションの外観を変更できます。ユニバーサル・テーマ - 42には、テーマ・スタイルが含まれています。

• テーマ・スタイルについて
  
• テーマ・スタイルの作成
  
• テーマ・ページからのテーマ・スタイルの編集
  
• ユーザー・インタフェース・ページからのテーマ・スタイルの編集
  
• ユーザーによるテーマ・スタイルの選択の可能化
  
• テーマ・ローラーの使用
  

12.1.3.1 テーマ・スタイルについて

テーマ・スタイルでは、アプリケーションのルック・アンド・フィールを変更するためにベースCSSに追加される、CSSスタイルシートを定義します。ユニバーサル・テーマ - 42などの新しいテーマには、ベースCSSファイルに加えてテーマ・スタイルCSSファイルを含めることができます。テーマ・スタイルCSSファイルは、ページ・テンプレート内で#THEME_STYLE_CSS#置換文字列を使用して参照されます。Application Expressエンジンによって、この置換文字列は、テーマ・スタイル属性で定義されているCSSファイル参照と置き換えられます。テーマ・スタイルを使用して、テーマをカスタマイズしたり、別のカラー・スキームに切り替えたり、フラットな外観を適用したり、テーマをレスポンシブにします。1つのテーマに複数のテーマ・スタイルを設定し、その1つのスタイルをアクティブに設定できます。テーマ・スタイルCSSファイルは、テーマ・ローラーを使用して変更できます。

定義後、開発者は次の方法でテーマ・スタイルを選択できます。

• アプリケーションの作成ウィザードの実行時に、「テーマ・スタイル」属性を編集します。ページ・タイプ、機能および設定の理解を参照してください。

• ユーザー・インタフェースの編集。ユーザー・インタフェース・ページからのテーマ・スタイルの編集を参照してください。

• テーマの作成/編集ページへのアクセス。テーマの編集およびテーマ・スタイルの作成を参照してください。

12.1.3.2 テーマ・スタイルの作成

テーマ・スタイルを作成するには、次のステップを実行します。

1. テーマ・ページにナビゲートします。
   1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
   2. アプリケーションを選択します。
   3. 「共有コンポーネント」をクリックします。
   4. 「ユーザー・インタフェース」で、「テーマ」を選択します。
2. テーマを選択し、「スタイル」タブをクリックします。
3. 「スタイルの追加」をクリックします。

   テーマ・スタイル・ページが表示されます。

4. 「設定」で、次のステップを実行します。
   1. 名前 - テーマ・スタイルに説明的な短い名前を指定します。
   2. カレント - このスタイルが、テーマで使用されている現在のスタイルかどうかを選択します。
   3. パブリック - このスタイルが、エンド・ユーザーによって選択可能かどうかを選択します。
   4. ファイルURL - このスタイルが、テーマで使用されている現在のスタイルかどうかを選択します。

   属性の詳細は、フィールドレベル・ヘルプを参照してください。

5. 「テーマ・ローラー属性」について:
   1. 読取り専用 - テーマ・スタイルが更新されないようにする場合は、「はい」を選択します。テーマ・スタイルをテーマ・ローラーを使用して編集および上書きできるようにする場合は、「いいえ」を選択します。
   2. 入力パラメータ・ファイルURL - テーマ・ローラーの使用時に、このテーマ・スタイルを生成するために使用されるLESSファイルのURLを入力します。
   3. 出力CSSファイルURL - このテーマ・スタイルについてテーマ・ローラーによって生成されるCSSファイルのURLを入力します。
   4. テーマ・ローラーJSON構成、JSON構成 - テーマ・スタイルが保存されると、テーマ・ローラーによってJSON構成が生成されます。

      構成を手動で更新することはお薦めしません。ただし、別のアプリケーションのテーマ・スタイルなど、別のテーマ・スタイルからJSON構成をコピーして手動で更新できます。

6. 「作成」をクリックします。

12.1.3.3 テーマ・ページからのテーマ・スタイルの編集

テーマ・スタイルを編集するには、次のステップを実行します。

1. テーマ・ページにナビゲートします。
   1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
   2. アプリケーションを選択します。
   3. 「共有コンポーネント」をクリックします。
   4. 「ユーザー・インタフェース」で、「テーマ」を選択します。
2. テーマ名をクリックします。
3. テーマを選択し、「スタイル」タブをクリックします。
4. テーマ・スタイルを選択します。

   テーマ・スタイル・ページが表示されます。

5. 現在のテーマ・スタイルを変更するには、該当する属性を編集し、「変更の適用」をクリックします。

   属性の詳細は、フィールドレベル・ヘルプを参照してください。

6. 現在のテーマ・スタイルを削除するには、「削除」をクリックします。
7. 「作成」をクリックします。

12.1.3.4 ユーザー・インタフェース・ページからのテーマ・スタイルの編集

ユーザー・インタフェース・ページからテーマ・スタイルを編集するには、次のステップを実行します。

1. ユーザー・インタフェース・ページにナビゲートします。
   1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
   2. アプリケーションを選択します。
   3. 「共有コンポーネント」をクリックします。
   4. 「ユーザー・インタフェース」で「ユーザー・インタフェース属性」をクリックします。

      ユーザー・インタフェース・ページが表示されます。

2. ユーザー・インタフェース(デスクトップなど)を見つけて、テーマ・スタイル名をクリックします。

   テーマ・スタイル・ページが表示されます。

3. 現在のテーマ・スタイルを変更するには、該当する属性を編集し、「変更の適用」をクリックします。

   属性の詳細は、フィールドレベル・ヘルプを参照してください。

4. 現在のテーマ・スタイルを削除するには、「削除」をクリックします。
5. 「作成」をクリックします。

12.1.3.5 ユーザーによるテーマ・スタイルの選択の可能化

開発者は、実行中のアプリケーションでユーザーがテーマ・スタイルを選択できるようにすることができます。このことを可能にすると、実行中のアプリケーションで、「カスタマイズ」リンクが、通常は左下隅に表示されます。ユーザーが「カスタマイズ」リンクをクリックすると、ポップアップが表示され、使用可能なテーマ・スタイルがリストされます。ユーザーがテーマ・スタイルを選択すると、テーマ・スタイルがユーザー・プリファレンスとして永続的に格納され、将来のセッション中に保持されます。

ユーザーがテーマ・スタイルを選択できるようにするには、次のステップを実行します。

1. 2つ以上のテーマ・スタイルを含むアプリケーションを作成します。
2. アプリケーションのユーザー・インタフェース・ページに移動します。
   1. 「共有コンポーネント」をクリックします。
   2. 「ユーザー・インタフェース」で「ユーザー・インタフェース属性」をクリックします。

      ユーザー・インタフェース属性ページが表示されます。定義されているユーザー・インタフェースが、ページの上部に表示されます。

3. ユーザー・インタフェースの詳細を編集します。
   1. 該当するユーザー・インタフェース(デスクトップなど)の横にある「編集」アイコンをクリックします。
   2. 「属性」の下で、「テーマ・スタイルを選択できるようにエンド・ユーザーを有効化」を「はい」に設定します。
   3. 「変更の適用」をクリックします。
4. 各テーマ・スタイルを編集して、「パブリック」属性を「はい」に設定します。
   1. ユーザー・インタフェース・ページで、テーマ・スタイル名(履歴など)をクリックします。
   2. 「設定」の下で、「パブリック」を「はい」に設定します。
   3. 「変更の適用」をクリックします。

      ユーザー・インタフェース・ページが再表示されます。

12.1.3.6 テーマ・ローラーの使用

テーマ・ローラーは、開発者がコード行を変更することなく、アプリケーションの色や角丸などの属性を迅速に変更できる、ライブCSSエディタです。テーマ・ローラーは、テーマ・スタイルの少なくとも1つに、「入力パラメータ・ファイルURL」属性が定義されている場合に、実行時開発者ツールバーに表示されます。

ヒント:

テーマ・ローラーの例を参照するには、ユニバーサル・テーマ - 42を使用するパッケージ・アプリケーションをインストールして実行します。パッケージ・アプリケーションの使用を参照してください。

テーマ・ローラーを使用するには、次のステップを実行します。

1. ページを実行してプレビューします。

   開発者がデスクトップ・アプリケーションを実行すると、編集可能な実行中のページの下部に、実行時開発者ツールバーが表示されます。

   
   図GUID-997B3C83-EAA3-48EE-A43E-8661897579BB-default.pngの説明

   ヒント:

   テーマ・ローラーは、テーマ・スタイルが定義されている場合にのみ、実行時開発者ツールバーに表示されます。テーマの編集およびスタイルを参照してください。

2. 実行時開発者ツールバーで、「テーマ・ローラー」をクリックします。

   テーマ・ローラーによって、アプリケーションのスタイルがフェッチされ、エディタにロードされます。

   
   図GUID-C0AC3DEF-BF10-4F2E-865D-0BB9B48A951F-default.pngの説明

   アクティブなアイコンおよびメニューの上にカーソルをあわせると、その名前が表示されます。

3. セクション名をクリックすると、セクションを開閉できます。主なコントロールには、次のものがあります。

   • 共通の表示 - すべての属性を表示します。

     ヒント:

     「カスタムCSS」セクションを変更することで、ユニバーサル・テーマのテーマ・スタイルを上書きできます。このセクションで使用するセレクタに注意してください。コンテンツを非表示または不鮮明な表示にすると、ユーザーの操作性が低下する場合があります。

   • すべて表示 - すべての属性が表示されます。

   • 元に戻す - 現在編集しているテーマを前のアクションに戻します。この機能は、テーマを切り替えた場合は動作しません。

   • やり直し - 現在の「元に戻す」リビジョンを破棄し、履歴の次のリビジョンに進みます。この機能は、テーマを切り替えた場合は動作しません。

   • 検索 - プロパティ、グループおよび色を検索します。検索すると、検索文字列と一致するプロパティのみがテーマ・ローラーによって自動的に表示されます。

   • リセット - 選択したテーマをサーバーに保存されている最終バージョンに戻します。テーマをリセットしてページをリロードした後で、「元に戻す」および「やり直し」を使用して変更をリストアできます。

   • ヘルプ - ヘルプ・ウィンドウを表示します。

4. 「スタイル」から新しいスタイルを選択し、リストから既存のスタイルを選択します。
5. 「グローバル色」の下で、色見本をクリックして新しい色を選択します。
6. 特定のコンポーネントを編集するには、グループを開き、編集するコンポーネントの新しい色またはスタイル設定を選択します。

   前景色および背景色の選択をサポートする属性の場合、2つのカラー選択の前にあるチェック・ボックスは、Webコンテンツ・アクセシビリティ・ガイドライン(WCAG) 2.0に基づくカラー・コントラスト情報を示します。計算されたコントラスト・スコアがより高いことは、そのカラーの組合せのアクセシビリティがより高いことを示します。

   ヒント:

   作業中のテーマ・スタイルをアプリケーションの現在のテーマ・スタイルとして設定するには、「現行として設定」をクリックします。

7. 作業中のテーマ・スタイルをアプリケーションの現在のテーマ・スタイルとして設定するには。
8. 「保存」をクリックして、サーバーに変更をコミットします。選択したテーマが読取り専用の場合は、「名前を付けて保存」をクリックして、変更を新しいテーマとして保存します。