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

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

• テーマ・スタイルについて
  テーマ・スタイルは、アプリケーションのルック・アンド・フィールを変更するためにベースCSSに追加されるCSSスタイルシートです。
• テーマ・スタイルの作成
  テーマ・スタイルを作成するには、既存のスタイルを選択し、「スタイルの追加」を選択します。
• テーマ・ページからのテーマ・スタイルの編集
  「テーマ」ページからテーマ・スタイルを編集します。
• ユーザー・インタフェース・ページからのテーマ・スタイルの編集
  「ユーザー・インタフェース」ページからテーマ・スタイルを編集します。
• ユーザーによるテーマ・スタイルの選択の可能化
  実行中のアプリケーションでユーザーがテーマ・スタイルを選択できるようにします。
• テーマ・ローラーの使用
  コードを編集せずに、アプリケーションの外観を迅速に変更するには、テーマ・ローラーを使用します。

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

テーマ・スタイルは、アプリケーションのルック・アンド・フィールを変更するためにベースCSSに追加されるCSSスタイルシートです。

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

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

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

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

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

13.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. 「作成」をクリックします。

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

「テーマ」ページからテーマ・スタイルを編集します。

テーマ・スタイルを編集するには:

1. テーマ・ページにナビゲートします。
   1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
   2. アプリケーションを選択します。
   3. 「共有コンポーネント」をクリックします。
   4. 「ユーザー・インタフェース」で、「テーマ」を選択します。
2. テーマ名をクリックします。
3. テーマを選択し、「スタイル」タブをクリックします。
4. テーマ・スタイルを選択します。
5. 現在のテーマ・スタイルを変更するには、該当する属性を編集し、「変更の適用」をクリックします。

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

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

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

「ユーザー・インタフェース」ページからテーマ・スタイルを編集します。

ユーザー・インタフェース・ページからテーマ・スタイルを編集するには:

1. ユーザー・インタフェース・ページにナビゲートします。
   1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
   2. アプリケーションを選択します。
   3. 「共有コンポーネント」をクリックします。
   4. 「ユーザー・インタフェース」で「ユーザー・インタフェース属性」をクリックします。
      ユーザー・インタフェース・ページが表示されます。
2. ユーザー・インタフェース(デスクトップなど)を見つけて、テーマ・スタイル名をクリックします。
   テーマ・スタイル・ページが表示されます。
3. 現在のテーマ・スタイルを変更するには、該当する属性を編集し、「変更の適用」をクリックします。

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

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

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

実行中のアプリケーションで、ユーザーがテーマ・スタイルを選択できるようにします

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

ユーザーがテーマ・スタイルを選択できるようにするには:

1. 2つ以上のテーマ・スタイルを含むアプリケーションを作成します。
2. アプリケーションのユーザー・インタフェース・ページに移動します。
   1. 「共有コンポーネント」をクリックします。
   2. 「ユーザー・インタフェース」で「ユーザー・インタフェース属性」をクリックします。
      ユーザー・インタフェース属性ページが表示されます。
3. ユーザーがテーマ・スタイルを選択できるようにします。
   1. 「属性」の下で、「テーマ・スタイルを選択できるようにエンド・ユーザーを有効化」を「オン」に設定します。
   2. 「変更の適用」をクリックします。

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

コードを編集せずに、アプリケーションの外観を迅速に変更するには、テーマ・ローラーを使用します。

テーマ・ローラーは、開発者がコード行を変更することなく、アプリケーションの色や角丸などの属性を迅速に変更できる、ライブCSSエディタです。

ヒント:

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

テーマ・ローラーは、テーマ・スタイルの少なくとも1つに、「入力パラメータ・ファイルURL」属性が定義されている場合に、実行時開発者ツールバーに表示されます。

ヒント:

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

テーマ・ローラーを使用するには:

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

   実行時開発者ツールバーは、編集可能な実行中のページの下部に表示されます。

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

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

   
   図theme_roller.pngの説明

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

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

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

     ヒント:

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

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

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

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

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

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

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

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

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

   ヒント:

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

7. 「保存」をクリックして、サーバーに変更をコミットします。選択したテーマが読取り専用の場合は、「名前を付けて保存」をクリックして、変更を新しいテーマとして保存します。