販売実績を管理する一覧表の作成

オペレーション 活用編

この記事でわかること:
 ・商品ごとの販売実績の一覧表の作り方
 ・2つのテーブルのデータを1か所に集約する方法
 ・リストビュー上のセルの書式設定

  

  

プロジェクトファイル
(作成バージョン:(10.0.10.0)
sales-performance_before.fgcp
sales-performance_after.fgcp(実装済みプロジェクトファイル)

1.プロジェクトを確認する

今回の演習で使用するプロジェクトを確認します。

手順1-1.テーブルを確認

ナビゲーションウィンドウのテーブル欄には「注文履歴」、「販売目標」の2つが存在しています。
注文履歴テーブルには注文が行われた日付と、どの商品がいくつ注文されたかのデータが格納されています。
販売目標テーブルには月単位でレコードが作成されており、商品ごとの販売目標数のデータが格納されています。
この2つのテーブルは1レコードの単位がそれぞれ日ごと、月ごととなっており異なっているため、一覧表の形式にするには集計単位を統一する必要があります。

手順1-2.ページを確認

今回の演習には「販売目標管理」というページがあらかじめ用意されています。
ページにはタイトルと黒い枠線で囲まれたセルがあるのみで、他はまだ何も配置されていません。
今回の演習では、このページに月単位で商品ごとに目標数、実際の販売数、目標達成率を表示する一覧表を作成します。

2.注文データを月単位で集計しなおす

商品の注文データは1日単位でテーブルに保管されています。
今回は月ごとにデータを確認できるようにしたいので、まずは注文履歴テーブルのデータを月単位に集計したビューを作成します。
ビューについては開発スタートガイドやヘルプに記事がありますので、詳細はそちらを参照してください。

手順2-1.ビューの作成

リボンの[作成]>[テーブル]>[ビュー]から[ビューの作成]を押下して、ビューの作成ウィンドウを開きます。
ビュー名欄に「v_月別注文履歴」と入力し、下記のSQL文をコピーして貼り付けます。

SELECT 
    strftime('%Y',date((注文履歴.受注日-25569)*60*60*24,'unixepoch'))  AS 年
    ,strftime('%m',date((注文履歴.受注日-25569)*60*60*24,'unixepoch'))  AS 月
    ,SUM([商品A]) AS 商品A注文数
    ,SUM([商品B]) AS 商品B注文数
    ,SUM([商品C]) AS 商品C注文数
 FROM [注文履歴]
 GROUP BY
 年, 月

Kボタンを押下してウィンドウを閉じます。続けて主キーの設定ウィンドウが開くので、にチェックを入れて閉じます。

手順2-2.ビューの確認

ナビゲーションウィンドウからv_月別注文管理ビューを開き、構成を確認します。
ビューには「年」「月」のフィールドができており、「商品A注文数」「商品B注文数」「商品C注文数」フィールドにそれぞれの商品の注文数が月単位で合算された値が入っています。

3.注文データと販売目標データを集約する

月単位で集計しなおした注文データと販売目標テーブルのデータを一つの表にするため、ビューでデータを集約します。

手順3-1.ビューの作成

リボンの[作成]>[テーブル]>[ビュー]から[ビューの作成]を押下して、ビューの作成ウィンドウを開きます。
ビュー名欄に「v_販売目標管理」と入力し、下記のSQL文をコピーして貼り付けます。

SELECT 
[v_月別注文履歴].[年]
,[v_月別注文履歴].[月]

,[販売目標].[商品A目標数] 
,[v_月別注文履歴].[商品A注文数]
,ROUND(CAST([v_月別注文履歴].[商品A注文数] AS REAL)/(CAST([販売目標].[商品A目標数] AS REAL)),3) AS 商品A達成率
,CASE
    WHEN CAST([販売目標].[商品A目標数] AS INTEGER) - CAST([v_月別注文履歴].[商品A注文数] AS INTEGER) < 0 THEN 0
    ELSE CAST([販売目標].[商品A目標数] AS INTEGER) - CAST([v_月別注文履歴].[商品A注文数] AS INTEGER)
  END AS 商品A目標残

,[販売目標].[商品B目標数] 
,[v_月別注文履歴].[商品B注文数]
,ROUND(CAST([v_月別注文履歴].[商品B注文数] AS REAL)/(CAST([販売目標].[商品B目標数] AS REAL)),3) AS 商品B達成率
,CASE
    WHEN CAST([販売目標].[商品B目標数] AS INTEGER) - CAST([v_月別注文履歴].[商品B注文数] AS INTEGER) < 0 THEN 0
    ELSE CAST([販売目標].[商品B目標数] AS INTEGER) - CAST([v_月別注文履歴].[商品B注文数] AS INTEGER)
  END AS 商品B目標残

  ,[販売目標].[商品C目標数] 
,[v_月別注文履歴].[商品C注文数]
,ROUND(CAST([v_月別注文履歴].[商品C注文数] AS REAL)/(CAST([販売目標].[商品C目標数] AS REAL)),3) AS 商品C達成率
,CASE
    WHEN CAST([販売目標].[商品C目標数] AS INTEGER) - CAST([v_月別注文履歴].[商品C注文数] AS INTEGER) < 0 THEN 0
    ELSE CAST([販売目標].[商品C目標数] AS INTEGER) - CAST([v_月別注文履歴].[商品C注文数] AS INTEGER)
  END AS 商品C目標残

 FROM [v_月別注文履歴]
 LEFT JOIN
   [販売目標]
    ON [v_月別注文履歴].[年] = [販売目標].[年]
    AND [v_月別注文履歴].[月] = [販売目標].[月]

    ORDER BY [v_月別注文履歴].[年],[v_月別注文履歴].[月]

OKボタンを押下してウィンドウを閉じます。
続けて主キーの設定ウィンドウが開くので、にチェックを入れて閉じます。

手順3-2.ビューの確認

ナビゲーションウィンドウからv_販売目標管理ビューを開き、構成を確認します。
ビューには「年」「月」のフィールドのほか、「商品A目標数」「商品A注文数」そして「商品A達成率」「商品A目標残」というフィールドが生成されています。
この「商品A達成率」「商品A目標残」は、目標数と注文数のデータを使ってビューで新たに生成・計算されたフィールドです。
商品B、商品Cにも同様のフィールドが存在します。

4.ページを作成する

ここまでの手順で準備した販売目標管理のデータを一覧表形式で表示するページを作成します。

手順4-1.リストビューの作成

販売目標管理ページを開きます。
ページ上の黒い枠線で囲まれたセルを選択した状態でナビゲーションウィンドウからv_販売目標管理ビューをドラッグ&ドロップします。
データソースの設定ウィンドウが開いたら、[選択]タブで表示するフィールドを設定します。
今回はビューのすべての項目を表示します。
項目は自動でセットされていますが、主キーに指定しているが追加されていません。
これらは[追加]ボタンを押下し、手動で追加します。
項目の移動は[削除]ボタン右の[▲][▼]ボタンで可能です。
ほかにもフィールドの不足がないか確認し、もし不足があった場合には[追加]ボタンを押して手動で追加してください。

リストビューがページに配置されたら、リボンの[ホーム]>[フォント]>[罫線]から枠線なしを選択して黒い枠線を消去してください。

手順4-2.リストビューの外観設定

必要なデータの表示自体はすでにできていますが、ユーザーにとって使いやすくするためいくつか見た目の設定を行います。

手順4-2-1.見出しの調整

リストビューの列ヘッダーの調整を行います。リストビューを右クリックし、[リストビュー設定…]をクリックします。
リストビュー設定ウィンドウが開くので、「列ヘッダーの行数」を「2」に変更します。

列の見出しが2行になりました。この状態から、下記の通りにセルを結合し値を入力します。

結合するセル
B5~E6
F5~I6
J5~Y5商品A
J6~M6目標数
N6~Q6注文数
R6~U6達成率
V6~Y6目標残
Z5~AO5商品B
Z6~AC6目標数
AD6~AG6注文数
AH6~AK6達成率
AL6~AO6目標残
AP5~BE5商品C
AP6~AS6目標数
AT6~AW6注文数
AX6~BA6達成率
BB6~BE6目標残

手順4-2-2.セルの書式設定

各商品の達成率のデータは割合なので、パーセント表示になるよう設定します。
R7セルを右クリックし、[セルの書式設定…]をクリックします。
セルの書式ウィンドウが開くので、[表示形式]タブで下記のように設定します。

分類小数点以下の桁数
パーセンテージ0

AH7セル、AX7セルにも同様の設定を行い、各商品の達成率フィールドがパーセント表示になるようにします。

手順4-2-3.条件付き書式の設定

各商品の販売数が目標に達していないとき、すなわち目標残が0ではない場合には赤色で表示されるよう設定します。
V7セルを選択した状態で、リボンの[ホーム]>[スタイル]>[条件付き書式]をクリックし、[セルの強調表示ルール]>[指定の値より大きい…]を選択します。
指定の値より大きいウィンドウが開くので、[次の値より大きいセルを書式設定:]の欄に0と入力して[OK]ボタンを押下します。

AL7セル、BB7セルにも同様の設定を行い、各商品の目標が未達の場合にはセルが赤色になるようにします。

これで、ページの設定は完了です。

5.デバッグを実行する

リボンの[ホーム]>[デバッグ]>[開始]ボタン、またはForguncy Builderの左上にある▶ボタンを押下してプロジェクトをデバッグ実行します。

作成したページがブラウザで表示されます。
商品の販売に関する目標と実績のデータが一覧表示されていることを確認してください。

Forguncyのリストビューについてもっと知る

製品サイトでは、ForguncyのUIパーツや活用方法についてより詳しくご紹介しています。
こちらもぜひご活用ください。

>ノーコードWebアプリ開発ツール「Forguncy」

ノーコードWebアプリ開発ツール「Forguncy」

Forguncy(フォーガンシー)は複数のシステムと直接接続して参照・更新が行えるデータ管理機能と、Excel感覚でレイアウトができる画面デザイン機能を備えたノーコードWeb開発&運用プラットフォームです。基幹システムでは対応できず、仕方なくExcelやAccessで管理していた業務のサブシステム化を強力に支援します。

CTR IMG