UI部品 基本編
Excelのピボットテーブルでは、簡単な操作で簡単に月次ごと・科目ごとなどの条件を付けてデータの集計や分析をすることができます。
Excelライクな画面デザインが特徴のForguncyでも、もちろんピボットテーブル機能をサポートしています。
ここでは、日ごとに入力されている経費精算データを、ピボットテーブルを用いて科目別に集計を行う方法について解説します。
1.プロジェクトを確認する
今回の演習で使用するプロジェクトを確認します。
手順1-1.ビューを確認する
ここでは、集計する経費精算に関するデータをビューの形にして使用します。
プロジェクトを開き、ナビゲーションウィンドウから「V_経費精算」ビューを開きます。
ピボットテーブルに表示する各フィールドと、年月の絞り込みに使用するための数式フィールド「年」と「月」が用意されていることを確認します。
数式フィールド
テーブルやビュー上のフィールドを使用して作成した計算や文字列操作を行うフィールドです。数式フィールドは、関数や数式を使って定義します。詳細については、以下のページを参考にしてください。
＞数式フィールドの作成（Forguncyヘルプ）
ビューのメリットとデメリット
ビューを使うと科目の情報や組織情報はマスタのデータを参照するため、科目名や部署名などの項目を経費精算テーブルに直接入力するよりもデータの不整合が起こりにくいという利点があります。
ただし、ビューの作成にはSQLの知識が必要です。Forguncyのビュー機能については開発スタートガイドで詳しく解説していますので、詳細はそちらをご覧ください。
＞クエリを使ってビューを定義する（開発スタートガイド）
ビューを使用しない場合、既にExcelでピボットテーブルを使用していればそのデータ元のテーブルを取り込んでForguncyの内部テーブルとする方法もあります。ExcelからForguncy内部テーブルを作成する方法については、下記のヘルプページを参考にしてください。
＞ページからのテーブル作成（Forguncyヘルプ）
手順1-2.ピボットテーブルの基となるデータの確認
ピボットテーブルを使用するためには、その基となるデータ、いわゆるデータソースが必要となります。
Forguncyではピボットテーブルのデータソースにリストビューを使用します。
そのため、ピボットテーブルを作る前にリストビューを画面上に配置する必要があります。
今回は既にB34セルに用意されているリストビューを使用します。
この「リストビュー1」には「V_経費精算」ビューの項目が配置されています。
ピボットテーブルに表示する各フィールドと、年月の絞り込み用の数式フィールド「年」・「月」がリストビュー内に表示されていることを確認します。
2.ピボットテーブルを作成する
画面の任意の範囲を選択し、セル型をピボットテーブルに変更します。
画面上の選択範囲のセルが結合され、ピボットテーブル型セルとなったことを確認したら、右ペインの「ピボットテーブル設定」をクリックし「ピボットテーブル設定」ウィンドウを開きます。
「データソースとするリストビュー」に、画面に配置済みのリストビュー「リストビュー1」が設定されていることを確認します。
3.表示項目を設定する
引き続き、「ピボットテーブル設定」ウィンドウで表示項目の設定を行います。
手順3-1.列と行の項目を設定
行に表示する以下の項目を、「行」の枠内にドラッグ＆ドロップで設定します。
| 項目 |
|---|
| B35：日付 |
| G35：事業部 |
| M35：部 |
| S35：課 |
同様に、列に表示する以下の項目を「列」の枠内にドラッグ＆ドロップで設定します。
| 項目 |
|---|
| W35：大科目 |
| AB35：中科目 |
完了すると下図のような状態になります。
手順3-1-1.表示形式を整える
「行」と「列」に設定した項目の表示形式の変更をします。
「行」に設定した「B35：日付」クリックし、「フィールドの設定」を押下します。
開いた「フィールドの設定」ウィンドウの「表示形式」ボタンを押下し、表示形式を「日付」にし「2001/03/14」を選択します。
手順3-2.集計項目の設定
ピボットテーブルの表示項目と同様に、「値」の欄に集計項目として「AF35：金額」を設定します。
追加した「AF35：金額（個数）」をクリックし、「フィールドの設定」を押下します。
「値」に追加した項目は、初期設定では集計方法が「個数」になっています。
今回は金額の合計を表示したいので、これを「合計」に変更します。
手順3-2-1.表示形式を整える
「表示形式」ボタンを押下し、以下のように設定して見た目を整えます。
- 「分類」を「通貨」に設定
- 「小数点以下の桁数」を「0」に変更
- 「負の数の表示形式」で「￥-1,234」を選択
「ピボットテーブル設定」ウィンドウを「OK」ボタンで閉じます。
4.ピボットテーブルの見た目を整える
このままでもピボットテーブルによるデータの表示はできますが、より使いやすくするために見た目を調整します。
今回は月単位で科目ごとの集計をしたいため、すべての小計をグループの末尾に表示するのチェックを外しておきます。
各項目の見出しが見切れないよう、セルの列幅を自動で調整する設定を行います。
「スタイル設定」をクリックし、スタイル設定ウィンドウで以下のように設定します。
- 「列幅」で「自動調整」を選択
- 「行ヘッダーの列幅」で「自動調整」を選択
また、データの量が多いため、スクロール操作がしやすいよう操作中のみスクロールバーを表示のチェックを外しておきます。
最後にリボンの「ホーム」タブから「セルスタイル」を選択し、ピボットテーブルのセルスタイルをお好みのデザインに変更します。
5.デバッグを実行
これでページが完成したので、プロジェクトをデバッグ実行します。
手順5-1.デバッグを実行する
リボンの[ホーム]>[デバッグ]>[開始]ボタン、またはForguncy Builderの左上にある▶ボタンを押下してプロジェクトをデバッグ実行します。
作成したページがブラウザで表示されます。
画面上部にはデータ抽出用の対象年度コンボボックスと対象月コンボボックスが配置されています。
画面中央部には、先ほどまでの手順で作成したピボットテーブルが配置されていることを確認してください。
6. Forguncyのピボットテーブルについてもっと知る
Forguncyの開発スタートガイドやオンラインヘルプでは、今回使用したピボットテーブルについてより詳しくご紹介しています。
こちらもぜひご活用ください。
