ローコード開発プラットフォーム(Oracle APEX)を使って家計簿?アプリを作る(その1)

0. はじめに

0-1. 本記事の目的

ローコード開発プラットフォームである Oracle APEX でどんなふうにアプリケーションを作ることができるかを、無料で試せる環境を使って(5回くらいに分けて)ご紹介することを目的としています。こちらはその第一回目の記事です。前提知識は不要(のはず・・)です。本記事でアプリケーションの骨格部分を作りますので、2回目以降をご覧にならなくても「とりあえず」使えるアプリケーションを作ることはできます。
(第一回目での所要時間: 準備含め1時間くらいかと)

0-2. Oracle APEX とは

下URLにある通り、Oracle Application Express (APEX)は、ローコード開発プラットフォームです。
https://apex.oracle.com/ja/
ブラウザベースのデータベース・アプリケーションを比較的簡単に作成することができます。
簡単なアプリケーションであれば、ノーコードで作成することができます。また、コードを書くとしても大部分はデータを取ってくるところだけで、UIの部分についてはほぼ設定だけで済みます。

上のサイトの「無料で開始」をクリックして表示されるページにある通り、無料で試すことができます。

この記事では無料で利用できる Oracle Cloud Infrastructure(OCI) の Always Free リソースを利用します。
他に、こちらも上のサイトに書いてありますが、無料のAPEXワークスペースをリクエストして始めることもできます(APEXを試すだけであればこれが一番お手軽だと思います)。
また、オンプレミスの Oracle Database に APEX をインストールしても 本記事のアプリケーションを作ることができます(手軽に始めるのであればこちらは選ばれないほうが良いと思います)。

いずれにせよ この記事をご覧になりながらアプリケーションを作ろうとされている方は、まず APEX で開発できる環境をご用意いただけますようお願いいたします。

0-3. なぜ家計簿アプリか

深い意味はありません。APEXでのローコード開発を試していただく上で、誰もが機能をイメージしやすく かつ少しでも実用的なものが良いのでは と思ったからです。ただ世の中には無料の家計簿アプリが多くあり、機能的にも優れているようなので、それらと肩を並べるものではないことはご了承ください。この記事を通じてAPEXでのアプリ開発にある程度慣れていただき、ご自分の使いやすいようにカスタマイズしていただければと思います。

0-4. どんなものを作るか

3つのページを持つアプリケーションを作ります。
1.「支出管理帳」ページです。いつ 何に いくら使ったかを入力・参照するページです。修正や削除もここで行えます。入力したデータは Oracle Database に格納されます。

2.「チャート」ページです。何にいくら使ったかを月別に積み上げ棒グラフで表示する部分と、何に支出したかの割合を表す円グラフを表示する部分があるページです。

3.「支出ファセット検索」ページです。左側のチェックボックスをクリックすることでデータの絞り込み条件を設定でき、その結果が動的に右側に表示されます。下の例では「保健医療」をチェックして、保健医療に分類される支出にいつ いくら使ったかを表示しています。
前のページのグラフをクリックすると、このページに遷移し、クリックした場所に応じた条件で絞り込まれた情報を表示させることもできます(例えば、棒グラフの 2017 家具・家事用品 をクリックすると、こちらのページに遷移して 21年7月の家具・家事用品の内訳を表示する といったことができます)。

以降でこのアプリケーション作成手順をご説明しますが、その前に アプリケーションで使用するテーブル作成とダミーデータのロードを行います。

1. テーブルの作成とダミーデータのロード

1-1. テーブルの作成

アプリケーションを作成する前に アプリケーションからデータを格納したり参照したりするためのテーブルを作ります。このアプリケーションで使うテーブルは、支出を記録・参照するための「支出」テーブルと、各支出を分類するためのマスターである「支出_貯蓄項目」テーブルの2つです(テーブルのネーミングやデータモデリングの観点から色々ご指摘はあろうかと思いますが、ここはひとつ目を瞑っていただければと思います)。

テーブルの作成も APEX から行うことができます。
下図の通り、APEXにサインイン後に「SQLワークショップ」ー>「SQLコマンド」を選択します。
(APEXでテーブル作成を行う方法は他にもあります(SQLを書かずに作成する方法もあります)が、ここでは触れません。ご了承ください)

表示される画面に以下コマンドをそれぞれ コピー/ペーストの上、「実行」ボタンをクリックしてテーブルを作成してください。

支出テーブル

CREATE TABLE  "支出" 
   (	"ID" NUMBER GENERATED BY DEFAULT ON NULL AS IDENTITY MINVALUE 1 MAXVALUE 9999999999999999999999999999 INCREMENT BY 1 START WITH 1 CACHE 20 NOORDER  NOCYCLE  NOKEEP  NOSCALE  NOT NULL ENABLE, 
	"年月日" DATE NOT NULL ENABLE, 
	"項目" VARCHAR2(50) NOT NULL ENABLE, 
	"金額" NUMBER NOT NULL ENABLE, 
	"備考" VARCHAR2(255), 
	 PRIMARY KEY ("ID")
   )
/

支出_貯蓄項目テーブル

CREATE TABLE  "支出_貯蓄項目" 
   (	"ID" NUMBER GENERATED BY DEFAULT ON NULL AS IDENTITY MINVALUE 1 MAXVALUE 9999999999999999999999999999 INCREMENT BY 1 START WITH 1 CACHE 20 NOORDER  NOCYCLE  NOKEEP  NOSCALE  NOT NULL ENABLE, 
	"備考" VARCHAR2(4000), 
	"表示順" NUMBER, 
	"分類" VARCHAR2(255), 
	 PRIMARY KEY ("ID")
   )
/

下図のような感じで表が作成されると思います。

1-2. ダミーデータのロード

せっかくアプリケーションを作ってもデータが入っていないと見た目もいまいちだし操作しても楽しくないので、上で作成した 支出テーブルにダミーデータをロードし、支出_貯蓄項目テーブルにマスターデータをロードすることにします。以下にダミーデータとマスターデータをご用意しましたのでダウンロードしてご利用ください。なお、ダミーデータは店舗名等が入っていますが実在するものとは一切無関係ですし、筆者の消費活動とも一切関係がないことをお断りしておきます。

下図の通りAPEXのメニューで「SQLワークショップ」ー>「ユーティリティ」ー>「データ・ワークショップ」の順に選択します。

左側「データのロード」を選択します。

ここに上でダウンロードした 2つのファイルのうち、まず expense_sample.txt をドラッグ・アンド・ドロップなどしてください。

下のように設定し、右下の「データのロード」をクリックしてください。

問題なくデータがロードされると、下のような表示になると思います。

同様に、expense_item_sample.txtも 支出_貯蓄項目テーブルにロードしてください。

2. アプリケーションの作成

ここからやっとアプリケーション作成となります。下図のように「アプリケーション・ビルダー」ー>「作成」を選択してください。

「新規アプリケーション」を選択します。

アプリケーションの名前を「支出管理」とします(名前は何でも良いですが便宜上)。初期状態では空白のページが「ホーム」となっていますが、今回はこの空白ページを削除して、代わりに「支出管理帳」ページを作成したいと思います。
「編集」ボタンをクリックして、空白ページを削除します。


削除後、「ページの追加」をクリックして「支出管理帳」ページを追加していきます。

「対話グリッド」を選択します。

ページ名は(任意ですが)「支出管理帳」、「表またはビュー」欄には 上で作成した「支出」表を選択、「アイコンの設定」では(これも任意ですが)"yen"と入力すれば"¥"が出てきますのでそれを選択し、右下の「ページの追加」をクリックしてページを追加します。これで一旦「支出管理帳」ページの作成は完了となります。

次に、「チャート」ページを作成します。上の「支出管理帳」ページと同様に「ページの追加」をクリックします。今度は「ダッシュボード」を選択します。

下図の通り設定します。
・ページ名: 「チャート」(任意ですが)
・アイコンの設定: "pie" と入力して最初に出てきたものを選択(任意です。デフォルトのままでも良いです)
・「チャート1」を選択
・(グラフ種類で)「棒」を選択
・グラフ名: 「月別支出合計」(任意です)
・表またはビュー: 「支出」を選択
・ラベル列: 「年月日」を選択
・「合計」を選択
・列値: 「金額」を選択
続いてチャート2を選択します。

・グラフ名: 「項目別支出割合」(任意です)
・表またはビュー: 「支出」を選択
・ラベル列: 「項目」を選択
・「合計」を選択
・列値: 「金額」を選択

最後に「ファセット検索」ページを作成します。上2つのページと同様、「ページの追加」をクリックしてファセット検索ページを追加します。

・ページ名: 「ファセット検索」(任意です)
・アイコンの設定: "search"と入力すると虫眼鏡のアイコンが出たのでそれを選択(任意です。デフォルトのままでも良いです)
・表: 「支出」を選択

「アプリケーションの作成」ボタンをクリックすると、3つのページを持つアプリケーションが生成されます。

「アプリケーションの実行」をクリックして、作成したアプリケーションを試すことができます。

・・・いかがでしょうか。動きましたでしょうか。APEXで作成したアプリケーションは、同じURLを指定してスマートフォンやタブレットのブラウザでも動きます(レスポンシブ・デザイン)。一応ここまではノーコーディングでアプリケーションを作ることができました。しかし
「動くには動いたが、なんか違う・・・」と思われたのではないでしょうか。おそらく下のような画面になったと思います。



「支出管理帳」ページはデータが時系列に並んでおらず、
「チャート」も積み上げ棒グラフになっておらず、(さらに余分なグラフが表示されている)
「ファセット検索」も上の「0-4.どんなものを作るか」のようにグラフはありません。
何より上の「0-4.どんなものを作るか」では「チャート」ページのグラフをクリックすると「ファセット検索」ページに遷移するようなことが書かれているが、そのような動きはしないですね。
このままでも使えないことはないですが、コレじゃない感が大きいと思います。
そこで 次回以降、各ページを編集してこのアプリケーションをより良いものにしていきたいと思います。