OracleAPEX開発 Zero To Hero 環境準備～実装編①

# Zero To Hero
OracleAPEXの知識ゼロから現場で活かせるようなレベルを目指すコンセプトで解説していきたいと思います。今回は環境の構築方法から実装にあたっての機能紹介になります。

こちら前回紹介記事になります。

https://qiita.com/ShogoMatsumoto/items/1042512ee9f51b513c0b

# 環境準備

Oracle APEXの開発環境の構築方法には3通りあります。

- 無料のワークスペースをリクエストする
- Oracle Cloud Infrastractureを登録し、AutonomousDBからアクセスする
- オンプレのOracle DBにAPEXをインストールする

### 無料のワークスペースをリクエストする
下記URLから申し込みフォームに行けます。
申請から割り当てまで時間が少々掛かる場合があります。

https://apex.oracle.com/pls/apex/r/apex/quick-sign-up/request-workspace

:::note warn
リクエストした無料のワークスペースは暫くアクセスしないでいると自動削除されます。
:::

### Oracle Cloud Infrastractureを登録し、AutonomousDBからアクセスする

以下からOCIの申し込みが可能です。
AutonomousDBは2個まで常に無料で使用出来る環境になります。


https://www.oracle.com/cloud/free/

OCI登録後、最左上「ナビゲーション・メニュー」、「Oracle Database」、「Autonomous Database」を選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/24fb0506-6090-48b3-b4a1-c13628e205e4.png)

「Autonomous Databaseの作成」を選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/57c57473-cb5c-e57b-37b2-763c6760eff3.png)

ワークロード・タイプの選択は「JSON」以外を選択します。もし拘りなければ「APEX」を選択。
Always Freeにはチェックを入れます。
管理者資格証明の作成でパスワードを入力。
ネットワーク・アクセスの選択でアクセス・タイプを「すべての場所からのセキュア・アクセス」を選択。
上記設定完了後、ボタン「Autonomous Databaseの作成」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/1bbe7eb0-665e-93f5-f9fd-79b69487583c.png)


作成完了後、Always Free横の表示名をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/47dba959-2e59-4e20-218c-3a992a90bf4c.png)

「ツール構成」を選択し、Oracle APEXのURLがあるので、コピーしてブラウザで遷移するとアクセス出来ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/7ec33547-e34d-4fe8-30cc-e5611cefbc2a.png)



:::note warn
OCIのAutonomousに一週間アクセスしない場合インスタンスが自動的に停止します。そして三カ月後にAutonomousDBインスタンスは削除されます。その前にインスタンスを再度開始出来れば削除の回避が出来ます。
:::


https://docs.oracle.com/en/cloud/paas/autonomous-database/serverless/adbsb/autonomous-always-free.html#GUID-03F9F3E8-8A98-4792-AB9C-F0BACF02DC3E

### オンプレのOracle DBにAPEXをインストールする
Oracle DBを入れた環境で下記の手順に従ってインストールを行います。

https://docs.oracle.com/en/database/oracle/apex/23.2/htmig/downloading-installing-apex.html#GUID-7E432C6D-CECC-4977-B183-3C654380F7BF


ここでの一番お勧めの構築方法はOCIでAutonomosDBを構築してAPEXにアクセスするやり方です。

# ワークスペース機能

APEXにはワークスペースという概念があります。

まず管理用のINTERNALという名前のワークスペースが一つのみ存在します。
管理用ワークスペースからは子ワークスペースを幾つも作成が可能です。

ログインユーザーは関連するワークスペースに対して１対１の関係のため、INTERNALのユーザーはINTERNALワークスペースのみログイン可能で、子ワークスペースも同様となります。

開発に使用するのは子ワークスペースのため、新規作成の手順を以下記載します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/938c953b-4a85-7ef6-0266-6574ea721a2c.png)

APEXのログインURLから表示します。

一番下の日本語をクリックすると対応言語に変わります。
「管理サービス」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/0cc0f9e5-3090-67d0-a024-88f7c410efc4.png)

ユーザー名を「ADMIN」と入力し、パスワードはAutonomousDB作成時、または事前作成に使用したものを入力します。「管理にサインイン」をクリックします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/bbfb1056-6ba9-b3f6-6ce0-bf274b448ab5.png)

右上の「ワークスペースの作成」をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/49309fb1-11a6-0f9f-4f1c-45a3e15e40a1.png)

「新規のスキーマ」を選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/760caee1-dbbf-1c3b-0989-e0b46a2338b1.png)

「ワークスペース名」「ワークスペース・ユーザー名」「ワークスペース・パスワード」を任意で入力。
「ワークスペースの作成」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/9419de2f-18fe-4a95-088d-94eee3fdb105.png)

「ワークスペース名（zeal_test）」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/39d63c3f-b0d3-0bd4-5bc4-af89dcdef0b6.png)

上から「ワークスペース名」、「ユーザー名」、「パスワード」を入力し「サインイン」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/58c9f6be-a6ab-b1ae-a288-0292c8c6f93f.png)

これで子ワークスペースの開発環境にログイン出来ました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/f558b59c-2b25-47cd-523d-b277dc674d12.png)


# データの準備

まずデータが無いとアプリケーションの開発は出来ません。
サンプルデータを作成します。

上部の「SQLワークショップ」を選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/f558b59c-2b25-47cd-523d-b277dc674d12.png)

「ユーティリティ」を選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/bbbf9f3a-cd4a-fa60-5df9-4351f28bef0c.png)

左上３番目にある「サンプル・データセット」を選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/37568cb8-41b3-b533-b926-ee4f84bba650.png)

ここでは例として名前が「EMP/DEPT」の「インストール」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/cc5fe36e-2b9f-fda8-0287-8dd634b1c96c.png)

言語を「日本語」にして「次」を選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/8b0303b1-2810-0b66-9a4d-1cf0c6a5180e.png)

「データセットのインストール」をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/d6548327-ae11-4ff6-b677-a8e82b9377e6.png)

作成完了後、「オブジェクト・ブラウザ」を選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/bbbf9f3a-cd4a-fa60-5df9-4351f28bef0c.png)

「表」を展開させDEPT、EMPテーブルのサンプルデータが作成されていることを確認出来ます。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/f08e3b7a-f32e-39ba-4c9f-ba11b88751ed.png)

# アプリケーションの構成

先程説明した子ワークスペースは以下の構造となっています。
アプリケーションは幾つも作成可能で、ページという構成単位があります。
またページも幾つも作成可能となり、ページ内に実装で必要なリージョン、アイテム、ボタンが配置可能となっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/defb3b90-9755-e243-a21b-7c54239b6ebe.png)

以下にアプリケーションとページの作成、リージョン、アイテム、ボタンの配置手順について記載します。

# アプリケーションの作成

上部の「アプリケーション・ビルダー」を選択し、右にある「作成」をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/5cf368b2-313e-790d-bd34-95fceca8de0e.png)

「アプリケーション名」を任意で入力。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/58d2bac1-1a94-1e44-f9fa-3efabd97eb0f.png)

「アプリケーションの実行」を選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/6049b9eb-852f-92db-9d9e-67bf66412eb3.png)

作成した「ユーザー名」と「パスワード」を入力し「サインイン」を選択。

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/cf67d269-7286-d072-64ee-02d4ea5f00e6.png)

これで空のアプリケーション作成が完了しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/d268c168-ab8c-2e78-c963-43362499cd95.png)

# ページ作成

先程作成したアプリケーションにページを新規作成します。
「ページの作成」を選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/6049b9eb-852f-92db-9d9e-67bf66412eb3.png)

ここではある程度機能を持ったコンポーネントとして出来上がったページをデプロイすることが可能です。

今回は空のページを作成します。

「空白ページ」を選択し、「次」をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/092db223-a75a-5bfc-82f0-b0107514e663.png)

任意の「名前」を入力し、ページ・モードは「標準」を選択。他はデフォルトのまま「ページの作成」をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/5f06c562-d823-7e9c-365c-22596350272b.png)

右上の緑色の「△」ボタンをクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/6a935fef-1108-7d70-4fca-83d73395d870.png)

「ユーザー名」、「パスワード」を入力。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/f4883028-6df6-29f0-52b7-661e0332f451.png)

空のページが表示出来ました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/f015cec0-2e2d-28b1-4fa9-9ffa7c375891.png)

# ページデザイナーの見方

上部のアプリケーション・ビルダーから開発対象のアプリケーションをクリックされると表示される画面です。簡単な画面の見方は以下になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/790c69da-cfd5-7461-2b22-1f6260b98a93.png)


# リージョンの使用

先程作成したページにリージョンを配置したいと思います。
デザイナー画面に戻り、下記のリージョン範囲から「クラシック・レポート」を「BODY」部分にドラッグ＆ドロップします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/281f3d35-b09b-8e60-6d7c-d3abd45a98fe.png)

ドロップ後、設定項目がないため赤色のエラーが発生します。
右のプロパティ欄から「ソース」、「表名」の三点アイコンをクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/b7d4594e-8be8-2228-3dc0-52a0b2933001.png)

選択できるテーブル名が表示されるので、「EMP」をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/5d85595d-3f41-cb6a-bb42-fa7f8c2eee6c.png)

右上の「保存」、緑色の「△」をクリックしていきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/df532983-caac-6871-23a3-dbe1bac80fb9.png)

これでEMPテーブルのデータが表示出来ました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/bf53625b-e07c-12a9-5f58-5bd0faeace60.png)

リージョンはテーブルからのデータ等を複数表示する場合に使用します。

# アイテムの使用

先程作成したページにアイテムを配置したいと思います。
デザイナー画面に戻り、下記のアイテム範囲から「表示のみ」を「BODY」部分の「新規」の上にドラッグ＆ドロップします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/bfbc890b-dab2-5bd6-cc14-3f474693cfe4.png)

場合によっては以下のレイアウトになることがあります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/0f1d64f3-0c2d-76bd-7f06-0779b4b28151.png)

これはアイテムの「表示のみ」のプロパティ「レイアウト」から「新規行の開始」と「新規列」のパラメータがONになっていると発生します。これら二つをOFFにします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/2fac3964-6448-8d58-89d8-7b4370204887.png)

またアイテムの表示する値はプロパティの「ソース」、「タイプ」から選択できます。
種類は静的値として固定の値を表示、SQL問合せで単一の値を表示(リージョンの場合は複数表示が可能です)、PL/SQLによるファンクションのリターン値で返すこと等が可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/dfecded2-a77e-988b-a0c3-98248bf35be2.png)

今回は静的値を選択して固定の値を表示します。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/4edaddf6-0b15-d484-0d7f-9d49a3c20217.png)

中身が表示出来ました。上部分の「新規」はラベルというプロパティで変更出来ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/426c2096-b2d2-e447-4a24-3d9abde9c7b4.png)

「ラベル」というプロパティの値を変更します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/23b132b9-65c8-e932-bae0-9248cfb782c0.png)

「保存」、緑色の「△ボタン」を押して画面を表示します。
変更内容が反映されました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/a324c075-74b6-e3f1-36ef-e09f0a866a4a.png)

アイテムは単一の値を表示する場合等に使用します。

# ボタンの使用

先程作成したページにボタンを配置したいと思います。
デザイナー画面に戻り、下記のボタン範囲から「Text with Icon[ホット]」を「CLOSE」部分にドラッグ＆ドロップします。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/4bd23657-e6e3-d44a-3ffa-017c6defa9e4.png)

画面の左下にボタンが表示されました。
これはCLOSEという事前に定義されたレイアウト位置に配置している状態です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/e733a2d2-fe00-597c-6646-d5dd9e908be1.png)

ボタンの表示名を変更します。
「ボタン名」と「ラベル」を任意の値を入力。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/3dcbef1a-226c-9299-fb7c-f10633fd8ddb.png)


「保存」、緑色の「△ボタン」を押して画面を表示します。
変更内容が反映されました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/5be8aa09-e417-e179-1c16-60d3737e4985.png)

後述しますが、ボタンの機能としてページ送信というイベントを発生させます。
また異なるページにリダイレクトする設定も可能となります。

# コンポーネントの種類

リージョンの一覧になります。
よく使用するものは「対話グリッド」、「対話モード・レポート」、「フォーム」です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/28d7ba63-228c-fc20-7606-a34670712d96.png)

詳細は以下のドキュメントを参照下さい。

https://docs.oracle.com/en/database/oracle/apex/23.2/htmdb/supported-region-types.html#GUID-C3EF6F23-5CC2-40D6-9F27-37D414C860E8

アイテムの一覧になります。
よく使用するものは「表示のみ」、「テキスト・フィールド」、「数値フィールド」、「非表示」です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/92d81cdf-3a13-d08b-bdea-b67f1564f649.png)

詳細は以下のドキュメントを参照下さい。

https://docs.oracle.com/en/database/oracle/apex/23.2/htmdb/about-item-types.html#GUID-81BF829A-B26C-484D-A321-6A3F47C9192B

ボタン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/c33a2f39-400f-d662-f95a-bc605231b889.png)

[ホット]と付いているものは青色で強調されます。
レイアウトはある程度プロパティ欄から変更が出来ます。

# その他機能

画面の表示時、表示後に使用するイベント関連の機能を紹介します。
この機能達を知れば実装する幅がグンと広がります。

### 動的アクション

Webブラウザーのページロード時、クリック、フォーカス等のイベントに対して特定の動作を行わせる機能になります。例としてページがロードされた際に、テーブルの値に従って特定のリージョンを表示するか非表示にするかコントロールも可能です。その他に特定のボタンを無効化する、PL/SQLを実行する、アイテムに値を設定することが可能です。プロパティの「サーバー側の条件」を使用すれば、その動的アクションを実行するかの設定が出来ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/de7ad2cd-6f79-af11-e79e-438c365dcf4d.png)

詳細は以下のドキュメントを参照下さい。

https://docs.oracle.com/en/database/oracle/apex/23.2/htmdb/managing-dynamic-actions.html#GUID-95E8C5A5-6A25-4786-BD7A-809C18F17D3B

### 計算

指定したアイテムの値を設定できる機能で、後述するイベント内(ページ表示前、ページ表示後、ページ送信後)で作成が可能です。例としてアイテム表示のみに対して、SQL記述した条件で表示名を動的に変更すること、アイテム非表示で隠しパラメータとして値を持たせて計算させることが可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/daf640bf-d7b2-2fc4-d3a0-47968df648b2.png)

詳細は以下のドキュメントを参照下さい。

https://docs.oracle.com/en/database/oracle/apex/23.2/htmdb/understanding-page-computations.html#GUID-F70FEB80-A7C5-464E-8560-722B7CA004D9

### プロセス

PL/SQLの実行、表示してる別画面を表示するモーダルダイアログを閉じる、電子メールの送信等が出来る機能で後述するイベント内(ページ表示前、ページ表示後、ページ送信後)で作成が可能です。例としてページが開かれた時点で特定テーブルにデータを挿入するPL/SQLを実行する、アイテムの値を一斉に設定する際に使用することが可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/6d87ac3c-568a-ce4b-806a-f0af93ab3ff0.png)

詳細は以下のドキュメントを参照下さい。

https://docs.oracle.com/en/database/oracle/apex/23.2/htmdb/about-page-processes.html#GUID-A5B86889-BE27-4AEA-A5FF-D710A9556B69

### ブランチ

条件によってページ遷移することが出来る機能で後述するイベント内(ページ表示前、ページ送信後)で作成が可能です。例としてページが開かれた時点で特定のSQL条件でページを遷移させる、データを登録した後に特定のページに遷移させることが可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/d5c846d1-a963-10a1-b08b-170202653a53.png)

詳細は以下のドキュメントを参照下さい。

https://docs.oracle.com/en/database/oracle/apex/23.2/htmdb/controlling-navigation-using-branches.html#GUID-AE2164D3-6D95-4EB3-BF12-60C2278A1D0E

### 検証

ボタンなどをクリックした後のページ送信後イベント発生後に、PL/SQLを実行して条件が満たされていなければエラーメッセージを表示することが出来る機能です。後述するイベント内(ページ送信後)で作成が可能です。例としてアイテムの値に特定の条件を満たさない不正な値を入れた後に、ページ送信イベントを起こして値をチェックしエラーメッセージを表示させることが可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/8e3eff10-3197-1132-0039-2e848318faab.png)

詳細は以下のドキュメントを参照下さい。

https://docs.oracle.com/en/database/oracle/apex/23.2/htmdb/understanding-validations.html#GUID-05FE01F5-69F6-4DF1-AFA3-70AFC7B2F1F5

### Ajax コールバック

画面表示後に、JavaScriptからデータベースにアクセスすることが出来るAPIの機能です。後述するイベント内(ページ表示後)で作成が可能です。例としてページ送信後のイベントを起こすことなくPL/SQLを実行し、その結果をJavaScript内で処理することで画面の特定箇所を更新することが可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/da008bfd-3c90-dced-7f2a-0841c550932e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/e50b3143-ce7b-0cfc-6633-312604a5ec01.png)

詳細は以下のドキュメントを参照下さい。
OracleAPEX開発 Zero To Hero ケーススタディ編③のAjaxの具体的な実装例でサンプルを掲載しています。

https://docs.oracle.com/en/database/oracle/apex/23.1/aexjs/apex.server.html

# イベントの流れ

上記のその他機能に関する実行順番についてまとめています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/591a4f2a-dbaa-9af8-07e0-91ec8e5f5cb6.png)

①のページが読み込まれた際以下に設定された「計算」、「プロセス」、「ブランチ」が実行されていきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/402466a2-2b64-6c67-17b8-83f52258b6d8.png)

②でページロードに設定された動的アクションが実行されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/e63f69de-6039-5766-ecd5-864250d460da.png)

③でページが表示された状態になります。この中で定義した動的アクション、Ajaxコールバックが実行されます。このページ送信後のイベントが発生しない限り③の状態のままになります。

ページ送信後イベントが発生後は以下に設定された「計算」、「プロセス」、「ブランチ」、「検証」が実行されていきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752288/3858be19-a5d4-554d-78b4-153f49277ff4.png)

実装に関連する解説は以上となります。
宜しければ管理系に関わる解説の記事もあるのでご参考下さい。

https://qiita.com/ShogoMatsumoto/items/57af6b4f86c5ee37adb6