周回遅れでIT業界デビューしたエンジニアのブログ

就職氷河期にモロにぶち当たり、人生で混迷を極めた末にIT業界に安寧を見出そうとしているアラフォーのお勉強日記です。

JenkinsのBuild PipelineプラグインでCSSを変更する方法

こんにちは。バレンタインデーでしたね。
チョコ山盛り……なこともなく、家に帰ったら何故かたい焼きをもらいました。

f:id:sionff:20180213140850j:plain

Jenkinsでパイプラインを使うとき、便利なプラグインを活用するのも手です。
今回は「Build Pipeline Plugin」でCSSを変更する方法について紹介したいと思います。

お品書き

  • 今回やろうとしたこと
  • 用意するもの
  • Jenkinsの準備をしよう
  • Nginxは意外とスグレモノ
  • Firefox開発ツールでWebページの中身を覗き見
  • いざパイプライン
  • CSSをカスタマイズしよう
  • まとめ

今回やろうとしたこと

Jenkins上で複数のジョブを連続して処理します。このとき、プラグイン「Build Pipeline Plugin」でビューを作成し、このビューで必要な情報のみ表示する、あるいは視認性を向上させるためにCSSを変更します。

用意するもの

  • Jenkins
    • 今回は、連続して処理したいジョブを3つほど用意しました。
  • Nginx
    • CSSファイルの配置に使います。
  • Firefox

Jenkinsの準備をしよう

ジョブを作って、Build Pipeline Pluginプラグインをインストールします。

ジョブを用意する

試しに、連続して処理したいジョブを3つほど作ってみましょう。
f:id:sionff:20180213154921p:plain

ジョブを作ったら、1つめと2つめの設定でビルド後の処理を追加します。対象のプロジェクトはそれぞれ次のジョブです。
f:id:sionff:20180213154941p:plain

実はこの状態で1つめのジョブのビルドを実行するだけでも、3つのジョブが連続して実行されます。でも、どんな状況なのか分かりづらいし、進捗が見やすいならそれに越したことはありません。

そこで、Build Pipeline Pluginの出番となるのですが、CSSも変更しちゃおう! となると多少の準備が必要になります。

Nginxは意外とスグレモノ

「Nginx」って読めますか?
私は最初、読めませんでした。正解は「エンジンエックス」です。
(答えは反転)

NginxはフリーかつオープンソースのWebサーバーで、Apacheと比較されることが多いです。ざっくりとした違いは……

NginxとApache HTTP Serverの違いメモより引用

Apache

マルチプロセスモデル : 接続ごとにプロセスをフォークするのでメモリがいっぱいになりやすい

利点 : メモリ空間が独立しているので、スクリプト言語が組み込みやすい
欠点 : 同時接続が増えるとメモリが欠乏しやすい

→ とは言え、モジュールを使えば、イベント駆動モデルにもできるよ。Nginxには及ばないけど。

Nginx

イベント駆動モデル : 1プロセス内で、接続ごとにイベント処理を行う。1プロセス1CPUなので、CPUの数だけワーカープロセスが作成できる。

利点 : 接続数が増えても、プロセス数やスレッド数が増えない。消費メモリが増えない
欠点 : 1つのメモリ空間で動作するため、スクリプト言語を組み込めないことがある。

→ とは言え、プロキシサーバとして利用すれば、スクリプト言語を呼び出せるよ。

Nginxの主な機能について(WikiPedia

具体的にどの辺りが違うのかは、下の3つのリンクをご覧ください。

Nginxが開発された理由も興味深いです。
news.mynavi.jp

Nginxのインストール

■ダウンロードはこちらから
nginx: download

f:id:sionff:20180213134704p:plain

  1. ダウンロードしたら、好きな場所に展開しましょう。
  2. nginx-x.xx.x(xはバージョン名)フォルダ内のhtmlフォルダに、HTMLやCSSを配置します。(例:hogemoga.html)
  3. exeファイルを起動します。
  4. ブラウザで「http://localhost/hogemoga.html」とアドレスを指定すればWebページが見られます。

f:id:sionff:20180213134054p:plain

実に簡単。個人的には、Apacheでxampp起動して云々かんぬんとかやってるより、はるかにシンプルでいいです。

このNginxは、Build Pipelineの設定の際にCSSファイルを参照するのに使います。(CSSファイル、単にworkspaceに置くのでは認識してくれず、サーバー上にあることが必要なのです。ちょっと面倒)

Nginxのコマンド

Win
起動
start nginx

停止
nginx.exe -s quit

再起動
nginx.exe -s reload
Linux
起動
nginx

停止
nginx -s stop

再起動
nginx -s reload

設定ファイルのチェック
nginx -t

Firefox開発ツールでWebページの中身を覗き見

何のことはないです。
好きなWebページをFirefoxで開いて「F12」ボタンを押すだけです。

1. 画面下部の赤く囲んだ部分に、開発ツールが出てきます。左側にHTML、右側に対応するCSSです。
f:id:sionff:20180213143450p:plain

2. 試しに一部分のCSSのチェックを外すと、チェックが外れたときのレイアウトになります。崩れちゃった!
f:id:sionff:20180213143628p:plain

3. 左端のカーソルボタンを押すとインスペクターが起動して、Web画面でカーソルを動かすと対応する部分の詳細情報が表示されます。ふむふむ。画像のファイル名だってわかっちゃいます。
f:id:sionff:20180213143711p:plain

ここで、nginxにへびさんの画像を置いてみましょう。hebi.pngです。

4. で、さっきのファイル名をnginxに置いた画像に変えると……へびさんが某Yをハイジャックしてしまいました。
f:id:sionff:20180213143830p:plain

結構自由に試すことができます。面白い!

このインスペクター機能を使ってBuild Pipelineで作成したビューのCSSを調べて、自分で用意したCSSで上書きすれば、Build Pipelineを好きなデザインに変更することが出来てしまいます。

いざパイプライン

では、Build Pipelineで進捗が見やすいビューを作りましょう。

Build Pipeline Pluginをインストールする

Jenkinsの管理から、プラグインのインストールを選んで、「Build Pipeline Plugin」をインストールします。
f:id:sionff:20180213155401p:plain

次にViewを追加します。画面上部の「+」ボタンを押します。
f:id:sionff:20180213155635p:plain

ビュー名を入力して、Build Pipeline Viewを選択します。
f:id:sionff:20180213155646p:plain

次に設定をします。とりあえず赤で囲んだ部分を押さえておけば大丈夫。さっきのNginxの設定はココで生きてきます!
f:id:sionff:20180213155654p:plain

全部設定が終わったら、こんな感じでBuild Pipelineのビューが表示されます。
f:id:sionff:20180213155705p:plain

初期状態のままだとお世辞にもオシャレ……とは言いづらいのですが、とりあえず設定できたのでOK! この状態をベースとして、Firefoxセレクタの解析をして、必要に応じてCSSを書けばOKです。

CSSをカスタマイズしよう

あとは、好きなようにCSSをカスタマイズして、nginxのhtmlフォルダに置けば出来上がり!
例えばこんな風。

f:id:sionff:20180213165403p:plain

もはや別モノですね!

まとめ

  • JenkinsのBuild PipelineはCSSを変更できる
  • Nginxは手軽で便利
  • Firefoxの開発ツールはF12ワンキーで起動、画面上でいろいろ試せる

追記

JenkinsはSeleniumと組み合わせたり、スレーブ実行したりも出来ます。こちらはパイプラインでGroovyでコードを書いて制御するバージョンです。Selenium、ノードについても触れていますので参考にどうぞ。
sionff.hatenablog.jp