iPhone を Jenkins の XFD (eXtreme Feedback Device) にしてみた

Jenkins で XFD をやりたいとずっと思っていたのだけど、海外の友達に頼んで買ってもらっただの回路をダンボーに組み込んだだのハードル高いよ！と思ってなかなか実現できずにいた。

そんなとき Jenkinsのビルド結果をリアルタイム通知するプラグイン『Jenkins Websocket Notifier』を作りました - みずぴー日記で iPad を XFD にしていたのに大変感銘を受け、会社の Jenkins のビルド状態を iPhone に常に表示してみた。

テスト失敗中

写真は iPhone 4 だけど、使い道がなくなった古い iPod touch が家に転がっていたりする人は、有効活用できると思う。

設定手順

まずは、リンク先の Jenkins Websocket Notifier プラグインをインストールする。
監視したいプロジェクトで通知を有効にするのを忘れずに。

次に、以下の HTML を Jenkins が動いているサーバの Apache に配置する。(localhost は適宜読み替えてください)

xfd.html

<html>
  <head>
    <title>Jenkins XFD</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <link rel="apple-touch-icon"
         href="http://agentdero.cachefly.net/continuousblog/newlogo/headshot.png" />
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no">  
    <meta name="apple-mobile-web-app-capable" content="yes"/> 
    <script>
      $(function(){
        function show(obj){
          var elem = $('#bg');
          if(obj.result == 'SUCCESS'){
            elem.css('background-color', 'green');
          }else if(obj.result == 'UNSTABLE'){
            elem.css('background-color', 'yellow');
          }else{
            elem.css('background-color', 'red');
          }
        }
        var project = window.location.search.substring(1) || 'test';
        var ws = new WebSocket('ws://localhost:8081/jenkins');
        ws.onmessage = function(msg) {
          eval('var obj = ' + msg.data);
          if(obj.project != project) return;
          show(obj);
        };

        $.getJSON('http://localhost/jenkins/job/' + project + '/lastBuild/api/json', 
                show);
      });
    </script>
  </head>
  <body id="bg"></body>
</html>