GrapeCity.devlog

グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の最新情報をお届けします。製品のTIPSや発売情報、イベントのお知らせなどをいち早く発信中です。

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

みなさん、こんにちは。これまで三回に渡って連載してきました「SpreadJSで実現する帳票画面」シリーズ、今回は最終回となる「デザイナ編」をお送りいたします。

シリーズ第一回の「セルバインディング編」では、Spread.Sheetsに表示する請求書の雛形をプログラミングで作成しました。しかし実際のところ、こういった雛形やシート初期画面のデザインをコーディングで実施するのは大変です。

たとえば、コード設定がデザインにどう反映されたのかを確認するためには、アプリケーションを実行して画面表示してみなければなりません。また、調整が必要となった場合にはコーディングし直して、再び画面表示という作業を繰り返す必要があります。

こんなとき、SpreadJSに付属する開発支援アプリケーション「Spread.Sheetsデザイナ」を使用すれば、GUIベースで簡単にSpread.Sheetsの画面デザインを行うことが可能です。

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で実現する帳票画面シリーズ」はこちら

夏期休業日のお知らせ

夏期休業を下記のとおり、お知らせいたします。

夏期休業期間
 2018年8月11日(土)~ 8月14日(火)
  ※ 8月15日(水)より通常営業いたします。

休業期間中は、ソフトウェアアクティベーションの再認証リクエスト、テクニカルサポート、営業窓口、出荷業務のすべてのサービスを停止させていただきます。

また、休業期間中にいただきましたお問い合わせは、休業が明けてからの営業日に順次受け付けし、ご返答させていただきます。

ご不便をおかけいたしますが、何卒ご了承くださいますようお願い申し上げます。

                            グレープシティ株式会社
                                        ツール事業部

SPREADを組み込んだアプリをコンテナ環境で実行してみる

Dockerが登場して以来、アプリケーションの実行環境としてコンテナのブームは続いていますね。弊社の開発ツールもコンテナ環境上での利用について問い合わせを受けることがありますが、残念ながら2018年7月現在コンテナ環境での運用をサポートしている.NET開発ツール製品はまだありません。

とはいうものの、弊社の開発ツールを組み込んだアプリをコンテナ環境で実行した場合、まったく動かないということはありません。むしろいくつかのポイントを押さえれば問題なく実行させることも可能です。今回はSPREADのサンプルアプリをコンテナ環境で実行し、動作を検証してみたいと思います。

続きを読む

ブース出展します! 「Developers Summit 2018 Summer(デブサミ2018夏)」

ITエンジニアの祭典「Developers Summit 2018 Summer(デブサミ2018夏)」が
今年も7月に開催されます。

今年のテーマは「データが拡張する人や社会、これからのエンジニアの道標」。

f:id:GrapeCity_dev:20180712120640j:plain

テクノロジーがあらゆる業界に影響を与える時代、「データは新しい資源」と呼ばれるほど、データ活用が企業活動の要となっています。
また、AIは人間を脅かすもの、または人間の可能性を拡張するもの(拡張知能)などと、世相としても見過ごせない存在です。

データに向き合うエンジニアの知見や試行錯誤のシェアを通じて、
これからのエンジニアの役割と生き方を考える機会にしてみてください。
公式サイトでは、事前申し込みの受付を行っています。

グレープシティでは今年もブースを出展し、HTML5/JavaScriptライブラリ製品「Wijmo」と「SpreadJS」、「InputManJS」を中心にご紹介します。

デモアプリケーションを用意してお待ちしておりますので、
ぜひ会場までお越しください!

開催概要:

名称 Developers Summit 2018 Summer
会期 2018年7月27日(金) 10:00-17:45
主催 株式会社翔泳社
会場 ソラシティカンファレンスセンター
参加費 無料(事前登録制)

 

イベントの詳細・お申し込みは以下から

本日開催 ー Toolsの杜(ツールのもり) 2018年7月10日 ―【ニュース記事のリンクを追加】

2018年7月10日(火)東京・八芳園で、グレープシティ開発ツール30周年記念フォーラム「Toolsの杜( ツールノモリ )」を開催します。
9日に募集を締め切りましたが、数多くのお客様から参加登録のお申込みをいただき当日を迎えることができました。

昨夜のうちに会場準備も終え、今朝は最終確認を行っております。
仙台から移動するメンバーも、東北新幹線で仙台を出発しました。会場ではオリジナルのスタッフTシャツを着用し、みなさまのお越しをお待ちしています。

f:id:GrapeCity_dev:20180710090659p:plain:w450

グレープシティの中身

午前は弊社を代表し、会長、社長、事業部長によるオープニングセッションです。
これまでの歩みを振り返るとともに、製品をご愛顧いただいているみなさまへの感謝を込めた内容ですので、こちらはレポート記事として一般公開する予定です。

ランチセッションでは、2つの会場にわけて.NET製品とJavaScript製品の概要を紹介します。
あわせて講演会場の脇にデモコーナーを用意し、製品の担当者が待機します。

f:id:GrapeCity_dev:20180710090752j:plain:w450

パートナー各社のセッション

午後は弊社パートナー各社様からご提供いただくセッションです。
弊社製品を評価する場合のポイントや採用事例に限らず、システム開発の考え方や設計・開発手法など、各社様の得意分野を活かした講演を用意していただきました。来場者様には2つのトラックから選択していただくことになります。

後日レポートや資料を公開*1します。
都合があわず参加することができないみなさまにも、情報として提供する予定ですので、このGrapeCity.devlogでの発表をお待ち下さい。


※ 追記:2018年7月11日 開催ニュース記事が掲載されました。

*1:ただし一部のセッションについては、提供企業およびその顧客企業などの事情により、当日講演のみの公開になることはご了承ください。