Jenkinsのテーマ(UI)を変えてみた

Jenkins

この記事は最終更新日から1年以上が経過しています。

ゴール

Jenkinsのテーマを変える事ができるようになる

理由

開発環境,ステージング環境,本番環境の違いを明らかにすることで環境の違いによるJob実行のミスを事前に防ぐ

変更結果

sshot.png

手法(3パターン)

1. GitHubのリポジトリをURL指定

  • [Jenkinsの管理] -> [プラグインの管理] -> [利用可能] -> [Simple Theme Plugin]をインストール※
  • [Jenkinsの管理] -> [システムの管理] -> [Theme] -> [URL of theme CSS] -> https://github.com/ [リポジトリ名]
  • [Jenkinsの管理] -> [システムの管理] -> [Theme] -> [URL of theme JS] -> https://github.com/ [リポジトリ名]

※ 使用するテーマによってはこれ以外のプラグインをインストール必要有(詳細:各テーマのREADME.mdを参照)

2. サーバ上にコンテンツファイルを設置・URL指定

  • [Jenkinsの管理] -> [プラグインの管理] -> [利用可能] -> [Simple Theme Plugin]をインストール

  • Jenkinsを置いてあるサーバにSSHログイン後下記ファイルを設置する

    • /ドキュメントルート/userContent/[ファイル名]css <= 中身は自分で定義
    • /ドキュメントルート/userContent/[ファイル名].js [システムの管理] -> [Theme] -> [URL of theme CSS] -> https://ドキュメントルート/userContent/[ファイル名].css
    • [Jenkinsの管理] -> [システムの管理] -> [Theme] -> [URL of theme JS] -> https://ドキュメントルート/userContent/[ファイル名].js

3. 上記1,2を組み合わせる

  • 例) CSSはGitHub上に上がっているテーマ + JS は自分で定義を行ったファイル ..etc

変更結果画像のように変更してみる方法

  • タイトル変更
  • Jenkinsおじさんのロゴ画像を削除
    • 手順2におけるJSの中身について以下のコードを記載
var titleStr = "PlayPass DEV"
 
//Title Replace
window.addEventListener("load", function() {
    var title = document.querySelector('title')
    title.innerHTML = title.innerHTML.replace(/[Jenkins]/, titleStr)}, false);
 
// HeaderLogo Replace
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に追加する
header-text{
    position: relative;
    top: -25px;
    font-size: 40px;
    line-height: 3.0em;
    color: white;
}

この記事を書いた人

岡崎拓哉
岡崎拓哉
2016年に入社した新卒。ドラムとインコが好きな人。
最近は、デザイン駆動設計や関数型プログラミングに興味あり。
マネジメントも覚えていきたい系エンジニア。

Jenkins