2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-08-19

Oracle APEX

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

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

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

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

データの準備

下記サイトからサンプルデータとして年齢(5歳階級),男女別人口-都道府県(大正9年~平成27年)をcsvでダウンロードしてきます。

ログイン・アプリ作成

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

環境に合わせて、上から「ワークスペース名、ユーザー名、パスワード」を入力してサインインボタンをクリックします。
スクリーンショット 2022-08-16 201350.png

左上の「アプリケーション・ビルダー」をクリックします。
スクリーンショット 2022-08-14 171250.png

左上のアプリケーション・ビルダー「作成」をクリックします。
スクリーンショット 2022-08-14 171310.png

アプリケーション作成の下の「ファイルから」をクリックします。
スクリーンショット 2022-08-14 171326.png

ダウンロードした年齢(5歳階級),男女別人口-都道府県(大正9年~平成27年)のcsvファイルを指定します。
スクリーンショット 2022-08-14 171343.png

読み込んだcsvからテーブルを作成します。表名に「POPULATION」、ファイル・エンコーディングを「日本語(Shift JIS)」に変更、「データのロード」をクリックします。
スクリーンショット 2022-08-14 171849.png

1行拒否されますが、そのまま「アプリケーションの作成」をクリックします。
スクリーンショット 2022-08-14 171926.png

アプリケーションの作成」をクリックします。
スクリーンショット 2022-08-14 171955.png

アプリ実行

左上の「アプリケーションの実行」をクリックします。
スクリーンショット 2022-08-14 172022.png

OracleAPEXにログインする際に入力した「ユーザー名、パスワード」を入力して「サインイン」をクリックします。
スクリーンショット 2022-08-14 172037.png

最初にトップページと、それぞれのメニューが表示されます。
ダッシュボード」をクリックします。
スクリーンショット 2022-08-14 172057.png

グラフが自動生成されています。
下の黒いバーは開発に関する一覧でAPEXの開発ページがブラウザに入っていると表示されます。
スクリーンショット 2022-08-14 172120.png

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

一番下の「リージョン、アイテム、ボタン」がコンポーネント群で画面のレイアウトにドラッグ&ドロップしていき、右側のプロパティで設定していきます。左側はイベント管理を設定する部分になります。(詳細はまた後日解説していきたいと思います。)
スクリーンショット 2022-08-17 193011.png

再び画面に戻り、一番左側の「ハンバーガーアイコン」をクリックします。
するとメニューバーが表示されるので、ここで違うページに遷移できます。
スクリーンショット 2022-08-14 172120.png
image.png

ファセット検索が自動で生成されています。
スクリーンショット 2022-08-14 172213.png

この画面ではデータを管理するページが自動生成されています。
一番左の「鉛筆アイコン」をクリックします。
スクリーンショット 2022-08-14 172239.png

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

元がOracleDBと関わりが深いため、CRAD データ登録(Create),読み取り(Read),更新(Update),削除(Delete)の機能が標準で備わっています。
スクリーンショット 2022-08-14 172256.png

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

リファレンス

公開されている在庫管理のサンプルアプリになります。予め用意されているユーザーを指定してログイン後、左上のハンバーガーアイコンをクリックするとメニューが表示されます。
https://apex.oracle.com/pls/apex/r/japancommunity/simple-order-mgmt/login
image.png

英語になってしまいますが、使用できるチャートのコンポーネント例が公開されています。
https://apex.oracle.com/pls/apex/r/apex_pm/sample-charts/home
image.png

日本語で様々なOracleAPEXの資料が載っています。
https://apex.oracle.com/pls/apex/r/japancommunity/main/home
image.png

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

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?