Jenkins：jenkinsおじさんの気配を消して、可愛くし、モチベをあげる話。

# はじめに
ココネ株式会社に入ってからjenkinsを~~触らされている~~楽しく触っている、でぃーだらぼっちです。
最近jenkinsおじさん化してます。
前職ではjenkinsはもっぱら叩く側で、管理側はしたことありませんでした。
せっかく触るのだからと、楽しく（？）独自のやり方で開拓していたりします。

本ページでは、そのjenkinsおじさんのアクセスページ、可愛くしたいよね　っていう話をします。

:::note warn
**jenkinsで、CSSを触る類の話**をします。
jenkinsはCSSをめちゃくちゃカスタマイズすることは推奨されません。
ガチガチにカスタマイズすると、
**バージョンあげたりした時に動かなくなる可能性があるため**です。

何を、どう、いじったのか、を把握した上で本ページはおのおの試してみてください。
:::

# まず、jenkinsおじさんデフォルトの見た目紹介
## ログイン画面
![スクリーンショット 2022-11-29 11.53.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2988173/30bb0440-8634-d95d-8617-21555a0af164.png)

うん。

## ログイン後
![スクリーンショット 2022-11-29 11.53.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2988173/0dcd07d7-18e0-14b7-0733-a03057c0f905.png)

可愛さが足りない。

# 何をして、どう可愛くしたか

可愛くしたのは、ココネ株式会社でサービスしているポケピアのjenkins環境です。

https://www.pokepia.jp/

## ログイン画面可愛い
![スクリーンショット 2022-11-29 11.23.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2988173/8d2f520f-1d97-71ef-1d9f-3ed0aa758355.png)

ログインしたくなります。この時点でのfaviconのjenkinsおじさんは隠せませんでした。

## ログインした後も可愛い
![スクリーンショット 2022-11-29 11.23.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2988173/21da0a03-184d-0c84-2136-e61042bcd87b.png)

ポケピアのアイコン持ってきて、タイトルもjenkinsちっくなものから変更してます。

## 細部までこだわる
faviconも変えています。
![スクリーンショット 2022-11-29 11.23.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2988173/5ffd6c23-4e81-e562-2935-db5d71d0c241.png)


# 何をするのがポイントか？
## faviconの変更
`Simple Theme Plugin` が必要なのでそれをインストールしておきます。

https://plugins.jenkins.io/simple-theme-plugin/


そうすると、UserContent/ ディレクトリが、jenkinsHomeにできるので、そこにfavionなどをつっこむ形式です。

Jenkinsの管理ページにいくと、Simple Theme Pluginの設定があるので、そこで`favicon URL`を選択し、利用したいfaviconを指定します。
![スクリーンショット 2022-05-28 13.09.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2988173/1981c6d5-fdd7-bba7-01dc-8adc4ea2839d.png)

これをするとfaviconが変わるのでよしなに遊びます。

## テーマカラーを変更する

http://afonsof.com/jenkins-material-theme/

こちらのサイトに行くと、いい感じの色を指定すれば、いい感じのcssを吐き出してくれます。
faviconの時と同様にuserContentにつっこみます。
![スクリーンショット 2022-05-28 13.11.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2988173/b0a64411-ed18-eb1f-1069-d057f1112849.png)

## jenkinsサイトのタイトル変更する
以下を参考にさせていただきました。

https://iret.media/21572

https://stackoverflow.com/questions/260857/changing-website-favicon-dynamically

```Theme.css
#header {
    background: steelblue;
    position: relative;
}

/* サイトコンテンツ内部の調整（色とかフォントサイズとか） */
.header-text {
    font-size: 32px;
    line-height: 0.3em;
    color: whitesmoke;
    padding-left: 16px;
}

#jenkins-head-icon {
    content: url('/userContent/favicon/ic_launcher.png');
    height: 54px;
    background-size: contain;
}
```

```Theme.js
var titleStr = "[ポケピア]"

// タイトル変更(タブのとこに表示されるタイトル）
window.addEventListener("load", function() {
    var title = document.querySelector('title')
    title.innerHTML = title.innerHTML.replace(/\[Jenkins\]/, titleStr)
}, false);

// コンテンツの中のタイトルを変更
document.addEventListener("DOMContentLoaded", function() {
    var img = document.getElementsBySelector('[id="jenkins-home-link"]')[0];
    var alink = img.parentNode;
    alink.appendChild(document.createTextNode(titleStr));
    alink.setAttribute("class", "header-text");
}, false);

```

## ログイン画面を変更する
こちらの変更は気をつけてください。
引用する画像サイズ間違うと、ログイン時のアカウント入力に被ってログインができなくなります。
`Login Theme Plugin`を使います。

https://plugins.jenkins.io/login-theme/

システム設定の箇所に、Login Theme Pluginの設定項目が出てきます。
ぶち込めるので、設定をつっこみましょう。
![スクリーンショット 2022-11-29 12.14.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2988173/cc6f70ec-bc6e-3ab0-55a8-189f97831868.png)

```HTML
<script>
document.getElementsByTagName('h1')[0].textContent = 'ぽけびあビルドにようこそ！'
</script>
<style>
.simple-page .logo {
    background-image: url('https://www.pokepia.jp/sns/ogp.png');
    background-repeat: no-repeat;
    background-position: 50% 0;
    height: 180px;
    background-size: contain;
}

.simple-page form {
    width: unset;
    max-width: unset;
}
</style>
```

これで、可愛いは完成です。

# トラブルシューティング
## Simple Theme Pluginを引用するとおかしい挙動がある
### ビルド中のアイコン(in-progress)に分身の術が起きる
これ、面白い挙動だったのですが、動画があります。
![Screen_Recording_2022-05-31_at_10_32_25_AdobeExpress.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2988173/4b69784f-56e9-0a1d-a33e-c2f0e2f4cfa6.gif)

![Screen_Recording_2022-05-31_at_10_36_32_AdobeExpress.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2988173/51918de7-cfe2-7faa-90ca-0d2a253334cd.gif)

いや、ちょっとまって。
どういうことなのw

直し方は調べたらありました。同じような人がいて・・w

https://github.com/afonsof/jenkins-material-theme/issues/183

extra cssに下記を入れるだけです。
```
svg[class*=anime] { visibility:collapse }
```
### スクリプトを直書きすると、カーソルから4つ後の位置で入力が始まる
色を適用すると、このような挙動になりました。なぜかは不明。
バージョン管理しててスクリプトはブランチとか指定するだけだったので直書きすることはほとんどないから、まあいいんですが、簡単なテストする時に面倒ですね。

## Login Theme Pluginを使ってログインできなくなる
やってしまった案件です。
画像サイズ間違ってログインするときの入力場所打てない・・・という。
直接configファイルを編集してことなきを得ました。

# まとめ
いかがでしたか。
可愛くしてモチベあげる！　で、CSSを結構カスタマイズしました。
jenkinsバージョンあげた時に弊害がある可能性はあるのですが、直し方わかってれば大丈夫、ってところですね。
他のjenkinsマシン触ってる時に、どっちログインしたっけ？とか、触ってて可愛くないな・・というときのモチベあげる時に試してみてください。