ゴール

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

理由

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

変更結果

手法(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);

• テーマの変更
• タイトルの文字のレイアウトを変更
  • 今回使用したテーマのREADME.md に書かれているCSSのURLの中身をサーバに設置(手順2を参照)

• 以下のコードを設置したCSSに追加する

header-text{
    position: relative;
    top: -25px;
    font-size: 40px;
    line-height: 3.0em;
    color: white;
}