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

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

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

![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276568/ef535b08-970d-7bca-bad8-f4ffcb4abf36.png)


# 前提

- ADB/APEX環境は作成済み
- 厚生労働省のホームページにて公開しているオープンデータ「**○[新規陽性者数の推移（日別）](https://covid19.mhlw.go.jp/public/opendata/newly_confirmed_cases_daily.csv)**」のcsvファイルを利用


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

ワークスペース名、ユーザー名、パスワードを入力してサインインします。
![Untitled 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276568/f384a566-fbd3-3048-3a19-2c7de1dccd0c.png)

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

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

APEXメニューから、「アプリケーション・ビルダー」をクリックします。
![Untitled 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276568/085a392c-34ce-c31e-ee70-bb7d11b90678.png)

アプリケーション・ビルダーメニューから、「作成」をクリックします。
![Untitled 3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276568/fdeb1e8d-c334-f77e-65b8-780eb7692b3f.png)

## 2-1：CSVのインポート
CSVなどのファイルからテーブルを作成するために、「ファイルから」をクリックします。
![Untitled 4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276568/6f8aa4bb-be0b-9d16-c123-a46ffbb2f34e.png)

「ファイルの選択」をクリックし、前提にてダウンロードしたCSVファイルを選択します。
![Untitled 5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276568/1d4ecd63-7634-27f5-6054-36c232fefbd1.png)

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

表名を入力した後、右下の「データのロード」をクリックします。
![Untitled 6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276568/a9918b27-62b1-1b2f-c661-d574e6ae9aa0.png)

数秒でテーブルの作成が完了します。
右下の「アプリケーションの作成」をクリックし、アプリケーションを作成します。
![Untitled 7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276568/0da3f340-08e7-56dc-14e3-454e3d88565b.png)

## 2-3：アプリケーションの作成
初期のウィザード画面。
最初から、「ホーム」「ダッシュボード」「検索」「レポート」ページが作成されます。

デフォルトのまま、「アプリケーションの作成」をクリックします。
![Untitled 8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276568/affb7937-beaa-9785-1c37-17aeedf1fccb.png)

30秒ほどで作成完了、とくに完了した旨のメッセージは出ません。
この画面に遷移するので、「アプリケーションの実行」をクリックします。
![Untitled 9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276568/63f31d8c-a8cc-97c3-39e9-004eab2d5d73.png)

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

ログイン画面が表示されます。
ユーザー名とパスワードを入力してサインインします。
![Untitled 10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276568/b6f678b9-ff87-adc9-a613-ade4a73f67cd.png)


## 3-1：ホームページ
ログイン完了。ホーム画面が表示されます。

デフォルトで、「ダッシュボード」「検索」「レポート」ページが表示されています。
また、画面下部には管理権限のあるユーザー限定の管理メニューが表示されます。
![Untitled 11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276568/c331f4b1-a559-7c34-97d3-3ce929bea35f.png)

左上のアイコンをクリックするとサイドメニューが表示される
![Untitled 12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276568/1d0ef84a-21fe-2ba7-7742-0698af0899b9.png)

## 3-2：ダッシュボードページ
デフォルトで4つのチャートが表示されています。
このままだと意味をなさないチャートになっているのでカスタマイズが必要です。
![Untitled 13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276568/b58c5ce7-cb8f-77dd-74a9-930fcba414cc.png)

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

左にある検索メニューを選択すると、右側の表が動的に変更されます。
列や検索項目は、自動で作られるようです。（もちろん、カスタマイズ可能です。）
![Untitled 14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276568/273a9414-daf7-00c9-3957-b887bd77a512.png)


検索例として、「ALL感染者4000人以上」「青森の感染者3名未満」の条件で表示を動的更新してみました。
![Untitled 15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276568/8ab2472e-0071-5a51-0fa2-cfa2e22907a4.png)

## 3-4：レポート
インタラクティブにデータの検索、編集、チャート作成などが可能なページです。
![Untitled 16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276568/ea9412d1-6d7f-93f4-3fa7-6b57db058590.png)

- データの編集
列左の編集アイコンをクリックするとデータ更新用のダイアログが立ち上がります。
画面は、2020/1/16の編集画面をクリックしたところ。
![Untitled 17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276568/09ce0f5d-9006-1ddf-4cfc-8f1aa9a476fb.png)

試しに、北海道（Hokkaido）を100に変更してみます。
![Untitled 18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276568/5f1b61cd-9a50-719a-8e89-a041714cdda3.png)

データが動的に変更になりました。Tableのデータも書き換わってます。
![Untitled 19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276568/39734a86-152b-4361-34bd-e9290a70c350.png)

# 手順4：新規感染者数推移を表示
今回のゴールである推移を作成します。
レポートページにて、チャートを作成します。

「アクション」ボタンから「チャート」をクリックします。
![Untitled 20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276568/fe7c187a-edab-9015-d5b9-427d2c7a5113.png)

チャートの条件として、以下を選択し適用する。
- グラフ：棒グラフ
- ラベル：Data ・・・ X軸
- 値：All ・・・ Y軸。Allは全国、ここをTokyoやSaitamaなどにするとそれぞれの県のグラフとなる
- ソート：ラベル ・・・ 日付順に表示
![Untitled 21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276568/6b91c5ba-3679-acf3-3847-76ed1f027d79.png)

目的となるグラフが表示されました。
![Untitled 22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276568/fc2c3d06-8a93-9da0-8a31-a94c099edfba.png)

# おまけ（レスポンシブ対応）
APEXはレスポンシブ対応のため、スマホ画面でもバッチリ見えます。
![thumbnail_Image (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276568/c7812584-9d92-8941-7e5f-b3a202cd61a3.jpeg)![thumbnail_Image (2).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276568/d5826340-198b-a603-5801-d7ea5e5cb779.jpeg)