6
2

More than 3 years have passed since last update.

Oracle APEX(Oracle Application Express)でローコード機械学習

Last updated at Posted at 2020-06-07

Oracle Cloud で機械学習(Kaggle Titanic 問題)
で、Oracle Cloud 環境でのモデル作成を行いました。

今度は、そのモデルを使用して、予測を行うアプリを、Oracleのロー・コード開発基盤であるAPEX(Oracle Application Express)で作成します。

ロー・コードとノー・コードの差はどこでしょうね?SQL書いたらコーディング有りならロー・コードですね。
けど、結構ノー・コードに近い形で作れますね

何を作るか

自分の属性を指定して、自分の生存率を予測する、というアプリを作ります。

デシジョン・テーブルのアルゴリズムでモデルが作成済みなのが前提です。
データにモデルを適用するのは、

select 
    PASSENGERID, -- レコードを一意に識別したいときに利用
    prediction( TITANIC_MODEL_DT using *) as prediction, -- 予測
    prediction_probability( TITANIC_MODEL_DT  , '1' using *) as probability -- 予測が '1' である確率
from TITANIC_TEST;

ですね。
なので、まず自分の属性を入力し、診断用のテーブルに登録する画面を作ります。
そして、診断ボタンが押されたら、生存率がどれくらいと予測されたのかを表示する画面を作ります。

診断用テーブル作成

前回作った、TITANIC_TESTとは別に画面入力値を保存するテーブルを作ることにします。
内容は、同一です。

既存テーブルの定義参照方法も書いておきます。
SQL Developer Web に接続すると、左側にテーブルが一覧表示されています。
スクリーンショット 2020-06-05 8.05.30.png

テーブル名を右クリック→編集→DDL
で、CREATE TABLE 文が表示されます。

CREATE TABLE MLUSER.TITANIC_TEST 
    ( 
     PASSENGERID NUMBER , 
     PCLASS      NUMBER , 
     NAME        VARCHAR2 (4000) , 
     SEX         VARCHAR2 (4000) , 
     AGE         NUMBER , 
     SIBSP       NUMBER , 
     PARCH       NUMBER , 
     TICKET      VARCHAR2 (4000) , 
     FARE        NUMBER , 
     CABIN       VARCHAR2 (4000) , 
     EMBARKED    VARCHAR2 (4000) 
    ) 
    TABLESPACE DATA 
    LOGGING 
;

もしくは、テーブル名右クリック→クイックDDL
だと、こんな感じで表示されます。(内容違うんだ・・・)

CREATE TABLE "MLUSER"."TITANIC_TEST" 
   (    "PASSENGERID" NUMBER, 
    "PCLASS" NUMBER, 
    "NAME" VARCHAR2(4000 BYTE) COLLATE "USING_NLS_COMP", 
    "SEX" VARCHAR2(4000 BYTE) COLLATE "USING_NLS_COMP", 
    "AGE" NUMBER, 
    "SIBSP" NUMBER, 
    "PARCH" NUMBER, 
    "TICKET" VARCHAR2(4000 BYTE) COLLATE "USING_NLS_COMP", 
    "FARE" NUMBER, 
    "CABIN" VARCHAR2(4000 BYTE) COLLATE "USING_NLS_COMP", 
    "EMBARKED" VARCHAR2(4000 BYTE) COLLATE "USING_NLS_COMP"
   )  DEFAULT COLLATION "USING_NLS_COMP" ;

これのテーブル名を変えて実行すれば、テーブルが作成されます。

CREATE TABLE MLUSER.TITANIC_DIAG 
    ( 
     PASSENGERID NUMBER , 
     PCLASS      NUMBER , 
     NAME        VARCHAR2 (4000) , 
     SEX         VARCHAR2 (4000) , 
     AGE         NUMBER , 
     SIBSP       NUMBER , 
     PARCH       NUMBER , 
     TICKET      VARCHAR2 (4000) , 
     FARE        NUMBER , 
     CABIN       VARCHAR2 (4000) , 
     EMBARKED    VARCHAR2 (4000) 
    ) 
    TABLESPACE DATA 
    LOGGING 
;

APEX での画面作成

Autonomous Database 画面の「ツール」タブからAPEX画面を開きます。
スクリーンショット 2020-06-05 8.11.32.png

「アプリケーション・ビルダー」タブをクリックし、画面を開きます。最初は、この「テストアプリ」もない状態ですね。
スクリーンショット 2020-06-05 21.22.19.png

左上でも、右側でも良いので、「作成」を押します。
今回は「新規アプリケーション」です。

スクリーンショット 2020-06-05 21.24.01.png

名前を入力し、外観も適当に変更してみます。

スクリーンショット 2020-06-05 21.25.38.png

他はそのままで、「アプリケーションの作成」を行います。

スクリーンショット 2020-06-05 21.27.48.png

本当の初期状態のページが生成されるので、「アプリケーションの実行」をしてみます。
サインイン画面が出ます。これは何を入れれば良いのかわからなくなってしまいました。
そういう時は、いったん終了し、「1 - ホーム」を開いて、「認証が必要なページ」→「パブリックページ」に変更します。「保存」も忘れずに。

スクリーンショット 2020-06-05 21.32.21.png

画面が開きました。まだ何もないシンプルな画面です。

スクリーンショット 2020-06-05 21.34.28.png

では画面を追加していきます。

ページの作成

「ページの作成」をクリックすると、ページタイプを指定する画面が表示されます。
色々試してみると面白いですが、今回は、属性入力→結果表示という流れを表す画面として、ウィザードを使用することにします。

スクリーンショット 2020-06-06 7.42.56.png

ウィザード名と作成するページ数を指定します。(最初試しに作った時
作成するページを指定するのに気づかず、5で作って、後から変更するために色々調べました。そいういう経験も必要ではありますね)

スクリーンショット 2020-06-06 7.44.00.png

ナビゲーションメニューへの追加を指定します。

スクリーンショット 2020-06-06 7.45.55.png

各ページ名と戻り先ページを指定して作成します。

スクリーンショット 2020-06-06 7.47.30.png

作成するとページデザイナ画面が開きますので、量ページのセキュリティの設定だけ「パブリック・ページ」に変更しておいて、いったんアプリケーション画面に戻り、アプリケーションを実行します。
スクリーンショット 2020-06-06 7.51.12.png

先ほどのようにナビゲーションメニューへの追加を行うと、ホームの中に「タイタニック診断」が現れますので、そこからページを開きます。
とりあえず、遷移することだけ確認します。

スクリーンショット 2020-06-06 7.52.52.png
スクリーンショット 2020-06-06 7.53.21.png

データ更新処理

では属性入力ページでデータ更新処理を作成します。
アプリケーション画面から、「3 - 属性入力」をクリックすると、ページデザイナ画面が開きます。
スクリーンショット 2020-06-06 8.03.22.png

右上の[>]実行ボタンで画面を開いて、見比べながらみると分かりやすいと思います。
そうすると、例えば、ボタン名「CANCEL」ラベル「取消」というボタンが配置されている、などが分かります。
そして、ページアイテムの「属性入力」の中に「P3_ITEM1」というテキスト・フィールドがあることも分かります。この部分を今回の入力項目に変更します。
で、真ん中のエリアで、P3_ITEM1をコピーするなどもできるので、それでフィールドを追加していっても良いわけですが、より便利な機能がありました。(こういうレベルの素人が書いていますので、より良い方法は探求していってください)

真ん中下の「フォーム」という項目がありますが、ここから画面要素を追加することができます。右クリックすると、どの部分に追加するかを指定できるので、下記のように、WIZARD SUB REGIONの中、「属性入力」の前に追加するようにします。(ドラッグ&ドロップでもできます)

スクリーンショット 2020-06-06 8.15.24.png

こんな感じで追加されたら、「属性入力」の方は不要なので削除して良いでしょう。

スクリーンショット 2020-06-06 8.20.06.png

追加したフォームが「新規」という名前で赤くなっています。エラー状態ということですが、エラー内容は、「メッセージ」タブから見ることができます。
スクリーンショット 2020-06-06 8.21.49.png
確かに、右エリアでも「表名」がばつ印になっています。

表名は、入力欄右側のボタンから表明の選択画面を表示させることができます。検索もできるので、titanicで検索して、最初に作成したTITANIC_DIAGを指定します。
スクリーンショット 2020-06-06 8.23.14.png

そうすると、項目も自動で追加されました。
スクリーンショット 2020-06-06 8.25.26.png

とりあえず一つだけ設定。アイテムの一番上「P3_PASSENGERID」を選択して、ソース>主キーをONにします。
スクリーンショット 2020-06-06 8.29.46.png
これで保存して、ページを開くと、入力欄が表示されていることが確認できます。
全部手打ち項目で作られてしまうので面白味がないですが、テキストフィールドと数値フィールドは自動的に区分けされており、最低限のバリデーションもかかっています。
スクリーンショット 2020-06-06 8.31.16.png

試しに一つだけ、性別のアイテムタイプを変更してみます。
タイプをラジオ・グループに変更し、列の数を1から4にします(2ではおかしい表示になりました)。
LOVのタイプを静的値に変更し、静的値の右側のボタンを押すと値リストを指定する画面が出ますので、男女の値を入力します。

スクリーンショット 2020-06-06 8.39.30.png
スクリーンショット 2020-06-06 8.36.42.png

これで保存して実行すると、画面表示に反映されることが確認できます。ラジオボタン自体が不選択時に色が見えないのがイマイチですが、それは後でなんとかしましょう。

スクリーンショット 2020-06-06 8.52.15.png

また、フォームの名前も、「新規」になっているのを「属性入力」に変更しておきます。

プロセスを定義するので、左エリア上部で、プロセスタブに切り替えます。
そこからプロセスの作成に入ります。

スクリーンショット 2020-06-06 17.26.40.png

今回は単純に、入力値をそのままINSERTしますので、行の自動処理を選択して、フォームリージョンとして、先ほど名前を変えた「属性入力」を指定します。名前も指定しておきます。

スクリーンショット 2020-06-06 17.30.03.png

この状態で実行すると、登録後にメッセージが表示されるようになり、SQLワークショップでテーブルを選択してデータを表示すると、データが登録されていることが確認できます。

スクリーンショット 2020-06-06 17.31.11.png

スクリーンショット 2020-06-06 17.31.37.png

診断結果をチャートで表示

診断結果ページについても、まずは、表示アイテムの差し替えから行います。
「probability(予測が '1' である確率)」をグラフ表示するために、チャートリージョンを追加し、元々存在した診断結果リージョンは削除し、新規リージョンの名前を診断結果リージョンにします。
スクリーンショット 2020-06-06 22.46.31.png

そうすると、チャートの表示元となるソースの指定を求められるので、「SQL問合せ」を選択し、SQL問い合わせの内容として、本記事冒頭に記載した診断SQLの、テーブル名をTITANIC_DIAGに変更したものを入力します。

SQL問合せ
select 
    PASSENGERID, -- レコードを一意に識別したいときに利用
    prediction( TITANIC_MODEL_DT using *) as prediction, -- 予測
    prediction_probability( TITANIC_MODEL_DT  , '1' using *) as probability -- 予測が '1' である確率
from TITANIC_DIAG;

そして、ラベルにPASSENGERID、値にPROBABILITYを指定して、実行するとこのように表示されます。

スクリーンショット 2020-06-06 22.54.19.png

スクリーンショット 2020-06-06 22.55.20.png

単純ではありますが、このような形で結果表示もできました。

その他、実際は必要な処理として、

  • Passengerid は、利用者は何を入れたら良いかわからないので、非表示項目として、自動で値をセットすべき。

  • 診断結果表示後は、TITANIC_DIAGテーブルのデータは不要になる。しかし、同時に他人も診断しているかもしれない。→キーであるPassengeridで削除すべき。そう考えると、PassengeridにはセッションIDを入れておくと良いかもしれない。

などがあるでしょう。

一応このような形で一通りの動作ができるました。
後は、フォームの各項目を適切なアイテムタイプに変更する等は、色々試しながらやってみると面白そうです。

アプリケーションの外部保存

ここで、いったん、アプリケーションを外部に保存し、復元するというところも試してみたいと思います(この後壊してしまっても良いように)。

スクリーンショット 2020-06-07 7.07.15.png

スクリーンショット 2020-06-07 7.13.22.png

スクリーンショット 2020-06-07 7.14.02.png

何も変更なしでそのまま行ってみます。

こんなファイルがダウンロードされました。
スクリーンショット 2020-06-07 7.16.06.png

いったんアプリケーションを削除して、再度インポートしてみます。
スクリーンショット 2020-06-07 7.21.23.png
スクリーンショット 2020-06-07 7.21.40.png
スクリーンショット 2020-06-07 7.22.14.png
スクリーンショット 2020-06-07 7.22.34.png

無事復元されました。

では、このエクスポートファイルをバージョン管理すれば良いのかとか思いましたが、ことはそう単純でもないようです。なかなか新しい情報が見つかりませんが、この辺が参考になりそうです。

Oracle Application Expressでのライフ・サイクル管理(リビジョン2)

外観の変更

さて、全体の見た目に関して、標準で用意されている画面デザインは、どれも「いかにも」という感じが漂って入て、もう少し遊びも入れられないかなと思っています。

そこで最後に、テーマの変更を行ってみます。

APEX Bootstrap 4 【失敗】

最初に使用したのはこちらのBootstrapテーマです。
APEX Bootstrap 4 (Theme)
なぜこれか?Bootstrapを組み込んでしまえば、さらにBootstrap用の様々な無料テーマ・テンプレートが使えるかなと思ったからです。

ダウンロードページの、「Theme Export」から、ダウンロードします。
そして、ダウンロードしたテーマをインポートします。
スクリーンショット 2020-06-07 7.33.07.png
インポートすると、このようにテーマ一覧が表示されるので、「テーマの切替え」をクリックします。
スクリーンショット 2020-06-07 7.34.10.png

スクリーンショット 2020-06-07 7.34.40.png

そして進めていくと、このような画面が表示されます。怪しさ満点です。要するに、元テーマの方が様々に区分けされていて、それが一つのStandardに集約されてしまうということです。
スクリーンショット 2020-06-07 7.35.39.png
いったん進めてみます。
スクリーンショット 2020-06-07 7.36.33.png
これで完了するので、画面を開いてみます。
スクリーンショット 2020-06-07 7.40.15.png
シンプルなタイトルのみで、メニューもなくなりました。
スクリーンショット 2020-06-07 7.53.17.png
実にシンプルです。

いやそれはあんまりだということで、いったんテーマを戻してみます。共通コンポーネント>ユーザー・インターフェースの中に、「テーマ」があります。そこから、またテーマの切替えができます。
スクリーンショット 2020-06-07 7.53.45.png
スクリーンショット 2020-06-07 7.54.49.png
なんとか戻そうとしているが、元と比べたら要素の数が大幅に減っています。
スクリーンショット 2020-06-07 7.55.16.png
スクリーンショット 2020-06-07 7.55.37.png
戻らなかった!

ところで、いったんBootstrapテーマに切替えた時に、メニューすら無くなってしまうのは、単にメニュー部分に適用されるスタイルの問題なのかと思ったらそういうことでもありませんでした。
スクリーンショット 2020-06-07 8.07.48.png
すなわち、出力される要素から消えてしまっているということです。

ということで、こちらのテーマは使用を諦めました。
いったん、エクスポートしておいたアプリをインポートして戻します。(エクスポートしておいてよかった!こういうのは野生の勘ですね。)

Material APEX

今度は同じところから提供されている「Material APEX」というテーマを試してみます。
Material APEX

こちらの提供形態は、デモアプリと空のアプリであり、テーマとしての提供はしていないようです。
また一から作っても良いですし、その方がきれいにできそうな気がしますが、いったんでもアプリをインポートし、そのテーマをエクスポートし、自分のアプリにテーマをインポートして切替える、という方法を試してみます。

スクリーンショット 2020-06-07 8.29.35.png
スクリーンショット 2020-06-07 8.31.58.png
今度は、それなりに対応づけがされているので、期待が持てます。
Wizardのところだけ、初期値から変更しました。

普通にホームページを起動すると何も表示されませんでした。あれダメかなと思いましたが・・・
スクリーンショット 2020-06-07 8.32.33.png

属性入力画面を開くと、レイアウト崩れはあるものの、表示はされています。

スクリーンショット 2020-06-07 8.33.52.png

スクリーンショット 2020-06-07 8.34.19.png

標準のテーマよりはポップになりましたね。

ということで、いったんここまでにしておきたいと思います。

ドキュメント等

(すみません、以下、完全に愚痴モードです)

Oracle APEX に関して、一番網羅的なドキュメントは、アプリケーション・ビルダー・ユーザーズ・ガイド かと思われます。
Oracle® Application Express
アプリケーション・ビルダー・ユーザーズ・ガイド

ところが、これがまた検索性が悪いし、どこからここにたどり着けるのかもちょっとよく分からない。例えば、このページの右上の検索ボックスに「テーマの切替え」と入力してみても検索結果なしになってしまう。そりゃないぜ、と。

まだ多少マシなのは、5.0版のドキュメント。
https://docs.oracle.com/cd/E68317_01/doc.50/e64891/toc.htm
2階層下まで見えている、というだけではありますが・・・

この辺が充実しないと安心しては使えないかなという気はします。
ただ、ノーコード、ローコードツールとしての一つの選択肢としてはありかなと思いました。

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