Upgrade to Pro — share decks privately, control downloads, hide ads and more …

はじめてのActiveReportsJS（帳票デザインの基本編）/activereportsjs-design

メシウス 開発支援ツール
September 02, 2021
Programming
0
210

 はじめてのActiveReportsJS（帳票デザインの基本編）/activereportsjs-design

※ グレープシティ株式会社は、2023年11月1日よりメシウス株式会社に社名を変更しました

グレープシティのオンラインセミナー「はじめてのActiveReportsJS（帳票デザインの基本編）」のセッション資料です。

メシウス 開発支援ツール

September 02, 2021
Tweet

More Decks by メシウス 開発支援ツール

See All by メシウス 開発支援ツール
あなたのアーキテクチャを拡張する高機能コンポーネント導入のススメ/Qiita Conference 2024 Day3
mescius_dev
1
81
エンジニアによる年間5000件の質問から考える製品開発のポイント / Qiita Conference 2023 Autumn Day3
mescius_dev
0
98
あなたのアーキテクチャを拡張する高機能コンポーネント導入のススメ/Developers Summit 2023 Summer
mescius_dev
0
64
プロダクトマーケティングマネージャーのはなし/Developers Summit 2023
mescius_dev
0
5.3k
Vue.jsのUIを強化するグレープシティのJavaScriptライブラリ/Vue Fes Japan Online 2022
mescius_dev
0
100
300+のライブラリを定期リリースする品質管理のあれこれ/Developers Summit 2022 Summer
mescius_dev
0
280
あなたの会社の古いシステム、なんとかしませんか？～システム刷新から考えるDX化への道筋とバリエーション～/webinar20220420-systems
mescius_dev
0
310
あなたの会社の古いシステム、なんとかしませんか？～システム刷新から考えるDX化への道筋とバリエーション～/webinar20220420-grapecity
mescius_dev
0
370
不安なあなたにおくるエンジニアのキャリア形成ガイド/Developers Boost 2021
mescius_dev
0
190

Other Decks in Programming

See All in Programming
Effectで作る堅牢でスケーラブルなAPIゲートウェイ / Robust and Scalable API Gateway Built on Effect
yasaichi
7
1.2k
TypeScriptで使いやすいOpenAPIの書き方
yukimochi_dwango
1
590
mb_trim関数を作りました
youkidearitai
PRO
1
150
An adventure of Happy Eyeballs
coe401_
1
140
WinActorの勉強を継続する方法
tamai_63
0
130
最近コードレビューで指摘したこと
forrep
3
110
Let's learn code review
riofujimon
2
640
Open AI APIを使う前に知っておきたいアカウントTier の話
akki_megane
0
130
TypeScriptコードの漸進的改善 / Progressive Improvement of TypeScript Code
medley
1
420
Try creating your own orderedmap
kazamori
1
280
Webアプリをできるだけコードを手書きしないで作ってみる
tomokusaba
2
230
株式会社ゼネテック
genetec
0
120

Featured

See All Featured
How GitHub (no longer) Works
holman
305
140k
Happy Clients
brianwarren
92
6.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
245
20k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
123
39k
How to Ace a Technical Interview
jacobian
273
22k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
1
120
RailsConf 2023
tenderlove
9
580

Transcript

  1. はじめてのActiveReportsJS（帳票デザインの基本編） グレープシティ株式会社 ツール事業部 プロダクトマーケティングチーム 福井潤之

  2. 2 GrapeCity Developer Solutions ActiveReportsJSのご紹介

  3. ActiveReportsJS 3 GrapeCity Developer Solutions 帳票開発ツール「ActiveReports」の DNAを受け継ぐ、モダンWeb開発に対応した 「帳票開発支援JavaScriptライブラリ」 クライアントサイドで 帳票生成

    Windows／Macで 使えるデザイナ マルチブラウザ対応の ビューワ

  4. ActiveReportsJSでの帳票開発の流れ 4 GrapeCity Developer Solutions 1. 付属の帳票デザイナでレポートファイルを作成 2. 表示するデータをJSONフォーマットで作成する 3.

    レポートファイルをブラウザ上で実行し、 作成された帳票を、帳票ビューワで閲覧、各種形式への保存、印刷

  5. 5 GrapeCity Developer Solutions ActiveReportsJSデザイナのご紹介

  6. ActiveReportsJSデザイナ 6 GrapeCity Developer Solutions ツールバーで 簡単レイアウト Windows / Mac

    対応 豊富なレポートコントロール 直感的に使える プロパティグリッド デザイナ上で 直接プレビューが可能

  7. 18種類のレポートコントロール 7 GrapeCity Developer Solutions • TextBox • TableOfContents •

    CheckBox • Container • Line • Shape • InputField • Bullet • Image • Barcode • Tablix • Sparkline • SubReport • OverflowPlaceHolder • List • Table • BandedList • Chart データ領域コントロール

  8. データバインディング 8 GrapeCity Developer Solutions APIだけでなく、 埋め込みやファイル形式にも対応 データソースはJSON形式で設定します ヘッダやクエリパラメータの 設定にも対応

    各レポートコントロールとのバイン ディングもGUIでらくらく APIのURIを指定 パラメータで動的に変更も可能

  9. 日本仕様 9 GrapeCity Developer Solutions

  10. 選べる2つのレポート形式 10 GrapeCity Developer Solutions • 印刷結果とまったく同じレイアウトで帳票を デザインできる • 出力される帳票のレイアウトはデータの量に

    応じて変化 • 日本に多い定型のレイアウトを作成するのに最適 • 印刷よりもアプリケーション上でプレビューする 用途に最適

  11. 11 GrapeCity Developer Solutions デモ

  12. デモで作成する請求書 12 GrapeCity Developer Solutions

  13. アプリケーションへの組み込みもわずかなコードで 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. 本日のまとめ 14 GrapeCity Developer Solutions 帳票のレイアウトにあわせて最適なデータ領域コントロールを選択する 1 2 3 動的な制御や集計処理には「式」を使用する

    グループ化でキー項目ごとにデータをまとめた帳票を作成する

  15. Webで技術情報を公開中 15 GrapeCity Developer Solutions CodeZine GrapeCity.devlog (https://codezine.jp/article/corner/823) (https://devlog.grapecity.co.jp/archive/category/ActiveReportsJS)

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

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

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