Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
SPREAD活用テクニック(データ入力・バインド・インポート編)/spread-technique
グレープシティ 開発支援ツール
September 02, 2021
Programming
0
68
SPREAD活用テクニック(データ入力・バインド・インポート編)/spread-technique
グレープシティのオンラインセミナー「SPREAD活用テクニック(データ入力・バインド・インポート編)」のセッション資料です。
グレープシティ 開発支援ツール
September 02, 2021
Tweet
Share
More Decks by グレープシティ 開発支援ツール
See All by グレープシティ 開発支援ツール
あなたの会社の古いシステム、なんとかしませんか?~システム刷新から考えるDX化への道筋とバリエーション~/webinar20220420-systems
grapecity_dev
0
130
あなたの会社の古いシステム、なんとかしませんか?~システム刷新から考えるDX化への道筋とバリエーション~/webinar20220420-grapecity
grapecity_dev
0
130
不安なあなたにおくるエンジニアのキャリア形成ガイド/Developers Boost 2021
grapecity_dev
0
47
日本の入力をしっかりサポートするInputManJS講座/inputmanjs-supports-japanese-input
grapecity_dev
0
84
はじめてのActiveReportsJS(帳票デザインの基本編)/activereportsjs-design
grapecity_dev
0
71
ActiveReports最新バージョン「14.0J」移行のポイントを解説/activereports-migration
grapecity_dev
0
120
よくわかるグレープシティのJavaScriptラインナップ/grapecity-javascript-lineup
grapecity_dev
0
71
帳票作成をもっと簡単に!用途で選ぶグレープシティの帳票開発ツール/grapecity-reporting-tools
grapecity_dev
0
49
スクラッチ開発を全方向でサポートするグレープシティ開発支援ツール/scratch-developertools
grapecity_dev
0
21
Other Decks in Programming
See All in Programming
Explore Java 17 and beyond
josepaumard
3
650
Android Architecture Design With Koin
agiuliani
0
240
プログラミングを勉強したいと言われたら
yuba_4
0
420
Let's make a contract: the art of designing a Java API
mariofusco
0
160
Git Rebase
bkuhlmann
7
1k
Reactでアプリケーションを構築する多様化
sakito
4
3.4k
LOWYAの信頼性向上とNew Relic
kazumax55
4
360
インフラエンジニアの多様性と評価、またはキャリアへのつなげ方 / Careers as infrastructure engineers
katsuhisa91
0
530
Hapticをカスタマイズしてみよう / ZOZO Tech Talk #6 Customize Haptic
endoumari
0
340
読みやすいコードを書こう
yutorin
0
420
GraphQL+KMM開発でわかったこと / What we learned from GraphQL+KMM development
kubode
0
130
UI State Modeling 어떤게 좋을까?
laco2951
1
230
Featured
See All Featured
Documentation Writing (for coders)
carmenhchung
48
2.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
350
21k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
315
19k
The Language of Interfaces
destraynor
148
20k
Writing Fast Ruby
sferik
612
57k
The Illustrated Children's Guide to Kubernetes
chrisshort
14
35k
Producing Creativity
orderedlist
PRO
333
37k
How GitHub (no longer) Works
holman
296
140k
Mobile First: as difficult as doing things right
swwweet
212
7.5k
Robots, Beer and Maslow
schacon
152
7.1k
Typedesign – Prime Four
hannesfritz
33
1.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
890
Transcript
SPREAD活用テクニック(データ入力・バインド・インポート編) グレープシティ株式会社 ツール事業部 プロダクトマーケティングチーム 村上功光
2 GrapeCity Developer Solutions はじめに - SPREAD について -
SPREAD - Excel ライクを実現するコントロール - 3 GrapeCity Developer Solutions 代表的な機能
• Excelのような外観と操作性 • 表計算 • チャート ラインナップ • Windows Forms • ASP.NET • WPF • JavaScript
How ? 今回のテーマ 4 GrapeCity Developer Solutions from Sever from
DataBase from File
もっともオーソドックスなデータ設定の例 5 GrapeCity Developer Solutions CODE
すべてのセルに対するデータ設定を考える 6 GrapeCity Developer Solutions
アプローチ例 : For 文によるデータ設定 7 GrapeCity Developer Solutions data CODE
アプローチ例 : データバインド DataSource CODE
お客様からのご質問 9 GrapeCity Developer Solutions 全体に対して処理する API を使っても 内部では結局ループ処理をすると思うので、 動作結果は同じですよね?
表示結果は同じですが、パフォーマンスが異なります
二つのアプローチを比較 10 GrapeCity Developer Solutions V.S. より高速 / より少ないコード量
今回のポイント 11 GrapeCity Developer Solutions ポイント バリエーションあふれる API を 正しいタイミングで活用することで
SPREAD の性能を 存分に引き出すことが可能 !
アジェンダ 12 GrapeCity Developer Solutions データバインディング ファイルインポート オブジェクト 1 2
3
13 GrapeCity Developer Solutions 1. オブジェクト
SPREADを構成するオブジェクト 14 GrapeCity Developer Solutions 1 6 2 3 4
5
SPREADを構成するオブジェクト 15 GrapeCity Developer Solutions 1 6 2 3 4
5 セル Cell 1 セル
SPREADを構成するオブジェクト 16 GrapeCity Developer Solutions 1 6 2 3 4
5 行 セル Cell 1 行 Row 2 セル
SPREADを構成するオブジェクト 17 GrapeCity Developer Solutions 1 6 2 3 4
5 行 列 セル Cell 1 行 Row 2 列 Column 3 セル
SPREADを構成するオブジェクト 18 GrapeCity Developer Solutions 1 6 2 3 4
5 セル Cell 1 行 Row 2 列 Column 3 テーブル テーブル Table 4
SPREADを構成するオブジェクト 19 GrapeCity Developer Solutions 1 2 3 4 セル
Cell 1 行 Row 2 列 Column 3 4 シート テーブル Table 4 6 5 シート Sheet 5
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 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 GrapeCity Developer Solutions デモ
23 GrapeCity Developer Solutions 2. データバインド
テーブル 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 テーブルを対象にデータ連結する テーブルバインティング シートを対象にデータ連結する シートバインティング セルを対象にデータ連結する セルバインティング
「2. データバインド」 の目次 25 GrapeCity Developer Solutions テーブルバインディング セルバインディング シートバインディング
2.1 2.2 2.3 バインドの対象範囲 多い 少ない
26 GrapeCity Developer Solutions シートバインディング
シートバインディング 27 GrapeCity Developer Solutions DataSource データソース(配列や DB エンティティ)の 内容をシート全体に一括設定
フィールドのデータを自動判別し展開する 列の自動生成機能付き すべての SPREAD が備える 基本のデータバインディング機能 ポイント
シートバインディング コード例 28 GrapeCity Developer Solutions データソース(配列や DB エンティティ)の 内容をシート全体に一括設定
フィールドのデータを自動判別し展開する 列の自動生成機能付き すべての SPREAD が備える 基本のデータバインディング機能 ポイント SPREAD for Windows Forms SpreadJS
列の自動生成 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 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 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 GrapeCity Developer Solutions テーブルバインディング
テーブルバインディング 33 GrapeCity Developer Solutions DataSource シート上のテーブルに対して データをバインディング 概要 SpreadJS
テーブルバインディング 34 GrapeCity Developer Solutions
シートバインディング と テーブルバインディングの相違点 35 GrapeCity Developer Solutions シートバインディング テーブルバインディング シートバインディングでは
1つのシートに1つ、データソースを設定可能 テーブルバインディングでは 1つのシートに複数、データソースを設定可能 SPREAD SPREAD
複数のデータソースを使った活用例 36 GrapeCity Developer Solutions データソース A データソース B
37 GrapeCity Developer Solutions セルバインディング
(再掲) テーブルバインディングでのバインド例 38 GrapeCity Developer Solutions
セルバインディングとデータ 39 GrapeCity Developer Solutions
セルバインディングとデータ 40 GrapeCity Developer Solutions 〒981-3205 宮城県仙台市泉区紫山3-1-4 グレープ太郎
セルバインディングの活用例 - SPREAD 帳票 - 41 GrapeCity Developer Solutions postnumber
address name sales =SUM(・・・)
セルバインディングの活用例 - SPREAD 帳票 - 42 GrapeCity Developer Solutions setDataSourceメソッド
で 設定するデータソースを切り替えると 帳票の内容も変わります
43 GrapeCity Developer Solutions 3. インポート
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 GrapeCity Developer Solutions Microsoft Excel SpreadJS
インポート機能の特徴 46 GrapeCity Developer Solutions Excel 資産を活用できる ★ 画面作成の雛形として Excel
に記録されたデータの取出 / アプリへの読込 3.1 3.2
47 GrapeCity Developer Solutions Excel ファイルを画面作成の雛形にする
48 GrapeCity Developer Solutions インポート SPREAD Excel
49 GrapeCity Developer Solutions SPREAD Excel =SUM(E13:E15) =SUM(E13:E15) 数式などもしっかりインポートされます
雛形の調整が必要な場合は SPREADデザイナ を活用する 50 GrapeCity Developer Solutions SPREAD デザインファイル Excel
ファイル SPREAD に読込
51 GrapeCity Developer Solutions Excel に記録されたデータの取出 / アプリへの読込
52 GrapeCity Developer Solutions アプリケーション画面 Excel
53 GrapeCity Developer Solutions Excel アプリケーション画面 インポート
Excel - SPREAD 活用術 54 GrapeCity Developer Solutions 新システム上でも既存の Excel
ファイルを インポートして活用。 システムにアクセスできない 外部スタッフには Excel を使ってもらい、 本部でファイルをインポートといった使いもアリ。 Excel での入力フォーマット と システムの UI を揃え Excel - SPREAD - DB という流れを構築。 ポイント
Excel - SPREAD 活用術 (番外編) 55 GrapeCity Developer Solutions SPREAD
の備える Excel エクスポート機能を活用すれば DB → SPREAD → Excel という流れを構築することも可能 お役立ち INFO
56 GrapeCity Developer Solutions まとめ
まとめ 57 GrapeCity Developer Solutions まとまったデータ設定ならバインディング。 テーブルやセルを対象としたバインディングも便利 Excelインポートで既存資産を活用。 開発 /
運用、どちらも効率アップ。 処理範囲にマッチするオブジェクト活用で 高効率なデータ設定 1 2 3
セミナーの内容や製品に関するご質問・ご相談を承っています 58 GrapeCity Developer Solutions お問い合わせ グレープシティ株式会社 ツール事業部 営業部 製品に関するご相談を
オンライン形式で承っています。 • より詳しい製品のご紹介 • 勉強会の開催 など、柔軟にご対応可能です。 セミナーの内容に関してご質問がある方は グレープシティ営業部までお気軽に お問い合わせください。 050-5490-4661 sales@grapecity.com
END セミナー受講、誠にありがとうございました。