3.4. テーマの作成


テーマは、以下で設定されます。

  • HTML テンプレート (Freemarker テンプレート)
  • イメージ
  • メッセージバンドル
  • スタイルシート
  • スクリプト
  • テーマのプロパティー

すべてのページを置き換える予定がない限り、別のテーマを拡張してください。Red Hat Single Sign-On テーマを拡張する場合が多くですが、ページの外観と操作感を大幅に変更している場合は、ベーステーマの拡張も検討してみてください。ベーステーマは主に HTML テンプレートとメッセージバンドルで設定されており、Red Hat Single Sign-On テーマにはイメージとスタイルシートが含まれます。

テーマを拡張する場合は、個別のリソース (テンプレート、スタイルシートなど) をオーバーライドできます。HTML テンプレートの上書きをすることにした場合は、新しいリリースにアップグレードする際にカスタムテンプレートを更新する必要があることに注意してください。

テーマを作成する際に、Red Hat Single Sign-On を再起動せずに themes ディレクトリーから直接テーマリソースを編集できるため、キャッシングを無効にするとよいでしょう。

手順

  1. standalone.xml を編集します。
  2. theme の場合は、staticMaxAge-1 に設定し、cacheTemplates および cacheThemesfalse に設定します。

    <theme>
        <staticMaxAge>-1</staticMaxAge>
        <cacheThemes>false</cacheThemes>
        <cacheTemplates>false</cacheTemplates>
        ...
    </theme>
    Copy to Clipboard Toggle word wrap
  3. themes ディレクトリーにディレクトリーを作成します。

    ディレクトリーの名前はテーマの名前になります。たとえば、mytheme というテーマを作成するには、themes/mytheme ディレクトリーを作成します。

  4. theme ディレクトリーには、テーマが提供するタイプごとにディレクトリーを作成します。

    たとえば、ログインタイプを mytheme テーマに追加するには、themes/mytheme/login ディレクトリーを作成します。

  5. それぞれのタイプに対して、テーマの設定を可能にする theme.properties ファイルを作成します。

    たとえば、作成したテーマ themes/mytheme/login を設定して基本テーマを拡張し、いくつかの共通リソースをインポートするには、次の内容でファイル themes/mytheme/login/theme.properties を作成します。

    parent=base
    import=common/keycloak
    Copy to Clipboard Toggle word wrap

    これで、ログインタイプのサポートのあるテーマが作成されました。

  6. 管理コンソールにログインして、新しいテーマをチェックアウトします。
  7. レルムを選択します。
  8. メニューで Realm Settings をクリックします。
  9. Themes タブをクリックします。
  10. Login Theme については mytheme を選択し、Save をクリックします。
  11. レルムのログインページを開きます。

    これは、アプリケーションからログインするか、Account Management コンソール (/realms/{realm name}/account) を開いて実行できます。

  12. 親テーマの変更の効果を確認するには、parent=keycloak in theme.properties に設定し、ログインページを更新します。
注記

パフォーマンスに大きく影響するため、必ず実稼働環境でキャッシュを再度有効にしてください。

3.4.1. テーマのプロパティー

テーマプロパティーは、テーマディレクトリーの <THEME TYPE>/theme.properties ファイルで設定されます。

  • parent - 拡張する親テーマ
  • import - 別のテーマからのリソースのインポート
  • styles - 追加するスタイルのスペース区切りリスト
  • locales - サポートされるロケールのコンマ区切りリスト

特定の要素タイプに使用される css クラスを変更するために使用できるプロパティーのリストがあります。これらのプロパティーの一覧は、keycloak テーマ (themes/keycloak/<THEME TYPE>/theme.properties) の対応するタイプの theme.properties ファイルを参照してください。

独自のカスタムプロパティーを追加して、カスタムテンプレートから使用することもできます。

これを行うには、次の形式を使用してシステムプロパティーまたは環境変数を置き換えることができます。

  • ${some.system.property} - システムプロパティーの場合。
  • ${env.ENV_VAR} - 環境変数の場合。

システムプロパティーまたは環境変数が ${foo:defaultValue} で見つからない場合は、デフォルト値を指定することもできます。

注記

デフォルト値が指定されておらず、対応するシステムプロパティーまたは環境変数がない場合は、何も置き換えられず、テンプレートの形式が使用されることになります。

以下は、実現できる例の一部です。

javaVersion=${java.version}

unixHome=${env.HOME:Unix home not found}
windowsHome=${env.HOMEPATH:Windows home not found}
Copy to Clipboard Toggle word wrap

3.4.2. テーマにスタイルシートを追加

テーマに 1 つ以上のスタイルシートを追加できます。

手順

  1. テーマの <THEME TYPE>/resources/css ディレクトリーにファイルを作成します。
  2. それを theme.propertiesstyles プロパティーに追加します。

    たとえば、styles.cssmytheme に追加するには、以下の内容を含む themes/mytheme/login/resources/css/styles.css を作成します。

    .login-pf body {
        background: DimGrey none;
    }
    Copy to Clipboard Toggle word wrap
  3. themes/mytheme/login/theme.properties を編集し、以下を追加します。

    styles=css/styles.css
    Copy to Clipboard Toggle word wrap
  4. 変更を確認するには、レルムのログインページを開きます。

    適用されるスタイルは、カスタムのスタイルシートからのものだけであることに注目してください。

  5. 親テーマのスタイルを含めるには、そのテーマのスタイルを読み込みます。themes/mytheme/login/theme.properties を編集し、styles を次のように変更します。

    styles=web_modules/@fontawesome/fontawesome-free/css/icons/all.css web_modules/@patternfly/react-core/dist/styles/base.css web_modules/@patternfly/react-core/dist/styles/app.css node_modules/patternfly/dist/css/patternfly.min.css node_modules/patternfly/dist/css/patternfly-additions.min.css css/login.css css/styles.css
    Copy to Clipboard Toggle word wrap
    注記

    親スタイルシートのスタイルをオーバーライドするには、スタイルシートが最後にリストされていることを確認してください。

3.4.3. テーマにスクリプトを追加

1 つ以上のスクリプトをテーマに追加できます。

手順

  1. テーマの <THEMETYPE>/resources/js ディレクトリーにファイルを作成します。
  2. ファイルを theme.propertiesscripts プロパティーに追加します。

    たとえば、script.jsmytheme に追加するには、以下の内容で themes/mytheme/login/resources/js/script.js を作成します。

    alert('Hello');
    Copy to Clipboard Toggle word wrap

    次に、themes/mytheme/login/theme.properties を編集し、以下を追加します。

    scripts=js/script.js
    Copy to Clipboard Toggle word wrap

3.4.4. テーマにイメージを追加

テーマがイメージを使用できるようにするには、テーマの <THEME TYPE>/resources/img ディレクトリーにイメージを追加します。これらはスタイルシート内から使用することも、HTML テンプレートで直接使用することもできます。

たとえば、イメージを mytheme に追加するには、イメージを themes/mytheme/login/resources/img/image.jpg にイメージをコピーします。

次に、以下を使用して、カスタムスタイルシート内からこのイメージを使用できます。

body {
    background-image: url('../img/image.jpg');
    background-size: cover;
}
Copy to Clipboard Toggle word wrap

または、HTML テンプレートで直接使用するには、以下をカスタム HTML テンプレートに追加します。

<img src="${url.resourcesPath}/img/image.jpg">
Copy to Clipboard Toggle word wrap

3.4.5. メッセージ

テンプレートのテキストは、メッセージバンドルからロードされます。別のテーマを拡張するテーマは、親のメッセージバンドルからすべてのメッセージを継承し、<THEME TYPE>/messages/messages_en.properties をテーマに追加して個別のメッセージを上書きできます。

たとえば、ログインフォーム上の Username を、mythemeYour Username に置き換えるには、以下の内容で themes/mytheme/login/messages/messages_en.properties ファイルを作成します。

usernameOrEmail=Your Username
Copy to Clipboard Toggle word wrap

メッセージの使用時に {0}{1} などのメッセージ値内では引数に置き換えられます。たとえば、Log in to {0} の {0} はレルム名に置き換えられます。

これらのメッセージバンドルのテキストは、レルム固有の値で上書きすることができます。レルム固有の値は、UI や API で管理できます。

3.4.6. レルムに言語を追加

前提条件

手順

  1. テーマのディレクトリーに <THEME TYPE>/messages/messages_<LOCALE>.properties ファイルを作成します。
  2. このファイルを <THEME TYPE>/theme.propertieslocales プロパティーに追加します。言語をユーザーが利用できるようにするには、レルムの loginaccount および email テーマがその言語をサポートしていなければならないため、これらのテーマタイプに言語を追加する必要があります。

    たとえば、mytheme テーマにノルウェー語の翻訳を追加するには、以下の内容で themes/mytheme/login/messages/messages_no.properties ファイルを作成します。

    usernameOrEmail=Brukernavn
    password=Passord
    Copy to Clipboard Toggle word wrap

    メッセージの翻訳を省略すると、英語が使用されます。

  3. themes/mytheme/login/theme.properties を編集し、以下を追加します。

    locales=en,no
    Copy to Clipboard Toggle word wrap
  4. accountemail のテーマタイプにも同じものを追加します。そのためには、themes/mytheme/account/messages/messages_no.properties および themes/mytheme/email/messages/messages_no.properties を作成します。これらのファイルを空のままにすると、英語のメッセージが使用されます。
  5. themes/mytheme/login/theme.propertiesthemes/mytheme/account/theme.properties および themes/mytheme/email/theme.properties にコピーします。
  6. 言語セレクターの翻訳を追加します。これには、英語の翻訳にメッセージを追加します。これには、以下を themes/mytheme/account/messages/messages_en.properties および themes/mytheme/login/messages/messages_en.properties に追加します。

    locale_no=Norsk
    Copy to Clipboard Toggle word wrap

    デフォルトでは、メッセージプロパティーファイルは ISO-8859-1 を使用してエンコードする必要があります。特別なヘッダーを使用してエンコーディングを指定することもできます。たとえば、UTF-8 エンコーディングを使用するには、次のコマンドを実行します。

    # encoding: UTF-8
    usernameOrEmail=....
    Copy to Clipboard Toggle word wrap

3.4.7. カスタム ID プロバイダーアイコンの追加

Red Hat Single Sign-On は、ログイン画面に表示されるカスタム ID プロバイダーのアイコンの追加に対応しています。

手順

  1. ログイン theme.properties ファイル (themes/mytheme/login/theme.properties など) の中で、キーパターン kcLogoIdP-<alias> でアイコンクラスを定義します。
  2. myProvider というエイリアスを持つ Identity プロバイダーの場合は、カスタムテーマの theme.properties ファイルに行を追加できます。以下に例を示します。

    kcLogoIdP-myProvider = fa fa-lock
    Copy to Clipboard Toggle word wrap

すべてのアイコンは、PatternFly4 の公式 Web サイトで公開されています。ソーシャルプロバイダー用のアイコンは、ベースとなるログインテーマのプロパティー (themes/keycloak/login/theme.properties) ですでに定義されており、自身で選択することができます。

3.4.8. カスタム HTML テンプレートの作成

Red Hat Single Sign-On は、HTML を生成するために Apache Freemarker を使用します。<THEME TYPE>/<TEMPLATE>.ftl を作成して、独自のテーマで個別のテンプレートを上書きできます。使用されるテンプレートの一覧は、themes/base/<THEME TYPE> を参照してください。

手順

  1. テンプレートをベーステーマから独自のテーマにコピーします。
  2. 必要な変更を適用します。

    たとえば、mytheme テーマのカスタムログインフォームを作成するには、themes/base/login/login.ftlthemes/mytheme/login にコピーし、エディターで開きます。

    最初の行 (<#import …​>) の後に、<h1>HELLO WORLD!</h1> を以下のように追加します。

    <#import "template.ftl" as layout>
    <h1>HELLO WORLD!</h1>
    ...
    Copy to Clipboard Toggle word wrap
  3. 変更したテンプレートをバックアップします。Red Hat Single Sign-On の新規バージョンにアップグレードする場合は、必要に応じて元のテンプレートに変更を適用できるようにカスタムテンプレートを更新する必要があるかもしれません。

3.4.9. 電子メール

パスワードリカバリーメールなどのメールの件名および内容を編集するには、テーマの email タイプにメッセージバンドルをを追加します。メールごとに 3 つのメッセージがあります。このサブジェクトの 1 つ。1 つはプレーンテキストの本文用に、もう 1 つは html 本文用です。

利用可能なすべてのメールを確認するには、themes/base/email/messages/messages_en.properties を確認します。

たとえば、mytheme テーマのパスワードリカバリーメールを変更するには、以下の内容で themes/mytheme/email/messages/messages_en.properties を作成します。

passwordResetSubject=My password recovery
passwordResetBody=Reset password link: {0}
passwordResetBodyHtml=<a href="{0}">Reset password</a>
Copy to Clipboard Toggle word wrap
トップに戻る
Red Hat logoGithubredditYoutubeTwitter

詳細情報

試用、購入および販売

コミュニティー

Red Hat ドキュメントについて

Red Hat をお使いのお客様が、信頼できるコンテンツが含まれている製品やサービスを活用することで、イノベーションを行い、目標を達成できるようにします。 最新の更新を見る.

多様性を受け入れるオープンソースの強化

Red Hat では、コード、ドキュメント、Web プロパティーにおける配慮に欠ける用語の置き換えに取り組んでいます。このような変更は、段階的に実施される予定です。詳細情報: Red Hat ブログ.

会社概要

Red Hat は、企業がコアとなるデータセンターからネットワークエッジに至るまで、各種プラットフォームや環境全体で作業を簡素化できるように、強化されたソリューションを提供しています。

Theme

© 2025 Red Hat