Prism の UI 設定でログイン画面やFaviconを変更する

2018年3月26日

こんにちは。クララの吉村です。

今回はPrismのUI設定をいろいろいじってみたいと思います。毎日ログインする環境ですからね！自分好みにカスタマイズしちゃいましょう。

設定できること

今回設定するのは主に3つあります。

Prismのログイン画面の表示を簡易変更
Welcome Banner をHTMLで変更
Prism全体のHTMLやCSSの変更

１と２はPrsim上から行いますが、3は直接HTML設定ファイルの編集を行ったりするのでAOSアップデートを行うと消えてしまうかもしれません。まだこの状態でAOSアップデートをやってことないので詳細は分かりませんが、可能であればアップデート後に自動的に状態を戻すような仕組みしておきたいですね。

Prismログイン画面の変更

通常の Prism ログイン画面はこんな感じですよね。

これだと他と見分けがつかないので、変更しちゃいましょう。

変更方法は以下の通りです。

設定メニューから「UI設定」を選択

このような画面が表示されます。

左上の「UI設定」の文字を「Alt キー」を押したままクリックしてください。

更新できる項目が変更されます。

項目	値
THEME	用意されているカラーを選択。または、HEX color を2種類指定して自分の好きなグラデーションを作成。
TITLE	ログインIDの上に表示されるタイトル文字を変更。日本語可。
BLURB TEXT	ログインIDの下に表示される説明文を変更。日本語可。

例えば以下のように変更が可能です。

Welcome Banner を変更

Welcome Banner とは、Prismのログイン画面が出る前に出てくる画面です。

デフォルトではオフになっていますが、有効化することで表示されます。おそらくはPrismユーザに対して事前同意を得たいときなどに利用される想定のようです。

設定方法はPrism上から行います。

設定メニューから「UI設定」を選択

HTMLコードが書けるようになっています。

また、左下にある「Enable Banner」にチェックを入れることで有効化ができます。

注意点としては、利用できるHTMLタグが決まっており、利用できないHTMLタグを記述するとエラーとなり保存ができません。

使えるのは、<ul>,<li>,<div>,<img>,<h1>-<h6>などのようです。

では、適当に以下のようなHTMLを記述してみましょう。

Clara Cloud 次世代エンタープライズクラウド

CLARA

WELCOME
banner

このようになります。

一回ログアウトして、Prismにアクセスしてください。

Prismログイン画面の前にWelcome Bannerが表示され、下部の「Accept terms and conditions」をクリックするとPrismログイン画面に遷移するようになります。

Prism全体のHTMLやCSSの変更

さて、最後は荒業？です。おそらくNutanix社はサポートしてくれない方法でしょう。

しかし、Prismのindex.htmlを見ると、編集してくれと言わんばかりのHTMLコードが書かれています。

$$\ $$\$$\ $$\$$$$$$$$\ $$$$$$\ $$\ $$\$$$$$$\$$\ $$\
$$$\ $$ $$ | $$ \__$$ __$$ __$$\$$$\ $$ \_$$ _$$ | $$ |
$$$$\ $$ $$ | $$ | $$ | $$ / $$ $$$$\ $$ | $$ | \$$\ $$ |
$$ $$\$$ $$ | $$ | $$ | $$$$$$$$ $$ $$\$$ | $$ | \$$$$ /
$$ \$$$$ $$ | $$ | $$ | $$ __$$ $$ \$$$$ | $$ | $$ $$<
$$ |\$$$ $$ | $$ | $$ | $$ | $$ $$ |\$$$ | $$ | $$ /\$$\
$$ | \$$ \$$$$$$ | $$ | $$ | $$ $$ | \$$ $$$$$$\$$ / $$ |
\__| \__|\______/ \__| \__| \__\__| \__\______\__| \__|

Nutanix UI Team — Come Join us !

href="app/assets/images/favicon/favicon.ico">

href="app/assets/images/favicon/apple-touch-icon.png">

href="app/assets/images/favicon/apple-touch-icon-ipad.png">

href="app/assets/images/favicon/apple-touch-icon-iphone4.png">

href="app/assets/images/favicon/apple-touch-icon-ipad3.png">

rel="stylesheet" type="text/css" />

================================================== –>

rel="stylesheet" type="text/css" />

================================================== –>

rel="stylesheet" type="text/css" />

================================================== –>