Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
はじめてのActiveReportsJS(帳票デザインの基本編)/activereportsjs-design
グレープシティ 開発支援ツール
September 02, 2021
Programming
0
68
はじめてのActiveReportsJS(帳票デザインの基本編)/activereportsjs-design
グレープシティのオンラインセミナー「はじめてのActiveReportsJS(帳票デザインの基本編)」のセッション資料です。
グレープシティ 開発支援ツール
September 02, 2021
Tweet
Share
More Decks by グレープシティ 開発支援ツール
See All by グレープシティ 開発支援ツール
あなたの会社の古いシステム、なんとかしませんか?~システム刷新から考えるDX化への道筋とバリエーション~/webinar20220420-systems
grapecity_dev
0
110
あなたの会社の古いシステム、なんとかしませんか?~システム刷新から考えるDX化への道筋とバリエーション~/webinar20220420-grapecity
grapecity_dev
0
120
不安なあなたにおくるエンジニアのキャリア形成ガイド/Developers Boost 2021
grapecity_dev
0
46
日本の入力をしっかりサポートするInputManJS講座/inputmanjs-supports-japanese-input
grapecity_dev
0
84
ActiveReports最新バージョン「14.0J」移行のポイントを解説/activereports-migration
grapecity_dev
0
110
よくわかるグレープシティのJavaScriptラインナップ/grapecity-javascript-lineup
grapecity_dev
0
70
帳票作成をもっと簡単に!用途で選ぶグレープシティの帳票開発ツール/grapecity-reporting-tools
grapecity_dev
0
49
スクラッチ開発を全方向でサポートするグレープシティ開発支援ツール/scratch-developertools
grapecity_dev
0
21
SPREAD活用テクニック(データ入力・バインド・インポート編)/spread-technique
grapecity_dev
0
66
Other Decks in Programming
See All in Programming
Node.js 最新動向 TFCon 2022
yosuke_furukawa
PRO
4
2.3k
Where and how to run UI tests (Droidcon London, 2021)
nonews
0
200
Develop your CI tools
xgouchet
2
180
Groovy Roadmap
paulk
7
13k
Microsoft Teams の 会議アプリ開発のはじめかた / How to start Microsoft Teams app development
karamem0
0
1.3k
LOWYAの信頼性向上とNew Relic
kazumax55
4
280
Web API 開発を加速しよう - Avanade Beef のご紹介 / Accelerate your web API - development introducing Avanade Beef
karamem0
0
280
Named Document って何?
harunakano
0
140
Android入門
hn410
0
300
Securing Kafka Connect Pipelines with Client-Side Field Level Cryptography @ Kafka Summit London 2022
hpgrahsl
0
300
tfcon2022_Web3Dひとめぐり.pdf
emadurandal
0
390
WindowsコンテナDojo:第2回 Windowsコンテナアプリのビルド、公開、デプロイ
oniak3ibm
PRO
0
120
Featured
See All Featured
The Mythical Team-Month
searls
208
39k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
237
19k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
103
16k
Thoughts on Productivity
jonyablonski
43
2.2k
How GitHub (no longer) Works
holman
296
140k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
15k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
350
21k
Why You Should Never Use an ORM
jnunemaker
PRO
47
5.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
151
12k
Debugging Ruby Performance
tmm1
65
10k
Teambox: Starting and Learning
jrom
121
7.6k
Transcript
はじめてのActiveReportsJS(帳票デザインの基本編) グレープシティ株式会社 ツール事業部 プロダクトマーケティングチーム 福井潤之
2 GrapeCity Developer Solutions ActiveReportsJSのご紹介
ActiveReportsJS 3 GrapeCity Developer Solutions 帳票開発ツール「ActiveReports」の DNAを受け継ぐ、モダンWeb開発に対応した 「帳票開発支援JavaScriptライブラリ」 クライアントサイドで 帳票生成
Windows/Macで 使えるデザイナ マルチブラウザ対応の ビューワ
ActiveReportsJSでの帳票開発の流れ 4 GrapeCity Developer Solutions 1. 付属の帳票デザイナでレポートファイルを作成 2. 表示するデータをJSONフォーマットで作成する 3.
レポートファイルをブラウザ上で実行し、 作成された帳票を、帳票ビューワで閲覧、各種形式への保存、印刷
5 GrapeCity Developer Solutions ActiveReportsJSデザイナのご紹介
ActiveReportsJSデザイナ 6 GrapeCity Developer Solutions ツールバーで 簡単レイアウト Windows / Mac
対応 豊富なレポートコントロール 直感的に使える プロパティグリッド デザイナ上で 直接プレビューが可能
18種類のレポートコントロール 7 GrapeCity Developer Solutions • TextBox • TableOfContents •
CheckBox • Container • Line • Shape • InputField • Bullet • Image • Barcode • Tablix • Sparkline • SubReport • OverflowPlaceHolder • List • Table • BandedList • Chart データ領域コントロール
データバインディング 8 GrapeCity Developer Solutions APIだけでなく、 埋め込みやファイル形式にも対応 データソースはJSON形式で設定します ヘッダやクエリパラメータの 設定にも対応
各レポートコントロールとのバイン ディングもGUIでらくらく APIのURIを指定 パラメータで動的に変更も可能
日本仕様 9 GrapeCity Developer Solutions
選べる2つのレポート形式 10 GrapeCity Developer Solutions • 印刷結果とまったく同じレイアウトで帳票を デザインできる • 出力される帳票のレイアウトはデータの量に
応じて変化 • 日本に多い定型のレイアウトを作成するのに最適 • 印刷よりもアプリケーション上でプレビューする 用途に最適
11 GrapeCity Developer Solutions デモ
デモで作成する請求書 12 GrapeCity Developer Solutions
アプリケーションへの組み込みもわずかなコードで 13 GrapeCity Developer Solutions <body onload="load()"> <div id="Viewer" style="height:
100vh"></div> <script> function load() { const viewer = new ActiveReports.Viewer('#Viewer', { language: 'ja' }); viewer.open('./reports/test.rdlx-json'); } </script> </body>
本日のまとめ 14 GrapeCity Developer Solutions 帳票のレイアウトにあわせて最適なデータ領域コントロールを選択する 1 2 3 動的な制御や集計処理には「式」を使用する
グループ化でキー項目ごとにデータをまとめた帳票を作成する
Webで技術情報を公開中 15 GrapeCity Developer Solutions CodeZine GrapeCity.devlog (https://codezine.jp/article/corner/823) (https://devlog.grapecity.co.jp/archive/category/ActiveReportsJS)
セミナーの内容や製品に関するご質問・ご相談を承っています 16 GrapeCity Developer Solutions お問い合わせ グレープシティ株式会社 ツール事業部 営業部 製品に関するご相談を
オンライン形式で承っています。 • より詳しい製品のご紹介 • 勉強会の開催 など、柔軟にご対応可能です。 セミナーの内容に関してご質問がある方は グレープシティ営業部までお気軽に お問い合わせください。 050-5490-4661 sales@grapecity.com
END セミナー受講、誠にありがとうございました。