システム開発のための脱/活Excel術(2) 書式設定

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

データ表現の幅を広げ可読性を高める「書式設定」

世の中で扱われる様々なデータには、その用途に応じた「書式」があります。特に、正確な情報伝達が求められるビジネスの世界において書式は重要な存在です。例えば請求書などで商品価格を示す際、「1万円」を単に「10000」とするのではなく、通貨や会計用の書式を使い「¥10,000」と表記すれば意味が明確になり誤読の可能性がグンと低下します。

書式設定の例

大きなメリットがある一方で、手動ではなかなか面倒くさいこの作業を代わりに行ってくれるのがExcelの「書式設定」機能です。豊富な一覧から書式を選択しセルや列に設定すれば、あとは自動で入力データに書式が適用されるようになります。

Excelの書式機能

Excelと高い互換性をもつSpreadJSは、この書式設定機能をばっちりサポートしています。豊富な書式のプリセットやデータに対する書式の自動適用など、ソフトウェア開発の観点では実装のハードルが高い同機能ですが、SpreadJSならわずかな設定で、システム利用者に向け強力な書式設定機能を提供することが可能です。

SpreadJSで実現する書式機能

SpreadJSの書式設定ではsetFormatterメソッドを使います。以下はB2セルに対し日付用の書式“yyyy年m月d日”を設定する例です。

// セルに書式を設定します
sheet.setFormatter(1, 1, 'yyyy年m月d日');

上記のコードを実行すると以下のような動作を確認することができます。たった1行のコード設定で、Excelと同様の書式機能が実現できてしまいました(コードの詳細と実動作はこちらでご確認いただけます)。

なお、この際、setFormatterメソッドの引数に設定する文字列にはExcelの書式記号を利用できます。そのため、普段Excelをご利用になっている方なら設定に迷うこともありません。例えば以下は、和暦を示すExcelの書式記号“[$-411]”を使い日付データに元号を表示しています。

// セルに書式を設定して、日付を和暦で表示します
sheet.setFormatter(1, 1, '[$-411]ggge年m月d日');

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

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

SpreadJSデザイナによる書式機能

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

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

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

ビジネスロジックにあわせた独自実装も可能

さらにSpreadJSでは、書式設定機能をカスタムして「Excelと同様」にとどまらない、より高度な動作を実現できるようになっています。以下に示すデモはその一例です。複数の条件に応じてフォント色が変わる、独自の書式設定を実装したものになります。



Excelでもセル値の変化などに応じて書式を変えることができる「条件付き書式」という機能がありますが、こちらの機能を活用すれば、スプレッドシートに含まれていない要素、例えばSpreadJS以外のUIやビジネスロジックの動作に応じて書式を変更することが可能です。

書式機能の詳細をデモでチェック

今回はSpreadJSを使い、Excelの書式機能をWebアプリケーション上で実現する方法についてご紹介しました。このように、一般には再現が難しい同機能もSpreadJSを使えば簡単に実現可能です。Excelを使った業務のシステム化案件にはぜひ、SpreadJSをご検討いただければ幸いです。

なお、今回ご紹介した機能はほんの一例です。弊社ウェブサイトでは、他にも数ある書式設定機能を網羅的に確認できる「チュートリアルデモ」をご用意していますので、こちらもご確認ください。