こんにちは。テクマトリックスの橘です。
CI/CDの定番ツールとして多くの開発現場で使われているJenkins。(Hudson時代も含めると)開発されてから20年以上も経っており、「古いUIで使いにくい」「レガシーなデザインのまま」「なんかダサい」といった印象を持っている人も多いのではないでしょうか？
つい先日、 調査のためにJenkinsの最新のLTS版で環境構築を行う機会があったのですが、数年前に目にした JenkinsのUIと比べてかなり洗練されたUIになっていると感じました。
実は、Jenkins コミュニティではここ数年、大幅なUI/UXの改善が進められており、Jenkinsはよりモダンで使いやすいツールへと進化しています。本記事では、最近のJenkinsのUI/UX改善点をまとめ、どのように便利になったのかを解説します。
目次
2022年以降のJenkins UI/UX周りの改善の話
0. 前提
本記事では、
- 2021/11/4にリリースされた ver 2.303.3 (以降『2.3』と記載)
- 2025/2/5にリリースされた ver 2.492.1 (以降『2.4』と記載)
を比較し、紹介します。
1. ログイン画面の刷新
Jenkinsを利用する際に、ほとんどの方が最初にアクセスするのがログイン画面かと思います。以前のシンプルな画面から、Jenkinsのアイコンが大きくなり、その背景イメージも鮮やかな色合いに、そして、テキストフィールドやボタンのエッジがより丸みを帯びて、柔らかなデザインになっています。
2.3のログイン画面
2.4のログイン画面
好みの問題かもしれませんが、2.4のログイン画面のほうが、よりスタイリッシュでログインしたくなる画面に感じませんか？毎日見る画面なので、少しでもおしゃれなツールを使いたいと思いますよね。
2. ダークモード・ライトモードの切り替えが可能に
新たに「Appearance」ページが追加され、ライトモード・ダークモードの切り替えができるようになりました。もちろん、システム設定に応じて、モードが切り替わる設定も用意されています。
Appearanceページにアクセスするには、Jenkinsにログインした状態で、画面右上のログインユーザー名をクリックし、表示されるメニューで、「Appearance」をクリックするだけです。
3. GitHubプルリクエストのタイトル表示
JenkinsとGitHub、GitLabなどのSCMリポジトリを連携している場合、ビルド対象のブランチ名がダッシュボードに表示されるのは当たり前ですが、プルリクエストやマージリクエストに対するジョブの実行結果についてもJenkins上で確認することが可能です。
Jenkins 2.3ではプルリクエストの番号のみが表示され、プルリクエストのタイトルを確認するにはマウスオーバーをする必要がありましたが、Jenkins 2.4では、Branch API プラグインのバージョンアップにより、プルリクエストのタイトルが一覧に表示されるようになりました。
Jenkins 2.3では、 プルリクエストの番号である「PR-2」のみ表示されます。
一方、Jenkins 2.4では、番号に加え、プルリクエストのタイトル「Update Jenkinsfile」が表示されています。
複数のプルリクエストが同時に表示されている場合、プルリクエスト番号だけでどのプルリクエストかを判断することは難しいため、ユーザーにとっては非常に有用なアップデートだと思います。
4. サイドパネル機能の追加
いくつかの画面にサイドパネルが追加され、ナビゲーションが改善されました。
4.1 新規ジョブ作成・ジョブ設定画面
ジョブ設定の項目カテゴリの表示方法が変わり、サイドパネル形式になりました。
Jenkins 2.3では、カテゴリ名が画面上部にタブのような形式で表示されるのに対し、
Jenkins 2.4では、画面左のサイドパネルに表示されます。
どちらも、画面スクロールした場合には追従してくれるため、この設定画面においては大きな違いはありませんが、次のプラグインマネージャーでは話が変わります。
4.2 プラグインマネージャー
前述の新規ジョブ作成・ジョブ設定画面と同じように、タブとサイドパネルの違いがあります。
Jenkins 2.3では、上の画像のように、アップデート・利用可能・インストール済み・高度な設定 をタブ形式で選択するようになっています。一見、特に問題ないように思えるのですが、画面をスクロールしてみると、
上の画像のように、タブは追従しないため、他のタブに切り替えたい場合は、先頭まで戻る必要があります。
それでは、Jenkins 2.4ではどうなっているか、見ていきましょう。
Jenkins 2.4では、タブ形式は廃止され、サイドパネル形式になっています。
細かな点ですが、「Update」メニューの横にアップデートできるプラグインの数も表示されているのはうれしい気づかいですね。
そして、Jenkins 2.3ではスクロールに追従してくれなかったメニューですが、
このように最下部までスクロールしても、画面に常に表示されていることを確認できます。
さらに、検索ボックスも追従して表示されているので、操作性はJenkins 2.4 のほうがはるかに優れているということが分かりますね。
5. コマンドパレットの実装
Jenkinsに新しく「コマンドパレット」機能が追加されました。これは、従来の検索ボックスをより使いやすくした機能です。ただし、記事執筆時点では、従来の検索ボックスでできていたことがすべて実施できるようになっているわけではなく、継続改善中の機能となっています。
Jenkins 2.3の検索ボックスで、「sample」と入力した場合。
Jenkinsに登録されているジョブやフォルダなどが選択候補として表示されます。
一方、Jenkins 2.4のコマンドパレットは、全画面にオーバーレイ表示されます。
同じように、登録されているジョブなどが表示されますが、アイコンも表示されるため、直感的にどんなアイテムかを判断しやすくなっています。
さらにこのコマンドパレットは、ショートカット機能があり、
- WindowsもしくはLinuxの場合は、CTRL + K
- Macの場合は、CMD + K
上記の操作で呼び出すことができるため、Jenkinsのどの画面からでもキーボード操作だけで簡単に検索結果にアクセスすることが可能です。
現時点では機能は限定的ですが、コマンドパレットからテーマを変更できるようにするなど、様々な機能が拡張される計画になっていますので、今のうちから使い勝手に慣れておきましょう。
6. パイプラインビューの改善
パイプラインのステージ毎のステータスを確認することができるPipeline Stage View は長年多くのユーザーに利用されています。というのも、よりモダンな見た目であるBlue Oceanプラグインの開発がそれほど活発ではなく、すべての操作をBlue Ocean上で完結できないという大きな課題があったためです。
そこで登場したのが、Pipeline Graph Viewプラグインです。
Blue Oceanの長所であるパイプラインの視覚的な表示機能を取り込み、パイプラインの実行結果や構造を視覚的に理解することが可能になっています。
詳細については別記事にて解説していますので、ぜひこちらの記事もご覧ください。
7. Build History Widgetの改善
過去のビルド履歴が一覧で表示されるBuild History WidgetもJenkins 2.4で改善されています。
Jenkins 2.4では、以下のような点が改善されています。
- 日付ごとにビルド履歴がまとまる
- ビルド情報の詳細にアクセスするためのクリック範囲が広く(行全体がクリック可能)
- オーバーフローメニュー(上記画像で表示している「変更履歴・Console Output」などの項目一覧)を表示するボタンを常に表示(2.3ではマウスオーバーしないと表示されない)
- オーバーフローメニューの選択項目がすべて表示される(スクロールの必要がない)
- RSSボタンをオーバーフローメニュー内に移動
まとめると、より見やすく、必要な情報へのアクセスがしやすくなったと言えますね。
8. その他の改善点
上記以外にも細かな改善点が多数あります。最後に、特に注目すべき2つの改善点をご紹介します。
8.1 デザインライブラリの導入
JenkinsのUI改善に伴い、新たなデザインライブラリが導入され、統一感のあるモダンなUIが実現されています。ボタンやアイコン、レイアウトが一新され、以前に比べて、視認性が高くわかりやすいUIへとなっています。
デザインライブラリのサンプルはこちらのサイトでも確認することが可能です。今後より多くの機能やプラグインが、この新しいデザインに対応していくと、Jenkinsの見た目がさらにモダンに近づいていくこと間違いなしです。
8.2 古いテクノロジーの排除
JenkinsのUI/UX改善には、古く、メンテナンスされなくなってしまったライブラリなどからの脱却という点も含まれています。この改善は直接的にユーザーの役に立つというものではないため、本記事では詳しくは紹介しませんが、セキュリティ面やカスタマイズ性を考慮し、以下のような変更が行われています。
- かつてJenkinsのフロントエンドで使われていた Yahoo! UI Library（YUI）が完全に削除されました。
- 古いJavaScriptライブラリ Prototype.js も排除され、よりモダンな開発環境へと移行 しました。
- セキュリティと保守性向上のため、インラインで埋め込まれていたJavaScriptが整理されました。
- 従来のCSSに代わり、SCSSが採用され、より効率的なスタイル管理が可能になりました。
まとめ
Jenkinsが「古いUIで使いにくい」「レガシーなデザインのまま」「なんかダサい」と言われていたのは、もう昔の話であることはご理解いただけたかと思います。今なお積極的に開発が進められ、ご紹介したような改善が行われているJenkins には、引退のタイミングはまだまだ早そうですね。
Jenkinsをしばらく触っていなかった人も、最近のアップデートを機に再び使ってみると、その進化に驚くかもしれません。今後もJenkinsのUI/UX改善に注目していきましょう！
最後に
本記事では、最新のJenkinsUI/UX周りの改善点についてご紹介をさせていただきましたが、利用中のJenkinsへの影響が把握できず、最新版へのアップデートになかなか踏み出せない、という方も多いのではないでしょうか？古いバージョンのJenkinsを利用することは、本記事でご紹介した新機能を利用できないだけではなく、セキュリティ上の問題を引き起こす可能性もあります。ただ、アップデートには注意点も多いので、気軽に実施できる作業ではありませんよね。
弊社では、現在ご利用中のJenkins環境を調査、分析させていただく、アセスメントサービスや、Jenkinsのバージョンアップをご支援するサービスも提供しております。
最新のJenkinsを利用したいけど、自分たちで実施するのは難しい、という方はぜひ弊社にお申し付けください。
