2015/12/17
WBSガントチャートが生まれた背景と利用した技術、そしてAtlassian Add-onビジネス
Author
大貫 浩Hiroshi Ohnuki
はじめに
本投稿はAtlassian Advent CalendarのDay17を兼ねた投稿です。弊社のAtlassian Add-onビジネスについて書いてみようと思います。
タイムリーなことに、TechCrunch Japanでも1億円以上売り上げるAdd-onベンダーが15社以上いるとAtlassian Add-onビジネスが記事になってます。ご参考まで～
【JIRAの弱点】
Atlassian社の代表製品であるJIRAは担当者が使うツールとしては良くできていますが、管理者層向けのビューが弱いとよく言われてきました。
このような製品本体に無い機能を補う手段として、AtlassianはDeveloper向けサイトとSDKを提供し、開発したソフトウェアを公開する場所としてAtlassian Marketplaceを提供しています。
JIRAはプロダクト開発プロジェクトで利用されることが多いですが、プロジェクト管理者が利用するガントチャート機能は強く要望されていました。そこで当時はフリーで提供されていたガントチャートAdd-on(開発者はドイツ人)に日本語リソースを提供して日本語人向けに使えるようにしました。しかし彼はクリスチャンでお布施をしないとガントチャートAdd-onを使わせないと言うようになり困った状況になりました。
ガントチャート機能は多くのお客様から要望があるものだったので、いつかは自社開発しよう…と考えるようになりました。
そんな時、あるお客様にガントチャート機能を提案する機会が訪れました。
しかし、提案期限まで2週間しか時間がありませんでした。
【短期間でガントチャートの初期実装をするには？Ext Ganttとの出会い】
提案書にできないことを書くことはできないので、実現性を確認することにしました。
2012年の当時、Webアプリ開発の経験とJIRAに関する知識はたっぷりありましたが、JIRA用Add-onの開発は小さなAdd-onを幾つか開発しただけでした。難しいのは、JIRAにガントチャートを違和感なく統合させる仕様策定、画面描画が崩れず綺麗に表示させる方式設計です。またガントチャートのチャート自体もどう実現するか提案までの短い時間で決める必要がありました。
JIRAはjQueryを利用しているので、jQuery用のガントチャート描画ライブラリを利用しようと思いました。
しかし、信頼性に耐えうるものが無く、調査範囲を広げて全てのJavaScriptライブラリの中から最も優れたガントチャート描画ライブラリを選ぶことにしました。
そして、選定されたのがBryntum社のExt Ganttでした。Ext GanttはExtJSをベースにしていますが、私たちはExtJSを別案件で1年以上使っていたので安心感がありました。
【実装方法】
次にJIRAの中にExtJS+Ext Ganttでガントチャートを描画できるか？JIRAの画面は壊れないか？特にトップナビゲーションは大丈夫か？（これが壊れると何もできなくなるので悲惨です）などを確認していきました。具体的にはJIRAの画面を拡張するにはVelocityを利用します。
Ext Gantt GuidesのHellow world的なデモ画面をJIRAのAdd-onとして移植(htmlからVelocityへ変換)することが第一ステップです。
http://www.bryntum.com/docs/scheduling/4.x/?#!/guide/gantt_getting_started
<!DOCTYPE html>
<html>
<head>
<link href=”http://bryntum.com/examples/extjs-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css” rel=”stylesheet” type=”text/css”/>
<link href=”http://bryntum.com/examples/gantt-latest/resources/css/sch-gantt-all.css” rel=”stylesheet” type=”text/css” />
<script src=”http://bryntum.com/examples/extjs-6.0.0/build/ext-all.js” type=”text/javascript”>
<script src=”http://bryntum.com/examples/gantt-latest/gnt-all-debug.js” type=”text/javascript”>
<script src=”synopsys.js” type=”text/javascript”>
</head>
<body>
</body>
</html>
実際のコードはこんな感じ↓になりました。単純なコードですがここに来るまでAdd-on開発ドキュメントを読み漁りました。
$!webResourceManager.requireResource("...")
<html>
<head>
</head>
<body>
</body>
</html>
これが動き出すと方式設計の正しさが検証され、機能を追加していくフェーズになります。
幾つかの機能を個別に追加していく時は、特に大きな問題は無く作業が進みます。
しかし全ての機能を統合し、リリーステストする段階になると新たな問題が発生します。
組合せバグと言われるものです。機能を一つ一つテストすると発生しないのに、ある一つの機能で特定状態が作られ
別の機能が、その特定状態で動作すると正しく動かないというものです。
JIRAは柔軟な設定／構成を取れることがウリですが、テストする側から見ると非常に厄介です。
ガントチャートのデモの前日にもその組合せバグが発生しました。結果から言うとExtJSのバグだったのですが、
最初は原因が分からないため、再現コードをBryntum技術サポートに送ると、30分でその原因を突き止め、
(特別対応だと思いますが、明日動かす必要があると言うと)30分で修正コード(ExtJSの修正コード)を送ってきてそれは正しく動きました。
おかげでデモも上手くできました。
【結果】
製品名を「WBS Gantt-Chart for JIRA」として、Atlassian Marketplaceに登録しました。
WBS Gantt-Chart for JIRAはアジャイル的に開発し、Version upを繰り返しJIRA用Add-onの販売上位に常に顔を出す製品にまでなりました。
利用ユーザーも大手IT企業や製造業、そして日本だけでなく海外の大手IT企業、開発系ソフトウェア企業、大学等でも利用されるようになりました。先日、Atlassianの最大イベントAtlassian Summit 2015に日本企業で初めてスポンサーとなり、WBS Gantt-Chart for JIRAを広めるためブース出展しました。
そこでも多くの要望を聞き、機能強化の方向性が定まりました。
今後もWBS Gantt-Chart for JIRAはカイゼンを続けていきます。
【最後にAdd-on開発ビジネスについて】
Atlassian Add-on開発は楽しそうですか？私の答えは「楽しい！」です。
どうすればAdd-onソフトが使いやすくなるか？利用者は喜ぶか？新しい技術、部品は使えるか？
ロジックをどうするか？どこで処理させるか？Atlassian Cloudに対応しやすくするにはアーキテクチャをどうするか？
価格をいくらにするか？海外マーケティングは？英語サポートは？
年に○千万売れるか？ビジネスとして成り立つか？いろいろ考えることがあります。
このようなことを「楽しそう～」と共感してくれるソフトウェア開発者をリックソフトは絶賛募集中です！
WBS Gantt-Chart for JIRA以外にも、開発中や構想中のソフトウェアが幾つかあります。
海外にも通用するソフトウェアを開発したい人はこちらまで～
