*本ブログは ATLASSIAN blogs
を翻訳したものです。本文中の日時などは投稿当時のものですのでご了承ください。
*原文 : 2010 年 6 月 28 日、James Hatherly 投稿 “Wallboards: the best new way to track your team’s progress“
今年の一月に私がアトラシアンで働き始めた時、社内で使用されているウォールボードを見てみるようにマネージャーの Brendan から言われました。そのウォールボードを、メンテナンスが容易で、柔軟性があり、理想的には、製品として出荷可能なものにできるかどうか検証することが目的でした。私が思ったことを下記します：
古いウォールボード
古いウォールボードは、もともと ShipIt プロジェクトにて作成されたものです。それは、完全な実装というよりは、コンセプトを形にするために作成されたものでした – やるべきことはまだたくさんあるということです。さらに複雑なことには、会社内の別のチームが、彼らの製品に固有のデータソースを追加的に含めて、元のプロジェクトを分岐させていたのです。
ウォールボードには6つのコアコンポーネントがあります：Crucible のレビューを完了しないことにより最も多くの JIRA の課題をブロックしているメンバーのバーグラフ、現在のスプリントにおける課題に対して記録された時間バーンダウンチャート、Bamboo の特定のテストセットのパフォーマンス測定グラフ、現在のスプリントの残り日数、未着手、進行中、完了の JIRA 課題数を示すバーグラフ、です。
これが古いウォールボードの画面です：
そして、これがその構成です：
ガジェット！
Brendan から、OpenSocial ガジェットの使用を調査してみては、と提案がありました。それは、古いウォールボードの各コンポーネントを OpenSocial ガジェットとして再作成し、そして特別な “chromeless” (操作部分のない) ガジェットダッシュボードを作成し、そこに表示できないだろうか、というアイデアでした。ガジェットが素晴らしい理由は、無料でコンフィギュレーションを与えてくれる (柔軟性があるものという目標を満たす)、ただ XML、HTML、CSS、JavaScript で作れる (メンテナンスが容易である、という目標を満たす)、アトラシアンプラグインとして、あるいは iGoogle を通して配布できる (製品として出荷可能という目標を満たす)からです。
さらに良いことに、カスタムガジェットのダッシュボードは、JIRA のガジェットとダッシュボード（それ自体は Shindig によって動作) のリソースを使用でき、また古いウォールボードを複製するためにカスタムレイアウトとスタイルを使用できます。
ウォールボードのビュータイプ
かなり早くから気づいたことは、ウォールボードのダッシュボードには何らかの方法が必要だろうということでした。ガジェットが、ダッシュボード向けに特定して作られたものなのか、あるいは、ユーザーが彼らのウォールボード内で使うような通常のものなのかを知る方法です – なんて上等な審美眼でしょう。アトラシアンの住人でガジェットグルの Tim は、ウォールボードモード用の新しいビュータイプを作成するクールなアイデアを持っていました。
ガジェットビューの背景を少し説明します：ガジェットの開発者は、どんなコンテキスト (文脈) でガジェットが閲覧されるかを知ることができます。選択肢として、ブラウザーという不動産の主要部分がガジェットに与えられる、大きな “CANVAS” モード、そして、ガジェットがたくさんの他のガジェット – 典型的には iGoogle ダッシュボードの中や、JIRA ダッシュボードや他の同等なもの – の中に置かれる “HOME” があります。
“WALLBOARD” ガジェットのビュータイプを定義することにより、ウォールボードはそれがウォールボード用に設計されたガジェットを得ようとしている (それが view=”WALLBOARD” というコンテンツタグを持っている時) のか、あるいはそうではない (それが view=”DEFAULT” – viewType の代替システム – というコンテンツを得ている時) のかを判断することができます。
これは本当にクールな副次的効果を持っていました。既存のガジェット開発者が、すでに作成したガジェットにおいて、既存のガジェットビューに加えて、新しい “WALLBOARD” ビューを実装することができるようになったのです。その新しいビューは、もし同じ JavaScript の全てではないとしてもおそらく大部分を使い、そして、単純にいくつかの新しい CSS が必要とされるでしょう。詳細は下記を参照してください。
パニックステータスボード
このプロジェクトを開始して数週間が経ったとき、Panic Inc の人々がこのブログを投稿しました。それは素晴らしいと思いました。アトラシアン社内の誰もがそれについて興奮し、それは数えきれないほどたくさんのブログやフォーラムや Twitter で褒められていました。私が今まで見た中で唯一、否定的と受け取れるコメントは、自分たちで所有できるセクシーなステータスボードを人々は欲しがっている、ということです。情報ラジエーターの概念は、決して新しい概念ではありません – その歴史については、Brendan のサミットのプレゼンテーションを参照してください。しかし、Panic のウォールボードについて本当に心に残ったことは、これらのウォールボードが市販製品として存在しないということでした。私が見てきたすべてのウォールボードは、カスタム品で、社内で設定したものです。JIRA + Gr
eenHopper プラグインとして私たちのウォールボードを作成することについて本当に素敵なことは、JIRA と GreenHopper を使用する誰もがそれを入手できるということです。
新しい UI (ユーザーインターフェース)
5 月初旬頃、古いウォールボードをとても上手に真似る、たくさんのガジェットとサーブレットを所有できるところまでこぎつけました。それは醜いものだという認識を皆が持っていたのがこの頃でした。また、私たちのチームの素晴らしい新デザイナーである Jake を選びました。彼はそのウォールボードを醜くないものにするために、十分すぎる能力を持っていました。彼と私は緊密に協力し、数週間にわたって完全に UI を見直し、このような見た目にすることができました：
サミットのデモとアルファ版のリリース
サミットに出席された皆様は、基調講演でウォールボードのスクリーンショットをいくつかご覧になったでしょう。それに加えて、JIRA チームの現在のスプリントの進行状況を示す大きなスクリーンに気づかれたかもしれません。これらはモックアップでした。その JIRA チームは、ドッグフーディング用 JIRA インスタンス上でウォールボードプラグインを動かしており、それは、大きなスクリーンのデモを実行していたまさにこの JIRA インスタンスでした。また、Crucible チームは、私たちの公開 JIRA インスタンス上で動いているウォールボードプラグインのインスタンスを使用しています。これは、そのイベントを通じてお見せしたいくつかのスクリーンショットのために使われました。
技術ノート
JIRAダッシュボード上にある “ウォールボードとして閲覧” リンクをクリックすると、そのプラグインにより提供されているサーブレットへ要求が届きます。そのサーブレットはユーザーを検索し、その要求元のダッシュボードのIDを見つけます。 それから、それはそのダッシュボードにあるガジェットを検索し、各ガジェットのiframe URLを生成します。(iframe はガジェットをどの種類のダッシュボードにも埋め込むために使われます。)ウォールボードへの配置は、列と境界線の色の組み合わせにより決定されます。ウォールボード自体は、そのウォールボードの各隅に配置された4つのdivを含む、Apache Velocityテンプレートです。それはこのようになります：
<table id="build_monitor"> <tr> <td class='left-column'> <div id="top_left" class="cyclable"></div> <div id="bottom_left" class="cyclable"></div> </td> <td class="right-column"> <div id="top_right" class="cyclable"></div> <div id="bottom_right" class="cyclable"></div> </td> </tr> </table>
サーブレットは、iframe要素を対応する配置のdivに埋め込みます。ウェブページの形になり準備ができたとき、これら4つのdivを考慮した関数を呼び出します。これらの各divについて、その内部のiframeの数が1を越えるならば、そのready() 関数は、10秒スケジュールで内部の各iframeを繰り返すように、divを設定します。 この循環は、jQuery Cycleプラグインを用いて実行されます。
バンドルされているガジェットは、すべて、jQuery、flot、AUIを用いて実装されたただのOpenSocialガジェットです (ウォールボードビュータイプ拡張を用いている)。 もともとストーリーステータスガジェットは Google Vizualisation を使用していたが、ウォールボードをより良く最適化できるように書き直されました。
どのようにあなた自身のウォールボードを作るのでしょうか？
自分自身のためのいくつかのウォールボードガジェットを作ることを考えていると、何人かのJIRA ウォールボードユーザーからすでに聞いています。これは素晴らしいことで、私はより多くの人がそうしてくれるように願っております。私たちは、ウォールボード自体とその内部ガジェットの間の責任の区切りをどうしたら上手くつけられるのかまだ考えています。私たちはより良い特定のガイドラインを形にできたら公開するつもりですが、短期的には、こちらがガジェット開発のドキュメンテーションで、こちらがあなたのガジェットを他のウォールボードガジェットとともに適合させるための特定の手順です：
- あなたのガジェットXML内に、view=”wallboard” とともにContentタグを持たせる
- ＃141414の背景色を使う
- ＃999999、＃333333、＃FFFFFFのフォントカラーパレットを使う
- #990000、＃0099CC、＃336600、＃FF9900の非中立的なカラーパレットを使う
- “20px 40px 20px 0”; の各ガジェットパッディングを与える
- ‘Helvetica Neue Light’、Helvetica、Arial、sans-serif、のフォントファミリーリストを使う
- そのガジェットが完全にロードされたとき、そのガジェットのボディー内の少なくとも一つの要素に .gadget-loaded クラスが適用されるようにする
この最後の点は少し気になるかもしれませんが – それはウォールボードがいつ “読み込み中” の表示を取り下げるか決定するために使用される仕組みです。
もちろん、別のスタイルを試して実験することは自由です – しかし、もしこれらの指示に従えば、それは少なくとも一貫性があるように見えるでしょう。
次に何をすればよいですか？
そのプラグインをインストールして試してみてください。（JIRA 4.1.1 以降とGreenHopper 4.4.1 以降が必要です。）それは少し荒削りです – それはアルファ版だからです。それをより良くするためにご支援下さい。
あなた独自のガジェットをいくつか作ってみてもまたよいでしょう。あなたは、JIRAやCrucibleや他の製品から取り出したデータを使用するガジェットを作ることができますし、売上データや株価ティッカーのライブフィードを作成するために外部ソースを使用することもできるでしょう。
何について、私たちはそれを試しているのでしょうか？私たちはまだ議論しています – ウォールボードをJIRA自身にバンドルさせるかもしれませんし、GreenHopperの一部になるかもしれません。これはおそらく、皆様からのフィードバックによって決まるでしょう。“open company, no bullshit” の精神により、私たちはこのアルファ段階において試していることを皆様にお知らせして、皆様がどのようにそれを使っているかについてお聞きすることを楽しみにしています。何が素晴らしいですか？何が良くないですか？そして最も重要なこと – 将来、それを使うことによりあなた自身はどのようになりますか？そのプラグインは私たちのJIRAスタジオインスタンスであるSPACにホスティングされており、PACからダウンロード可能です。それを試してみてどう思ったかお聞かせください。
コンセプトとしてのウォールボードガジェットという点においては？OpenSocial仕様として正式なウォールボードviewtypeに実際になることや、もしかしたらウォールボードダッシュボード viewが、Shindigに転がり込んだりしたら、それは本当に素晴らしいことでしょう。また最新情報をお知らせします。