[Oracle Cloud] チュートリアル APEXに csvファイルをアップロードして、簡単にWebアプリケーションを公開

# はじめに

Oracle DB には、Oracle APEX (Application Express) と呼ばれる、Webアプリケーションの開発プラットフォームです。
ロー・コード (Low Code) で開発出来る特徴があり、APEX が提供している標準機能を利用することで、簡単に Web アプリケーションを公開することが出来ます。

また、Oracle DB と一緒に動くため、Webアプリケーション用のサーバー管理が不要な特徴もあります。

それでは、APEX のチュートリアルとして、以下のポイントを確認していきましょう。

- ATP (Autonomous Transaction Processing) を作成 (Always Free で無料で動かすことが可能！)
- APEX の開発画面上で csv ファイルをアップロードして、Oracle DB のテーブルにデータを Import
- テーブル内のデータを 検索・編集 が可能なWebアプリケーションを作成



# ATP作成

OCI上で、Autonomous Transaction Processing(ATP)を適当に作成します。
Always Free の対象に含まれているため、無料で作成することが可能です。
作成方法が不明の場合は、Documentを参照してください。
https://docs.cloud.oracle.com/iaas/Content/Database/Tasks/adbcreating.htm

以下のパラメータでCreateを実行。Create完了まで数分かかります。

- Display name : testsugi
- Database name : testsugi
- Choose a workload type : Transaction Processing
- Chose a deployment type : Serverless
- CPU core count : 1
- Storage(TB) : 1
- Auto scaling : on
- Create administrator credentials password : 適当に指定
- Choose a license type : License Included



# APEX設定

## 管理画面にLogin

ATP の詳細画面にある、Service Console を選択します

![1564841454175.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/112c2c5a-595a-2beb-8cc6-1974c80b6bef.png)



Development の APEX をクリックして、APEX の管理画面へ移動します。

![1564841492192.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/16262cd5-e958-b3c6-d861-93ac465eb72e.png)



ATP作成時に指定したパスワードを入力します

![1564841516819.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/16a145f7-3881-d1ca-fa64-19ef0258740f.png)



## Workspaceを作成

APEXでアプリケーションを作成するために、まずは Workspace を作成します。Create Workspace を選択します。

![1564841539106.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/67783ace-b8de-a1d3-f42f-3278e042b2ea.png)





以下のパラメータを入力して、Workspace を作成します。

- Database User : 新たに作成するWorkspaceの管理ユーザー名を指定。指定したユーザーが自動的にAutonomous DB上に作成される (ADMINユーザーは管理者用ユーザーなので、ワークスペースとして利用不可)
- Password : ユーザのログインパスワード。適当に指定
- Workspace Name : Workspaceの名前

![1564844116571.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/ea107f16-0e2f-1fe4-5fc1-b2f0a82cf055.png)



Workspaceが作成出来ました。ワークスペース名のリンクをクリックします。

![1564844276592.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/db44098b-69bd-1740-102f-98e7d439ef3b.png)



ログインページが表示されます。ワークスペース名、ユーザー名、パスワードを入力します。

![1564844428819.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/f0b1bc1b-1aa2-a53e-9b21-fb0eee06e588.png)



作成した Workspace [SUGIAPEX] にログインが出来ました。

![1564844738271.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/218d4bfb-c8b2-5d09-4418-ab0cb767c5f4.png)



## Application の作成

Workspace 上で、Application という枠組みの概念を作成していきます。
Application の概念については、以下の Blog が参考になります
https://mutatsu.wordpress.com/2019/06/23/apex%e3%81%a7%e3%82%a2%e3%83%97%e3%83%aa%e3%82%b1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e4%bd%9c%e6%88%90%e3%81%97%e3%81%a6%e3%81%bf%e3%82%8b%ef%bc%88%ef%bc%92%ef%bc%89/

Workspace 上で、App Builder を押します。

![1573293289966.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/86ce2bbf-62dd-7e57-7f4c-255f0a807f87.png)



Create を押して、Application の作成画面へ移動します。

![1573293389330.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/d9955bd4-5b80-7311-1e7a-379df3ef7ed5.png)





作成方法はいろいろな種類がありますが、簡単に作成するために、csv ファイルからアプリケーションを作成する選択肢の、「From a File」を選択します。

![1573293628946.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/35880d69-cce6-525e-4f4f-d9d883cedf3f.png)



アップロードするための csv ファイルを適当にダウンロードしてきます。
今回は、東京都が公開しているオープンデータの、東京都保有アセット (土地の情報) を使用します。
以下のURLから csv ファイルをダウンロードします。
https://catalog.data.metro.tokyo.lg.jp/dataset/t000029d0000000002/resource/8211ec25-fb53-4c04-839a-30f7b8dcb326

![1573889953236.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/3138af19-367d-a600-adb3-2f40d5eee504.png)



APEX の画面へ戻り、ダウンロードした csv ファイルをアップロードします。

![1573293673747.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/f33cfcb4-30ee-36a7-42f9-0f09e4520e72.png)



ファイルを選択した直後は、アップロード前の確認画面が表示されます。
Default の File Encofing が、[Unicode UTF-8] となっているため、日本語のファイルは文字化けすると思います。

![1573293711417.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/61b956ca-eaa3-263a-6f6b-98599af03584.png)



文字コードを変更すると、正常に認識されます。

![1573293764809.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/71bb818e-ec94-7130-ceea-038aecd5ce97.png)



他のデータが正常に認識されているか確認するために、Configure を押します
![1573293983000.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/e3a8b041-9d90-d588-d4c7-4f821add3406.png)



Configure ページで、入力する csv の全ての内容の確認や、テーブル構造を確認することが可能です。特に問題ないため、 Close Dialog を押します。

![1573294033424.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/b9afe405-27a5-d383-3a27-39158bb40228.png)



ATP の Table を新規作成して、その中に csv データを Insert していくために、新規作成する Table Name を入れます。
Error Table Name は自動入力されるため、自動入力された文字列のままにしておきます。
その後、Load Data を押します。

![1573294274177.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/a6d85a01-fa2c-878c-9c8d-42752b18578a.png)



csv ファイルを ATB へデータ入力処理が開始されます。

![1573294297827.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/1e009684-4f57-82b8-cd44-b0f8763965db.png)



完了後、Continue ボタンを押します。

![1573294316662.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/c9cec02d-f78d-08ef-1a70-3b66fcbe0998.png)



Application の名前を入力します。Application には、3つのPage が Default で作成されています。

![1573294693607.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/99162935-9597-7565-1ec0-80d8c223ab31.png)



言語選択後、Create Application を押します。

![1573294786415.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/023948b7-5cfd-f35f-17a6-cf1e713ea1c5.png)



30秒ほど待ちます

![1573294796901.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/98b2205a-bd5d-a119-5619-632fc78ed8db.png)



Application の詳細ページに自動遷移しました。Run Application で、実際のWebアプリケーションのLogin ページに移動します

![1573294854823.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/9295f429-287b-e53e-98a0-6b0f4ae7e01e.png)



## 作成した Application にアクセス

Workspace を作成時に指定した Username と Password を指定します

![1573294895535.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/e1f3c26e-a589-84ea-1811-a26641b22c0d.png)



トップページが表示されました。Page が Home, Land, Dashbord と3種類表示されています。

![1573298043831.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/c9ac2d66-d66f-176b-2a71-320f96449cb5.png)



Land ページで出来ること

- 文字列を指定して検索
- 鉛筆マークで編集
- アクション
  - 見栄え変更
  - ダウンロード : csv, HTML, 電子メール
  - サブスクリプションで定期的にメール発行

![1573298068692.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/246a7c04-7b39-52f0-ddb0-f23da02181e8.png)



Land ページで出来ること

- 簡単な可視化

![1573298083757.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104247/109a2d7d-e6bc-a741-9a96-243c8d96e0f0.png)





# 参考URL

APEX Document
https://docs.oracle.com/en/database/oracle/application-express/19.1/

APEXの学習
https://apex.oracle.com/ja/learn/

Sample Tutorial
https://www.oracle.com/technetwork/developer-tools/apex/application-express/apex-rest-atp-hol-5586156.pdf