SpreadJSで実現する帳票画面（4）デザイナ編

Spread.Sheetsデザイナ

Spread.Sheetsデザイナは、Spread.Sheetsで表示する画面をGUIベースでデザインできる開発支援アプリケーションです。デザインにおいてプログラミングは一切必要ありません。ExcelライクなUIと操作性で誰でも簡単に使用でき、コーディングするよりも遥かに短い時間で、シートに表示させる雛形や初期画面を作成できます。

Spread.Sheetsデザイナで作成した画面データはJSON形式での保存が可能です。このJSONデータを本体ライブラリのfromJSONメソッドでロードすることによって、アプリケーション上のSpread.Sheetsにデザインした内容を表示できるようになります。

既存の資産を利用できる「Excelインポート機能」

Spread.Sheetsデザイナには、本体ライブラリと同様に「Excelインポート機能」が搭載されています。この機能を利用すると、既存のExcelファイルをベースにしながらSpread.Sheetsデザイナによる画面のデザインを行うことが可能です。

「セルバインディング編」では請求書雛形を一から作成しましたが、実際のシステム開発において、すでに運用中のExcel帳票ファイルなどがある場合、そのファイルを元にして画面のデザイン作業を実施できます。

以下は「セルバインディング編」の請求書雛形をExcelで作成し、Spread.Sheetsデザイナにインポートした例です。

なお、このインポートに使用したExcelファイルはこちらからダウンロード可能です。

Excel ライクにとどまらない便利な機能を搭載

ここまでに説明した機能と操作性から、ついつい「Excelライク」であることに目が行ってしまうSpread.Sheetsデザイナですが、アプリケーション開発支援という目的により重点を置いた、製品独自の便利な機能も搭載されています。

「セルバインディング編」ではsetBindingPathメソッドを使用したコーディングで、シート上の請求書雛形にデータをバインドしましたが、Spread.Sheetsデザイナを利用すれば、このデータ連結設定さえデザインの一環として実施することが可能です。

デザイナによるデータ連結設定

以降では、Spread.Sheetsデザイナを使用したデータ連結設定の方法についてご紹介します。

「セルバインディング編」ではコーディングで行なった、postNumber / address / name / total というデータの連結設定をSpread.Sheetsデザイナを使って実現したいと思います。

0. 準備

初めに、Spread.Sheetsデザイナ上で雛形を作成するか、こちらのExcelファイルをインポートして、デザイナのシート上に「セルバインディング編」と同じ請求書雛形が表示されている状態にします。

上記のスクリーンショットはExcelファイルを利用して雛形を表示させた例です。インポート後、スクロールバーとタブを非表示に設定しています。これらの設定はデザイナのメニューにある「設定」タブの「全般」で変更が可能です。

1. テンプレートデザインモードの起動

Spread.Sheetsデザイナのメニューにある「データ」タブをクリックして表示される「テンプレート」ボタンを押下します。

デザイナがテンプレートデザインモードになり、画面右側に「フィールドリスト」ペインが表示されます。

2. フィールド情報の作成

「フィールドリスト」ペインには、データ連結するデータソースのフィールド情報一覧が表示されます。フィールド情報の作成はこれから行うので、この段階でペインに表示されるのは「Source」ノードのみです。

「Source」ノードを選択すると表示される「+」ボタンをクリックすると、新しいフィールド情報を追加できるようになります。

請求書雛形に連結するフィールド情報”postNumber”、”address”、”name”、”total”を追加すると以下のようになります。

3. バインディングパスの設定

フィールド情報の作成が終わったら、バインディングパスを設定します。この操作によってsetBindingPathメソッドの実行後と同じ状態を画面データに設定することができます。

「フィールドリスト」ペインにある各フィールドのノードを、請求書雛形上のデータバインドしたい箇所にドラッグアンドドロップします。データバインドの対象となるセルにフィールド名が表示されるようになれば、設定成功です。

全てのフィールド情報をセルに設定したら、Spread.Sheetsデザイナのメニューにある「データ」タブをクリックして表示される「テンプレート」ボタンを再度クリックして、テンプレートデザインモードを終了します。

4. データの保存

テンプレートデザインモードを終了したら、このデータバインド設定を含む画面デザイン情報を保存します。デザイナの画面上部に表示されている保存ボタン（フロッピーディスクのアイコン）をクリックすると、JSON形式で画面データを保存できます。

なお、Spread.Sheetsデザイナの「エクスポート」機能を利用すれば、JavaScriptファイル形式によるデータ保存も可能です。この際、画面デザインのJSONデータ情報は、保存したファイルと同名の変数となって、JavaScriptファイルに出力されます。

5. 実行結果

以下のサンプルで、保存したJSONデータの読み込み結果を確認できます。

今回の場合、JSONデータやライセンスキーの記述を除く、メイン処理のソースコードは以下のようになりました。

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
// 連結データ
var data = {
postNumber: "〒981-3205",
address: "宮城県仙台市泉区紫山3-1-4",
name: "グレープ太郎",
total: 128000
};
//デザインデータを読み込みます
spread.fromJSON(template);
//連結データを設定します
var sheet = spread.getActiveSheet();
var source = new GC.Spread.Sheets.Bindings.CellBindingSource(data);
sheet.setDataSource(source);

すべてをコーディングで実装した「セルバインディング編」では、そのJavaScriptコード量が100行を超えましたが、今回のケースでは、Spread.Sheetsデザイナの利用によって20行以下のコード量になりました。

Spread.Sheetsデザイナで快適な開発

いかがだったでしょうか。Spread.Sheetsデザイナを利用すると、コーディングでは面倒な画面作成作業やデータバインディング設定を簡単に行なうことが可能となり、開発作業をを大幅に効率化することができます。

Spread.Sheetsライブラリを使った開発のお供に是非、Spread.Sheetsデザイナをご活用いただければ幸いです。

「SpreadJSで実現する帳票画面シリーズ」はこちら