7
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 5 years have passed since last update.

[Oracle Cloud] チュートリアル APEXに csvファイルをアップロードして、簡単にWebアプリケーションを公開

Last updated at Posted at 2019-11-16

はじめに

Oracle DB には、Oracle APEX (Application Express) と呼ばれる、Webアプリケーションの開発プラットフォームです。
ロー・コード (Low Code) で開発出来る特徴があり、APEX が提供している標準機能を利用することで、簡単に Web アプリケーションを公開することが出来ます。

また、Oracle DB と一緒に動くため、Webアプリケーション用のサーバー管理が不要な特徴もあります。

それでは、APEX のチュートリアルとして、以下のポイントを確認していきましょう。

  • ATP (Autonomous Transaction Processing) を作成 (Always Free で無料で動かすことが可能!)
  • APEX の開発画面上で csv ファイルをアップロードして、Oracle DB のテーブルにデータを Import
  • テーブル内のデータを 検索・編集 が可能なWebアプリケーションを作成

ATP作成

OCI上で、Autonomous Transaction Processing(ATP)を適当に作成します。
Always Free の対象に含まれているため、無料で作成することが可能です。
作成方法が不明の場合は、Documentを参照してください。
https://docs.cloud.oracle.com/iaas/Content/Database/Tasks/adbcreating.htm

以下のパラメータでCreateを実行。Create完了まで数分かかります。

  • Display name : testsugi
  • Database name : testsugi
  • Choose a workload type : Transaction Processing
  • Chose a deployment type : Serverless
  • CPU core count : 1
  • Storage(TB) : 1
  • Auto scaling : on
  • Create administrator credentials password : 適当に指定
  • Choose a license type : License Included

APEX設定

管理画面にLogin

ATP の詳細画面にある、Service Console を選択します

1564841454175.png

Development の APEX をクリックして、APEX の管理画面へ移動します。

1564841492192.png

ATP作成時に指定したパスワードを入力します

1564841516819.png

Workspaceを作成

APEXでアプリケーションを作成するために、まずは Workspace を作成します。Create Workspace を選択します。

1564841539106.png

以下のパラメータを入力して、Workspace を作成します。

  • Database User : 新たに作成するWorkspaceの管理ユーザー名を指定。指定したユーザーが自動的にAutonomous DB上に作成される (ADMINユーザーは管理者用ユーザーなので、ワークスペースとして利用不可)
  • Password : ユーザのログインパスワード。適当に指定
  • Workspace Name : Workspaceの名前

1564844116571.png

Workspaceが作成出来ました。ワークスペース名のリンクをクリックします。

1564844276592.png

ログインページが表示されます。ワークスペース名、ユーザー名、パスワードを入力します。

1564844428819.png

作成した Workspace [SUGIAPEX] にログインが出来ました。

1564844738271.png

Application の作成

Workspace 上で、Application という枠組みの概念を作成していきます。
Application の概念については、以下の Blog が参考になります
https://mutatsu.wordpress.com/2019/06/23/apex%e3%81%a7%e3%82%a2%e3%83%97%e3%83%aa%e3%82%b1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e4%bd%9c%e6%88%90%e3%81%97%e3%81%a6%e3%81%bf%e3%82%8b%ef%bc%88%ef%bc%92%ef%bc%89/

Workspace 上で、App Builder を押します。

1573293289966.png

Create を押して、Application の作成画面へ移動します。

1573293389330.png

作成方法はいろいろな種類がありますが、簡単に作成するために、csv ファイルからアプリケーションを作成する選択肢の、「From a File」を選択します。

1573293628946.png

アップロードするための csv ファイルを適当にダウンロードしてきます。
今回は、東京都が公開しているオープンデータの、東京都保有アセット (土地の情報) を使用します。
以下のURLから csv ファイルをダウンロードします。
https://catalog.data.metro.tokyo.lg.jp/dataset/t000029d0000000002/resource/8211ec25-fb53-4c04-839a-30f7b8dcb326

1573889953236.png

APEX の画面へ戻り、ダウンロードした csv ファイルをアップロードします。

1573293673747.png

ファイルを選択した直後は、アップロード前の確認画面が表示されます。
Default の File Encofing が、[Unicode UTF-8] となっているため、日本語のファイルは文字化けすると思います。

1573293711417.png

文字コードを変更すると、正常に認識されます。

1573293764809.png

他のデータが正常に認識されているか確認するために、Configure を押します
1573293983000.png

Configure ページで、入力する csv の全ての内容の確認や、テーブル構造を確認することが可能です。特に問題ないため、 Close Dialog を押します。

1573294033424.png

ATP の Table を新規作成して、その中に csv データを Insert していくために、新規作成する Table Name を入れます。
Error Table Name は自動入力されるため、自動入力された文字列のままにしておきます。
その後、Load Data を押します。

1573294274177.png

csv ファイルを ATB へデータ入力処理が開始されます。

1573294297827.png

完了後、Continue ボタンを押します。

1573294316662.png

Application の名前を入力します。Application には、3つのPage が Default で作成されています。

1573294693607.png

言語選択後、Create Application を押します。

1573294786415.png

30秒ほど待ちます

1573294796901.png

Application の詳細ページに自動遷移しました。Run Application で、実際のWebアプリケーションのLogin ページに移動します

1573294854823.png

作成した Application にアクセス

Workspace を作成時に指定した Username と Password を指定します

1573294895535.png

トップページが表示されました。Page が Home, Land, Dashbord と3種類表示されています。

1573298043831.png

Land ページで出来ること

  • 文字列を指定して検索
  • 鉛筆マークで編集
  • アクション
    • 見栄え変更
    • ダウンロード : csv, HTML, 電子メール
    • サブスクリプションで定期的にメール発行

1573298068692.png

Land ページで出来ること

  • 簡単な可視化

1573298083757.png

参考URL

APEX Document
https://docs.oracle.com/en/database/oracle/application-express/19.1/

APEXの学習
https://apex.oracle.com/ja/learn/

Sample Tutorial
https://www.oracle.com/technetwork/developer-tools/apex/application-express/apex-rest-atp-hol-5586156.pdf

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