Tableau Serverを導入した後に真っ先にやった方がよいのは、Tableau Serverを会社カラーにすることです。
Tableau Serverはインストールしただけだと、ログイン画面、デフォルト画面はTableauカラーです。これを自社の会社のロゴ、カラーを使うことで親近感は増し、利用する心理的なハードルを少しだけ下げることができます。
変更するのは全部で４つ、１〜３はtabadminでコマンドが用意されているので簡単にできます。しかし、４はtabadminがないのでソースを書き換える必要があります。
- タブ
- サインインロゴ
- ヘッダーロゴ
- ヘッダー背景色
タブの変更
タブの変更ではブラウザの頭にでてくる文字を変更します。これは是非とも会社名にしましょう。
サインインロゴの変更
サインインロゴは、Tableau Serverにサインインするさいに表示されるロゴです。ここはサインインする時は全員通る画面なので、会社のロゴを設定しましょう。
ヘッダーロゴの変更
ヘッダーロゴはサインインした後に左上に表示されるロゴです。ここもサインインロゴと同様に会社のロゴにすべきです。
ヘッダー背景色の変更
ヘッダーの背景色とは、サインインした後のヘッダーの背景色です。背景色は会社のカラーを出しましょう。
ヘッダー背景色で変更するソースはD:¥Tableau¥Tableau Server¥2018.1¥vizportalclient¥publicにある下記の3つのファイルです。
- vizportal.js
- vizportal.min.js
- vizportal.css
Tableau Serverは３つの基本色でできています。会社カラーの基本色、基本色＋薄い色、基本色＋濃い色、基本色＋もっと濃い色の３つをRGB表記と16進数カラーコードで用意してください。
ソースの変更
すべてテキストの置換で、用意した色に置き換えます。
vizportal.js
- ServerBlue: ‘rgb(42, 87, 117)‘; <-会社カラーの基本色に置き換える
- HeaderStyles.HeaderBackgroundColor = ‘rgb(42, 87, 117)‘; <-会社カラーの基本色に置き換える
- HeaderStyles.HeaderLinkSelectedBackgroundColor = ‘rgb(28,57,77)‘;
- <-基本色＋もっと濃い色に置き換える
- HeaderStyles.HeaderLinkHoverBackgroundColor = ‘rgb(35,74,99)‘; <-基本色＋濃い色に置き換える
vizportal.min.js
- ServerBlue: “rgb(42, 87, 117)“ <-会社カラーの基本色に置き換える
- e.HeaderBackgroundColor = “rgb(42, 87, 117)“ <-会社カラーの基本色に置き換える
- e.HeaderLinkSelectedBackgroundColor = “rgb(28,57,77)“ <-基本色＋もっと濃い色に置き換える
- e.HeaderLinkHoverBackgroundColor = “rgb(35,74,99)“ <-基本色＋濃い色に置き換える
vizportal.css
- #2a5775(rgb(42, 87, 117)) 4箇所 <-会社カラーの基本色に置き換える
- #517991 2箇所 <-基本色＋薄い色に置き換える
3つのソースを圧縮
色を変更したvizportal.js、vizportal.min.js、vizportal.cssは7-zipツールでgzとして圧縮します。その後、D:¥Tableau¥Tableau Server¥2018.1¥vizportalclient¥publicにvizportal.js、vizportal.min.js、vizportal.cssと圧縮したファイルの合計６ファイルを置き換えます。
画像ファイルの削除
ログイン後のヘッダー画面に紛れ込んでいる小さな画像ファイルです。０byteの空ファイルにして表示しないようにします。削除すると再起動がうまくいきません。
D:¥Tableau¥Tableau Server¥2018.1¥vizportalclient¥public¥img¥header_divider.png
再起動
すべての変更が終わったら、tableau serverを再起動すれば完了です。
参考サイト
コメント