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の中身について以下のコードを記載

  • テーマの変更
  • タイトルの文字のレイアウトを変更
  • 以下のコードを設置したCSSに追加する

この記事を書いた人

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

Jenkins