こんにちは、アプリケーションサービス本部の上田です。
本日ついに！楽しみに待っていたジョジョの奇妙な冒険第7部のスティール・ボール・ランが配信開始です！！ 仕事終わったら晩酌しながら視聴します👍
さて、本題ですが今回はちょっと小ネタ的な内容で、Keycloakのテーマ変更と日本語化を行ってみます。
そもそも最初の段階でやっておけよという意見もありますが、ドキュメント参照の関係上デフォルトの英語の方がわかりやすかったりするので今までやってませんでした。
ただ以前アプリケーションごとにテーマを変えることができるか？といった内容や日本語化できるか？といった内容があったのを唐突に思い出したのでやってみます。
日本語化
これはそんなに難しくなく、Keycloakの管理画面上から設定が可能です。
Admin Console → Realm Settings → Localization タブ → Internationalization を ON → Supported Locales に「ja」を追加 → Default Locale を「ja」に設定
「Save」を押下して設定を保存しておきます。
その後、再アウトしてログイン画面に戻ると日本語になっています。
さらにログインして管理画面を見てみると、一部の内容が残ってはいますが日本語化されています。
一部英語のままになっているのは翻訳が進んでいないためです。
「日本語化がもう少し進めばなぁ…」や「OSSだし何か自分も貢献したいなぁ…」と思ったそこのあなた！
Weblateで翻訳に協力しましょう！
https://hosted.weblate.org/projects/keycloak/
以下のガイドラインにあるように、KeycloakはWeblateにて翻訳を進めています。
https://github.com/keycloak/keycloak/blob/main/docs/translation.md
Keycloak 内で何となく翻訳のニュアンスが違ったり、そもそも翻訳がない部分があったりした場合は積極的に修正してみましょう（自分も気づいたときに修正投げてたりします）。
若干宣伝のようになりましたがこれで日本語化はOKです。
テーマの変更
既存テーマの切り替え
まず、Keycloak に用意されている既存のテーマを切り替える方法です。
これはやり方としては日本語化ほぼ同じような手順で、管理画面からテーマを選ぶだけです。
ログインテーマを変更してみます。
Admin Console → Realm Settings → Themes タブ → Login Theme で選択して保存
デフォルトだと何も選ばれていないと思いますが、内部ではkeycloak.v2が動いています。
今回はkeycloakに変えてみましょう。
サインアウトしてログイン画面を見てみるといつもと少し違いますね。
こんな感じでテーマは作っておけば気軽に変更が可能です。
次にオリジナルのテーマを作って適用する方法を試してみます。
オリジナルテーマの作成
一からオリジナルテーマを作るのは大変なため、もとのテーマをベースに改編する形で進めていきます。
また、手順としては以下の3つの流れで進めていきます。
- 新しいテーマ用ディレクトリの作成
- デフォルトテーマのコピー
- テーマ内容の編集
- テーマの適用
それぞれ進めていきます。
新しいテーマ用ディレクトリの作成
.
└── [Keycloak_HOME]/
└── themes/
├── README.md
└── mytheme/
こんな感じのディレクトリを作っておきます。
mythemeが今回作るテーマのディレクトリとなります。
デフォルトテーマのコピー
デフォルトテーマをmythemeにコピーしてきます。
そもそもthemeのディレクトリにデフォルトテーマ入っているんじゃないの？と思うのですが、デフォルトテーマはパッケージングされているらしく[KEYCLOAK_HOME]/lib/lib/main/org.keycloak.keycloak-themes-XX.X.X.jarの中に入っています。
カスタムテーマのパッケージングに関してはthemeフォルダのREADMEに記載されているのでそちらをご参考ください。
ともあれ今回はテンプレートをオーバーライドする形で作成するのでjarファイルを解凍して必要なファイルを取り出しましょう。
解凍したらtheme/keycloak.v2/loginのディレクトリを取り出してmythemeの下にコピーします。
さらにコピーしたmytheme/loginの下にtheme/base/login/messageの内容をコピーします。
最終的な構成が以下のような形になっていればOKです。
└── [Keycloak_HOME]/
└── themes/
├── README.md
└── mytheme/
└── login/
├── message/
├── resources/
…
テーマ内容の編集
Keycloakの画面のカスタマイズはftlファイルやcssファイルを修正する方法と管理コンソール画面から変更する方法があります。
凝ったものを作りたいのであればftlファイルをはじめとするデザイン言語でのカスタマイズが必要ですが、「ログイン画面の背景画像を変更する」や「タイトルロゴを編集する」程度の簡単なものであれば管理コンソールから設定できるため、今回はその方法を利用します。
まずは編集するためのテーマに切り替えます。この部分のやり方はこの記事の前の項目で設定した方法と同じです。
追加した「mytheme」が表示されているはずなので選択して「Save」します。
次に「General」からDisplay nameを編集します。
サインイン画面に戻ってみると先ほど設定した文言に変更されています。
次に背景画像を変えてみます。
theme/mytheme/login/resource/img の下に設定したい画像を置いておき、themes/mytheme/login/resources/css/styles.css からログイン背景の画像を設定します。
.login-pf body {
background: url("../img/my_picture.png") no-repeat center center fixed;
background-size: cover;
height: 100%;
}
同じようにログイン画面を開くと背景画像が変更されていることが確認できます（背景に重なって表示名が見づらいのは許してください）。
ちなみにこれは去年の社員旅行で撮影したものです。
このような形でログイン画面のカスタマイズやテーマ変更を行うことが可能です。
まとめ
今回は、Keycloakの日本語化設定とテーマのカスタマイズ方法について解説しました。
標準機能での日本語化はもちろん、オリジナルのテーマ作成による画面カスタマイズなどKeycloakは運用に合わせた柔軟な調整が可能です。
一見難しそうに見えるUIの変更ですが、手順を踏めば意外とスムーズに行えます。
ぜひ皆さんも、使いやすい認証画面を目指してカスタマイズに挑戦してみてください。
この記事がどなたかの学習の助けになれば幸いです。
最後までお読みいただきありがとうございました。
