GrapeCity.devlog

グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の、製品のTIPSや発売などに関する最新情報をお届けします。

Spread.Viewsでつくるカンバンボード

こんにちは。今回は弊社のJavaScriptライブラリ製品「SpreadJS(スプレッドJS)」に収録のグリッドライブラリ、「Spread.Views(スプレッドビュー)」を使用したカンバンボードの作り方をご紹介したいと思います。

カンバンボード?

そもそもカンバンボードとはなんでしょうか?これは「カンバン方式」と呼ばれるプロジェクト管理手法で使用する「ボード」のことです。もっとも手軽な実現方法として、下図ようにホワイトボードを使ったやり方があります。

カンバンボード

ボードにペンで区切り線を引いてエリアをつくり、それぞれに見出しをつけた後、タスクの概要を書いた付箋を貼って作業の進捗状況を管理します。ボードを一瞥するだけでプロジェクトの現状を把握できる便利なボードが、このカンバンボードです。

近頃は、ソフトウェア上でこのボードを目にするケースも多くなってきました。有名なものでは、Atlassian(アトラシアン)社のTrelloがあり、世界中の開発プロジェクトでこの「カンバンボード」UIが使用されています。

あなたのアプリにもカンバンボード

このように昨今のアプリケーションUIとして存在感を高めつつあるカンバンボード、SpreadJSに収録のSpread.Viewsライブラリを使えば、ご自身のアプリケーションでも簡単に実現可能です。以下で早速作ってみたいと思います。

利用するデータ

次のようなデータを使い、開発プロジェクト管理を想定してカンバンボードを作っていきます。

タスク名概要担当者現在の状況
ビジネスロジック UIとロジックの連携部 開発部 山田 設計中
画面 アプリ画面の開発 開発部 佐藤 開発中
データベース DB設計と構築・管理 開発部 松島開発中
クラウド同期 設定のcloud保存 開発部 亀井 開発中
課金システム 支払いシステムの開発 開発部 田中 テスト中
ユーザー管理 利用者管理の開発 開発部 三井 テスト中

開発のタスクと概要説明、担当になっているメンバー、そして現在の状況をまとめたレコードデータ群です。JavaScriptのコードとしては以下のようになります。

// 開発状況のデータ
var data = [
    {task: "ビジネスロジック", assignto: "開発部 山田" ,description: "UIとロジックの連携部", status: "設計中" },
    {task: "画面", assignto: "開発部 佐藤", description: "アプリ画面の開発", status: "開発中" },
    {task: "データベース", assignto: "開発部 松島", description: "DB設計と構築・管理", status: "開発中" },
    {task: "クラウド同期", assignto: "開発部 亀井", description: "設定のcloud保存", status: "開発中" },
    {task: "課金システム", assignto: "開発部 田中", description: "支払いシステムの開発", status: "テスト中" },
    {task: "ユーザー管理", assignto: "開発部 三井", description: "利用者管理の開発", status: "テスト中" }
];

基本のグリッド表示

Spread.Viewsはグリッドビューをベースに様々なデータ表現を可能にするJavaScriptライブラリです。まずは始めに上記のデータをグリッド表示してみたいと思います。

オーソドックスな表形式の表現は短いシンプルなコードで実現できます。以下のサンプルをご確認ください。


カード型のUIを実現する「CardLayout」

次にカンバンボードUIの特徴である「カード型のデータ表示」を実現したいと思います。データをグリッド形式で保持しながら、その「レイアウト」を大胆に変更できるのがSpread.Viewsの大きな特徴です。データのレイアウトを「CardLayout」に変更すると、データレコードが以下のようにカード形式で表示されるようになります(カードのデザインにはCSS設定を使用しています)。

このようにデータのレイアウトを変更した後でも、Spread.Viewsの土台となっているグリッド機能が使用できます。各レコードにある「現在の状況」でグルーピング表示すると、カード型のUIを保持したまま以下のような表示を実現できます。


グルーピングのレイアウトを変更する「TrellisGrouping」

「多彩で柔軟なデータ表現」というコンセプトで開発されたSpread.Viewsでは、グルーピング時のレイアウトも変更可能です。グループ化した場合のレイアウトとして「TrellisGrouping」を設定すると、各グループのエリアが横方向に並びます。これで「カンバンボード形式のUI」の完成しました。

なお、各グループ内のカードはもちろん、マウス操作による移動が可能です。

カンバンボード

Spread.Viewsで業務アプリケーションに豊かなUI表現

いかがだったでしょうか。今回はSpread.ViewsによるカンバンボードUIの実現方法をご紹介しました。一からつくると難しいUIも、SpreadJSなら簡単に実現できる場合があります。Spread.Viewsには他にも、ガントチャート表示やタイムライン表示といったユニークなレイアウトが用意されています。業務アプリケーションの表示をより豊かにして可能性を広げるSpread.Views、弊社サイトのデモでぜひお試しいただければ幸いです。

  • グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉ではエンジニア経験者を幅広く募集しています。
  • グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の製品のデモアプリケーションをお試しください。