BETA

Oracle APEXで検温結果を記録・共有するウェブアプリを作ってみた その6

投稿日:2020-05-19
最終更新:2020-05-19

Oracle APEXで検温結果を記録・共有するウェブアプリを作ってみた その5 の続きです。

今回は、検温登録したデータを使い、簡単なダッシュボードを作ってみます。

事前準備

Oracle APEXの開発環境を作ってみた
Oracle APEXで検温結果を記録・共有するウェブアプリを作ってみた その1
Oracle APEXで検温結果を記録・共有するウェブアプリを作ってみた その2
Oracle APEXで検温結果を記録・共有するウェブアプリを作ってみた その3
Oracle APEXで検温結果を記録・共有するウェブアプリを作ってみた その4
Oracle APEXで検温結果を記録・共有するウェブアプリを作ってみた その5

バージョン

Oracle Application Express 20.1.0

手順

まずはダッシュボード用のページを作ります。

今までと同様に、ページ一覧より「ページ作成」をクリックし、作成ウィザードを以下で進めます。

  • ページ作成画面:空白ページを選択し次をクリック
  • 空白ページの作成:ページ番号に "5"、名前に "ダッシュボード"を入力し次をクリック
  • ナビゲーション・メニュー:そのまま次をクリック
  • 確認画面:終了をクリック

続いて、ページにリージョンコンポーネントを配置していきます。

折れ線グラフを作る

ページ・デザイナ 左ペインの、「リージョン」の上で右クリックし、「リージョンの作成」をクリックします。

"</>新規" のプロパティを設定します。

識別 → タイトル:検温履歴
識別 → タイプ:チャート

続いて、「属性」を選択し、プロパティを設定します。

チャート → タイプ:折れ線
タイトル → タイトル:
凡例 → 表示:オン

続いて、「シリーズ → 新規」を左ペインツリーより選択し、プロパティを設定します。

ソース → タイプ:SQL問い合わせ
ソース → SQL問い合わせ:下のSQL。

SELECT user_id,  
       TO_CHAR(temp_date,'YY/MM/DD') temp_date,  
       temperature  
  FROM temperatures  
 ORDER BY temp_date  

列のマッピング → シリーズ名:USER_ID
列のマッピング → ラベル:TEMP_DATE
列のマッピング → 値:TEMPERATURE

次に、「軸 → x」のプロパティを設定します。

識別 → タイトル:検温日

最後に、「軸 → y」のプロパティを設定します。

識別 → タイトル:体温
値 → 最小:34.0
値 → 最大:42.0
値 → 小数点:1
値 → ベースライン・スケール:最小
値 → ステップ:0.5

「ページの保存と実行」を押して確認してみます。

折れ線グラフができました。

カレンダーを作る

続いて、レポートのリージョンを追加して、検温履歴をカレンダー形式で表示してみます。

ページ・デザイナ 左ペインの、「リージョン」の上で右クリックし、「リージョンの作成」をクリックします。

「新規」をクリックし、以下のプロパティを設定します。

識別 → タイトル:検温履歴
識別 → タイプ:カレンダー
ソース → 表名:TEMPERATURES

「属性」のプロパティを設定します。

設定 → 表示列:TEMPERATURE
設定 → 開始日付:TEMP_DATE
設定 → 主キー列:USER_ID

「ページの保存と実行」をクリックします。
カレンダーが表示されました。

レポートの追加

では最後に、過去四日間の検温履歴を表示できるよう、レポートを追加してみます。

リージョンを追加し、同じようにプロパティを設定していきます。

識別 → タイトル:検温履歴(直近4日間)
識別 → タイプ:クラシック・レポート
ソース → タイプ:SQL問い合わせ
ソース → SQL問い合わせ:下のSQL

SELECT  
 tm.user_id,   
 usr.user_name,  
 tm.temp_date,  
 tm.temperature  
FROM temperatures tm  
LEFT JOIN users usr ON tm.user_id = usr.user_id  
WHERE temp_date >= (temp_date - 4)  
ORDER BY temp_date, user_id   

続いて、「列」を展開し、ヘッダーのプロパティを変更します。

  • USER_ID:ユーザーID
  • USER_NAME:ユーザー名
  • TEMP_DATE:検温日
  • TEMPERATURE:体温

「ページの保存と実行」をクリックしてみると、

レポートが追加されました。

このように、Oracle APEXではリージョンを自由に追加することができ、レポートやチャートなどのコンポーネントを配置することができます。

なお、PC画面で見た場合は全て別の行で表示されてしまいますので、「レイアウト → 新規行の開始」をオン/オフし調整してください。
また、リージョンをツリーの上でドラッグし移動することで表示順を変えることもできます。

これでダッシュボードが出来ました。
アプリとしてはほぼ出来上がりですが、メニューからの実行ができませんので次回やってみようと思います。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

Oracle APEX というローコード開発ツールのネタが中心です

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう