Tweet
Tweet

Slide 1

Slide 1 text

SPREAD活用テクニック（データ入力・バインド・インポート編） グレープシティ株式会社 ツール事業部 プロダクトマーケティングチーム 村上功光

Slide 2

Slide 2 text

2 GrapeCity Developer Solutions はじめに - SPREAD について -

Slide 3

Slide 3 text

SPREAD - Excel ライクを実現するコントロール - 3 GrapeCity Developer Solutions 代表的な機能 • Excelのような外観と操作性 • 表計算 • チャート ラインナップ • Windows Forms • ASP.NET • WPF • JavaScript

Slide 4

Slide 4 text

How ? 今回のテーマ 4 GrapeCity Developer Solutions from Sever from DataBase from File

Slide 5

Slide 5 text

もっともオーソドックスなデータ設定の例 5 GrapeCity Developer Solutions CODE

Slide 6

Slide 6 text

すべてのセルに対するデータ設定を考える 6 GrapeCity Developer Solutions

Slide 7

Slide 7 text

アプローチ例 ： For 文によるデータ設定 7 GrapeCity Developer Solutions data CODE

Slide 8

Slide 8 text

アプローチ例 ： データバインド DataSource CODE

Slide 9

Slide 9 text

お客様からのご質問 9 GrapeCity Developer Solutions 全体に対して処理する API を使っても 内部では結局ループ処理をすると思うので、 動作結果は同じですよね？ 表示結果は同じですが、パフォーマンスが異なります

Slide 10

Slide 10 text

二つのアプローチを比較 10 GrapeCity Developer Solutions V.S. より高速 / より少ないコード量

Slide 11

Slide 11 text

今回のポイント 11 GrapeCity Developer Solutions ポイント バリエーションあふれる API を 正しいタイミングで活用することで SPREAD の性能を 存分に引き出すことが可能 ！

Slide 12

Slide 12 text

アジェンダ 12 GrapeCity Developer Solutions データバインディング ファイルインポート オブジェクト 1 2 3

Slide 13

Slide 13 text

13 GrapeCity Developer Solutions 1. オブジェクト

Slide 14

Slide 14 text

SPREADを構成するオブジェクト 14 GrapeCity Developer Solutions 1 6 2 3 4 5

Slide 15

Slide 15 text

SPREADを構成するオブジェクト 15 GrapeCity Developer Solutions 1 6 2 3 4 5 セル Cell 1 セル

Slide 16

Slide 16 text

SPREADを構成するオブジェクト 16 GrapeCity Developer Solutions 1 6 2 3 4 5 行 セル Cell 1 行 Row 2 セル

Slide 17

Slide 17 text

SPREADを構成するオブジェクト 17 GrapeCity Developer Solutions 1 6 2 3 4 5 行 列 セル Cell 1 行 Row 2 列 Column 3 セル

Slide 18

Slide 18 text

SPREADを構成するオブジェクト 18 GrapeCity Developer Solutions 1 6 2 3 4 5 セル Cell 1 行 Row 2 列 Column 3 テーブル テーブル Table 4

Slide 19

Slide 19 text

SPREADを構成するオブジェクト 19 GrapeCity Developer Solutions 1 2 3 4 セル Cell 1 行 Row 2 列 Column 3 4 シート テーブル Table 4 6 5 シート Sheet 5

Slide 20

Slide 20 text

SPREADを構成するオブジェクト 20 GrapeCity Developer Solutions 1 2 3 4 5 セル Cell 1 行 Row 2 列 Column 3 ワークブック （ SPREAD そのもの ) シート Sheet 5 テーブル Table 4 6 ワークブック Workbook 6

Slide 21

Slide 21 text

ハイパフォーマンスへの近道 21 GrapeCity Developer Solutions 1 2 3 4 5 セル Cell 1 行 Row 2 列 Column 3 シート Sheet 5 テーブル Table 4 6 ワークブック Workbook 6 処理の対象に注目して ヘルプをチェック 処理とベストマッチするオブジェクトと API を利用してデータ設定 使い慣れた API を 利用する前の 1 手間 ポイント

Slide 22

Slide 22 text

22 GrapeCity Developer Solutions デモ

Slide 23

Slide 23 text

23 GrapeCity Developer Solutions 2. データバインド

Slide 24

Slide 24 text

テーブル Table SPREAD のデータバインディング機能 24 GrapeCity Developer Solutions 2 3 5 行 Row 2 列 Column 3 5 6 ワークブック Workbook 6 4 1 1 セル Cell 1 テーブル Table 4 シート Sheet 5 1 4 5 ALL JS JS WPF 対応 SPREAD テーブルを対象にデータ連結する テーブルバインティング シートを対象にデータ連結する シートバインティング セルを対象にデータ連結する セルバインティング

Slide 25

Slide 25 text

「2. データバインド」 の目次 25 GrapeCity Developer Solutions テーブルバインディング セルバインディング シートバインディング 2.1 2.2 2.3 バインドの対象範囲 多い 少ない

Slide 26

Slide 26 text

26 GrapeCity Developer Solutions シートバインディング

Slide 27

Slide 27 text

シートバインディング 27 GrapeCity Developer Solutions DataSource データソース（配列や DB エンティティ）の 内容をシート全体に一括設定 フィールドのデータを自動判別し展開する 列の自動生成機能付き すべての SPREAD が備える 基本のデータバインディング機能 ポイント

Slide 28

Slide 28 text

シートバインディング コード例 28 GrapeCity Developer Solutions データソース（配列や DB エンティティ）の 内容をシート全体に一括設定 フィールドのデータを自動判別し展開する 列の自動生成機能付き すべての SPREAD が備える 基本のデータバインディング機能 ポイント SPREAD for Windows Forms SpreadJS

Slide 29

Slide 29 text

列の自動生成 29 GrapeCity Developer Solutions DB データ シートバインディング ID P_NAME DATE PERSON PRICE AMOUNT 1 用紙 A4 44044 佐藤 1280 25 2 用紙 A5 44044 佐藤 1280 34 3 用紙 B4 44045 豊川 1280 23 4 用紙 B3 44046 水島 1280 34 5 インク C 44047 大谷 3480 12 6 インク M 44048 須藤 3480 12 15 光沢紙 N 44057 海川 1280 1 16 光沢紙 S 44058 新田 1280 1 17 光沢紙 L 44059 近藤 1280 1

Slide 30

Slide 30 text

列の自動生成 30 GrapeCity Developer Solutions 1 用紙 A4 20年8月1日 佐藤 1280 25 2 用紙 A5 20年8月2日 佐藤 1280 34 3 用紙 B4 20年8月3日 豊川 1280 23 4 用紙 B3 20年8月4日 水島 1280 34 5 インク C 20年8月5日 大谷 3480 12 6 インク M 20年8月6日 須藤 3480 12 7 インク Y 20年8月7日 篠山 3480 12 8 オイル A 20年8月8日 阿藤 980 1 9 オイル B 20年8月9日 月島 980 2 10 オイル C 20年8月10日 後藤 980 1 11 インク 黒 20年8月11日 森里 3480 46 12 トナー 1 20年8月12日 浅坂 7890 2 13 トナー 2 20年8月13日 小山 7890 3 14 トナー 3 20年8月14日 江藤 7890 2 15 ラベル紙 N 20年8月15日 海川 1280 1 16 ラベル紙 S 20年8月16日 新田 1280 1 17 ラベル紙 L 20年8月17日 近藤 1280 1 ID P_NAME DATE PERSON PRICE AMOUNT DB データ ID P_NAME DATE PERSON PRICE AMOUNT 1 用紙 A4 44044 佐藤 1280 25 2 用紙 A5 44044 佐藤 1280 34 3 用紙 B4 44045 豊川 1280 23 4 用紙 B3 44046 水島 1280 34 5 インク C 44047 大谷 3480 12 6 インク M 44048 須藤 3480 12 15 光沢紙 N 44057 海川 1280 1 16 光沢紙 S 44058 新田 1280 1 17 光沢紙 L 44059 近藤 1280 1

Slide 31

Slide 31 text

列の自動生成 31 GrapeCity Developer Solutions 1 用紙 A4 20年8月1日 佐藤 1280 25 2 用紙 A5 20年8月2日 佐藤 1280 34 3 用紙 B4 20年8月3日 豊川 1280 23 4 用紙 B3 20年8月4日 水島 1280 34 5 インク C 20年8月5日 大谷 3480 12 6 インク M 20年8月6日 須藤 3480 12 7 インク Y 20年8月7日 篠山 3480 12 8 オイル A 20年8月8日 阿藤 980 1 9 オイル B 20年8月9日 月島 980 2 10 オイル C 20年8月10日 後藤 980 1 11 インク 黒 20年8月11日 森里 3480 46 12 トナー 1 20年8月12日 浅坂 7890 2 13 トナー 2 20年8月13日 小山 7890 3 14 トナー 3 20年8月14日 江藤 7890 2 15 ラベル紙 N 20年8月15日 海川 1280 1 16 ラベル紙 S 20年8月16日 新田 1280 1 17 ラベル紙 L 20年8月17日 近藤 1280 1 ID P_NAME DATE PERSON PRICE AMOUNT ID P_NAME DATE PERSON PRICE AMOUNT 1 用紙 A4 44044 佐藤 1280 25 2 用紙 A5 44044 佐藤 1280 34 3 用紙 B4 44045 豊川 1280 23 4 用紙 B3 44046 水島 1280 34 5 インク C 44047 大谷 3480 12 6 インク M 44048 須藤 3480 12 15 光沢紙 N 44057 海川 1280 1 16 光沢紙 S 44058 新田 1280 1 17 光沢紙 L 44059 近藤 1280 1 データ型を自動判別してバインディング （OFFにすることも可能です）

Slide 32

Slide 32 text

32 GrapeCity Developer Solutions テーブルバインディング

Slide 33

Slide 33 text

テーブルバインディング 33 GrapeCity Developer Solutions DataSource シート上のテーブルに対して データをバインディング 概要 SpreadJS

Slide 34

Slide 34 text

テーブルバインディング 34 GrapeCity Developer Solutions

Slide 35

Slide 35 text

シートバインディング と テーブルバインディングの相違点 35 GrapeCity Developer Solutions シートバインディング テーブルバインディング シートバインディングでは 1つのシートに1つ、データソースを設定可能 テーブルバインディングでは 1つのシートに複数、データソースを設定可能 SPREAD SPREAD

Slide 36

Slide 36 text

複数のデータソースを使った活用例 36 GrapeCity Developer Solutions データソース A データソース B

Slide 37

Slide 37 text

37 GrapeCity Developer Solutions セルバインディング

Slide 38

Slide 38 text

（再掲） テーブルバインディングでのバインド例 38 GrapeCity Developer Solutions

Slide 39

Slide 39 text

セルバインディングとデータ 39 GrapeCity Developer Solutions

Slide 40

Slide 40 text

セルバインディングとデータ 40 GrapeCity Developer Solutions 〒981-3205 宮城県仙台市泉区紫山3-1-4 グレープ太郎

Slide 41

Slide 41 text

セルバインディングの活用例 - SPREAD 帳票 - 41 GrapeCity Developer Solutions postnumber address name sales =SUM(・・・)

Slide 42

Slide 42 text

セルバインディングの活用例 - SPREAD 帳票 - 42 GrapeCity Developer Solutions setDataSourceメソッド で 設定するデータソースを切り替えると 帳票の内容も変わります

Slide 43

Slide 43 text

43 GrapeCity Developer Solutions 3. インポート

Slide 44

Slide 44 text

SPREADのインポート 44 GrapeCity Developer Solutions 1 2 3 4 5 セル Cell 1 行 Row 2 列 Column 3 シート Sheet 5 テーブル Table 4 6 ワークブック Workbook 6 6 SPREADのインポートとは、 ワークブック （ SPREAD そのもの ) に Excelファイルの内容を 読み込む機能です

Slide 45

Slide 45 text

インポート例 45 GrapeCity Developer Solutions Microsoft Excel SpreadJS

Slide 46

Slide 46 text

インポート機能の特徴 46 GrapeCity Developer Solutions Excel 資産を活用できる ★ 画面作成の雛形として Excel に記録されたデータの取出 / アプリへの読込 3.1 3.2

Slide 47

Slide 47 text

47 GrapeCity Developer Solutions Excel ファイルを画面作成の雛形にする

Slide 48

Slide 48 text

48 GrapeCity Developer Solutions インポート SPREAD Excel

Slide 49

Slide 49 text

49 GrapeCity Developer Solutions SPREAD Excel =SUM(E13:E15) =SUM(E13:E15) 数式などもしっかりインポートされます

Slide 50

Slide 50 text

雛形の調整が必要な場合は SPREADデザイナ を活用する 50 GrapeCity Developer Solutions SPREAD デザインファイル Excel ファイル SPREAD に読込

Slide 51

Slide 51 text

51 GrapeCity Developer Solutions Excel に記録されたデータの取出 / アプリへの読込

Slide 52

Slide 52 text

52 GrapeCity Developer Solutions アプリケーション画面 Excel

Slide 53

Slide 53 text

53 GrapeCity Developer Solutions Excel アプリケーション画面 インポート

Slide 54

Slide 54 text

Excel - SPREAD 活用術 54 GrapeCity Developer Solutions 新システム上でも既存の Excel ファイルを インポートして活用。 システムにアクセスできない 外部スタッフには Excel を使ってもらい、 本部でファイルをインポートといった使いもアリ。 Excel での入力フォーマット と システムの UI を揃え Excel - SPREAD - DB という流れを構築。 ポイント

Slide 55

Slide 55 text

Excel - SPREAD 活用術 （番外編） 55 GrapeCity Developer Solutions SPREAD の備える Excel エクスポート機能を活用すれば DB → SPREAD → Excel という流れを構築することも可能 お役立ち INFO

Slide 56

Slide 56 text

56 GrapeCity Developer Solutions まとめ

Slide 57

Slide 57 text

まとめ 57 GrapeCity Developer Solutions まとまったデータ設定ならバインディング。 テーブルやセルを対象としたバインディングも便利 Excelインポートで既存資産を活用。 開発 / 運用、どちらも効率アップ。 処理範囲にマッチするオブジェクト活用で 高効率なデータ設定 1 2 3

Slide 58

Slide 58 text

セミナーの内容や製品に関するご質問・ご相談を承っています 58 GrapeCity Developer Solutions お問い合わせ グレープシティ株式会社 ツール事業部 営業部 製品に関するご相談を オンライン形式で承っています。 • より詳しい製品のご紹介 • 勉強会の開催 など、柔軟にご対応可能です。 セミナーの内容に関してご質問がある方は グレープシティ営業部までお気軽に お問い合わせください。 050-5490-4661 [email protected]

Slide 59

Slide 59 text

END セミナー受講、誠にありがとうございました。