13.2 OAAユーザー・インタフェースのカスタマイズ
構成プロパティを使用して、管理コンソールのUIやユーザー・プリファレンス・コンソールのUI、ランタイムのUIなど、OAAユーザー・インタフェース(UI)の特定の機能をカスタマイズできます。
UIは、REST APIを使用して構成プロパティを設定することでカスタマイズできます。
PUT <PolicyUrl>/policy/config/property/v1ノート:
この場合は、<PolicyUrl>から/oaa-policyを削除します。たとえば、https://<host>:<port>/oaa-policy/policy/config/property/v1ではなくhttps://<host>:<port>/policy/config/property/v1を使用します。
PolicyUrlの検索および認証の詳細は、「OAA管理API」を参照してください。
構成プロパティRESTエンドポイントの詳細は、「構成プロパティRESTエンドポイント」を参照してください
構成プロパティを設定するときは、次の点に注意してください:
- イメージ・タイプはpng、jpgまたはjpegにする必要があります。
- イメージ値は、外部URLで使用可能な既存のイメージに設定する必要があります。
- フッター・パラメータを更新する場合は、UIに変更が表示されるよう、フッター固有のすべてのパラメータを一度に更新してください。
- すぐに利用可能なデフォルトの値は内部使用専用で、フェッチしても表示されません。たとえば、GET
<PolicyUrl>/policy/config/property/v1?propertyName=<property>では、デフォルト値として[]が返されます。値がGETで返されるのは、プロパティがカスタム定義されている場合のみです。 - プロパティをすぐに利用可能なデフォルト値にリセットするには、
DELETE <PolicyUrl>/policy/config/property/v1?propertyName=<property>を使用します。
次の項では、各種UIの構成プロパティを設定してカスタマイズする方法について説明します。
13.2.1 管理コンソールのUIをカスタマイズするための構成プロパティ
管理コンソールのUIをカスタマイズするために設定できる構成プロパティについて説明します。
表13-1 管理コンソールのUIをカスタマイズするための構成プロパティ
| プロパティ名 | 説明 | サンプルの値 |
|---|---|---|
| oaa.admin.ui.theme.default.image.path.logo | ロゴ・イメージのパス | https://www.example.com/content/images/logo.jpg |
| oaa.admin.ui.theme.default.image.path.logo.useMaxSpace | カスタム・ロゴのサイズ。デフォルトでは、カスタム・ロゴはサイズに関係なく、50x42ピクセル(px)にレンダリングされます。たとえば、ロゴが40x40pxの場合、そのロゴは50x42pxに拡大されます。useMaxSpaceをtrueに設定すると、40x40pxのロゴの寸法は元のまま残ります。これは、ロゴの幅が200px未満で、ロゴの高さが42px未満の場合にかぎり当てはまります。この制限を超えるものは、すべて200x42pxにサイズ変更されます。 | true |
| oaa.admin.ui.theme.default.image.path.background | 背景イメージのパス | https://www.example.com/content/images/background.jpg |
| oaa.admin.ui.theme.default.image.path.favicon | ファビコン・イメージのパス | https://www.example.com/content/images/favicon.jpg |
| oaa.admin.ui.theme.default.font.text.header | アプリケーション・ヘッダーのテキスト | Example Companyの拡張認証 |
| oaa.admin.ui.theme.default.font.color.header | アプリケーション・ヘッダーの色 | #ffffff |
| oaa.admin.ui.theme.default.font.text.title | アプリケーション・タイトルのテキスト | Example Companyの拡張認証 |
| oaa.admin.ui.theme.default.footer.color | フッター・テキストの色 | #00688c |
| oaa.admin.ui.theme.default.footer.color.copyrightNotice | コピーライトのテキストの色 | rgba(22, 21, 19, .6) |
| oaa.admin.ui.theme.default.footer.text.about | フッター・テキストのabout | Example Companyについて |
| oaa.admin.ui.theme.default.footer.text.contactus | フッター・テキストのcontactus | お問合せ |
| oaa.admin.ui.theme.default.footer.text.legalnotice | フッター・テキストのlegalnotice | 法律上の注意点 |
| oaa.admin.ui.theme.default.footer.text.termsofuse | フッター・テキストのtermsofuse | 使用条件 |
| oaa.admin.ui.theme.default.footer.text.privacyright | フッター・テキストのprivacyright | プライバシの権利 |
| oaa.admin.ui.theme.default.footer.link.about | フッターのaboutのリンク | http://www.example.com/us/corporate/index.html#menu-about |
| oaa.admin.ui.theme.default.footer.link.contactus | フッターのcontactusのリンク | http://www.example.com/us/corporate/contact/index.html |
| oaa.admin.ui.theme.default.footer.link.legalnotice | フッターのlegalnoticeのリンク | http://www.example.com/us/legal/index.html |
| oaa.admin.ui.theme.default.footer.link.termsofuse | フッターのtermsofuseのリンク | http://www.example.com/us/legal/terms/index.html |
| oaa.admin.ui.theme.default.footer.link.privacyright | フッターのprivacyrightのリンク | http://www.example.com/us/legal/privacy/index.html |
| oaa.admin.ui.theme.default.footer.text.copyrightNotice | フッターのコピーライトのテキスト | Copyright © 2021, Example Company and/or its affiliates.All rights reserved. |
| oaa.admin.ui.theme.default.image.tiled.background | trueを指定した場合、背景イメージはタイル状で表示されます | FALSE |
| oaa.admin.ui.theme.default.font.family | 指定すると、カスタムのフォント・ファミリ名が使用されます。汎用フォント・ファミリに関する項を参照してください | Oracle Sans |
13.2.2 ユーザー・プリファレンス・コンソールのUIをカスタマイズするための構成プロパティ
ユーザー・プリファレンス・コンソールのUIをカスタマイズするために設定できる構成プロパティについて説明します。
表13-2 ユーザー・プリファレンス・コンソールのUIをカスタマイズするための構成プロパティ
| プロパティ名 | 説明 | サンプルの値 |
|---|---|---|
| oaa.prefs.ui.theme.default.image.path.logo | ロゴ・イメージのパス | https://www.example.com/content/images/logo.jpg |
| oaa.prefs.ui.theme.default.image.path.logo.useMaxSpace | カスタム・ロゴのサイズ。デフォルトでは、カスタム・ロゴはサイズに関係なく、50x42ピクセル(px)にレンダリングされます。たとえば、ロゴが40x40pxの場合、そのロゴは50x42pxに拡大されます。useMaxSpaceをtrueに設定すると、40x40pxのロゴの寸法は元のまま残ります。これは、ロゴの幅が200px未満で、ロゴの高さが42px未満の場合にかぎり当てはまります。この制限を超えるものは、すべて200x42pxにサイズ変更されます。 | true |
| oaa.prefs.ui.theme.default.image.path.background | 背景イメージのパス | https://www.example.com/content/images/background.jpg |
| oaa.prefs.ui.theme.default.image.path.favicon | ファビコン・イメージのパス | https://www.example.com/content/images/favicon.jpg |
| oaa.prefs.ui.theme.default.font.text.header | アプリケーション・ヘッダーのテキスト | Example Companyの拡張認証 |
| oaa.prefs.ui.theme.default.font.color.header | アプリケーション・ヘッダーの色 | #ffffff |
| oaa.prefs.ui.theme.default.font.text.title | アプリケーション・タイトルのテキスト | Example Companyの拡張認証 |
| oaa.prefs.ui.theme.default.footer.color | フッター・テキストの色 | #00688c |
| oaa.prefs.ui.theme.default.footer.color.copyrightNotice | コピーライトのテキストの色 | rgba(22, 21, 19, .6) |
| oaa.prefs.ui.theme.default.footer.text.about | フッター・テキストのabout | Example Companyについて |
| oaa.prefs.ui.theme.default.footer.text.contactus | フッター・テキストのcontactus | お問合せ |
| oaa.prefs.ui.theme.default.footer.text.legalnotice | フッター・テキストのlegalnotice | 法律上の注意点 |
| oaa.prefs.ui.theme.default.footer.text.termsofuse | フッター・テキストのtermsofuse | 使用条件 |
| oaa.prefs.ui.theme.default.footer.text.privacyright | フッター・テキストのprivacyright | プライバシの権利 |
| oaa.prefs.ui.theme.default.footer.link.about | フッターのaboutのリンク | http://www.example.com/us/corporate/index.html#menu-about |
| oaa.prefs.ui.theme.default.footer.link.contactus | フッターのcontactusのリンク | http://www.example.com/us/corporate/contact/index.html |
| oaa.prefs.ui.theme.default.footer.link.legalnotice | フッターのlegalnoticeのリンク | http://www.example.com/us/legal/index.html |
| oaa.prefs.ui.theme.default.footer.link.termsofuse | フッターのtermsofuseのリンク | http://www.example.com/us/legal/terms/index.html |
| oaa.prefs.ui.theme.default.footer.link.privacyright | フッターのprivacyrightのリンク | http://www.example.com/us/legal/privacy/index.html |
| oaa.prefs.ui.theme.default.footer.text.copyrightNotice | フッターのコピーライトのテキスト | Copyright © 2021, Example Company and/or its affiliates.All rights reserved. |
| oaa.prefs.ui.theme.default.image.tiled.background | trueを指定した場合、背景イメージはタイル状で表示されます | false |
| oaa.prefs.ui.theme.default.font.family | 指定すると、カスタムのフォント・ファミリ名が使用されます。汎用フォント・ファミリに関する項を参照してください | Oracle Sans |
| oaa.prefs.ui.theme.default.menu.button.color | メニュー・ボタンの色を変更します | rgb(31,92,255) |
| oaa.prefs.ui.theme.default.primary.button.color.focus | 送信ボタンの色を変更します | rgb(31,92,255) |
| oaa.prefs.ui.theme.default.primary.button.color.hover | 送信ボタンの色を変更します | rgb(31,92,255) |
| oaa.prefs.ui.theme.default.primary.button.color.active | 送信ボタンの色を変更します | rgb(31,92,255) |
| oaa.prefs.ui.theme.default.header.bar.color | ヘッダー・バーの色を変更します | rgb(99,99,0) |
| oaa.prefs.ui.theme.default.footer.bar.color | フッター・バーの色を変更します | rgb(99,99,0) |
13.2.3 ランタイムのUIをカスタマイズするための構成プロパティ
ランタイムのUIをカスタマイズするために設定できる構成プロパティについて説明します。
表13-3 ランタイムのUIをカスタマイズするための構成プロパティ
| プロパティ名 | 説明 | サンプルの値 |
|---|---|---|
| oaa.rui.ui.theme.default.image.path.logo | ロゴ・イメージのパス | https://www.example.com/content/images/logo.jpg |
| oaa.rui.ui.theme.default.image.path.logo.useMaxSpace | カスタム・ロゴのサイズ。デフォルトでは、カスタム・ロゴはサイズに関係なく、50x42ピクセル(px)にレンダリングされます。たとえば、ロゴが40x40pxの場合、そのロゴは50x42pxに拡大されます。useMaxSpaceをtrueに設定すると、40x40pxのロゴの寸法は元のまま残ります。これは、ロゴの幅が200px未満で、ロゴの高さが42px未満の場合にかぎり当てはまります。この制限を超えるものは、すべて200x42pxにサイズ変更されます。 | true |
| oaa.rui.ui.theme.default.image.path.background | 背景イメージのパス | https://www.example.com/content/images/background.jpg |
| oaa.rui.ui.theme.default.image.path.favicon | ファビコン・イメージのパス | https://www.example.com/content/images/favicon.jpg |
| oaa.rui.ui.theme.default.font.text.title | アプリケーション・タイトルのテキスト | Example Companyの拡張認証 |
| oaa.rui.ui.theme.default.footer.color | フッター・テキストの色 | #00688c |
| oaa.rui.ui.theme.default.footer.color.copyrightNotice | コピーライトのテキストの色 | rgba(22, 21, 19, .6) |
| oaa.rui.ui.theme.default.footer.text.about | フッター・テキストのabout | Example Companyについて |
| oaa.rui.ui.theme.default.footer.text.contactus | フッター・テキストのcontactus | お問合せ |
| oaa.rui.ui.theme.default.footer.text.legalnotice | フッター・テキストのlegalnotice | 法律上の注意点 |
| oaa.rui.ui.theme.default.footer.text.termsofuse | フッター・テキストのtermsofuse | 使用条件 |
| oaa.rui.ui.theme.default.footer.text.privacyright | フッター・テキストのprivacyright | プライバシの権利 |
| oaa.rui.ui.theme.default.footer.link.about | フッターのaboutのリンク | http://www.example.com/us/corporate/index.html#menu-about |
| oaa.rui.ui.theme.default.footer.link.contactus | フッターのcontactusのリンク | http://www.example.com/us/corporate/contact/index.html |
| oaa.rui.ui.theme.default.footer.link.legalnotice | フッターのlegalnoticeのリンク | http://www.example.com/us/legal/index.html |
| oaa.rui.ui.theme.default.footer.link.termsofuse | フッターのtermsofuseのリンク | http://www.example.com/us/legal/terms/index.html |
| oaa.rui.ui.theme.default.footer.link.privacyright | フッターのprivacyrightのリンク | http://www.example.com/us/legal/privacy/index.html |
| oaa.rui.ui.theme.default.footer.text.copyrightNotice | フッターのコピーライトのテキスト | Copyright © 2021, Example Company and/or its affiliates.All rights reserved. |
| oaa.rui.ui.theme.default.image.tiled.background | trueを指定した場合、背景イメージはタイル状で表示されます | false |
| oaa.rui.ui.theme.default.font.family | 指定すると、カスタムのフォント・ファミリ名が使用されます。汎用フォント・ファミリに関する項を参照してください | Oracle Sans |
| oaa.rui.ui.theme.default.button.color.active | アクティブなボタンの色 | rgb(79, 105, 63) |
| oaa.rui.ui.theme.default.button.color.hover | 上にマウスが置かれたボタンの色 | rgb(87, 115, 70) |
| oaa.rui.ui.theme.default.button.color.focus | フォーカスがあるボタンの色 | rgb(95, 125, 79) |
| oaa.rui.ui.theme.default.font.color.factor | テキストの色 | rgb(22, 21, 19) |
| oaa.rui.ui.theme.default.font.color.factorlink | リンクの色 | #00688c |
| oaa.rui.ui.theme.default.font.color.label | ラベルの色 | rgba(22, 21, 19, .6) |
| oaa.rui.ui.theme.default.font.color.header | ファクタ・ヘッダーの色 | rgb(22, 21, 19) |
13.2.4 汎用フォント・ファミリの構成値
汎用フォント・ファミリに設定できる構成値について説明します。
表13-4 汎用フォント・ファミリの構成値
| フォント・ファミリ | 使用可能な値 |
|---|---|
| sans-serif: セリフのない通常のフォント |
Arial Helvetica Verdana Trebuchet MS Gill Sans Noto Sans Avantgarde TeX Gyre Adventor URW Gothic L Optima Arial Narrow |
| serif: セリフのある通常のフォント |
Times Times New Roman Didot Georgia Palatino URW Palladio L Bookman URW Bookman L New Century Schoolbook TeX Gyre Schola American Typewriter |
| monospace: 固定幅フォント |
Andale Mono Courier New Courier FreeMono OCR A Std DejaVu Sans Mono |
| cursive: 手書きを真似たフォント |
Comic Sans MS Comic Sans Apple Chancery Bradley Hand Brush Script MT Brush Script Std Snell Roundhand URW Chancery L |
| fantasy: タイトルなどの装飾用のフォント。 |
Impact Luminari Chalkduster Jazz LET Blippo Stencil Std Marker Felt Trattatello |