• Clara Cloudパートナープログラム
  • イベント・セミナー
  • FAQよくある質問
  • 運営会社
Nutanixの月額利用ならClara Cloud
  • Clara Cloudとは
  • プラン・スペック
    • Clara Cloud 専有プラン
    • Clara Cloud LGプラン(共有)
    • Clara Cloud Flex
  • 導入事例
  • 資料ダウンロード
  • お役立ち情報
    • CLARAのクラウドナレッジ
    • Nutanixとは
    • コスト比較
    • FAQ – よくあるご質問
  • お問い合わせ・ご相談
  • Search
  • Menu Menu
PrismのUI設定でログイン画面やFaviconを変更する

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

2018年3月26日/in Nutanix, 技術者向け /by Shinjiro Goto
Tweet
このエントリーをはてなブックマークに追加
LINEで送る

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

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

設定できること

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

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

1と2は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を記述してみましょう。

[html]

<div>
<h1 style=”text-align: center”>Clara Cloud 次世代エンタープライズクラウド</h1>
<h2 style=”text-align: center; font-size:40px;”>CLARA ONLINE</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>

[/html]

このようになります。

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

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

 

 

Prism全体のHTMLやCSSの変更

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

しかし、Prismのindex.htmlを見ると、編集してくれと言わんばかりの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=”72×72″
href=”app/assets/images/favicon/apple-touch-icon-ipad.png”>
<!– iPhone with Retina Display –>
<link rel=”apple-touch-icon” sizes=”114×114″
href=”app/assets/images/favicon/apple-touch-icon-iphone4.png”>
<!– iPad with Retina Display –>
<link rel=”apple-touch-icon” sizes=”144×144″
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>

[/html]

ここまで丁寧に記述してくれているなら、イジッてみたくなるのが男でしょう!

ちなみに、Prism の Document Root は /home/nutanix/prism/webapps/console/ だと覚えておいてください。

CSSで自分好みのカラーやレイアウトにしてみたいですが、今回は一番簡単そうな favicon の変更をしてみましょう。

上記のHTMLで33~35行目にこのような記述があります。

[text]
<!– Favicon.ico –>
<link rel=”shortcut icon” type=”image/x-icon”
href=”app/assets/images/favicon/favicon.ico”>
[/text]

ここにfavicon置き場があるので、自分で作成したfaviconをアップしましょう。

faviconのサイズは 32x32 ピクセルにしてください。

[text]

<!– Favicon.ico –>
<link rel=”shortcut icon” type=”image/x-icon”
href=”app/assets/images/favicon/claraLogo_favicon.ico”>

[/text]

このように claraLogo_favicon.ico に変更してあげると、

favicon が変わりました!

しかし、冒頭にも説明しましたが、おそらくAOSのアップデートしたタイミングで消えそうな気がします。何とか自動化する方法を探っていきたいと思います。

 

今回は以上です。

みなさんも楽しいPrismライフを。

Tweet
このエントリーをはてなブックマークに追加
LINEで送る

Tags: Prism
https://cloud.clara.jp/cms/wp-content/uploads/prism_favicon.jpg 630 1200 Shinjiro Goto https://cloud.clara.jp/cms/wp-content/uploads/2020/04/claracloud_logo.png Shinjiro Goto2018-03-26 13:06:382021-06-16 16:28:21Prism の UI 設定でログイン画面やFaviconを変更する

最新の記事

  • 恒久的な利益を生み出す、インフラコスト削減の方法とは?2022年4月1日 - 4:30 pm
  • HCIはどうやって誕生した?インフラの歴史 | 後編2022年1月21日 - 1:18 pm
  • HCIはどうやって誕生した?インフラの歴史 | 前編2022年1月21日 - 12:24 pm

カテゴリー

  • ITインフラ
  • Nutanix
  • 基礎知識
  • 移行・リプレース
  • 技術・テック
  • メディア掲載記事
Popular
  • 恒久的な利益を生み出す、インフラコス...2022年4月1日 - 4:30 pm
  • 2025年の崖を乗り越えるための切り札になるか?第三の選択肢「オンプレミス...2020年4月13日 - 4:09 pm
  • クララオンラインが明かす、オンプレ/パブリッククラウドの使い分けと新たなクラウドの潮流「HCI...2020年4月13日 - 3:47 pm
  • 膨大なデータ管理に悩む医療機関、ITイ...2020年4月13日 - 11:03 am
  • Nutanix 移行ツール move を使用したAWS環境からの移行-マイグレーションプラン作成とカットオーバーNutanix 移行ツール move を使用したAWS環境...2020年4月9日 - 12:06 pm
  • Nutanix移行ツールmoveを使用したAWS環境からの移行-ソース・ターゲット登録Nutanix移行ツールmoveを使用したAWS環境か...2020年4月2日 - 6:17 pm
  • Nutanix 移行ツールmoveの展開Nutanix 移行ツールmoveの展開2020年3月24日 - 6:03 pm
  • マイナビニュース スペシャルセミナー 〜クラウド移行の正しい期待値〜...2020年3月19日 - 11:09 am
  • Nutanix AHV環境から外部ESXi環境へのVMディスクイメージのインポートNutanix AHV環境から外部ESXi環境へのVMディ...2020年3月19日 - 10:56 am
  • 非機能要求グレードを読んだよ!2019年12月19日 - 3:09 pm
Clara Cloud導入事例集Clara Cloud導入事例集ダウンロード
Tweet
このエントリーをはてなブックマークに追加
LINEで送る

お役立ち資料

Clara Cloudの導入検討やインフラ選定に役立つ資料をご提供しています。各詳細ページからダウンロードフォームにてご請求いただけます。

パンデミックを乗り越える!中小企業のインフラお悩み解決書

企業や組織内の今後のIT対する投資、意思決定者・現場担当者が今後12ヵ月で進めたいクラウド戦略を掲載した「パンデミックを乗り越える!中小企業のインフラお悩み解決書」がダウンロード可能です。
Read more
https://cloud.clara.jp/cms/wp-content/uploads/InfraSolutionBook_thumbnail.jpg 300 500 岡本侑子 https://cloud.clara.jp/cms/wp-content/uploads/2020/04/claracloud_logo.png 岡本侑子2021-06-29 14:05:162021-06-29 15:12:19パンデミックを乗り越える!中小企業のインフラお悩み解決書

Clara Cloud導入事例集 一括ダウンロード

Clara Cloudの導入事例として、ライフサイエンスコンピューティング株式会社様(医療系)、日本電算企画株式会社様(VDI利用)の内容をダウンロードできます。
Read more
https://cloud.clara.jp/cms/wp-content/uploads/claracloud-dl-docs-all_bnr.jpg 300 500 Shinjiro Goto https://cloud.clara.jp/cms/wp-content/uploads/2020/04/claracloud_logo.png Shinjiro Goto2021-06-28 19:48:482021-06-29 16:45:45Clara Cloud導入事例集 一括ダウンロード
Clara Cloud Nutanixの月額利用(サービス概要資料)

Clara Cloudサービス概要資料 一括ダウンロード

ハードウェアを持たずにNutanixが使える月額サブスクリプションサービスClara Cloudのサービス概要がダウンロード可能です。
Read more
https://cloud.clara.jp/cms/wp-content/uploads/claracloud_overview02.jpg 300 500 Shinjiro Goto https://cloud.clara.jp/cms/wp-content/uploads/2020/04/claracloud_logo.png Shinjiro Goto2021-06-23 12:40:362021-09-08 18:21:59Clara Cloudサービス概要資料 一括ダウンロード
すべての資料を見る

ITインフラを移行して、開発に注力できる体制を作る。

Clara Cloudを導入した企業では、ITインフラの運用管理の業務を大幅に省力化できたり、50%近くものコスト削減を実現できた例、またインフラ運用・調達の方法を従来と変えたことで開発スピードが上がり自社サービスの価値向上につながった例もあります。

私たちが目指すのは、インフラ維持管理にかかる労力を最小限にし、情シス部門・IT部門がサービス開発や業務改善などの本質的な価値ある業務に注力できるようにすること。

Clara Cloudであればインフラ基盤を移すだけで、それが実現可能です。

資料をダウンロードする
導入事例を読む

サービスについて

Clara Cloudとは

プラン・スペック
– Clara Cloud 専有プラン
– Clara Cloud LGプラン(共有)
– Clara Cloud Flex

導入事例

お役立ち情報

資料ダウンロード

Claraのクラウドナレッジ

Nutanixとは

コスト比較

FAQ – よくあるご質問

お問い合わせ

パートナープログラム

パートナー相談・申込

お問い合わせ

イベント

イベント・セミナー情報

  • 会社概要
  • 情報セキュリティ基本方針
  • 個人情報の取り扱いについて
  • 約款・規約
  • サポートポリシー

 powered by CLARA ONLINE

© CLARA ONLINE, Inc.

Tweet
このエントリーをはてなブックマークに追加
LINEで送る

acli の結果を json で出力して jq で必要なデータを取り出... acli の結果を json で出力して jq で必要なデータを取り出す Nutanix 価格 Nutanix 価格
Scroll to top