2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted at 2024-01-09

Zero To Hero

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

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

環境準備

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

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

無料のワークスペースをリクエストする

下記URLから申し込みフォームに行けます。
申請から割り当てまで時間が少々掛かる場合があります。

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

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

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

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

image.png

「Autonomous Databaseの作成」を選択。

image.png

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

image.png

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

image.png

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

image.png

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

オンプレのOracle DBにAPEXをインストールする

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

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

ワークスペース機能

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

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

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

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

image.png

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

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

データの準備

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

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

アプリケーションの構成

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

image.png

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

アプリケーションの作成

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

ページ作成

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

image.png

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

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

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

ページデザイナーの見方

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

image.png

リージョンの使用

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

アイテムの使用

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

ボタンの使用

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

image.png

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

image.png

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

image.png

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

image.png

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

コンポーネントの種類

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

image.png

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

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

image.png

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

ボタン
image.png

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

その他機能

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

動的アクション

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

image.png

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

計算

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

image.png

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

プロセス

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

image.png

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

ブランチ

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

image.png

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

検証

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

image.png

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

Ajax コールバック

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

image.png

image.png

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

イベントの流れ

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

image.png

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

image.png

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

image.png

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

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

image.png

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

2
1
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
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?