jenkinsに初めて触り始めたのだけど、色々なビルドマシンがあると、どれがどのマシン？？って思うことがよくある。
で、現在会社では全部同じ見た目とタイトル。
ジョブの名前と、URLの名前で判断する感じになっています。
UI的には、一瞬で、このマシンだ！！とわかるのがベストなので、これを変更する必要があると思い対応した時の話。
simple theme pluginのインストール
タイトルとかロゴを変更する場合、カスタマイズしたcss/jsを使う必要があるので、まずカスタマイズできるように
simple theme pluginをインストールする。
インストールすると、jenkins管理画面で、css/jsのファイルの指定先を記述する場所が出てくるので、
/var/lib/jenkins/userContents/... とかの中にフォルダやファイルを置いて指定する。
css/jsのカスタマイズ
ico/pngを用意
何か適当なサイズのicoを用意してください。
css/js
css
/* headerの中の背景変更。変えとくとわかりやすい。qiitaでいうとこの緑帯らへん */
#header{
background: steelblue;
position: relative;
}
/* サイトコンテンツ内部の調整（色とかフォントサイズとか） */
.header-text{
font-size: 32px;
line-height: 0.3 em;
color: whitesmoke;
padding-left: 16px;
}
/* サイトのアイコン変更する #jenkins-head-iconは、cssで指定する名前みたいなかんじらしー */
#jenkins-head-icon {
content:url('/userContent/icon.png');
height:36px;
}
js
var titleStr = "ビルドマシン"
// favicon変更
const changeFavicon = link => {
let $favicon = document.querySelector('link[rel="shortcut icon"]')
// If a <link rel="icon"> element already exists,
// change its href to the given link.
if ($favicon !== null) {
$favicon.href = link
// Otherwise, create a new element and append it to <head>.
} else {
$favicon = document.createElement("link")
$favicon.rel = "shortcut icon"
$favicon.href = link
document.head.appendChild($favicon)
}
}
// タイトル変更(タブのとこに表示されるタイトル）
window.addEventListener("load", function() {
var title = document.querySelector('title')
title.innerHTML = title.innerHTML.replace(/\[Jenkins\]/, titleStr)
// faviconの変更
changeFavicon("userContent/favicon.ico")
}, false);
// コンテンツの中のタイトルを変更
document.addEventListener("DOMContentLoaded", function(){
var img = document.getElementsBySelector('[id="jenkins-home-link"]')[0];
var alink = img.parentNode;
//alink.removeChild(img); これがあるとロゴが消えちゃう
alink.appendChild(document.createTextNode(titleStr));
alink.setAttribute("class", "header-text");
}, false);
css/jsはほとんど触ったことがないので、ぐぐった記事のコピペですが、faviconってどう変えたらいいの？がよくわかりませんでした。
手順としては、
- ページ内部のソースを表示
- icoと出てくる部分をチェック
- みたいになっているので、そこの部分を上記ソースコードで変更
- つまり、favicon.rel="icon"だったり、favicon.rel="shortcut icon"だったりするのでソースをチェックしてよしなに変更
- タブのロードのイベントのところに仕組みを入れると、アクセスした時にfaviconも変更されるようになる
という感じでした。
ただ、ログイン時のfaviconとか、管理画面でのfaviconとかは変更されない挙動になっていました。
ちゃんとやるならもうちょっと調べないと、というところですが、お手軽にやるならこの程度で良いかと。
（ちなみに、jenkinsはcssの仕様を公開してないらしいので、バージョンをあげるとうまく動かない可能性があるようです。）