SPREAD活用テクニック（データ入力・バインド・インポート編）/spread-technique

Transcript

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

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

3. SPREAD - Excel ライクを実現するコントロール - 3 GrapeCity Developer Solutions 代表的な機能

   • Excelのような外観と操作性 • 表計算 • チャート ラインナップ • Windows Forms • ASP.NET • WPF • JavaScript

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

   DataBase from File

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

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

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

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

9. お客様からのご質問 9 GrapeCity Developer Solutions 全体に対して処理する API を使っても 内部では結局ループ処理をすると思うので、 動作結果は同じですよね？

   表示結果は同じですが、パフォーマンスが異なります

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

11. 今回のポイント 11 GrapeCity Developer Solutions ポイント バリエーションあふれる API を 正しいタイミングで活用することで

    SPREAD の性能を 存分に引き出すことが可能 ！

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

    3

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

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

    5

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

    5 セル Cell 1 セル

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

    5 行 セル Cell 1 行 Row 2 セル

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

    5 行 列 セル Cell 1 行 Row 2 列 Column 3 セル

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

    5 セル Cell 1 行 Row 2 列 Column 3 テーブル テーブル Table 4

19. SPREADを構成するオブジェクト 19 GrapeCity Developer Solutions 1 2 3 4 セル

    Cell 1 行 Row 2 列 Column 3 4 シート テーブル Table 4 6 5 シート Sheet 5

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

    セル Cell 1 行 Row 2 列 Column 3 ワークブック （ SPREAD そのもの ) シート Sheet 5 テーブル Table 4 6 ワークブック Workbook 6

21. ハイパフォーマンスへの近道 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 手間 ポイント

22. 22 GrapeCity Developer Solutions デモ

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

24. テーブル 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 テーブルを対象にデータ連結する テーブルバインティング シートを対象にデータ連結する シートバインティング セルを対象にデータ連結する セルバインティング

25. 「2. データバインド」 の目次 25 GrapeCity Developer Solutions テーブルバインディング セルバインディング シートバインディング

    2.1 2.2 2.3 バインドの対象範囲 多い 少ない

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

27. シートバインディング 27 GrapeCity Developer Solutions DataSource データソース（配列や DB エンティティ）の 内容をシート全体に一括設定

    フィールドのデータを自動判別し展開する 列の自動生成機能付き すべての SPREAD が備える 基本のデータバインディング機能 ポイント

28. シートバインディング コード例 28 GrapeCity Developer Solutions データソース（配列や DB エンティティ）の 内容をシート全体に一括設定

    フィールドのデータを自動判別し展開する 列の自動生成機能付き すべての SPREAD が備える 基本のデータバインディング機能 ポイント SPREAD for Windows Forms SpreadJS

29. 列の自動生成 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

30. 列の自動生成 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

31. 列の自動生成 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にすることも可能です）

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

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

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

35. シートバインディング と テーブルバインディングの相違点 35 GrapeCity Developer Solutions シートバインディング テーブルバインディング シートバインディングでは

    1つのシートに1つ、データソースを設定可能 テーブルバインディングでは 1つのシートに複数、データソースを設定可能 SPREAD SPREAD

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

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

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

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

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

41. セルバインディングの活用例 - SPREAD 帳票 - 41 GrapeCity Developer Solutions postnumber

    address name sales =SUM(・・・)

42. セルバインディングの活用例 - SPREAD 帳票 - 42 GrapeCity Developer Solutions setDataSourceメソッド

    で 設定するデータソースを切り替えると 帳票の内容も変わります

43. 43 GrapeCity Developer Solutions 3. インポート

44. 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ファイルの内容を 読み込む機能です

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

46. インポート機能の特徴 46 GrapeCity Developer Solutions Excel 資産を活用できる ★ 画面作成の雛形として Excel

    に記録されたデータの取出 / アプリへの読込 3.1 3.2

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

48. 48 GrapeCity Developer Solutions インポート SPREAD Excel

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

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

    ファイル SPREAD に読込

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

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

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

54. Excel - SPREAD 活用術 54 GrapeCity Developer Solutions 新システム上でも既存の Excel

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

55. Excel - SPREAD 活用術 （番外編） 55 GrapeCity Developer Solutions SPREAD

    の備える Excel エクスポート機能を活用すれば DB → SPREAD → Excel という流れを構築することも可能 お役立ち INFO

56. 56 GrapeCity Developer Solutions まとめ

57. まとめ 57 GrapeCity Developer Solutions まとまったデータ設定ならバインディング。 テーブルやセルを対象としたバインディングも便利 Excelインポートで既存資産を活用。 開発 /

    運用、どちらも効率アップ。 処理範囲にマッチするオブジェクト活用で 高効率なデータ設定 1 2 3

58. セミナーの内容や製品に関するご質問・ご相談を承っています 58 GrapeCity Developer Solutions お問い合わせ グレープシティ株式会社 ツール事業部 営業部 製品に関するご相談を

    オンライン形式で承っています。 • より詳しい製品のご紹介 • 勉強会の開催 など、柔軟にご対応可能です。 セミナーの内容に関してご質問がある方は グレープシティ営業部までお気軽に お問い合わせください。 050-5490-4661 sales@grapecity.com

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