GrapeCity.devlog

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

クラウド環境の対応ポリシーページを公開。Google Compute Engineも新たにサポート!

先日公開したActiveReports for .NET 12.0J、及びSPREAD for ASP.NETのService Packで、運用環境のサポート対象に「Google Compute Engine」を追加しました。

Google Compute EngineはGoogleが提供するクラウドコンピューティングのプラットフォーム、「Google Cloud Platform」のサービスの1つで、WindowsやLinuxの仮想マシンが使えるIaaS(Infrastructure as a Service)です。

これまでサポートしているIaaSは、Amazon EC2Azure Virtual Machinesの2つでしたが、今回の対応で人気の主要3大クラウドベンダーのIaaSをすべてカバーします。

また今回のサポート表明にあわせて、弊社.NET Framework開発支援コンポーネントにおけるクラウド、並びに仮想環境の対応ポリシーについてまとめたページを公開しました。

各サービスに対応している製品や、制限事項等の情報をまとめているので、クラウド環境上でのご利用をお考えのお客様は、ぜひ一度ご覧いただければと思います。

.NET 製品のGoogle Compute Engineへの対応予定は?

今回はActiveReportsとSPREADの2製品のみの対応表明でしたが、その他のASP.NET製品も順次対応していく予定です。最新情報はこのブログや前述の対応ポリシーページに随時掲載していきます。

その他のクラウドベンダーのIaaS上では使えないの?

IaaSの場合、仮想マシン上での利用ということになりますので、Amazon、Google、Microsoft以外のクラウドベンダーのIaaSであっても、仮想マシン上のシステムが製品の必要システムを満たせば、基本的にはグレープシティの.NET開発ツールは動作可能です。(運用環境での利用に限る)

「対応した」とか「サポートした」ってどういうこと?

これは弊社のテスト部門できちんと動作検証を行ったかどうか、ということです。現在対応を表明しているクラウドサービスについては、弊社のテスト部門でオンプレミスの環境同様のテストを実施し、問題の有無や、問題があった場合はその対応策を確認しております。

ですので、対応を表明していないIaaS上でも理論上は問題なく使えるはずです。

ただし、そのように対応を表明していない環境において見つかった問題については、調査や修正の対象とならず制限とさせていただく場合がありますので、その点はご注意ください。

クラウドサービス対応の最新情報はこちら

現在正式にサポートしているクラウドサービスについては、対応ポリシーページで確認できます。 サポートする環境が増えた場合や、何か問題が発見された場合など、随時情報を更新していきます。

記載のないクラウドサービス上で弊社製品をご利用したい場合は、ぜひ弊社「ツール事業部 営業部」、またはテクニカルサポートまでご相談ください。

お問い合わせの多いサービスは、次にサポートするサービス候補としての優先度が上がりますし、現時点で弊社で把握している問題点や解決法などの情報をご提供できる可能性もあります。

また、メールや電話ではなく直接会って相談したい、そんな方におすすめなイベントもあります。

製品の開発、サポート担当者に直接相談できます!

7月10日(火)に弊社の開発支援ツール販売30周年記念フォーラム「Toolsの杜(ツールのもり)」を開催します。

当日は営業部門だけでなく、企画、開発、サポートなど製品の担当者が一堂に会して対応に当たりますので、クラウドサービスへの対応の相談はもちろん、製品への様々な要望や困りごとを直接会って相談する絶好の機会です。無料のイベントになっておりますので、是非お気軽にご参加ください。

SpreadJSで実現する帳票画面(2)テーブルバインディング編

みなさん、こんにちは。今回は「SpreadJSで実現する帳票画面」シリーズの第二回目となる「テーブルバインディング編」をお送りいたします。

以前ご紹介した「セルバインディング編」では、Spread.Sheetsを使用して作成した請求書雛形に、セルバインディング機能を使って顧客データを結合し、簡易的な「Excel帳票」を実現しました。

今回はこの帳票に明細テーブルを加えて、より請求書らしい内容にしていきたいと思います。完成予想図は以下の通りです。

f:id:GrapeCity_dev:20180610232629p:plain

上の画像にあるように、シート上に明細テーブルを追加します。また、明細にある「金額」は数式で自動計算するようにして、その合計は「合計金額」部分に表示するようにしたいと思います。

f:id:GrapeCity_dev:20180610234715p:plain

テーブルを追加する

はじめにシート上にテーブルを追加します。テーブルの基本設定を行う以下の setTable 関数を作成して、前回作成したコードにある sheet.setDataSource のコール前に呼び出すように設定します。

function setTable(sheet){
    //販売リストのテーブルを作成します
    var table = sheet.tables.add("salesTable", 13, 1, 1, 4);

    //列の自動出力設定をオフにします
    table.autoGenerateColumns(false);
    
    return table;
}
window.onload = function(){
    // (途中のコード記載を省略しています)
    
    //雛形上にテーブルを設定します
    var table = setTable(sheet);
    sheet.setDataSource(source);    

    // (途中のコード記載を省略しています)
};

また、テーブルの追加にあわせて、setTemplate() で設定しているシート上の行数を少し増やしましょう。

function setTemplate(spread){
    // (途中のコード記載を省略しています)
    
    // 行列数を設定します
    var ROW_NUM = 16; // 13から16に変更
    var COL_NUM = 6;
    sheet.setRowCount(ROW_NUM);
    sheet.setColumnCount(COL_NUM);

    // (途中のコード記載を省略しています)
};

以下はこのコードの実行結果です。雛形に明細となるテーブルが追加されました。テーブル列の設定やデータ連結を行っていないので、テーブルのデータはまだありません。

f:id:GrapeCity_dev:20180610234759p:plain

テーブルにデータ連結する

次に、Spread.Sheetsの「テーブルバインディング」機能を使用して、テーブルに明細データを連結します。

前回使用した「セルバインディング」は、JavaScriptの連想配列をデータソースとして、クライアントに表示したスプレッドシートの特定箇所に、データソースの特定データを紐づけて表示させることができる機能でしたが、「テーブルバインディング」は同様のコンセプトで指定したテーブルにデータを表示させることができる機能です。

データの作成

テーブルバインディングの利用に先駆けて、テーブルに設定する明細データを作成します。今回はテーブルに表示するデータを"sales"として、以下のように定義したいと思います。前回セルバインディングに使用したデータソース"data"を編集して、以下のようにします。

var data = { postNumber: "〒981-3205",
             address: "宮城県仙台市泉区紫山3-1-4",
    	     name: "グレープ太郎",
    	     total: 128000,
	     sales: [ { item: 'OAモニタ', units:2, cost: 29800 },
	              { item: 'SDDユニット', units:2, cost: 25000 },
	              { item: '出張点検費', units:1, cost: 18400 }]};

テーブル列の設定とデータ結合

先ほど表示したテーブルに、列の情報(列の名称や列に設定する結合データのフィールド名)を設定して、データを結合できるようにします。前項で作成した setTable 関数に処理を追加して、以下のようにします。

function setTable(sheet){
    //販売リストのテーブルを作成します
    var table = sheet.tables.add("salesTable", 13, 1, 1, 4);

    //列の自動出力設定をオフにします
    table.autoGenerateColumns(false);

    //テーブルの列情報設定を行います
    var tableColumns = [];
    var names = ['品名', '数量', '単価', '金額'];
    var fields = ['item', 'units', 'cost', ''];
    for(var i=0; i<names.length; i++){
	var tableColumn = new GC.Spread.Sheets.Tables.TableColumn();
	tableColumn.name(names[i]); // 列の名称を設定します
	tableColumn.dataField(fields[i]); // 結合するデータのフィールド名を設定します
	tableColumns.push(tableColumn);
    }
    table.bindColumns(tableColumns);
    
    return table;
}

セルバインディングの際と同様にテーブルにもバインディングパスを設定し、データとテーブルを関連付けます。以下のように setTable のコール後にテーブルの bindingPath を呼び出し、データ'sales'とのテーブルを関連付けを行います。

window.onload = function(){
    // (途中のコード記載を省略しています)
    
    //雛形上にテーブルを設定します
    var table = setTable(sheet);

    //テーブルにデータをバインドします
    table.bindingPath('sales');
    sheet.setDataSource(source);    

    // (途中のコード記載を省略しています)
};

以下はこのコードの実行結果です。テーブルにデータ'sales'の内容が表示されるようになりました。

f:id:GrapeCity_dev:20180610234851p:plain

次はこのテーブルに計算式とフッターを設定して、明細に「金額」と「合計」が表示されるようにしましょう。

テーブルフッターと数式の設定

Spread.Sheetsのテーブルには、Excelのテーブルと同様に列名を使用した数式(構造化参照数式)とテーブル内容の集計などを表示するフッターの設定が可能です。setTable 関数に処理を追加して、以下のようにします。

function setTable(sheet){
    //販売リストのテーブルを作成します
    var table = sheet.tables.add("salesTable", 13, 1, 1, 4);

    //列の自動出力設定をオフにします
    table.autoGenerateColumns(false);

    //テーブルの列情報設定を行います
    var tableColumns = [];
    var names = ['品名', '数量', '単価', '金額'];
    var fields = ['item', 'units', 'cost', ''];
    for(var i=0; i<names.length; i++){
	var tableColumn = new GC.Spread.Sheets.Tables.TableColumn();
	tableColumn.name(names[i]); // 列の名称を設定します
	tableColumn.dataField(fields[i]); // 結合するデータのフィールド名を設定します
	tableColumns.push(tableColumn);
    }
    table.bindColumns(tableColumns);

    //テーブルに数式を設定します
    table.setColumnDataFormula(3, "=[@単価]*[@数量]");
    
    //テーブルに合計金額表示用のフッターを設定します
    table.showFooter(true);
    table.setColumnValue(0, "合計");
    table.setColumnFormula(3, "=SUBTOTAL(109,[金額])");
    
    return table;
}

このコードを実行すると、以下のようになります。明細に「金額」と「合計」が表示されるようになりました。

f:id:GrapeCity_dev:20180610234938p:plain

さらに、「単価」と「金額」がある列に書式を設定して、明細らしくなるようにします。setTemplate 関数に以下のような処理を追加します。

function setTemplate(spread){
    // (途中のコード記載を省略しています)
    
    // テーブルの金額表示部分の書式を設定します
    sheet.setFormatter(-1, 3, "¥#,##0");
    sheet.setFormatter(-1, 4, "¥#,##0");

    // (途中のコード記載を省略しています)
};

このようにすることで、テーブルの単価、金額部分に書式設定が適用され、以下のように¥マーク、3桁ごとのカンマ区切りで表示されるようになります。

f:id:GrapeCity_dev:20180610235011p:plain

合計金額の表示

これまでは結合データにある"total: 128000"を「合計金額」の部分に表示していましたが、テーブルで合計金額が計算できるようになったことにより、このデータを利用する必要はなくなりました。

今回は「合計金額」部分に"=E18"と設定することで、テーブルの合計部分に表示された金額を請求書の合計金額として表示することが可能です。ただ、このように直接セル参照を設定すると、テーブルに表示するデータ数が変わってしまった場合にフッター位置がずれてしまい、都度の再設定が必要になります。

再設定の必要なく、いつでもテーブルの合計が「合計金額」部分に表示されるように、テーブルのフッター位置を取得できる Spread.Sheets の関数 footerIndex と、別記事「名前ボックスの作成」でも使用した rangeToFormula 関数を使用して、以下のような処理を作成します。

function getTotalPosition(sheet, table){
    //テーブルからフッターの行位置を取得し、シートから該当セルを取得します
    var totalCellInTable = sheet.getCell(table.footerIndex(), 4);

    //取得したセルの位置を数式で使用できる文字列に変換します
    var refType = GC.Spread.Sheets.CalcEngine.RangeReferenceRelative.allRelative;
    var totalRefStr = GC.Spread.Sheets.CalcEngine.rangeToFormula(totalCellInTable, 0, 0, refType);

    return totalRefStr;
}

テーブルへのデータ設定後に上記の関数を使い、合計金額の表示設定をします。

window.onload = function(){
    // (途中のコード記載を省略しています)
    
    //テーブルにデータをバインドします
    table.bindingPath('sales');
    sheet.setDataSource(source);    

    //テーブルに表示された合計値を"合計"部分に表示します
    var totalCellPositionStr = getTotalPosition(sheet, table);
    sheet.setFormula(11,4,"=" + totalCellPositionStr);

    // (途中のコード記載を省略しています)
};

これで、テーブルに表示された合計が自動的に「合計金額」部分に表示されるようになりました。実際の動作とソースコードはこちらで確認可能です。


前回の状態からシートに明細表が加わり、グンと請求書らしい外観になってきました。さて、帳票というくらいですので、みなさん、これ、印刷したいですよね?

その動作、Spread.Sheetsなら可能です!

次回はSpread.Sheetsの印刷機能を使用し、この請求書を印刷したいと思います。どうぞお楽しみに!


開発者におすすめのフォーラム

7月10日(火)に弊社の開発支援ツール販売30周年記念フォーラム「Toolsの杜(ツールのもり)」を開催します。

今回の記事でご紹介したような弊社のJavaScript製品「SpreadJS」「InputManJS」「Wijmo(ウィジモ)」のご紹介や、製品の活用事例や最新の技術動向についてセッションも行います。ぜひご参加ください。

臨時休業のお知らせ(2018年7月10日(火))

誠に勝手ながら、弊社イベント「Toolsの杜(ツールのもり)」開催のため、2018年7月10日(火)は臨時休業日とさせていただきます。

7月10日(火)は、ソフトウェアアクティベーションの再認証・認証解除リクエスト、ライセンスキー発行、E-mailサポート、営業窓口、出荷業務などのサービスをお休みさせていただきます。
メールでのお問い合わせについては、休業日中も受信いたしますが、7月11日(水)以降に対応させていただきます。

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

2018年5月 - GrapeCity.devlog月間ランキング

こんにちは。
6月を迎え、梅雨入りの季節となりましたね。

さて、今月から月別のブログの人気記事をランキングにして、
どんな記事がよく読まれているのか、いまは何のテーマが熱いのかをご紹介します。

【5月】ブログ人気記事TOP10を発表!

★第1位


2019年5月1日が祝日に!?業務アプリのカレンダーの対応はどうする?

イレギュラーな休日対応…業務アプリのカレンダーは、どのように対応したら良いのでしょうか。「SPREAD for WPF」を例に、設定方法を紹介しています。

        f:id:GrapeCity_dev:20180605150048p:plain

SPREAD for WPFを例に紹介していますが、他のグレープシティの.NET製品も同様に休日情報を制御する方法を提供しています。制御方法さえ知っておけば、こういったイレギュラーな休日が発生した場合にも安心ですね。

 ★第2位


グリッドのセルに文字を入力した場合の不正な動作

Windows 10環境において、SPREADやMultiRowなどのWindowsフォーム用グリッドコンポーネントを使用したとき、セルに日本語を入力しても正しく表示されないことがあります。そういった時に参考にできる各製品の回避コードを紹介しています。
同様の方法で他コンポーネント、MultiRow、CalendarGridやTrue DBGridも回避できます。
ナレッジベースで詳細を解説していますのでこちらご参照ください。

★第3位


Webフォームの全角半角問題をInputManJSで解決する

たった3行(実質2行!)のJavaScriptコードで、ユーザーが入力に迷うことのない、高機能テキストボックスを実現する例を紹介しています。
InputManJSは日本のWebフォーム開発に役立つこと間違いなしです♪
Webサイトでは、今回ご紹介した機能を含め製品の動作を実際に確認できるオンラインデモも公開中です。

第4位

Visual Studio 2017(バージョン15.7.1)で発生するビルドエラー

 Visual Studio 2017の最新バージョンを利用した場合に、ComponentOneの一部で不具合が発生してしまうことが判明し、その原因と対策を紹介しています。
※【2018/6/7 回避方法を追記】

第5位

業務アプリケーションの実践的なアーキテクチャを公開 ー CodeZine記事

弊社の“PR”記事を東京のSI企業に勤務する中村充志さんに執筆いただき、開発者のための実装系Webマガジン「CodeZine」 にて公開されました。
MicrosoftのサンプルデータベースであるAdventureWorksを利用し、アプリケーションのアーキテクチャを設計し開発する仮想プロジェクトについて解説しています。
著者の中村さんが記事の結びにこう書かれています。

「本稿が、アプリケーション構築にお悩みの方の一助になれれば幸いです。」

自分の考えや方法をお持ちの方でもきっと、お役立ていただける記事となっています。

第6位

第7位

第8位

第9位

第10位


第1位はTOP10の中でも群を抜いてのPV数でした。
業務アプリのカレンダーUIコントロールではイレギュラーな休日にどう対応するのか...という点と、来年のGWが10連休になるかもしれないという期待の面でも関心の高さが伺えました。
第5位は開発者のための実装系Webマガジン「CodeZine」で公開後、内容の濃密さや題材の注目度の高さから、SNSを中心に話題を集めました。

 

<番外編>


開発者におすすめフォーラム♪

7月10日(火)に東京で開催される、グレープシティ開発支援ツールの30周年を記念したフォーラム「Toolsの杜(ツールのもり)」について、もうチェックしていただけましたか?
豪華なスピーカー陣を迎え、グレープシティ製品を活用した事例紹介セッションや、業務アプリケーションの将来に関連する技術セッションを実施する予定です。
我々が言うのもなんですが、大変豪華なフォーラムとなっております。
皆さまお誘い合わせのうえ、ご参加ください。

気になるセッション内容・お申込みは以下から[参加費無料]



じめじめと雨が続いて気分は下がる一方ですが、今月も張り切って皆さまにお役立ていただけるブログを更新していきたいと思います!
来月は6月のGrapeCity.devlogの人気記事を発表いたしますので、どうぞお楽しみに☆彡

デスクトップアプリでEntity Framework Coreを使ってみる

前回はEntity Framework Coreを使ってAzure SQL Databaseにアクセスし、ComponentOne for ASP.NET MVCのFlexGridでデータを表示してみました。

今回はデスクトップアプリ(Windows Forms、WPF、UWP)でEntity Framework Coreを使ってAzure SQL Databaseにアクセスし、各プラットフォームのFlexGridでデータを表示する方法を紹介します。

  • Azure SQL Databaseの準備
  • クラスライブラリ(.NET Standard)の作成
  • Entity Framework Coreのインストール
  • モデルの作成
  • デスクトップアプリの作成
  • 確認してみる
  • 最後に
  • 開発者におすすめのフォーラム
続きを読む
Copyright © GrapeCity, Inc. All Rights Reserved.