情報処理学会 インタラクション 2015
IPSJ Interaction 2015A19
2015/3/5

idea in: プロジェクト管理を効率化する Web アプリケーション
その 3 - タスクチャート手法によるプロジェクトの目的別可視化浜田真成†1安藤大地†1

笠原信一†1

本研究は, 専門知識や難しい操作を必要とせずに扱えるユーザーフレンドリーなプロジェクト管理支援 Web
アプリケーションの開発と, そのシステムの実現を目指すものである. 前報では, そのための手法としてバージョン管理と表形式のインターフェースによってプロジェクトを管理する「タスクチャート手法」を提案した.
今期研究では, 上述のタスクチャート手法に, 日時・進行度・期限・優先順位・制作者等をキーとし, 目的別の切り口から全体を閲覧できるビジュアライゼーション機能を導入することによって, プロジェクトの過程を残しながら,それぞれの役割に応じて効率的にプロジェクトを管理する手法を提示する.

idea in: A Web Application for Project Management Part. 3– Project Visualization by Task-Chart method
MASANARI HAMADA†1 DAICHI ANDO†1 SHINICHI KASAHARA†1
This study proposes user-friendly project management system without a specialized knowledge and a difficult operation,
researches the way of efficiency of collective work in the process of project management, and aims to build this system bydeveloping the web application software. In the previous paper, the authors proposed the “Task-Chart” that manages projects byusing a version control and a tabular interface.
In this study, the authors added a visualization function to the "Task-Chart" in order to overlook the whole project from different
viewpoints based on different purposes by using a key of date, progress, term, priority, person, and so on. Finally, the authors
propose effective project management method to keep history and manage through each different work style.

1. 概要

くなる問題がある.
また, ソフトウェア開発や作品制作など, 各専門分野でのプロ

本研究は, 主に物を制作するプロジェクトにおいて, 専門知

ジェクトの管理方法を見てみると, 下記のように一つのプロジェ識や難しい操作を必要とせずに利用できるユーザーフレンドリ

クトでも, 分野ごとに異なった専門手法が導入され, 別々に運ーな Web アプリケーションの開発と, そのシステムの実現を目用されている現状がある.

指すものである.

(1) ソフトウェア開発手法

これまでの研究では, デザイナーやプログラマーといった異分散バージョン管理の手法を用いて, 変更をソースコードのなる役職間の連携に関する問題点や現状を踏まえ, プロジェク修正差分として管理し, 開発を進める.

トを円滑に進めるための改善手法を提案, その手法に基づく(2) プロジェクトマネジメント手法

Web アプリケーションの構築し, フィードバックを行ってきた.

マイルストーンを設定し進行状況を管理し計画的に進行を行今期研究では, プロジェクトにおけるタスクをバージョン管理とう. また, アーンドバリュー評価や, バーンダウンチャートによっ

表形式のインターフェースによって管理する「タスクチャート手てプロジェクトの進捗状況を数値によって可視化し, 計画を常法」に, 日時・進行度・期限・優先順位・制作者等をキーとし,に見直しながら最終目標に到達させる.

目的別の切り口から全体を閲覧できるビジュアライゼーション機(3) 作品制作における, 制作者の手法

能を導入することによって, プロジェクトの過程を残しながら,主に作品を納期までに仕上げるために, 担当ごとにスケジュ様々な役割に応じて効率的にプロジェクトを管理する手法を提ール管理をしながら行う方法が一般的である. 制作では, 途中示する.

経過などをやりとりしながら, その都度調整を行う.

2. 背景
2.1 異なるプロジェクトタイプ・役職間の連携の問題
異なる分野間の人々が連携するプロジェクトでは, 分業によって情報共有が困難となり易く, プロジェクトの全体像が見えにく†1 首都大学東京システムデザイン学部

一方で, 同じプロジェクト内でも, デザイナーとソフトウェア開発者との連携など, 管理手法が異なる分野間の連携をしなければならない状況がある. こうした異分野間の連携を行うプロジ
ェクトの場合, 全体の進捗状況等を他分野から俯瞰的に把握することは, いっそう困難となり易い.

Tokyo Metropolitan University© 2015 Information Processing Society of Japan219

2.2 導入障壁の問題
プロジェクトの進行を補助するためのツールとして, 多くのプロジェクト管理ソフトウェアの既往事例がある.
既往事例は大きく分けて, 専門的ソフトウェアと, 簡易的ソフトウェアに分類することができる.
一般のユーザーは, 多くが簡易的なソフトウェアを導入しているが, こうした管理ソフトウェアの多くは日程管理の機能に限られており, プロジェクトを効率的に管理できる専門手法が導入されていない場合が多い.
一方で, 専門手法を利用する管理ソフトウェアは利便性がある反面, 専門手法に独自の操作方法や事前知識が必須となってしまうことが導入障壁となり, 一般のユーザー同士が管理ソフトウェアを導入する際には利用されてない傾向にある.
図 1. idea in 全体像
2.3 タスクチャート手法の導入
こうした現状の問題点を解決するため, 本研究では,
i)各分野の人々が利用でき, プロジェクトの進行状況をひと目で俯瞰的に把握できる.

ii)

各分野で利用されている様々な専門手法を簡素化して実装するアプローチを行い, 一般ユーザーでも専門手法が直感的に利用できる.

上記 2 点を重視し, プロジェクトにおける課題（＝タスク）を表形式に管理するインターフェースと, 主にソフトウェア開発で用いられるバージョン管理の手法でファイルを管理できる, 「タスクチャート手法」を提案した. また, 本システムを利用した Web アプリケーション(idea in)の構築・運用し, そのフィードバックを行った. (図 1)
タスクチャート手法では, 横軸にチームごとのカテゴリーを,
図 2. 差分管理とコミュニケーション表示されているボックスがプロジェクトにおけるタスクを表し, それらを簡易的な時系列で表形式に整理することによって, プロジェクトの全体像を表現する.
多くの管理ソフトウェアで用いられるタスク管理や, 期限による工程管理を, 表形式のインターフェースで管理できるようにした

3. 目的別可視化機能
3.1 現行システムの改善案の検討ことで, 今どのチームで何が行われているのか, どこまで進捗し今期研究では, 本手法を利用した Web アプリケーションの運ているのかといったプロジェクトの全体像を, ひと目で俯瞰的に用の結果, 閲覧できる情報が平面的になる課題が挙げられた.

見渡すことを可能とした.

2.1 の背景で指摘したとおり, プロジェクトは分野ごとによってまた, タスクを開いた画面の右パネルではファイルとその簡易進行方法が異なるため, 各自の役割の違いにより閲覧すべき的な差分管理として閲覧することができ, いつ誰がなんのファイ情報が異なる. 例えば, プロジェクトの統括者は, 全体の進捗ルの更新を行ってきたか, その過程を閲覧することができる.

状況を把握しながら, 各役職に指示を与えてプロジェクトを進反対の左パネルでは, そのタスクに対して掲示板形式で簡易行させる. 一方で, 制作担当者は, 自らのタスクを優先的に進的なコミュニケーションをとることができる. （図 2）

めるためにタスクの重要度を重視するとともに, 関係する担当

こうした簡易的にビジュアル化されたインターフェースにより,間の進捗を優先して把握しなければならない. また, 経理担当

差分管理や工程管理といった専門的手法の概念に抵抗のあっ者の場合は, コストを優先して把握しなければならない.

た利用者層も専門知識を覚えることなく利用でき, また今までここうした認識事項の違いは, １.2 で挙げた制作手法の違いのうした専門手法を意識してこなかったユーザーグループにおいように, それぞれの役割の違いが連携を行う際の齟齬につながても, 本システムを利用することで過程を残しながらプロジェクトる.の管理を行うことが可能となる.

また, 一方でフィードバックから, アプリケーションの操作においても, タスクとなるアイテムを手動で時系列のみの表形式で© 2015 Information Processing Society of Japan220

整理する機能は閲覧したい情報が分散してしまう UI 上の問題が挙げられた. 時系列のみでタスクを表示した場合, 過去のタスクが画面下に押しやられてしまうため, 効率的にプロジェクトを閲覧できないケースがあった.
そこで, 簡易的な時系列のみによる整理ではなく新しい指標を加えることで, これら問題点の改善を図った.
3.2 多面的切り口からのプロジェクトの可視化
前述の問題点を解決するため, 様々な立場の人間が異なる
図 3. 多面的切り口からのプロジェクトの可視化する指標でプロジェクトを閲覧できるように, 各自が重視する事項で優先して抽出して可視化できる機能（目的別可視化機能）を提案する.
本機能では, これまで簡易的な時系列のみで整理されてい4. 機能概要
3 で述べた目的別可視化機能についての概要を以下に示す.

たタスクの管理を, 選択された基準をもとに動的にソートして一覧表示でき, プロジェクトを様々な切り口から多面的に捉えるこi)

タスクを表すボックスに, 付加情報を持たせる. (図 4)とができる. (図 3)ii)

付加情報は, ユーザーによるタスクの編集, 移動, 優先度の変更, 時間の推移などによって自動的に更新される.

基準は日時・進行度・期限・優先順位・制作者・コスト等を設定し, 閲覧者はそれぞれをキーにして, タスクチャートの画面をiii)

ユーザーは, 日時・進行度・期限・優先順位・制作者・コス適宜切り替えることができる. これにより, プロジェクトを時系列トなど, 付加情報から参考にしたい閲覧基準を選択し, このみの一面的な情報からだけでなく, それぞれの立場上で必れらをキーとして保存する.

要な事項を優先して閲覧することが可能となる.

iv)

更新された情報をもとに, ユーザーが選択しているキーを例えば, プロジェクトの統括者においては「進行度」をキーに縦軸の指標にしてタスクをソートし, ビューの更新を行う

してタスクを表示する. これにより, タスクの進捗状況を基準に（タスクの再配置）. この工程はビューの更新のみを行い,プロジェクトを俯瞰でき, 遅延しているタスクを把握しサポートに付加情報の変更は行わない. (図 5)

つなげることができる. また, 制作担当者は, 「重要度」や「日時」をキーにして表示することで, 重要なタスクを中心におきつつ,関連するタスクの進捗や, 制作されているファイルを把握することが可能となる.
3.3 利用の想定
また, こうしたプロジェクトを様々な側面から捉える機能は, 現時点の進捗状況だけでなく, プロジェクトをあとから振り返る場合にも効率的に利用できる. 時系列だけではなく, 様々な切り口からプロジェクトが進行してきた過程を追うことができるため,プロジェクトの反省や改善を行う際に, 情報の把握が行い易い.

図 4. タスクに情報を付加

また, 本機能が効果的に利用できる分野として, アートプロジ
ェクトの分野がある. アートプロジェクトは一度きりのイベントとなる場合が多いため, 後発のプロジェクトが以前に開催されたイベントの手順を参考にするための資料が失われていることが多く, 過程を残すことが重要とされてきている現状があった. [4][5]本システムはプロジェクトの進行と, 軌跡を残すことを目的としており, こうした事例に対して有効に活用できる可能性がある.
目的別にプロジェクトを俯瞰できるようになったことで, 過去のプロジェクト状況を多面的に閲覧することができるようになり, 後発のアートプロジェクトのための軌跡の体系化に応用できることが期待できる.
図 5. 選択されたキーをもとに再配置© 2015 Information Processing Society of Japan221

5. システムの実装
システムはこれまでと同様, Node.js を用いて Web アプリケーションの形態で実装を行う.
今回の目的別可視化機能では, クライアントサイドにて動的にビューの変更と構築を行う必要がある. また, 更新情報は多岐にわたるため, それに伴うビューの更新は非常に頻繁に行われることとなる. こうしたことから, 仮想 Dom[8][9]を用いたライブラリによるビューの更新が設計に効果的に利用できる可能性があり, 導入の検討を行っている.
また, モジュール管理ライブラリを利用することで, フィルタリ

Systems Application, 2008. DEXA'08. 19th International Workshop on(pp. 233-237). IEEE.
9) Matt-Esch/virtual-dom : https://github.com/Matt-Esch/virtual-dom10) Microsoft Project :http://www.microsoft.com/japan/project/default.aspx11) dotProject : http://www.dotproject.net/
12) 5pm : http://www.5pmweb.com/
13) Backlog : http://www.backlog.jp/
14) Brabio! : http://brabio.jp/
15) Zoho Project : http://www.zoho.jp/projects/16) Google Groupe : https://groups.google.com/
17) ChatWork : http://www.chatwork.com/
18) Fluent : http://fluent.io/19) サイボウズ Live! : https://live.cybozu.co.jp/

ングや移動のアルゴリズムに, サーバー側とクライアント側で同一のコードを再利用することが可能となり, 機能の重複が多い
本アプリケーションでは開発を効率的に進めることが可能となった.
一方で, プロジェクトを円滑に進めるための管理ソフトウェア
としては, 多人数の同時操作でも情報がシームレスに同期され,いつどの端末で見ても最新の情報が閲覧できることが重要視される. 前回の報告では, 更新処理に定期的にポーリングを行う
Ajax を用いた処理から WebSocket[a]通信を利用した処理に変更することよって, サーバー負荷の少ない更新処理を実現することが可能となったが, 今回の実装においても, 上記処理の利点は大きいため同様の更新処理を採用した.

6. 今後の展望
以上の機能により, タスクチャート手法を用いた, プロジェクトを目的別の切り口から可視化する機能について述べた. 今後も引き続き, 具体的なプロジェクトでのテスト運用によってシステムの妥当性について検討を図り, 早期の実現を目指してフィードバックを踏まえた改善を行っていく予定である.

参考文献
1) 西村克己(2000, 7). 『よくわかるプロジェクトマネジメント: 入門マネジメント & ストラテジー』, 日本実業出版社
2) 内館町子(2008, 4). 『ひと目でわかる Microsoft Office Project2007』, 日経 BP ソフトプレス
3) Project Management Institute, inc.(2004). A Guide to the ProjectManagement Body of Knowledge (PMBOK Guide)4) 帆足亜紀(2013, 3). 『アートプロジェクト運営ガイドライン―運用版』, 公益財団法人東京都歴史文化財団 東京文化発信プロジェ
クト室5) アート・アーカイブ・キット | Tokyo Art Research Lab :http://www.tarl.jp/cat_output/cat_output_record/10411.html
6) Stoyan Stefanov(2010, 9) “JavaScript Patterns Build Better
Applications with Coding and Design Patterns” O'Reilly Media
7) WebSockets | MDN :https://developer.mozilla.org/ja/docs/WebSockets
8) Psaila, G. (2008, 9). Virtual DOM: An Efficient Virtual Memory
Representation for Large XML Documents. In Database and Experta WebSocket は, ブラウザとサーバー間で双方向通信を可能にする通信プロトコル技術の一つで, 応答のためにサーバーへリクエストを送ることなく, イベントドリブンなレスポンスを受信できる© 2015 Information Processing Society of Japan222