ローコードツールOracle APEXの自動生成でWebアプリを５分で作る

# Oracle APEX

Oracle APEXとはOracle Databaseと連携してWebアプリケーションを構築するローコード開発プラットフォームです。基本的にはOracle Databaseが必要になりますが、OracleCloudの無料枠でのAutonomousやOracleが提供している無料ワークスペースで開発を行うことが出来ます(リクエストが必要になります)

https://apex.oracle.com/ja/learn/getting-started/

使用出来る言語は***SQL, PL/SQL, JavaScript, Jquery, CSS/HTML***

他にユーザーの管理、権限によるデータ表示管理、チームでの開発機能、sqlでのアプリエクスポート機能、ジョブ実行機能、チャート作成等のコンポーネント群、Webサーバーを準備しなくて良い(Jetty、Tomcat構成も可能)、AjaxによりPL/SQLで取得したデータを画面のJavaScriptで処理できる、そして何より***使用に関するライセンス費用は掛かりません。***


そんな無料で使い倒すことが出来るOracle Apexの機能の一つを使い、csvやエクセルファイルからWebアプリケーションを作成します。

# データの準備
下記サイトからサンプルデータとして年齢（５歳階級），男女別人口－都道府県（大正９年～平成27年）をcsvでダウンロードしてきます。


https://www.e-stat.go.jp/stat-search/files?page=1&layout=datalist&toukei=00200521&tstat=000001011777&cycle=0&tclass1=000001094741&tclass2val=0

# ログイン・アプリ作成

Always Free Apex、無料のAPEXワークスペース、ローカルDBにインストールのいずれかで用意したOracleAPEXのURLにアクセスします。

環境に合わせて、上から「**ワークスペース名、ユーザー名、パスワード**」を入力してサインインボタンをクリックします。
![スクリーンショット 2022-08-16 201350.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/9cb0bb82-cf2e-50f9-b44f-426c9ccd880c.png)

左上の「**アプリケーション・ビルダー**」をクリックします。
![スクリーンショット 2022-08-14 171250.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/0b109c79-c871-50af-2012-98c2a1eab0fd.png)

左上のアプリケーション・ビルダー「**作成**」をクリックします。
![スクリーンショット 2022-08-14 171310.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/316573f4-f0af-d525-f888-8e2e1997c207.png)


アプリケーション作成の下の「**ファイルから**」をクリックします。
![スクリーンショット 2022-08-14 171326.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/de3d4a25-aadc-1ddf-3163-7ee7fd0fb04e.png)

**ダウンロードした年齢（５歳階級），男女別人口－都道府県（大正９年～平成27年）のcsvファイル**を指定します。
![スクリーンショット 2022-08-14 171343.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/55c1a2e3-f84d-ef79-e223-caf00bf4d282.png)


読み込んだcsvからテーブルを作成します。表名に「**POPULATION**」、ファイル・エンコーディングを「**日本語(Shift JIS)**」に変更、「**データのロード**」をクリックします。
![スクリーンショット 2022-08-14 171849.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/94d657b2-ca75-30ad-698a-bebf03ca2601.png)


1行拒否されますが、そのまま「**アプリケーションの作成**」をクリックします。
![スクリーンショット 2022-08-14 171926.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/19c88c47-b3a4-e428-900f-cf1a811eacd3.png)

「**アプリケーションの作成**」をクリックします。
![スクリーンショット 2022-08-14 171955.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/f45b1322-9035-e333-8ee8-616bbe56c170.png)

# アプリ実行

左上の「**アプリケーションの実行**」をクリックします。
![スクリーンショット 2022-08-14 172022.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/7d556057-8b0d-f099-ed1f-9c25d0ef1165.png)

OracleAPEXにログインする際に入力した「**ユーザー名、パスワード**」を入力して「**サインイン**」をクリックします。
![スクリーンショット 2022-08-14 172037.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/e6d4adc8-0c52-1b76-67b4-b75ffd64ee08.png)

最初にトップページと、それぞれのメニューが表示されます。
「**ダッシュボード**」をクリックします。
![スクリーンショット 2022-08-14 172057.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/36393bd1-0f2e-1726-8d20-6b2ac4aae72f.png)


グラフが自動生成されています。
下の黒いバーは開発に関する一覧でAPEXの開発ページがブラウザに入っていると表示されます。
![スクリーンショット 2022-08-14 172120.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/7e66f70f-6e02-c918-ba20-f522b87f5762.png)

こちらが実際の開発ページになります。先ほどの内容でグラフの最大値を設定したり、新しいチャートを作成出来ます。

一番下の「**リージョン、アイテム、ボタン**」がコンポーネント群で画面のレイアウトにドラッグ＆ドロップしていき、右側のプロパティで設定していきます。左側はイベント管理を設定する部分になります。****(詳細はまた後日解説していきたいと思います。)****
![スクリーンショット 2022-08-17 193011.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/fc96181b-162f-d61e-83f6-d0ad077c4bbe.png)


再び画面に戻り、一番左側の「**ハンバーガーアイコン**」をクリックします。
するとメニューバーが表示されるので、ここで違うページに遷移できます。
![スクリーンショット 2022-08-14 172120.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/7e66f70f-6e02-c918-ba20-f522b87f5762.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/41aa4e89-77fa-ec79-a5d5-97199276d66a.png)


ファセット検索が自動で生成されています。
![スクリーンショット 2022-08-14 172213.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/ef2bb02f-d3c7-79db-1c39-d0644de57d27.png)

この画面ではデータを管理するページが自動生成されています。
一番左の「**鉛筆アイコン**」をクリックします。
![スクリーンショット 2022-08-14 172239.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/f19c5963-42c7-314c-7f86-479c3a9439a1.png)


データを編集できるフォームが表示されます。

元がOracleDBと関わりが深いため、**CRAD** `データ登録(Create)，読み取り(Read)，更新(Update)，削除（Delete)`の機能が標準で備わっています。
![スクリーンショット 2022-08-14 172256.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/4fa6354d-fa9c-a641-b414-da3b73f851bd.png)

これでアプリ作成は以上です。

# リファレンス

公開されている在庫管理のサンプルアプリになります。予め用意されているユーザーを指定してログイン後、左上のハンバーガーアイコンをクリックするとメニューが表示されます。
https://apex.oracle.com/pls/apex/r/japancommunity/simple-order-mgmt/login
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/06414e5f-91f3-8004-5688-bb59e05f6850.png)

英語になってしまいますが、使用できるチャートのコンポーネント例が公開されています。
https://apex.oracle.com/pls/apex/r/apex_pm/sample-charts/home
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/ac953809-9db1-29fa-0c11-5db426642cd0.png)

日本語で様々なOracleAPEXの資料が載っています。
https://apex.oracle.com/pls/apex/r/japancommunity/main/home
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/40e6a48e-48ec-22c6-e22e-8b2c54dba14a.png)

少しでもOracleAPEXに興味を持つきっかけになれば幸いです。ここまで見て頂きありがとうございました。