初めての一般帳票

1.帳票設計フローチャート

2.初めての帳票效果

本文では、帳票を作成することで、FineReportの主な機能について簡単に説明します。このシンプルな一般帳票を作成する前に、まず帳票が最終的にどのように表示されるかを確認します。その效果に基づいて帳票を設計します。

この帳票は、以下の3つの部分で構成されています：

• 変数パネル：[プルダウンボックスウィジェット]を使用して地域を選択し、該当地域のデータを検索します。

• テーブル：テーブルは、該当地域内の各販売員の各商品の販売総量を集計します。

• 縦棒グラフ：縦棒グラフは、テーブル内のデータをチャート形式で表示します。

1.データ接続の新規作成

データ接続を新規作成する目的は、FineReportデザイナをデータベースに接続させることで、これにより、帳票がデータベースからデータを読み取り、書き込み、または変更できるようにすることです。

デザイナを開き、最上部のメニューバーでの[サーバ]-[データ接続定義]をクリックすると、[データ接続定義]ダイアログがポップアップされます。デザイナには既にFRDemoJPという名前のビルトインデータベースが既定で接続されており、[接続テスト]をクリックすると、[接続成功]のメッセージボックスが表示され、データベース FRDemoJP がデザイナと正常に接続されたことを示します。

その後、このデータベースからデータを抽出して帳票の設計に使用できます。

2.帳票の新規作成

1）メニューバーから[ファイル]をクリックし、新規帳票の種類を選択できます。ショートカットボタンをクリックすると、空白の新規帳票[一般帳票]が簡単に作成されます。以下の図のように：

本文では、[一般帳票]を新規に作成します。

2）新しい帳票を作成する際、デザイナは既定でテンプレートに基づいてテーマを適用します。テーマでは、テンプレートスタイル、セルスタイル、チャートスタイルなどがすでに設計されています。帳票を作成する際は、[テーマに従う]を選択することで、テーマ内のスタイルを迅速に再利用できます。

一般帳票のデフォルトテーマは[ライトグレー]です。テーマ名は帳票最上部のツールバーに表示され、クリックすると[テンプレートテーマ]ページがポップアップします。本例では[科学風]テーマを選択します。

3.データ準備

データセットは、帳票設計時の直接のデータソースです。データセットはその使用範囲によって、[サーバデータセット]と[テンプレートデータセット]の2つの種類に分けられます。

本例では、データセット管理パネルで[テンプレートデータセット]を選択し、上部のをクリックして「データベースクエリds1」を新規作成します。SQLクエリ文「select * from 販売量」を入力し、「販売量」テーブルのすべてのデータを抽出します。

データセットを新規作成した後、データセット管理パネルで抽出されたデータを確認できます。以下の図のように：

これで帳票のデータ準備が完了しました。次に、帳票のデザインを行います。  

4.テーブルデザイン

１）タイトル

セルA1からセルD2までを選択し、[セルを結合]というボタンをクリックし、これらのセルを結合します。以下の図のように：

帳票のタイトル「地域販売状況」を入力し、右側の属性パネルの[セル属性]-[スタイル]をクリックし、[テーマに従う]-[タイトル]を選択します。以下の図のように：

注意：このスタイルは前に選択した[科学風]テーマです。特定のセルスタイルを個別に変更したい場合は、[カスタム]を選択して変更できます。 

2）セルの斜線

第一章第3節の効果図を見ると、左上に斜線で区切られた3つの表頭フィールド情報が表示されているセルがあることがわかります。

セルA3、B3を結合して選択し、上部ツールバーの[斜線]ボタンをクリックすると、斜線編集ダイアログボックスが表示されます。テキスト編集ボックスに「     商品|   販売員|       地域」と入力します。以下の図のように：

注意：ここで使用される縦線記号は英語モードの記号であり、スペースを追加することで文字の位置を調整できます。

セルA3の幅と高さを適切に調整し、A3セルの[スタイル]を[テーマに従う]-[サブタイトル]に設定します。以下の図のように：

テーマの[サブタイトル]スタイルに設定する際、セルのフォントが大きくなっていることがわかります。この時、[カスタム]をクリックすると、各設定項目はテーマのスタイルを保持したまま、フォントサイズだけを変更済みです。

変更後、セルのスタイルが変わったことが確認できます。以下の図のように：

3）テーブルのデータを入力する 

データセットから表示する必要があるデータ列を対応するセルにドラッグします。以下の図のように：

データ列をセルにドラッグする時、セルはデフォルトで[縦方向]に展開されます。「商品」があるC3セルを[横方向に展開]に設定する必要があります。    

C3セルを選択し、[セル属性]-[展開]をクリックし、展開方向を変更します。 以下の図のように：

4）総販売量を計算する

本例では、各販売員の販売総量を横方向に集計し、各製品の販売総計を縦方向に集計する必要があります。

まず、表頭を入力します。D3セルに「販売総量」というテキストを入力し、A5、B5セルを結合して「総計：」というテキストを入力します。

セルC5を選択し、合計の数式 sum(C4) を挿入します。セルC4は「販売量」であり、各商品の販売総量を縦方向に集計します。数式の挿入はツールバーのショートカットボタンを使用できます。以下の図のように表示されます：

D4セルは各販売員の販売総量を横方向に集計するため、同様に合計数式 sum(C4) を挿入します。ただし、各セルには親子セルの関係があり、セルは親セルに従って展開または計算されます。詳細はヘルプドキュメント「親子セル設定」を参照してください。

そのため、本例ではD4セルは「販売員」フィールドに基づいて計算する必要があります。つまり、セルD4の左親セルを「販売員」があるB4セルに設定する必要があります。以下の図のように：

最後に、D5セルにすべての商品の販売総量を求める数式を挿入します。数式は sum(D4) または sum(C5) のいずれかを入力できます。

5）残りのセルのスタイルを設定する

セルC3、D3、A4、B4、A5のスタイルはすべて[テーマに従う]-[表タイトル]に設定します。セルC4、D4、C5、D5のスタイルはすべて[テーマに従う]-[本文]に設定します。以下の図のように：

6）これでテーブルの作成が完了しました。帳票を保存し、[改ページプレビュー]をクリックして効果を確認します。  

5.パラメータデザイン

パラメータの役割は、パラメータを設定することで、[変数パネル]にウィジェットを追加することです。そのウィジェットを帳票データにバインドすることにより、パラメータに基づいて指定されたデータをクエリできます。パラメータに関する詳細な内容については、ヘルプドキュメント「パラメータ紹介」を参照してください。

次に、帳票のパラメータ部分の設計を始めます。

1）テンプレートパラメータを新規追加する

メニューバーから[テンプレート]-[テンプレート変数]を選択し、テンプレート変数設定ダイアログボックスを表示させ、新しい変数を追加します。変数名称をダブルクリックして「地域」にリネームします。既定値を「関東」に設定します。以下の図のように：

2）[変数パネル]を設定する

[変数パネル]の[編集]ボタンをクリックして、変数パネル設定画面に入ります。右上のウィジェット設定パネルに未生成の変数が表示されます。[地域]をクリックするか、または[すべて追加]をクリックして、変数を[変数パネル]に追加します。

この時点で、変数に基づいて[ラベルウィジェット]、ウィジェットタイプが未設定のカスタムウィジェット、および[クエリボタン]ウィジェットが生成され、[クエリをクリックする前にレポート内容を表示しない]のチェックを外します。以下の図のように表示されます：

3）ウィジェットを設定する

カスタムウィジェットの[編集]ボタンをクリックし、[プルダウンボックスウィジェット]を選択します。以下の図のように：

4）ウィジェットにデータをバインドする

本例では、プルダウンボックスから「関東」または「関西」を選択して、対応する地域の販売データをクエリする必要があります。そのため、バインドする[データ辞書]は「関東」と「関西」のフィールド情報に対応する必要があります。

プルダウンボックスウィジェットを選択し、右側のウィジェット設定パネルで[属性]を選択し、[データ辞書]の[編集]ボタンをクリックします。[タイプ設定]を[データベーステーブル]に設定し、[データベース]を[FRDemoJP]に設定します。[データベーステーブル]として[販売量]を選択し、列名の[実際値]と[表示値]を「地域」に設定します。

5）パラメータパネル[para]を選択し、[変数パネル]の属性とスタイルを設定できます。本例では[クエリをクリックする前にレ帳票内容を表示しない]のチェックを外し、表示位置を[左揃え]に設定します。以下の図のように：

6）セルフィルタの設定

[変数パネル]の設定が完了した後、画面中央の[編集]ボタンをクリックすると、テーブルの画面に戻ります。しかし、パラメータウィジェットを設定しただけで、[プルダウンボックス]から選択した地域に基づいて該当のテーブルデータをクエリすることはできません。データセットには、データベースからすべてのデータが取得され、テーブルのデータはそのデータセットから直接取得されるため、テーブルにデータフィルタリングの条件を設定する必要があります。

セルA4をダブルクリックすると、表示される[データ列]ダイアログで[フィルタ]を選択し、[一般]条件を追加して「地域」を変数「$地域 」と等しく設定します。[追加]ボタンをクリックし、[確定]をクリックします。これで、地域のセルと変数がバインドされ、[プルダウンボックス]で地域変数を選択してクエリを実行すると、セルには選択した地域のデータのみが表示されます。以下の図のように：

7）ここまでで、変数とテーブルデータの連動が実現しました。テンプレート保存し、[改ページプレビュー]をクリックすると、効果を確認します：

6.チャートのデザイン

チャートの役割は、データをより直感的に表現し、ユーザの帳票表示体験を向上させることです。本例ではチャートの基本的な概念を紹介します。チャートの詳細については、ヘルプドキュメント「チャート概要」をご参照ください。

本例では、各販売員が販売した各商品の販売総量を直感的に表示するために、セル内に[縦棒グラフ]を挿入します。

1）チャートの挿入

セルA7からセルD18までを結合して選択し、上部ツールバーの[チャート]ショートカットボタンをクリックして、[縦棒グラフ]を挿入します。以下の図のように：

2）チャートデータのバインド

本例では[セルデータ]を使用します。つまり、表の内容に基づいてグラフを表示します。

グラフを選択した後、右側のプロパティパネルで[セル要素]-[データ]をクリックし、[データソース]を[セルデータ]に設定します。[分類名]には数式「=B4」を、[系列名]には数式「=C3」を、[系列値]には数式「=C4」を設定します。これにより、グラフのX軸はB4セルの「販売員」、系列はC3セルの「商品」、Y軸の値はC4セルの「販売量」となります。以下の図のようになります：これにより、グラフのX軸はB4セルの「販売員」、系列はC3セルの「商品」、Y軸の値はC4セルの「販売量」となります。以下の図のようになります：

注意：分類名、系列名、値を設定する際には、必ず等号（=）を付けてください。そうしないと、セルが文字列として処理されます。

3）チャートスタイル設定

[縦棒グラフ]はテーブルの地域別販売データを視覚化して表示するため、グラフにはタイトルを設定する必要はありません。そのため、グラフの[スタイル]-[タイトル]の設定で[タイトル表示]のチェックを外します。以下の図のように：

注意：本例では他のグラフスタイルの設定は行わず、すべての設定は[テーマに従う]に設定を行います。

4）グラフのスタイル設定が完了した後、グラフが配置されているセルの親セル設定にも注意する必要があります。本例では、縦棒グラフは展開する必要がなく、左親セルと上親セルにも依存しないため、展開方向を[展開しない]に設定し、左親セルと上親セルをどちらも[無]に設定します。以下の図のように：

注意：理論的には、ここでは上親セルのみ[無]に設定すれば十分ですが、記憶しやすくするために、両方の親セルを[無]に設定することをお勧めします。

これで、この帳票の作成が完了しました。次に、PC端末とモバイル端末で帳票の表示効果をそれぞれ確認します。

7.効果プレビュー

7.1PC端末

帳票を保存し、[改ページプレビュー] をクリックすると、PC端末での効果は以下の図のように：

7.2モバイル端末

モバイル端末で帳票をプレビューする方法は以下のドキュメントをご覧ください：モバイル端末でプレビュー

App端末 と HTML5 端末両方ともサポートされています。効果は以下の図のように：

テンプレートをダウンロードするにはこちらをクリックしてください：

初めての一般帳票.cpt