4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【OCI】新型コロナウイルスの新規感染者数推移をADB/APEXで視覚表示したい

Last updated at Posted at 2022-02-28

ゴール

OCIのADB/APEXを使用して、新型コロナウイルス感染症(COVID‑19)の推移グラフを作成します。


こんな感じの図(参考画像:厚生労働省サイトより:https://www.mhlw.go.jp/stf/covid-19/kokunainohasseijoukyou.html

Untitled.png

前提

手順1:APEXのワークスペースにログイン

ワークスペース名、ユーザー名、パスワードを入力してサインインします。
Untitled 1.png

手順2:アプリケーションの作成

ウィザードを使い、アプリケーションを作成します。
ウィザードは、CSVインポート→テーブル作成→アプリケーション作成の流れとなります。

APEXメニューから、「アプリケーション・ビルダー」をクリックします。
Untitled 2.png

アプリケーション・ビルダーメニューから、「作成」をクリックします。
Untitled 3.png

2-1:CSVのインポート

CSVなどのファイルからテーブルを作成するために、「ファイルから」をクリックします。
Untitled 4.png

「ファイルの選択」をクリックし、前提にてダウンロードしたCSVファイルを選択します。
Untitled 5.png

2-2:テーブルの作成

CSVからロードしたデータの確認画面が表示されます。
表名を任意で入力する必要があるため、「新規陽性者数の推移」としました。
この表名はアプリケーション名のデフォルト画面になります。

表名を入力した後、右下の「データのロード」をクリックします。
Untitled 6.png

数秒でテーブルの作成が完了します。
右下の「アプリケーションの作成」をクリックし、アプリケーションを作成します。
Untitled 7.png

2-3:アプリケーションの作成

初期のウィザード画面。
最初から、「ホーム」「ダッシュボード」「検索」「レポート」ページが作成されます。

デフォルトのまま、「アプリケーションの作成」をクリックします。
Untitled 8.png

30秒ほどで作成完了、とくに完了した旨のメッセージは出ません。
この画面に遷移するので、「アプリケーションの実行」をクリックします。
Untitled 9.png

手順3:アプリケーションの起動確認

ログイン画面が表示されます。
ユーザー名とパスワードを入力してサインインします。
Untitled 10.png

3-1:ホームページ

ログイン完了。ホーム画面が表示されます。

デフォルトで、「ダッシュボード」「検索」「レポート」ページが表示されています。
また、画面下部には管理権限のあるユーザー限定の管理メニューが表示されます。
Untitled 11.png

左上のアイコンをクリックするとサイドメニューが表示される
Untitled 12.png

3-2:ダッシュボードページ

デフォルトで4つのチャートが表示されています。
このままだと意味をなさないチャートになっているのでカスタマイズが必要です。
Untitled 13.png

3-3:検索ページ

いわゆるファセット検索ページが表示されます。

左にある検索メニューを選択すると、右側の表が動的に変更されます。
列や検索項目は、自動で作られるようです。(もちろん、カスタマイズ可能です。)
Untitled 14.png

検索例として、「ALL感染者4000人以上」「青森の感染者3名未満」の条件で表示を動的更新してみました。
Untitled 15.png

3-4:レポート

インタラクティブにデータの検索、編集、チャート作成などが可能なページです。
Untitled 16.png

  • データの編集
    列左の編集アイコンをクリックするとデータ更新用のダイアログが立ち上がります。
    画面は、2020/1/16の編集画面をクリックしたところ。
    Untitled 17.png

試しに、北海道(Hokkaido)を100に変更してみます。
Untitled 18.png

データが動的に変更になりました。Tableのデータも書き換わってます。
Untitled 19.png

手順4:新規感染者数推移を表示

今回のゴールである推移を作成します。
レポートページにて、チャートを作成します。

「アクション」ボタンから「チャート」をクリックします。
Untitled 20.png

チャートの条件として、以下を選択し適用する。

  • グラフ:棒グラフ
  • ラベル:Data ・・・ X軸
  • 値:All ・・・ Y軸。Allは全国、ここをTokyoやSaitamaなどにするとそれぞれの県のグラフとなる
  • ソート:ラベル ・・・ 日付順に表示
    Untitled 21.png

目的となるグラフが表示されました。
Untitled 22.png

おまけ(レスポンシブ対応)

APEXはレスポンシブ対応のため、スマホ画面でもバッチリ見えます。
thumbnail_Image (1).jpgthumbnail_Image (2).jpg

4
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?