フロントエンド開発でスプレッドシート機能の最短導入を実現するSpreadJSの使い方（7）条件付き書式

「SpreadJS（スプレッドJS）」は、WebシステムのフロントエンドでExcelやGoogleスプレッドシートのような機能を簡単に実現できるJavaScriptライブラリです。今回の記事ではSpreadJSに搭載された書式設定機能の特徴や用法をご紹介します。

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

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

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

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

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

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

この項では最もオーソドックスな例として、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引数と第3引数は、第1引数であるcomparisonOperatorの内容に応じて設定します。betweenやnotBetweenなど、2つの値を比較する必要がある場合は第2引数と第3引数にそれぞれ、値を設定します。また、lessThanやgreaterThanなど、演算子が必要とする値が1つの場合は第2引数のみに有意な値を設定します（第3引数の値は無視されます）。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

さいごに

弊社Webサイトでは、製品の機能を手軽に体験できるトライアル版を公開しております。SpreadJSをご検討の方はこちらもご確認ください。

また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問などがございましたら下記にて、お気軽にお問合せください。

• 問合せ先を確認する
• 個別相談会（Web会議）について確認する