Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

基本機能が備わったガントチャートコントロール「GanttView for WPF」を試してみる

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2017/07/14 14:00

 業務アプリケーションの開発でスケジュールやタスクをガントチャート形式で表示したいという要望は多くありますが、自前でガントチャートを実装するのは大変で、工数も金額も膨れがちです。期限が先に決まっている案件であれば開発チームに負担がかかり、金額面ではお客様に負担がかかってしまいます。今回はそのような場合に高機能なガントチャートをアプリケーションに組み込めるGanttView for WPFについて紹介します。

今回紹介するコンポーネント

 2017年5月17日にComponentOne Studioの新しいバージョン「ComponentOne Studio 2017J v1(以下 ComponentOne Studio)」がリリースされました。

 ComponentOne StudioはWFP、Windows Forms、UWPといったさまざまなアプリケーションに便利な機能を追加できるコンポーネント集ですが、2017J v1で更に多くの機能が追加され、より便利になりました。

 その中でもWPFアプリケーションにガントチャート機能を追加できるコンポーネントがGanttView for WPFです。

GanttView for WPFとは

 GanttView for WPFはガントチャート機能を提供するコンポーネントです。コンポーネントの初期状態でガントチャートとして十分な機能を備えていることに加えて、プログラミング操作でタスクなどを柔軟に編集できる点と、WPFのテンプレートを利用したデザイン面での高いカスタマイズ性があります。

 さまざまなプロジェクトの工数、進捗を管理する機能をアプリケーションに追加することができます。

対象読者

 Visual Studioを利用してアプリケーションを作成した経験がある、またはC#、Visual Basicなどの.NET系言語での開発経験がある方。

必要な環境

 GanttView for WPFを利用するには以下の環境が必要となります。

  • Visual Studio 2012/2013/2015/2017 日本語版
  • .NET Framework 4.5.2/4.6/4.6.1/4.6.2/4.7

 本記事はVisual Studio Enterprise 2015、.NET Framework 4.6環境で画像キャプチャーの取得、動作検証を行っています。

ComponentOne Studioの導入

 すでにComponentOne Studioを導入済みの場合も、アカウントでサインイン後に「ダウンロード」→「製品版」から最新のComponentOne Studioをダウンロードしてください。

製品版のダウンロード
製品版のダウンロード

 トライアル版として導入する場合は、以下のURLのフォームからトライアル版を申し込んでください。

 フォームに入力したメールアドレスにトライアル版のダウンロードアドレスが送信されるので、それを元にダウンロードを行います。

ComponentOne Studioのインストール

 ダウンロードしたZipファイルを展開し、解凍されたファイルからC1StudiosInstaller.exeをダブルクリックしてインストーラーを起動します。

インストーラーの起動
インストーラーの起動

 「ComponentOne Studioのインストール」ボタンをクリックします。

導入するプラットフォームの選択
導入するプラットフォームの選択

 導入するプラットフォームを選択します。

 今回はWPFを選択し右下の「次へ」をクリックします。各プラットフォームに赤い三角とエクスクラメーションマークのアイコンが出ている場合、すでにインストールされているコンポーネントを上書きするという警告です。新規インストール時は表示されていません。

インストールを開始する
インストールを開始する

 以下の画面が表示されれば、インストールの完了です。「完了」ボタンを押してウィンドウを閉じます。

インストールの完了
インストールの完了

GanttView for WPFを使ってみる

 それでは簡単なサンプルを作成して、GanttView for WPFの機能を確認してみましょう。

 Visual Studioを起動し上部メニューの「ファイル」→「新規作成」→「プロジェクト」をクリックします。

プロジェクトの作成

プロジェクトの作成
プロジェクトの作成

 「新しいプロジェクト」ポップアップウィンドウの左ナビから「インストール済み」→「テンプレート」→「Visual C#」→「Windows クラシック デスクトップ」を選択し、中央の一覧から「WPFアプリ」テンプレートを選択します。

テンプレートの選択
テンプレートの選択

 名前の項目は任意ですが本記では「GranttViewSample」という名前でプロジェクトを作成して進めます。

 ウィンドウの右下「OK」をクリックします。

コントロールの配置

 プロジェクトを作成すると、初期状態でMainWindows.xamlファイルが中央のデザイナー画面に表示された状態で始まります。MainWindows.xamlが表示されていない場合は、Visual Studioの右ナビの「ソリューションエクスプローラー」ウィンドウから「MainWindows.xaml」をダブルクリックして開きます。

MainWindows.xamlが開かれたデザイナー画面
MainWindows.xamlが開かれたデザイナー画面

 左側のツールボックスから「C1GanttView」をドラッグしてデザイナー画面にドロップします。

ツールボックスからC1GanttViewをドラッグする
ツールボックスからC1GanttViewをドラッグする
デザイナー画面にドロップする
デザイナー画面にドロップする

 デザイナー画面のC1GanttViewを選択し、プロパティウィンドウの「名前」欄にgranttViewと入力します。この名前は後からプログラムコードでC1GanttViewを操作する際に使用します。

プロパティウィンドウから名前を指定する
プロパティウィンドウから名前を指定する

プログラムコードからタスクを追加する

 画面上のC1GanttViewが読み込まれたタイミングでタスクを追加します。

 ソリューションエクスプローラー上の「MainWindow.xaml」左の三角アイコンをクリック展開します。展開されたMainWindow.xaml.csをダブルクリックして開きます。

Loadedイベントを設定する
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        granttView.Loaded += GranttView_Loaded;
    }

    private void GranttView_Loaded(object sender, RoutedEventArgs e)
    {
    }
}

 C1GanttViewが読み込まれたタイミングでLoadedイベントが発生するので、イベント発生時に呼び出されるイベントハンドラ-としてGranttView_Loadedメソッドを指定しています。

 GranttView_Loaded内でタスクを追加する処理を記述します。

タスクを追加する
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        granttView.Loaded += GranttView_Loaded;
    }

    private void GranttView_Loaded(object sender, RoutedEventArgs e)
    {
        // タスクを追加する処理
        Task task = new Task();

        // モード(ManualとAutomaticがあります)
        task.Mode = TaskMode.Manual;

        // タスク名
        task.Name = "記事を書く";

        // タスク開始時刻
        task.Start = new DateTime(2017, 6, 28);
        // 期間
        task.Duration = 7;

        // 進捗割合
        task.PercentComplete = 0.5;

        granttView.Tasks.Add(task);
    }
}

 using句に以下の2行を追加します。

usingを追加する
using C1.GanttView;
using C1.WPF.GanttView;

 なお「using System.Threading.Tasks;」がusing句にある場合は名前が重複しますので、不要な場合は削除するか、必要な場合は名前空間も含めて記述してください。

アプリケーションの実行結果
アプリケーションの実行結果

GanttView for WPFの基本機能(1)

 「GanttView for WPFを使ってみる」で作成したアプリケーションを元に、GanttView for WPFの主な機能を紹介します。

 これらの機能がデフォルトのコントロールに備わっているため、すぐに動作を確認できるのもポイントです。

タスクの追加

 プログラムからタスクを追加しましたが、デフォルトのアプリケーション上からも追加が可能です。

 画面上部の左から10個目にマウスオーバーして「タスクの挿入」と表示されるボタンをクリックすると、以下のようなダイアログが表示されます。

タスクの追加ウィンドウ
タスクの追加ウィンドウ

 各種項目を入力することでタスクを追加することができます。

 タスクには前述のサンプルで設定したタスク名や達成度、期間などを指定できます。タスクの開始日が他の先行するタスクに依存するような場合は、先行タスクとして他のタスクを登録することできます。

先行タスクの指定
先行タスクの指定

 スケジュールモードを自動スケジュールにすれば、タスクの開始日が先行タスク完了後に設定され、先行タスクの予定が変更になれば合わせて調整されるようになります。

先行タスクの指定
先行タスクの指定

 リソースタブからは、タスクの担当者リソースを指定できます。

リソースの指定
リソースの指定

 また開始日と終了日を同日に指定することでマイルストーンとして指定できます。以下の画像では記事を提出するというタスクをマイルストーンとして設定しています。

タスクの開始日と終了日を同日に指定する
タスクの開始日と終了日を同日に指定する
マイルストーンとして表示される
マイルストーンとして表示される

GanttView for WPFの基本機能(2)

サマリータスク

 複数のタスクをサマリータスクの下にまとめることができます。タスクが多い場合、サマリータスクは折りたたんで可動性を上げることができます。

サマリータスク
サマリータスク

タスクのグループ化

 タスクをグループ化して見やすくすることができます。

 以下は完了タスクと未完了タスクをグループ化した例です。

タスクのグループ化
タスクのグループ化

タスクのドラッグ操作による編集

 画面に表示されたタスクのバーを操作することでタスクの開始日を変更したり、タスクの期間を増やすことができます。

XML形式での保存

 XML形式でのガントチャートの書き出しにも対応しています。もし、別システムとの連携が必要な場合はこちらを利用すると良いでしょう。

ガントチャートの印刷

 印刷ボタンからガントチャートの印刷も行えます。紙を用いて会議でのレビューなどに利用できます。

サマリータスクの追加

 タスクをまとめたサマリータスクも利用できます。

サマリータスク
サマリータスク

作業の「やり直し」「元にもどす」処理

 間違った操作を取り消したり、取り消した操作を元にもどす機能もあります。もちろんCtr+Z、Ctr+Yのショートカット操作にも対応しています。

タスク名の変更

 タスク欄は編集可能になっているため、ダブルクリックすれば、すぐにタスク名を編集できます。

ズーム機能

 タスクが多く期間が長くなると、全体を見たり、詳細を確認したり、表示倍率を変えて表示したいことがあります。

 GanttView for WPFではズームイン、ズームアウトだけでなく、見たいタスクを中心にズームを行うことができます。

タスク一覧からタスクBを拡大したい
タスク一覧からタスクBを拡大したい

 「選択したタスクをズーム」ボタンで見たいタスクを拡大して見ることができます。

タスク一覧からタスクBを拡大したい
タスク一覧からタスクBを拡大したい

タスクの自動モード

 タスクの「タスクモード」項目を自動にすることで、先行タスクと期間を指定すると、タスクが自動で先行タスクに合わせて表示されます。

 自動モードであればタスクAの期日が伸びた場合などに、その他タスクも調整されます。

自動モードでは先行タスクなどの制約に従いタスクが配置される
自動モードでは先行タスクなどの制約に従いタスクが配置される
先行タスクを変更すると自動モードのタスクも調整される
先行タスクを変更すると自動モードのタスクも調整される

バーのカスタマイズ

 タスクのバーの見た目も柔軟に変更可能です。

タスクバーの表示をカスタマイズする
タスクバーの表示をカスタマイズする

 また行に表示する項目も「グリッド列」ボタンからカスタマイズ可能です。

グリッド列のカスタマイズ
グリッド列のカスタマイズ

タイムスケールの変更

 タスクの粒度によって、週間単位や月単位とタイムスケールを変えることができます。

タイムスケールの変更
タイムスケールの変更
タイムスケールの変更
タイムスケールの変更

まとめ

 ComponentOne Studio 2017J v1で新たに追加された「GanttView for WPF」の導入と基本的な機能の紹介を行いました。

 利用してみて感じたことは、標準機能として、ガントチャートで必要と思われる機能を十分に備えているという点と、XAMLの高いデザインカスタマイズ性を活かすことで、プログラミング工数を削減した開発が可能になるという点です。

 コンポーネントを利用するか、自前で作成するかを判断するポイントは、基本機能でどこまでの要求を満たすことができるかということと、基本機能で要求を満たせない場合に、必要な拡張性を備えていることにあります。GanttView for WPFはその両方のポイントを高い水準で満たしているコンポーネントです。また、サンプルの作成が簡単なので、仕様検討などで、すぐにサンプルを組んで動作を確認できるのも強みです。

 本記事でGanttView for WPFの機能について把握し、要件定義や提案にお役立ていただければ幸いです。

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 西村 誠(ニシムラ マコト)

     Microsoft MVP Windows Platform Development。  Flash、PHPの開発経験もあり国産ECサイト構築フレームワーク「EC-CUBE」の公式エバンジェリストでもある。  ブログ:眠るシーラカンスと水底のプログラマー  著書:基礎から学ぶ Windows...

All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5