OpenAM 14 ダッシュボード 利用手順書

OSSTech 株式会社
更新日

2022 年 12 月 13 日

リビジョン

1.0

目次
1

はじめに

1

本書の目的 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

1

機能概要

2

2.1

マイアプリケーション . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2

2.2

認証デバイス . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2

2.3

FIDO2(WebAuthn) 認証デバイス . . . . . . . . . . . . . . . . . . . . . . .

2

マイアプリケーションの利用

3

3.1

事前準備 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3

3.2

アプリケーションの登録 . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4

3.3

マイアプリケーションの割り当て . . . . . . . . . . . . . . . . . . . . . . .

7

3.4

マイアプリケーションのソートとグループ化 . . . . . . . . . . . . . . . . .

15

3.5

タブ表示の切り替え . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

46

3.6

レイアウトのカスタマイズ. . . . . . . . . . . . . . . . . . . . . . . . . .

49

1.1
2

3

4

ログイン後の画面をダッシュボードに変更する

55

5

改版履歴

57

i

1 はじめに
1.1 本書の目的
本文書は OSSTech 版 OpenAM のダッシュボード利用手順書です。

1

2 機能概要
ダッシュボードでは、OpenAM にログイン済みのユーザーに様々な機能を提供します。

2.1 マイアプリケーション
アプリケーションへアクセスするリンクを表示します。アプリケーションの登録や削除は管理者が行います。ユーザーはアプリケーション表示のソートやグループ化を行うことができます。

2.2 認証デバイス
OATH デバイスの管理を行うことができます。 詳細は「OpenAM 14 ForgeRock Authenticator (OATH) 認証モジュール 利用手順書」をご確認ください。

2.3 FIDO2(WebAuthn) 認証デバイス
FIDO2 認証デバイスの管理を行うことができます。 詳細は「OpenAM 14 WebAuthn 認証
モジュール 利用手順書」をご確認ください。

2

3 マイアプリケーションの利用
ここでは、マイアプリケーションの設定方法と利用方法について説明します。

3.1 事前準備
3.1.1 登録するアプリケーションの情報の取得
アプリケーションを登録するには下記の情報を事前に用意しておく必要があります。

• アプリケーションの URL• アプリケーションの表示用アイコン– 推奨サイズは幅 212px、高さ 120px です。ブラウザのウィンドウサイズによって表示されるアイコンの大きさがかわるため、推奨サイズと大きさや比率が同じ場合にも拡大または縮小されて表示されることがあります。

– 対応している画像形式は GIF、JPEG、PNG などの<img> 要素で利用可能な形式です。ブラウザに依存するため、ブラウザによっては特定の形式の画像が正常に表示されない可能性があります。

– 用意したアイコンは/opt/osstech/var/lib/tomcat/webapps/openam/XUI/
images/logos/ 配下などの OpenAM が参照できる場所に配置し、Tomcat プロ
セスの実行ユーザー tomcat が読み取れるようにパーミッションを設定します。

OpenAM が冗長構成 (サイト構成) の場合は両方のサーバーの同一パスに配置します。

3.1.2 ユーザーデータストア設定
ユーザーデータストアに内蔵 OpenDJ を利用している場合、以降の手順は不要です。
マイアプリケーションでは、下記の属性を利用します。
属性名

利用目的

assignedDashboard

マイアプリケーションに表示するアプリケーションの保存(「assignedDashboard 属性の利用」を参照してください。)
myApplications

ソート・グループ化されたアプリケーションの保存(「ユーザーによるソートとグループ化」などで利用します。)

33.1.2.1 スキーマの有効化
弊社では OpenAM 用 LDAP スキーマを提供しています。「assignedDashboard」属性
は「openam.schema」に、「myApplications」属性は「myapps.schema」に定義されています。「myapps.schema」は osstech-openam-ldapschema の 1.8 以上に含まれています。対応バージョン未満の場合は osstech-openam-ldapschema をアップデートする必要があります。

1. /opt/osstech/etc/openldap/schema/ に利用するスキーマファイルがあることを確認します。

2. /opt/osstech/etc/openldap/slapd.conf に定義を追加します。既に記述されている場合、追加する必要はありません。
include /opt/osstech/etc/openldap/schema/openam.schema
include /opt/osstech/etc/openldap/schema/myapps.schema

3. OpenLDAP を再起動します。
# systemctl restart osstech-slapd

3.1.2.2 属性の許可
データストアの設定で利用する属性を許可します。

1. OpenAM の管理コンソールにログインします。
2. 任意のレルムを開きます。
3. 左のサイドメニューの「データストア」を開き、対象のデータストアを開きます。
4.「LDAP ユーザーオブジェクトクラス」に「myApplicationsContainer」、「LDAP ユー
ザー属性」に「myApplications」を追加して「保存」を押下します。
「assignedDashboard」属性はデフォルト設定で許可されているため、追加する必要はありません。

3.2 アプリケーションの登録
マイアプリケーションに表示するアプリケーションを管理者が登録します。

1. OpenAM の管理コンソールにログインします。
4

2. 上部メニューの「設定」から「グローバルサービス」を開きます。
3.「ダッシュボード」を開きます。
4.「セカンダリ設定インスタンス」の「新規」ボタンを押下してインスタンスを追加します。

• 予め「Google」「SalesForce」「ZenDesk」が作成されていますが、利用しない場
合は削除します。

5.「サブ設定を追加」の画面で各項目を設定します。設定が必要なもののみ記載します。
下表に記載のない設定項目は空欄で問題ありません。
項目名

設定内容

名前

任意の一意な識別名

Dashboard Login

アプリケーションの URL

Dashboard Name

ダッシュボードに表示する名前

dashboard Icon

ダッシュボードに表示するアイコン

6. 登録したいアプリケーションの数だけ「4」と「5」を繰り返します。
ここでは、例として下記の 4 つのアプリケーションを登録します。
項目名

設定例

名前

calendardrivemessageuidm

Dashboard Loginhttps://calendar.example.co.jp/calendar/https://drive.example.com/share/
https://message.example.co.jp/tech/msg/
http://unicornsv.example.com/unicornIDM/passwd/change/example/

Dashboard Name

カレンダー
共有ドライブメッセージ

Unicorn IDM

5

項目名

設定例

dashboard Icon

images/logos/calendar.png
images/logos/drive.png
images/logos/message.png
images/logos/uidm.png

7. トップページに戻り、対象のレルムを開きます。
8. 左のサイドメニューの「サービス」を開きます。
9.「サービスの追加」を押下し、サービスタイプに「ダッシュボード」を選択し、「作成」
を押下します。

10. ダッシュボードサービスの設定画面で各項目を設定します。
項目名

設定内容

利用可能なダッシュボード

利用するアプリケーションの識別名

アプリケーション(設定する必要はありません。)

ドロップダウン付きタブ表示

グループ化のタブが表示可能数よりも多い場合に一部のタブを省略して表示するかどうか(「タブ表示の切り替え」を参照してください。)
ユーザーによるアプリケーションのユーザーによるダッシュボードの編集を許可する

ソートとグループ化

かどうか(「マイアプリケーションのソートとグループ化」
を参照してください。)
アプリケーション割り当て用

アプリケーションの割り当て用スクリプトの名前

スクリプト(「アプリケーション割り当て用スクリプトの利用」「管理者によるソートとグループ化」を参照してください。)

OATH Device 登録用 URL

OATH デバイスを登録する URL(「OpenAM 14 ForgeRock Authenticator (OATH)
認証モジュール利用手順書」を参照してくださ
い。)

6

項目名

設定内容

OATH Device 再登録用 URL

OATH デバイスを再登録する URL(「OpenAM 14 ForgeRock Authenticator (OATH)
認証モジュール利用手順書」を参照してください。)

ここでは、例として下記のように設定します。
項目名

設定例

利用可能なダッシュボード(空欄)

アプリケーション
ドロップダウン付きタブ表示

有効

ユーザーによるアプリケーションの有効

ソートとグループ化
アプリケーション割り当て用--- Select a script ---スクリプト

OATH Device 登録用 URL(空欄)

OATH Device 再登録用 URL(空欄)

11.「変更の保存」を押下します。

3.3 マイアプリケーションの割り当て
マイアプリケーションは「assignedDashboard」属性または「アプリケーション割り当て
用スクリプト」を使ってユーザーに割り当てます。「assignedDashboard」属性を利用しての割り当ては、ユーザーごとに表示するアプリケーションが異なる場合に推奨される設定方法です。また、「アプリケーション割り当て用スクリプト」を使った設定よりも比較的簡単に割り当てることができます。ただし、条件によって表示するアプリケーションを変更したい場合などの複雑な設定は行うことができません。そのような場合は「アプリケーション割
り当て用スクリプト」を利用してアプリケーションの割り当てを行う必要があります。属性
による割り当てとスクリプトによる割り当てを併用することも可能です。

7

3.3.1 assignedDashboard 属性の利用「assignedDashboard」属性でマイアプリケーションを割り当てるには、ユーザーごとの「assignedDashboard」属性にアプリケーション登録時に設定したアプリケーションの識別名を格納します。
ここでは、例としてあるユーザーの「assignedDashboard」属性に下記のように格納します。検証のため、識別名「drive」以外を属性値として格納しています。
assignedDashboard: calendar
assignedDashboard: message
assignedDashboard: uidm

3.3.1.1 表示例
OpenAM のログイン画面を開き、「assignedDashboard」属性を設定したユーザーでログインし、上部メニューの「ダッシュボード」を開きます。識別名「drive」意外のアプリケー
ションがマイアプリケーションに表示されます。

図 1 assignedDashboard 属性での割り当て表示例

8

3.3.2 アプリケーション割り当て用スクリプトの利用
アプリケーション割り当て用スクリプトでマイアプリケーションを割り当てるには、「Application Assignment」タイプのスクリプトを作成する必要があります。スクリプトは下記の手順で作成します。

1. OpenAM の管理コンソールにログインします。
2. 対象のレルムを開きます。
3. 左のサイドメニューの「スクリプト」を開きます。
4. スクリプト一覧画面で「新規スクリプト」を押下します。
5.「名前」に任意のスクリプト名を設定し、「スクリプトタイプ」に「Application Assignment」を設定して「作成」を押下します。
6. スクリプト編集画面でスクリプトを記述します。言語は JavaScript または Groovy で記述可能です。スクリプト内で利用可能な定数は下記表を参照してください。割り当てるアプリケーションは「assignedApplications」にセットします。
定義名

定義内容

loggerDashboard の Debug オブジェクト

httpClient

HTTP Client オブジェクト

identity

認証済みユーザーの AMIdentity ラッパーオブジェクト

requestHttpServletRequest のラッパーオブジェクト

session

SSOToken のラッパーオブジェクト

allApplications

ダッシュボードサービスに含まれる全てのアプリケーション識別名

assignedApplications

認証済みユーザーに割り当てられたアプリケーション

myApplications

ソート・グループ化されたアプリケーション

ここでは、例として JavaScript で下記の要件を満たすようにスクリプトを作成します。

• 社内からアクセスされた場合は全てのアプリケーションを表示する。
• 社外からアクセスされた場合は「カレンダー」「メッセージ」のみ表示する。
ただし、営業部に所属しているユーザーのダッシュボードには社外からのアクセスであっても「共有ドライブ」を表示する。

• 社内からのアクセスかどうかは Apache で付与した判別用ヘッダー「accesstype」

9

の値で判定する。

Apache の設定例 (IP アドレスが 192.168.xxx.xxx の場合、リクエストヘッダーに accesstype: internal をセット)
SetEnvIf Remote_Addr "^192\.168\." INTERNAL=1
RequestHeader set accesstype "internal" env=INTERNAL• 営業部に所属しているユーザーかどうかは「ou」属性が「Sales」かどうかで判定する。
// allApplications から全てのアプリケーションの識別名を取得
var allApps = allApplications.keys().toArray();// 社外からのアクセス時に表示するアプリケーション
var externalApps = [ 'calendar', 'message' ];// 営業部に所属しているユーザーに表示するアプリケーション
var salesApps = [ 'drive' ];if (isInternalAccess()) {// 社内からアクセスされた場合// 全てのアプリケーションを割り当てる
assign(allApps);} else {// 社外からアクセスされた場合// 社外用のアプリケーションのみ割り当てる
assign(externalApps);
if (isSalesDepartmentUser()) {// 営業部のユーザーの場合// 営業部用のアプリケーションを割り当てる
assign(salesApps);}}
function isInternalAccess() {if (isInternalFromHeader()) {logger.message(' 社内からアクセスされました。');
return true;}
logger.message(' 社外からアクセスされました。');
return false;}10

function isInternalFromHeader() {// リクエストから accesstype ヘッダーを取得
var header = request.getHeader('accesstype');// ヘッダーの値が internal の場合に true を返す
return 'internal'.equals(header);}function isSalesDepartmentUser() {// ユーザーの ou 属性を取得
var ou = identity.getAttribute('ou');
return ou.contains('Sales');}function assign(apps) {for (var i = 0; i < apps.length; i++) {// 指定されたアプリケーションの情報を assignedApplications に追加// アプリケーションの情報は allApplications からアプリケーション識別名// を使って取得
assignedApplications.add(apps[i] ,allApplications.get(apps[i]));}}7.「変更の保存」を押下します。
上記の例ではデフォルト設定で許可されていない Java クラスを利用するため、そのままスクリプトが実行されると Dashboard デバッグログにエラーが出力されます。
ERROR: Dashboard.getAssignedDashboardByScript() :Failed to execute the script.
javax.script.ScriptException: java.util.concurrent.ExecutionException:
javax.script.ScriptException: Access to Java class"java.util.HashMap$KeySet" is prohibited.

エラーを解消するためには、スクリプト設定のホワイトリストに当該クラスを追加する必要があります。

1. 上部メニューの「設定」から「グローバルサービス」を開きます。
2.「Scripting」を開き、インスタンスから「Application Assignment」を開きます。
3. セ カ ン ダ リ 設 定 イ ン ス タ ン ス の「Engine Conﬁguration」を 開 き 、「Java classwhitelist」に「java.util.HashMap$KeySet」を追加します。
4.「保存」を押下します。
また、上記の例ではスクリプトでユーザーの「ou」属性を参照していますが、デフォルト設定ではデータストアの「LDAP ユーザー属性」に当該属性が追加されていない

11

ため参照することができません。データストアの「LDAP ユーザーオブジェクトクラ
ス」と「LDAP ユーザー属性」には、スクリプト内で利用する属性に対応する適切な値が設定されている必要があります。

1. 対象レルムの左のサイドメニューからデータストアを開きます。
2. データストア一覧画面で対象のデータストア設定を開きます。
3.「LDAP ユーザー属性」に「ou」を追加し、「保存」を押下します。
8. 左のサイドメニューの「サービス」を開きます。
9.「ダッシュボード」を開き、「アプリケーション割り当て用スクリプト」を作成したス
クリプトの名前に変更し、「変更の保存」を押下します。

3.3.2.1 表示例• 社内からアクセスされた場合
OpenAM のログイン画面を開き、任意のユーザーでログインして上部メニューの「ダッシュボード」を開きます。全てのアプリケーションがマイアプリケーションに表示されます。

12

図 2 スクリプトでの割り当て表示例 (社内からのアクセス)• 社外からアクセスされた場合– 営業部に所属していないユーザーがアクセスした場合
OpenAM のログイン画面を開き、営業部に所属していないユーザーでログイン
して上部メニューの「ダッシュボード」を開きます。「カレンダー」と「メッセー
ジ」が表示されます。

13

図 3 スクリプトでの割り当て表示例 (社外からのアクセス/営業部以外のユーザー)– 営業部に所属しているユーザーがアクセスした場合
OpenAM のログイン画面を開き、営業部に所属しているユーザーでログインして上部メニューの「ダッシュボード」を開きます。「カレンダー」と「メッセージ」に加えて「共有ドライブ」が表示されます。

14

図 4 スクリプトでの割り当て表示例 (社外からのアクセス/営業部のユーザー)

3.4 マイアプリケーションのソートとグループ化
マイアプリケーションの表示はソートとグループ化を行うことができます。マイアプリ
ケーションの表示を管理者が設定する方法とユーザーが設定する方法があります。

3.4.1 管理者によるソートとグループ化
管理者によるソートとグループ化は「アプリケーション割り当て用スクリプト」を利用して行います。既に「アプリケーション割り当て用スクリプトの利用」でスクリプトを利用している場合は同じスクリプト内にソートとグループ化用のスクリプトを追記します。スクリ
プトを作成していない場合は「アプリケーション割り当て用スクリプトの利用」と同様の手順で「Application Assignment」タイプのスクリプトを作成します。
ソートとグループ化を行うためには、スクリプトで定数「myApplications」に対応する値をセットします。
「myApplications」には、ユーザーによるソートとグループ化の結果が格納されている「myApplications」属性の値が渡されるため、ユーザーによるソートとグ

15

ループ化が行われていない場合にのみ管理者が設定した表示を行うといったことも可能です。「myApplications」の値は下記のような形式の文字列です。
[{"グループ名": ["アプリケーション識別名",...,"アプリケーション識別名"
]
},
...,
{
"グループ名": ["アプリケーション識別名",...,"アプリケーション識別名"]}]

ここでは、例として下記の条件を満たす表示になるようにスクリプトを記述します。

• アプリケーションを「ホーム」「共有」のグループにわけ、順番に表示する。
•「ホーム」には「カレンダー」「メッセージ」「Unicorn IDM」を順番に表示する。
•「共有」には「共有ドライブ」を順番に表示する。
スクリプトで「myApplications」にセットする値は下記です。(見やすさのため改行していますが、実際には改行しません。)[{"ホーム": ["calendar","message","uidm"]},{"共有": [
"drive"
]

16

}
]

上記の値を生成してセットするようにスクリプトを作成します。
// ホームグループ
var home = ' ホーム';// ホームグループに表示するアプリケーションの識別名
var homeApps = [ 'calendar', 'message', 'uidm' ];// 共有グループ
var share = ' 共有';// 共有グループに表示するアプリケーションの識別名
var shareApps = [ 'drive' ];// 生成した JSON 文字列を myApplications にセット
myApplications = getGrouped();function getGrouped() {var myApps = [];addGroup(myApps, home, homeApps);
addGroup(myApps, share, shareApps);// JSON 文字列に変換
return JSON.stringify(myApps);}
function addGroup(myApps, groupName, apps) {// グループごとにオブジェクトを作成
var obj = {};obj[groupName] = apps;// 配列にオブジェクトを追加
myApps.push(obj);}

ユーザーによるソートとグループ化を許可しない場合は下記の手順を行い、ユーザーによる表示の編集を禁止します。

1. 対象のレルムを開きます。
2. 左のサイドメニューの「サービス」を開き、「ダッシュボード」を開きます。
3.「ユーザーによるアプリケーションのソートとグループ化」を無効にします。
4.「変更の保存」を押下します。

17

3.4.1.1 動作例
OpenAM のログイン画面を開き、任意のユーザーでログインして上部メニューの「ダッシュボード」を開きます。グループによりタブ分けされ、それぞれのタブに設定したアプリ
ケーションが表示されます。
「ホーム」には「カレンダー」「メッセージ」「Unicorn IDM」が表示されます。

図 5 管理者によるソートとグループ化-ホーム「共有」には「共有ドライブ」が表示されます。

18

図 6 管理者によるソートとグループ化-共有

User-Agent の値によってスマートフォンと判定された場合は下図のように表示されます。

19

図 7 管理者によるソートとグループ化-スマートフォン

3.4.2 ユーザーによるソートとグループ化
ユーザーによるソートとグループ化の結果は「myApplications」属性に格納されるため、当該属性を利用できるようにしておく必要があります。
ユーザーによるソートとグループ化を行うためには下記の手順で設定を行います。

1. OpenAM の管理コンソールにログインします。
2. 対象のレルムを開きます。
3. 左のサイドメニューの「サービス」を開き、「ダッシュボード」を開きます。
4.「ユーザーによるアプリケーションのソートとグループ化」を有効にして「変更の保存」を押下します。

3.4.2.1 動作例
OpenAM のログイン画面を開き、任意のユーザーでログインして上部メニューの「ダッシュボード」を開きます。

20

図 8 ユーザーによるソートとグループ化• 編集の開始
ケバブメニューを開き、「編集」を押下します。

21

図9

ユーザーによるソートとグループ化-編集ボタン

編集可能状態になると保存ボタンなどが表示されます。

22

図 10

ユーザーによるソートとグループ化-編集可能状態• グループ名の変更
変更したいグループのタブ内にある鉛筆マークをクリックするとタブ内にテキストボックスが表示されます。

23

図 11

ユーザーによるソートとグループ化-グループ名の変更

任意のグループ名を入力し、Enter キーを押下すると名前が確定されます。

• グループの追加
タブの横にある「＋」をクリックすると新しいタブが作成されます。

24

図 12 ユーザーによるソートとグループ化-グループの追加• グループの削除
削除したいタブ内の「×」をクリックするとタブが削除されます。タブ内にアプリ
ケーションが存在するものは削除することができません。

25

図 13 ユーザーによるソートとグループ化-グループの削除• アプリケーションのソート
アプリケーションはドラッグ & ドロップで並び替えることがことができます。

26

図 14

ユーザーによるソートとグループ化-アプリケーションのソート

別のグループに移動したい場合はアプリケーションをドラッグしたまま対象のタブ上にカーソルをのせます。

27

図 15

ユーザーによるソートとグループ化-アプリケーションのソート

タブが切り替わったらアプリケーションをドロップします。

28

図 16

ユーザーによるソートとグループ化-アプリケーションのソート• グループのソート
グループはドラッグ & ドロップで並び替えることがことができます。

29

図 17

ユーザーによるソートとグループ化-グループのソート

タブとタブの間に表示される緑の矢印の位置に移動されます。

30

図 18

ユーザーによるソートとグループ化-グループのソート• 編集を元に戻す「元に戻す」ボタンを押下すると編集した内容を元に戻すことがことができます。保
存後に保存前の状態に戻すことはできません。

31

図 19

ユーザーによるソートとグループ化-元に戻す• 保存する「変更の保存」ボタンを押下すると編集内容を保存することができます。

32

図 20

ユーザーによるソートとグループ化-保存

保存が成功すると「変更を保存しました。」のメッセージが表示されます。

33

図 21 ユーザーによるソートとグループ化-保存メッセージ「myApplications」属性に存在しないアプリケーションが新たに割り当てられた場合、「新
しいアプリケーション」タブが追加されます。編集時にユーザーが「新しいアプリケーショ
ン」タブからアプリケーションを移動することは可能ですが、「新しいアプリケーション」タブへ既存のアプリケーションを移動することはできません。

34

図 22 ユーザーによるソートとグループ化-新しいアプリケーション

User-Agent の値によってスマートフォンと判定された場合は下記手順でソートとグループ化を行います。

• 編集の開始
ケバブメニューを開き、「編集」をタップします。

35

図 23 ユーザーによるソートとグループ化-編集ボタン

編集可能状態になると保存ボタンなどが表示されます。

図 24

ユーザーによるソートとグループ化-編集可能状態

36

• グループ名の変更
変更したいグループ名の横にある鉛筆マークをタップするとテキストボックスが表示
されます。

図 25

ユーザーによるソートとグループ化-グループ名の変更

任意のグループ名を入力し、確定キーを押下すると名前が確定されます。

• グループの追加
下部にある「＋」ボタンをタップすると新しいグループが作成されます。

37

図 26 ユーザーによるソートとグループ化-グループの追加• グループの削除
削除したいグループの「×」をタップするとグループが削除されます。グループ内にアプリケーションが存在するものは削除することができません。

38

図 27 ユーザーによるソートとグループ化-グループの削除• アプリケーションのソート
アプリケーションはドラッグ & ドロップで並び替えることがことができます。

39

図 28

ユーザーによるソートとグループ化-アプリケーションのソート

別のグループに移動したい場合はアプリケーションをドラッグしたまま対象のグループまで移動します。

40

図 29

ユーザーによるソートとグループ化-アプリケーションのソート

対象のグループ上でアプリケーションをドロップします。

図 30

ユーザーによるソートとグループ化-アプリケーションのソート

41

• グループのソート
グループはドラッグ & ドロップで並び替えることがことができます。グループ名の部分をドラッグします。

図 31

ユーザーによるソートとグループ化-グループのソート

他のグループ上をドラッグするとグループの配置先の位置が変更されます。

42

図 32

ユーザーによるソートとグループ化-グループのソート

ドロップすると配置先を表している四角い枠の位置に移動されます。

図 33

ユーザーによるソートとグループ化-グループのソート

43• 編集を元に戻す「元に戻す」ボタンを押下すると編集した内容を元に戻すことができます。保存後に保存前の状態に戻すことはできません。

図 34

ユーザーによるソートとグループ化-元に戻す• 保存する「変更の保存」ボタンを押下すると編集内容を保存することができます。

44

図 35

ユーザーによるソートとグループ化-保存

保存が成功すると「変更を保存しました。」のメッセージが表示されます。

図 36 ユーザーによるソートとグループ化-保存メッセージ45

PC 表示と同様、新しくアプリケーションが割り当てられた場合、「新しいアプリケーション」グループが表示されます。

図 37 ユーザーによるソートとグループ化-新しいアプリケーション

3.5 タブ表示の切り替え「ダッシュボード」サービスの「ドロップダウン付きタブ表示」設定をきりかえることで、PC 表示時のタブの表示方法を下記 2 種類から選択することができます。
• ドロップダウン付きタブ表示有効
ドロップダウン付きタブ表示を有効にすると、タブが表示可能数よりも多い場合に一部のタブをドロップダウンリスト内に表示します。タブが多く作成された場合にも比較的見やすく表示することができますが、ユーザーがドロップダウンリスト内のグループの存在に気付かない可能性があります。

46

図 38 ドロップダウン付きタブ表示有効47

図 39 ドロップダウン付きタブ表示有効-ドロップダウンリスト• ドロップダウン付きタブ表示無効
ドロップダウン付きタブ表示を無効にすると、タブ表示にドロップダウンを使用せず
すべてのタブを表示します。比較的タブを探しやすく、全てのタブをワンクリックで開くことができますが、グループ数が多い場合見辛くなることがあります。

48

図 40 ドロップダウン付きタブ表示無効

3.6 レイアウトのカスタマイズ
CSS を 変 更 す る こ と に よ っ て 背 景 や 文 字 の ス タ イ ル を カ ス タ マ イ ズ す る こ とが で き ま す 。マ イ ア プ リ ケ ー シ ョ ン 用 CSS は OpenAM サ ー バ ー に 配 置 さ れ て いる/opt/osstech/var/lib/tomcat/webapps/openam/XUI/css/customize/myapps.css です。 OpenAM が冗長構成 (サイト構成) の場合、両方のサーバーの「myapps.css」ファイルに変更を反映する必要があります。

3.6.1 アプリケーションの背景
アプリケーションの背景をカスタマイズするには「my-app-background」クラスにスタイルを適用します。例えば背景色を変更する場合は「background-color」に適用したい色を指定します。

49

.my-app-background {background-color: 背景色;}

特定のアプリケーションの背景にのみスタイルを適用する場合はアプリケーション識別名
を使って指定します。
[data-id="アプリケーション識別名 (小文字)"] .my-app-background {background-color: 背景色;}

3.6.2 アプリケーションの表示名
アプリケーション名の文字をカスタマイズするには「my-app-text」クラスにスタイルを適用します。例えば文字色を変更する場合は「color」に適用したい色を指定します。
.my-app-text {color: 文字色;}

特定のアプリケーションの文字にのみスタイルを適用する場合はアプリケーション識別名
を使って指定します。
[data-id="アプリケーション識別名 (小文字)"] .my-app-text {color: 文字色;}3.6.3 PC 表示とスマートフォン表示で異なるスタイルを適用する
PC で表示した場合とスマートフォンで表示した場合で異なるスタイルを適用したい場合、「myApplicationsContainer」ID と「myApplicationsMobileContainer」ID を使って指定します。
/* PC 表示 */#myApplicationsContainer .my-app-background {background-color: 背景色;}
#myApplicationsContainer .my-app-text {color: 文字色;50

}/* スマートフォン表示 */#myApplicationsMobileContainer .my-app-background {background-color: 背景色;}
#myApplicationsMobileContainer .my-app-text {color: 文字色;}

3.6.4 表示例
下記 CSS を適用した場合の表示例です。表示例の各アプリケーションのアイコンには透過 PNG 画像を使っています。
/* PC 表示 */#myApplicationsContainer .my-app-background {/* 背景は #E0ECFC (水色) */background-color: #E0ECFC;}#myApplicationsContainer .my-app-text {/* 文字は #949494 (灰色) */color: #949494;}#myApplicationsContainer [data-id="calendar"] .my-app-background {/* 「カレンダー」の背景は #E0E1FC (紫色) */background-color: #E0E1FC;}/* スマートフォン表示 */#myApplicationsMobileContainer .my-app:nth-child(odd) .my-app-background {/* 奇数番目の背景は #8EA8C4 (青色) */background-color: #8EA8C4;}#myApplicationsMobileContainer .my-app:nth-child(even) .my-app-background {/* 偶数番目の背景は #91B5BB (緑色) */background-color: #91B5BB;}#myApplicationsMobileContainer .my-app[data-id="calendar"] .my-app-background {/* 「カレンダー」の背景は #FFFFFF (白色) */background-color: #FFFFFF;}#myApplicationsMobileContainer .my-app-text {51

/* 文字は #FFFFFF (白色) */color: #FFFFFF;}#myApplicationsMobileContainer [data-id="calendar"] .my-app-text {/* 「カレンダー」の文字は太字 */font-weight: bold;}#myApplicationsMobileContainer .my-app:nth-child(odd)[data-id="calendar"] .myapp-text {/* セレクタは実際には改行しません *//* 奇数番目の「カレンダー」の文字は #8EA8C4 (青色) */color: #8EA8C4;}#myApplicationsMobileContainer .my-app:nth-child(even)[data-id="calendar"] .myapp-text {/* セレクタは実際には改行しません *//* 偶数番目の「カレンダー」の文字は #91B5BB (緑色) */color: #91B5BB;}

52

図 41 レイアウトのカスタマイズ-PC53

図 42 レイアウトのカスタマイズ-スマートフォン

54

4 ログイン後の画面をダッシュボードに変更する
デフォルト設定では、ユーザーが OpenAM にログインした直後に表示される画面はユー
ザープロファイル画面です。

図 43

ユーザープロファイル画面

下記の手順で OpenAM にログインした直後に表示する画面をダッシュボードに変更することができます。

1. OpenAM の管理コンソールにログインします。
2. 対象のレルムを開きます。
3. 左のサイドメニューの「認証」から「設定」を開きます。
4.「ポスト認証プロセス」タブを開き、「ログイン成功時に返すデフォルトの URL」を
ダッシュボードの URL に変更します。

• デフォルトで設定されている「/openam/console」は削除します。
•「/openam/XUI/#dashboard/」を入力します。
55

5.「変更の保存」を押下します。

56

5 改版履歴• 2022 年 12 月 13 日 リビジョン 1.0– 初版作成57