システム開発のための脱/活Excel術(7) 条件付き書式

Microsoft Excelを使った業務スタイル、システム化してさらに効率の良いものにしてみませんか。このシリーズでは高性能JavaScriptライブラリ「SpreadJS(スプレッドJS)」を使い、Excelの人気機能をアプリケーション上で実現する方法についてご紹介していきます。

データの視覚化を実現する条件付き書式

Excelに搭載されている機能の1つに「条件付き書式」があります。これはセルの内容などを条件としてシートに様々なスタイルを設定できる大変便利な機能です。この機能を活用することで、例えばシート上にある負の値だけを強調表示したり、入力値を視覚的に棒グラフで表現する「データバー」をセル内に表示したり、といった動作を自動で実現できるようになります。

セルの内容に応じて書式を適用するExcelの条件付き書式
セルの内容に応じて書式を適用するExcelの条件付き書式

このような動作を業務アプリケーション開発で実現する場合には、ちょっとした実装を行わなくてはなりません。シートやグリッド上にあるセルの状態を逐一監視し、条件がマッチしたタイミングで表示を更新するといった処理が必要になります。また、この際に扱う条件が少なければ処理も単純なもので済みますが、ビジネスロジックに併せて様々な条件を判別しなければならないとしたら、その実装や管理はなかなか大変です。

SpreadJSには、Excel互換の「条件付き書式」機能が搭載されています。この機能を利用すれば複雑な実装を行うことなく、アプリケーション上でExcelライクな条件付き書式機能を実現することが可能です。

SpreadJSで実現する条件付き書式

SpreadJSの条件付き書式設定ではConditionalFormatsクラスを利用します。Excelでは条件付き書式の設定にあたり豊富な「ルール」の利用が可能ですが、SpreadJSでは同クラスが備える以下のメソッドを使い、条件付き書式機能を実現していきます。

メソッド名設定できるルール
add2ScaleRule 2色カラースケールルール
add3ScaleRule 3色カラースケールルール
addAverageRule 平均との比較ルール
addCellValueRule セルの値ルール
addDataBarRule データバールール
addDateOccurringRule 日付ルール
addDuplicateRule 重複する値ルール
addFormulaRule 数式ルール
addIconSetRule アイコンセットルール
addSpecificTextRule 文字列比較ルール
addTop10Rule 上位/下位ルール
addUniqueRule 一意の値ルール

この項では最もオーソドックスな例として、addCellValueRuleメソッドを使いセルの値ルールによってセルの背景色を変化させる条件付き書式の実現方法をご紹介します。実装に必要なのは次に示す、わずか3ステップのみです。

  1. 条件のマッチ時に有効となるセルの書式(スタイル)を作成する
  2. 条件付き書式の適用範囲を作成する
  3. シートに条件付き書式のルールと1.のスタイル、2.の範囲を設定する

以下にコード例を示します。

// 条件のマッチ時に有効となるセルの書式(スタイル)を作成します
var style = new GC.Spread.Sheets.Style();
// セル背景色に赤を設定
style.backColor = 'red';

// 条件付き書式の適用範囲を作成します
var ranges = [new GC.Spread.Sheets.Range(2, 4, 6, 1)];

// シートに条件付き書式のルールと1.のスタイル、2.の範囲を設定する
sheet.conditionalFormats.addCellValueRule(
    GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.lessThan,
    0,0,
    style,
    ranges
);

条件付き書式のルール設定に使用したaddCellValueRuleメソッドにおける引数の詳細は以下の通りです。

引数パラメータ名機能
第1引数comparisonOperator比較演算子
第2引数value1最初の値
第3引数 value22番目の値
第4引数style条件が満たされた場合にセルに適用されるスタイル
第5引数rangesルールが適用されるセル範囲

第1引数のcomparisonOperatorでは、下記に示す演算子を設定し、ルールの詳細を定めます。

演算子機能
betweenセル値が2つのパラメータ値の間にあるかどうかを判定します。
equalsToセル値がパラメータ値と等しいかどうかを判定します。
greaterThanセル値がパラメータ値とより大きいかどうかを判定します。
greaterThanOrEqualsToセル値がパラメータ値以上であるかどうかを判別します。
lessThanセル値がパラメータ値より小さいかどうかを判定します。
lessThanOrEqualsToセル値がパラメータ値以下であるかどうかを判別します。
notBetweenセル値が2つのパラメータ値の間にないかどうかを判別します。
notEqualsToセル値がパラメータ値と等しくないかどうかを判定します。

第2引数と第3引数は、第1引数であるcomparisonOperatorの内容に応じて設定します。betweenやnotBetweenなど、2つの値を比較する必要がある場合は第2引数と第3引数にそれぞれ、値を設定します。また、lessThanやgreaterThanなど、演算子が必要とする値が1つの場合は第2引数のみに有意な値を設定します(第3引数の値は無視されます)。

上記のコードでは、セルが負の値となった場合にセルの背景色が変更されるよう、第1引数にlessThanを設定しています。このコードの実行例を以下に示します(“Run Project”をクリックするとデモが起動します)。


わずか3ステップでご覧のような条件付き書式動作を実現することができました。

SpreadJSデザイナでさらに簡単設定

コーディングによる設定に加え、製品に付属するSpreadJSデザイナを活用すればGUIを使った条件付き書式設定も可能です。同デザイナはExcelライクなGUIを備えるスプレッドシート設計のためのスタンドアロンアプリケーションです。以下の動画に示すように、このデザイナではExcelと同様の操作感でコーディングをせずに条件付き書式設定を行うことができます。

SpreadJSデザイナによる条件付き書式設定

こうして作成した設定はJSON形式データ(.ssjsonファイル)として保存可能になっており、プログラム上ではSpreadJSのfromJSONメソッドを使って読み込むことが可能になっています。

// 読込データ
var data = /* デザイナから出力した.ssjsonファイルの内容を設定します */;

// デザイナで作成したデータをSpreadJSに読み込みます
spread.fromJSON(data);

弊社のウェブサイトでは、このSpreadJSデザイナの動作をオンラインで確認できる「オンラインデザイナ」を公開していますので、ぜひ実際の動作をお試しください。

GUIによる条件付き書式設定機能を提供する

さらに、SpreadJSではユーザーによるGUIを使った条件付き書式の設定も簡単に実現できるようになっています。

この機能の実現にあたっては、SpreadJSに収録のコンポーネントである「リボンコンテナ」を活用します。リボンコンテナは、スプレッドシートのほか、Excelライクなリボンメニューや数式バー、ステータスバーなどを備える大変便利なコンポーネントです。このコンポーネントを活用すれば初期化処理を実行するだけで、リボンメニューからの条件付き書式設定機能を実現することが可能です。

以下はリボンコンテナの実行例です。リボンメニューにある[スタイル]から[条件付き書式]を選択し、ルールを設定することでアプリケーション上で簡単に条件付き書式が設定できることをご確認いただけます(“Run Project”をクリックするとデモが起動します)。


条件付き書式機能の詳細をデモでチェック

今回はSpreadJSを使い、Excelの条件付き書式機能をWebアプリケーション上で実現する方法についてご紹介しました。記事内ではセル値ルールを中心に機能を解説しましたが、ほかにも様々なルールを使い、条件付き書式を設定できるようになっていますので、そちらはぜひ、製品のチュートリアルデモでご確認ください。