HorizonポータルHOS 2.0のブランド再構築

2016-02-22

Machine-translated — the English original is authoritative.

クラウドソリューションに多額の投資を行った後、CxOたちが最も重視する機能といえば、もちろんポータルに自社のロゴが刻印されていることですよね！

OpenStack Kiloでは、テーマの導入に伴い、いくつかの優れたブランド機能ビルトインされています。公式Horizonのブランド設定方法の詳細はこちらをご覧ください。なお、Helion OpenStack 2.0では、Horizonディレクトリ構造のベースとして/opt/stack/venv/horizon-<date-time>/を使用しています。

このブログ記事は、CSSの達人になるつもりはないが、インストールシートにある「ポータルでの企業ブランド表示」という項目にチェックを入れたいという方々のために書かれています。小さなロゴが顧客に与える影響は驚くべきものです——軽視しないでください。時間があれば必ず実施する価値があります。

必要な変更は非常に簡単です。

HOS 2.0のデフォルトではhelionというテーマが使用されています。このテーマディレクトリ内には、2つの画像を含む画像ディレクトリがあります：

logo.png [160×35ピクセル] – Horizonポータルの左上に常に表示されるブランドロゴ。
logo-splash.png [350×75ピクセル] – ログイン画面に表示されるブランドロゴ

上記で示したサイズと同じbrand-logo.pngとbrand-logo-splash.pngの2つのブランド画像を作成してください。これらの画像サイズから外れても構いません。私はポータルでの見た目が適切だったため、これらのサイズをそのまま使用しました。

次に、これらの画像を3台のコントローラーすべてでstackユーザーのホームディレクトリにコピーし、各コントローラーで以下を実行します：

# 各コントローラーでこれらのコマンドを実行
# 現在の画像をバックアップ
cd ~
sudo cp –pri /opt/stack/venv/horizon-20151022T080854Z/static/themes/helion/img/logo.png logo.png.orig
sudo cp –pri /opt/stack/venv/horizon-20151022T080854Z/static/themes/helion/img/logo-splash.png logo-splash.png.orig

# 新しい画像を元の画像に上書きコピー – 新しい画像はすでにstackのホームディレクトリに転送済みと仮定
sudo cp brand-logo.png /opt/stack/venv/horizon-20151022T080854Z/static/themes/helion/img/logo.png
sudo cp brand-logo-splash.png /opt/stack/venv/horizon-20151022T080854Z/static/themes/helion/img/logo-splash.png

これらの変更を取り消したい場合は、以下のように元の画像をコピーし直せばよいだけです。

sudo cp logo.png.orig /opt/stack/venv/horizon-20151022T080854Z/static/themes/helion/img/logo.png
sudo cp logo-splash.png.orig /opt/stack/venv/horizon-20151022T080854Z/static/themes/helion/img/logo-splash.png

以下の注意事項も含め、これらの手順を正しく従っていれば、以下のようなブランド再構築されたHorizonが得られるはずです——

NewSplash

horizonlogo

注意事項

透明な画像を使用したり、サイズを調整する必要がある場合があります。
horizon-20151022T080854Zのディレクトリパスは、お客様のシステムでは異なる可能性があります——適宜変更してください。
ブラウザは画像をキャッシュします——動作していないと考える前に、ブラウザのキャッシュを更新またはクリアしてください……そんなミスは私には決してありませんが。 😉

更新情報

ある顧客から、HPブランドの favicon（ブラウザタブのアイコン）も以下の手順で簡単に置き換えられるという親切な指摘をいただきました：

# 各コントローラーでこれらのコマンドを実行
cd /opt/stack/venv/horizon-20151022T080854Z/static/dashboard/img
sudo cp -pri favicon.ico favicon.ico.orig
sudo cp -pri ~/edited_files/favicon.ico .

Stuartさん、ありがとうございます！

Originally published on allthingscloud.eu (2016-02-22).