ActiveReportsJS「基本のキ」。Tools〈開発支援ツール〉の、製品のTIPSや発売などに関する最新情報をお届けします。ActiveReportsJS「基本のキ」。帳票のデザインからブラウザに表示するまでの手順を一挙解説!2019-12-16ActiveReportsJS「基本のキ」。JavaScriptツイート2019年12月11日に新しいJavaScriptライブラリ製品「ActiveReportsJS(アクティブレポートJS)」を発売しました。同製品は日本仕様のきめ細やかな帳票を手軽に作成できるJavaScriptライブラリです。今回の記事では、スクラッチでActiveReportsJSの帳票定義ファイル(レポートファイル)を作成し、ブラウザ上の帳票ビューワに表示するまでの手順を一気にご紹介したいと思います。Serverで実行おわりに帳票をデザインしてみよう!帳票デザイナのインストールまずはレポートファイルの作成からです。ActiveReportsJSはJavaScriptライブラリですが、帳票のデザインは開発環境にインストールした帳票デザイナ(単体のアプリケーション)から行います。トライアル版、または製品版のzipファイルを解凍し、配下のdesignerフォルダの中に帳票デザイナのインストーラーがあります。exeファイルはWindows用、dmgファイルはMac用です。ウィザードにしたがいインストールしてデザイナを起動します。レイアウトの作成それでは早速帳票のレイアウトを作成してみましょう。ActiveReportsJSには2種類のレポート形式がありますが、今回は「ページレポート」で単純な一覧表形式のレイアウトを作成してみます。表形式のレイアウトを作成するには、「Table(テーブル)」コントロールを使用します。左側のツールボックスからTableコントロールをドラッグ&ドロップします。デフォルトでは、テーブルの1行目がテーブルヘッダ、2行目が詳細行、3行目がテーブルフッタになります。表示する項目数にあわせてコンテキストメニューから列数を調整します。列は1列ずつ追加もできますが、追加する列数を指定して一気に追加することも可能です。テーブルのヘッダやフッタは自由に追加/削除できます。今回はフッタは不要なので、テーブルを選択したときに左側に表示されるアイコンの周辺を右クリックし、コンテキストメニューから「フッタの削除」を選択してフッタを削除します。次に、テーブルの大きさ(明細がどこまで描画されるのか)を設定します。テーブルを選択したときに表示されるグレーの丸ポチをテーブルの大きさ(明細の大きさ)の分、マウスでドラッグして拡げます。このときのグレーの網掛けの部分が、明細がデータの数の分、繰り返し描画される領域になります。帳票でよくある要件として、表示するデータの数が、1ページに表示できる明細行の数に満たない場合に空行で埋めたい、というのがあるかと思いますが、その場合は、テーブルのプロパティから「空行で埋める」を「はい」に設定するだけでOKです。これもプロパティから簡単に設定できます。次に帳票に表示するデータとの接続を行います。ActiveReportsJSでサポートされているデータの形式はJSON形式です。データソースの追加まずはデータソースの追加です。デザイナ右上の「データ」タブから「データソース」の横の「+」アイコンをクリックします。「新規データソース」ダイアログが表示されるので、ここでJSONデータとの接続を行います。APIなどから設定する方法が一般的ですが、そちらはまた別の機会に紹介するとして、今回は以下のデータを埋め込みで設定したいと思います。}]以下のように設定したら、「データソースの追加」をクリックしてデータソースを追加します。次にデータセットを追加します。先ほど追加したJSONデータソースを選択し、右側に表示される「+」アイコンをクリックします。「データセットの編集」ダイアログが表示されるので、「クエリ」からJSONPathという形式で、どのフィールドをデータセットとして使用するか指定します。今回はすべてのフィールドを使うので、単純に*を設定し、「検証」ボタンをクリックします。バウンドフィールドが5個追加されるので、あとは「OK」をクリックすれば、以下のようにデータセットが作成されます。レポートコントロールとの接続あとは、レポートコントロールと先ほど追加したデータセットのフィールド(テーブルに表示させたい項目)を接続します。Tableの詳細行のテキストボックスを選択すると表示される右側のアイコンから接続するフィールドを選択します。詳細行をフィールドに接続すると、ヘッダにはフィールド名が自動的にラベルとして設定されます。仕上げとして、「TextBox」で帳票のタイトルを追加し、色や幅などを調整したら、「プレビュー」ボタンをクリックします。帳票がプレビュー表示されます。テーブルはデザイン時に設定したグレーの網掛けの部分まで伸長し、先ほど設定したJSONデータもきちんと流し込まれていることがわかります。これでレポートファイルは完成です。帳票ビューワで帳票を表示してみよう!レポートファイルが完成したら、次は帳票ビューワを使ってブラウザ上で閲覧してみましょう。ここでやっとJavaScriptの登場です。Server」を使ったローカル環境の開発サーバーを使用し、簡単にブラウザ上での表示を確認してみたいと思います。HTMLファイルの作成ActiveReportsJSは様々なWebアプリケーションに組み込むことができますが、今回はプレーンなHTMLを使ったミニマム構成で動作確認したいと思います。適当なフォルダの中にindex.htmlを作成し、以下のようにJSファイルとCSSファイルの参照と、ビューワの定義を追加し、ActiveReportsJSの帳票ビューワを組み込みます。同じフォルダの配下にscriptsとcssフォルダを作成し、scriptsフォルダの配下にはlocalesフォルダも作成します。ActiveReportsJSの製品版、またはトライアル版のzipを解凍して出力されたdistフォルダから、必要なJSファイルとCSSファイル(下記の図を参照)を、これらのフォルダにコピーし、配置します。reportsフォルダも作成し、先ほど作成したレポートファイル(rdlx-json形式)をコピーします。最終的なファイル構成は以下のようになります。Serverを使ってブラウザ上でビューワを表示させてみます。Server」をクリックします。開発サーバーが起動し、ブラウザ上の帳票ビューワに作成した帳票が表示されます。作成したサンプルは以下で公開しています。おわりにいかがでしたでしょうか。今回はActiveReportsJSでの帳票開発の一連の流れを簡単にご紹介いたしましたが、今後はもっと実際の運用に近い使い方などをご紹介したいと思いますのでご期待ください。製品Webサイトでは、製品を作って作成したサンプル帳票などが見れるデモアプリケーションや、実際に製品を試せるトライアル版を公開しておりますので、こちらも是非ご覧ください。10:26ActiveReportsJS「基本のキ」。帳票のデザインからブラウザに表示するまでの手順を一挙解説!関連記事2019-11-25帳票開発ツールの新星「ActiveReportsJS」とは何か2019年12月11日(水)発売の新製品「ActiveReportsJS(アクティ...2019-11-13Webアプリケーションに帳票出力機能を組み込めるJavaScriptライブラリを新発売クロスプラットフォームで動作する使いやすいデザイナと、ブラ...2019-08-19ActiveReportsで軽減税率制度に対応した請求書を作ろう!2019年10月からの消費税引き上げに伴って始まる軽減税率制度。Tools〈開発支援ツール〉の情報発信メディア「GrapeCity.devlog」です。製品のTIPSや発売情報、イベントのお知らせなどを中心に、さまざまな最新情報をいち早くお届けします。Toolsについてスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。