Prism の UI 設定でログイン画面やFaviconを変更する
こんにちは。クララの吉村です。
今回は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>などのようです。
<script>タグや<a>タグを試してみましたがNGでした。
では、適当に以下のようなHTMLを記述してみましょう。
<div> <h1 style="text-align: center">Clara Cloud 次世代エンタープライズクラウド</h1> <h2 style="text-align: center; font-size:40px;">CLARA</h2> <p style="text-align: center;"><span style="color: #ff6600;">WELCOME banner <br></span><img src="app/assets/images/common/new-prism-logo.png"> <br> </p> </div>
このようになります。
一回ログアウトして、Prismにアクセスしてください。
Prismログイン画面の前にWelcome Bannerが表示され、下部の「Accept terms and conditions」をクリックするとPrismログイン画面に遷移するようになります。
Prism全体のHTMLやCSSの変更
さて、最後は荒業？です。おそらくNutanix社はサポートしてくれない方法でしょう。
しかし、Prismのindex.htmlを見ると、編集してくれと言わんばかりのHTMLコードが書かれています。
<!DOCTYPE html> <!-- $$\ $$\$$\ $$\$$$$$$$$\ $$$$$$\ $$\ $$\$$$$$$\$$\ $$\ $$$\ $$ $$ | $$ \__$$ __$$ __$$\$$$\ $$ \_$$ _$$ | $$ | $$$$\ $$ $$ | $$ | $$ | $$ / $$ $$$$\ $$ | $$ | \$$\ $$ | $$ $$\$$ $$ | $$ | $$ | $$$$$$$$ $$ $$\$$ | $$ | \$$$$ / $$ \$$$$ $$ | $$ | $$ | $$ __$$ $$ \$$$$ | $$ | $$ $$< $$ |\$$$ $$ | $$ | $$ | $$ | $$ $$ |\$$$ | $$ | $$ /\$$\ $$ | \$$ \$$$$$$ | $$ | $$ | $$ $$ | \$$ $$$$$$\$$ / $$ | \__| \__|\______/ \__| \__| \__\__| \__\______\__| \__| Nutanix UI Team -- Come Join us ! Copyright (c) 2013 Nutanix Inc. All rights reserved. --> <html lang="en"> <head> <title>Nutanix Web Console</title> <!-- Meta --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="Nutanix UI"> <meta name="author" content="Prism Team"> <!-- Prevent cache --> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="expires" content="-1"> <!-- Compatibility Mode --> <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" /> <!-- Favicon.ico --> <link rel="shortcut icon" type="image/x-icon" href="app/assets/images/favicon/favicon.ico"> <!-- iPhone --> <link rel="apple-touch-icon" href="app/assets/images/favicon/apple-touch-icon.png"> <!-- iPad --> <link rel="apple-touch-icon" sizes="72x72" href="app/assets/images/favicon/apple-touch-icon-ipad.png"> <!-- iPhone with Retina Display --> <link rel="apple-touch-icon" sizes="114x114" href="app/assets/images/favicon/apple-touch-icon-iphone4.png"> <!-- iPad with Retina Display --> <link rel="apple-touch-icon" sizes="144x144" href="app/assets/images/favicon/apple-touch-icon-ipad3.png"> <!-- Style: Nutanix login style first for express loading --> <link href="app/assets/styles/includes/css/nutanix-login.min.css?uiv=1516855084271" rel="stylesheet" type="text/css" /> <!-- Default CSS from Third Party Libraries ================================================== --> <link href="app/assets/styles/thirdparty.min.css?uiv=1516855084271" rel="stylesheet" type="text/css" /> <!-- Customized CSS with Nutanix Flavor ================================================== --> <!-- Style: Prism Bootstrap style --> <link href="app/assets/styles/includes/css/prism-bootstrap.min.css?uiv=1516855084271" rel="stylesheet" type="text/css" /> <link href="app/assets/styles/overrides.min.css?uiv=1516855084271" rel="stylesheet" type="text/css" /> <!-- Style: Nutanix web console style --> <link href="app/assets/styles/includes/css/nutanix.min.css?uiv=1516855084271" rel="stylesheet" type="text/css" /> </head> <body> <!-- HTML5 Content ================================================== --> <div id="loginBackground" class="login-background"></div> <div id="n-content-wrapper" class="n-content-wrapper"> <!-- All content goes here for SPA (Single Page Application) --> <!-- Preloader. This will be removed once AppView is loaded. --> <div id="preloader" class="vertical-centered-box"> <div class="prism-loader content"> <div class="loader-circle"></div> <div class="loader-line-mask"> <div class="loader-line"></div> </div> <svg width="36" viewBox="0 0 36 20" id="prism-logo"> <path id="prism-logo-p2" d="M2.000,0.000 C2.000,0.000 21.000,20.000 21.000,20.000 C21.000,20.000 34.000,20.000 34.000,20.000 C34.000,20.000 14.000,0.000 14.000,0.000 C14.000,0.000 2.000,0.000 2.000,0.000 Z" fill="rgba(255,255,255,.7)"/> <path id="prism-logo-p1" d="M11.957,2.070 C11.957,0.913 12.680,0.001 14.056,0.001 C14.135,0.001 2.840,0.001 2.099,0.001 C1.359,0.001 0.000,0.814 0.000,2.070 C0.000,3.327 0.000,20.001 0.000,20.001 C0.000,20.001 11.957,20.001 11.957,20.001 C11.957,20.001 11.957,11.414 11.957,2.070 Z" fill="#fff"/> <path id="prism-logo-p3" d="M24.007,17.933 C24.007,19.090 23.286,20.001 21.913,20.001 C21.835,20.001 33.167,20.001 33.906,20.001 C34.645,20.001 36.000,19.189 36.000,17.933 C36.000,16.676 36.000,0.001 36.000,0.001 C36.000,0.001 24.007,0.001 24.007,0.001 C24.007,0.001 24.007,8.588 24.007,17.933 Z" fill="#fff"/> </svg> </div> </div> </div> <!-- JavaScript ================================================== --> <!-- This field contains the cache bust value for the scripts and styles --> <input type="hidden" id="uiv" value="1516855084271"/> <!-- The main starting point of the application. --> <script src="app/scripts/lib.js?uiv=1516855084271"></script> <script src="app/scripts/app.js?uiv=1516855084271"></script> <!-- The comment below is used for the qa-automation. Do not remove it. --> <!-- @@qaAutomation --> <!-- Fail gracefully if JavaScript is disabled. --> <noscript> <div class="n-noscript">Please enable JavaScript on your browser.</div> </noscript> </body> </html>
ここまで丁寧に記述してくれているなら、イジッてみたくなるのが男でしょう！
ちなみに、Prism の Document Root は /home/nutanix/prism/webapps/console/ だと覚えておいてください。
CSSで自分好みのカラーやレイアウトにしてみたいですが、今回は一番簡単そうな favicon の変更をしてみましょう。
上記のHTMLで33~35行目にこのような記述があります。
<!-- Favicon.ico --> <link rel="shortcut icon" type="image/x-icon" href="app/assets/images/favicon/favicon.ico">
ここにfavicon置き場があるので、自分で作成したfaviconをアップしましょう。
faviconのサイズは 32ｘ32 ピクセルにしてください。
<!-- Favicon.ico --> <link rel="shortcut icon" type="image/x-icon" href="app/assets/images/favicon/claraLogo_favicon.ico">
このように claraLogo_favicon.ico に変更してあげると、
favicon が変わりました！
しかし、冒頭にも説明しましたが、おそらくAOSのアップデートしたタイミングで消えそうな気がします。何とか自動化する方法を探っていきたいと思います。
今回は以上です。
みなさんも楽しいPrismライフを。
