【Oracle APEX】(初心者向け) チュートリアルから派生して、各種基本機能を試してみた

# はじめに
今回は、前提条件内のリンク先（APEXチュートリアル）から派生して、更にどのような機能があるのかを試してみました。
【実施した環境】Oracle APEX 22.2.1
【作業想定時間】15 ～20 分程度 (APEX上の作業のみの時間)

# 前提条件
- [105: ADBの付属ツールで簡易アプリを作成しよう(APEX)](https://oracle-japan.github.io/ocitutorials/adb/adb105-create-apex-app/)の
「4. スプレッドシートから簡易アプリケーションの作成」の3項目目まで進んでいること
- その後の流れもチュートリアルに沿っております

# 実施内容
0.[サンプルデータの受発注データ(orders.csv)の列名を英語表記→日本語表記 (ORDER_KEY → 注文番号) に変更](#0-サンプルデータの紹介 )
　→ サンプルデータはすべて英数字表記だが、日本語表記がある場合、文字化けなく取り込まれるのか？

1.[ダッシュボードのページ](#3-1-ダッシュボード)
　1. 項目名を変更
　2. ボタンを追加

2.[検索画面](#3-2-検索画面)
　1. フィルタリング
　2. チャートを表示

3.[レポート画面](#3-3-レポート画面)
　1. レコードの追加・削除・編集
　2. 表示形式の変更
　3. 集計結果の表示
　4. ハイライト表示
　5. 変更データのダウンロード

4.[フィードバック機能の追加](#3-4-フィードバック機能)

# 0. サンプルデータの紹介 
以下の添付で、黄色ハッチの列名を **ORDER_KEY → 注文番号** に変更してみました
※それ以外の項目・値は何も変えていません
![sampleData](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/1a2d0434-cce5-aa08-1d25-979da49b0df4.png "サンプルデータ(orders_日本語).csv")

# 1. スプレッドシートから簡易アプリケーションの作成
途中までは、チュートリアル (**4. スプレッドシートから簡易アプリケーションの作成Permalink**) と同様のステップ
> 1. APEXコンソールから アプリケーション・ビルダー を起動します
> 2. 新規アプリケーションの作成 をクリックします
> 3. ファイルから をクリックします

以降は、今回、オリジナルの検証となります。

4.事前に準備しておいた orders_日本語.csv をドラッグアンドドロップします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/2127144c-1c3d-2fe5-f115-59cbf89c4318.png "サンプルデータをドラッグ&ドロップ")
5.表の名前を入力します（ここでは「**ORDERS_Japanese**」とします）。※エラー表名は自動的に入力されます。
6.データのプレビューで文字化け等が発生していないことを確認します。
→ やはり、列項目名を日本語に書き換えた箇所は文字化けが発生しました！
→ では、文字化けを解消していきます！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/99b5587d-5640-7c16-fe4d-b94b5a428280.png "データ表示プレビュー欄で文字化けを確認！")
7.ファイル・エンコーディングを **日本語(Shift JIS)** へ変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/909a9353-5fb6-ec6c-694c-2c13c507c3db.png "ファイル・エンコードをS-JISに変更！")
8.文字化けは解消し、列名もしっかりと日本語で表示されるようになりました！
9.[データのロード]をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/68127910-1bcc-f5c9-b3cd-e47465e1b353.png "列名の文字化け解消！")
10.ロード完了のメッセージが表示されたら アプリケーションの作成 をクリックします。 
　<font color="Red">※この時点でDB上にORDERS表が作成されています</font>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/64f1ff9b-5dba-f6d5-4890-a013d70652eb.png "データのロードが完了！")
11.アプリケーションに名前を付けます。今回は 「**受発注管理システム**」 と入力します。
12.今回は、フィードバック機能も追加するので、機能 > **フィードバック** のチェックボックスにチェックします
13.[アプリケーションの作成]をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/34e146c3-5e01-4486-2783-ac55819b5d68.png "アプリケーションの作成の仕上げ”")
以上で、アプリケーションの作成は完了です。

# 2. アプリケーションの実行
では、実際にアプリケーションを起動してみましょう！

1. [**アプリケーションの実行**] をクリックします。
2. ログイン画面に ユーザー名・パスワード を入力し サインイン します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/2c1090a2-a1f5-6a81-25f3-a2d2fc510a05.png "アプリケーションにログイン！")
3. ログイン完了！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/eb301f68-525f-e362-45c7-d64bc88e5d66.png "ログイン完了！")
　　　　　　　　　　　　　↑ ページ下部の黒色のメニューバーからもページの改廃が可能です

# 3. 実行確認
さて、作成されたアプリケーションを見ていきます。
チュートリアルと同様に、トップ画面 (ホーム画面) には、ダッシュボード画面、検索画面、管理画面（レポート）が表示されています。

ではまず、ダッシュボードから見てみましょう！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/de87c308-079f-efad-8b92-2c8899156061.png "トップ画面 (ホーム画面)")

## 3-1. ダッシュボード
確かに、チュートリアルと同様に、取り込んだデータをもとに自動的にグラフが作成されておりました！

point 1：今回は、[0. サンプルデータの紹介](#0-サンプルデータの紹介)にて、列名「ORDER_KEY」から「注文番号」と日本語表記に変更しました。
　　　　それに伴い、ダッシュボード上の項目も、日本語表記となっていました！
point 2：左隣が日本語表記ですと、こちらも日本語表記にしてしまいたくなりますね・・・。
point 3：ダッシュボードだけの画面よりも、**ボタン** を追加してみたいかも・・・
point 4：チュートリアルの図と見比べると、コメントマークが増えています:thinking:。
　　　　(この機能の詳細は、後ほど[3-4. フィードバック機能](#3-4-フィードバック機能)にて！)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/5b3ec476-34eb-23c5-45fe-3f16953da7ee.png "気になるポイント4つ！")
では、上記pointの内容で画面修正に入っていきましょう！
### point 2：ダッシュボードで項目名の編集
1. 黒いメニューバーの [**ページ2**] をクリックすると、ページデザイナ (開発画面) に遷移できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/b6a2cffd-29bb-7f6c-b88d-94c6e1752b2a.png "ページデザイナ (開発画面) に遷移！")
2. ページデザイナ-中央部をスクロールします。
3. すると、注文番号・Order Status・Units・Discont valueのボックスが現れるので、**Order Statusのボックスをクリック**
4. 右側の 識別 > タイトル は Order Status で登録されています。
5. 4.の箇所を**注文状況**に変更します。
6. 変更後は、[**保存**]ボタン あるいは (**▷**)ボタン(実行ボタン) をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/ed450765-c4cc-b76e-65ec-bb3dd0cc1269.png "手順②～④")
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/cf71e86d-8b0a-a340-e9a6-de33c908ed0a.png "手順⑤～⑥")
7. もう一度、ダッシュボード画面を確認すると・・・
 確かに、項目名を英語表記から日本語表記に変更できました！
**※6.で保存ボタンをクリックした方は、ダッシュボード画面でF5などでリフレッシュすれば、変更が反映されます。**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/75379f79-8ded-6c9d-6382-d49cc288022e.png)
### point 3：ダッシュボードでボタンを追加
では、開発画面に戻りましょう。

1. ページデザイナ-中央部を最後までスクロール。
2. ページデザイナ-中央の下部に「リージョン」「アイテム」「ボタン」が選択可能なタブがあると思います。
 その中の「ボタン」をクリック
3. [text]と記載のあるボタンを、Unitsのボックスの下にドラッグ＆ドロップ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/770ad112-a6a2-4502-b6a5-19eb20af91e9.png "手順①②")
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/d4e40ef7-689c-d759-7fec-97d2f3e92bc0.png "手順③")
4. 新規でボタンのアイコンが中央部に追加されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/e760391c-b987-b3a4-8c25-2420fb65c0a6.png "ボタン追加完了！")
5. ボタン名を「新規」→「ボタン」に変更してみます
5. 変更後は、[**保存**]ボタン あるいは (**▷**)ボタン(実行ボタン) をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/de650d9f-5871-35da-bc1a-6f7c958ba8ff.png)
7. もう一度、ダッシュボード画面を確認すると・・・
 確かに、ボタンを追加できました！
※今回はボタンを追加しただけなので、クリックしても同じ画面に戻ってきてしまいます。が、手を加えれば他の画面遷移も！
**※6.で保存ボタンをクリックした方は、ダッシュボード画面でF5などでリフレッシュすれば、変更が反映されます。**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/176adc09-bc4e-3a32-6608-78b0272142fe.png "ボタンが追加された！！")
## 3-2. 検索画面
では、続いて左の三本線のメニューバーから、検索画面に遷移しましょう！
今回のサンプルデータ計5,247が確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/bd11e2be-c545-1444-8601-d49e8c517597.png "検索画面に遷移")

1. まずは、検索ボックスに「**3-Shipped**」を入力し、検索してみます。
確かに、3-Shippedで絞れました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/640943a4-ea36-ee42-932b-4c36a67953e2.png "検索ボックスで検索")
1. 続いては、フィルタリング機能で「**3-Shipped**」にチェックし、検索してみます。
こちらも、3-Shippedで絞れました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/ef878b60-cc1e-0003-8aa5-c331a6685a51.png "フィルタリング機能")
3. では、縦3つに黒ぽちが並ぶボタン > [チャートの表示] の順にクリックしてみます。
チャートの表示ができました！また、棒グラフ・円グラフの切り替えも可能です！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/5a952281-dc75-56ec-70e2-699ebd8219fb.png "棒グラフと円グラフ")
## 3-3. レポート画面
続いて、左の三本線のメニューバーから、レポート画面に遷移しましょう！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/1bb2081f-ad8c-4f9f-49d4-10ffa3e45d5d.png "レポート画面")
### 3-3-1. レコードの追加・削除・編集
1. まずは、**データを追加** しますので、[作成] ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/b8f4331c-9e70-263e-f68a-8df99a4ccf4b.png "作成ボタンをクリック")
2. 右側にレコード編集画面が表示されるので、今回は注文番号、Order Status、Units、Discnt Valueに適当な値を埋めてみました。
3. データを反映させるため、[作成] ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/c5ea0700-35a8-a541-5923-a95096a95d4e.png "データの作成")
4. ちゃんとデータが追加されました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/48236cef-90bd-15a6-c015-f8ad7868384c.png "データ追加完了！")
5. 続いて、**データの編集** をしてみます。
注文番号：836 の [編集] ボタンをクリックすると、先ほどと同様の編集画面が出てきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/3eeef6c9-a690-3896-837b-d61f226f29f9.png "編集ボタンをクリック")
6. 例えば、Order Statusを「2-Fulfilled」→「3-Shipped」に変更してみます。
7. [変更の保存] ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/5750cf24-66cf-7df0-1b3c-a2fdf2361070.png "データの変更")
8. ちゃんと値が変更されていました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/29c6dc56-1a23-87fc-246b-b6ae1106edd0.png "データ変更の確認")
9. 最後に、**データの削除** を行います。
  5.と同様に、注文番号：2490 の[編集] ボタンをクリックします。
10. [削除] ボタンをクリックします。(見にくくてすみません・・・)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/6eea60e3-e53d-7c3d-469d-61fb2e4b4d35.png "データの削除")
11. 「この削除操作を実行しますか。」のポップアップで、[削除] ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/5ec49cc2-1576-7c40-daa7-27ad02b191b6.png)
12. 確かに、注文番号：2490 のデータが削除されました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/c7df17b4-10a1-35c7-0f53-7a98df89af28.png)
### 3-3-2. 表示形式の変更
続いて、データの表示方法に "区切り" を入れていきたいと思います。
1. アクション > 書式 > コントロール・ブレーク の順にクリックすると、コントロール・ブレークのポップアップ画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/a75d76b0-01a3-1326-8f4f-e3416a935a27.png "コントロール・ブレークのポップアップ画面の表示の仕方")
2. 今回は、列項目中の「注文番号」で指定して、[適用] ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/28dab8b4-906c-4a83-e3a7-9c35317362a1.png "「注文番号」列で区切る")
3. 確かに、表示形式が「注文番号」毎に区切られました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/2a7655a9-7b67-0854-a493-d85559c73290.png "表示形式が「注文番号」毎に区切られた！")
### 3-3-3. 集計結果の表示
続いて、レコード間の合計値を出したいと思います。

1. アクション > データ > 集計 の順にクリックすると、集計のポップアップ画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/c820ac3b-e82a-083d-8bbb-451cce9f88f1.png "集計画面の表示の仕方")
2. 今回は、ファンクション：「**合計**」、列：「**Discnt Value**」で指定して、[適用] ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/a1fe9537-1652-8dbc-e421-0571505a837c.png "合計値をDiscnt Valueで出せるように指定")
3. 確かに、Discnt Value列で「**合計値**」が表示できるようになりました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/24c3b087-7dbd-dde9-0f71-37aeff5683d3.png "合計値出せられた！")
補足) ブレークを外したい場合は、下図赤枠の「×」印をクリックすると初期の画面表示に戻ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/feb8bc85-5d5e-e916-e8ce-c45e2260d15e.png "ブレークの外し方")
### 3-3-4. ハイライト表示
続いて、Order Status : 「**3-Shipped**」の行をハイライトしたいと思います。

1. アクション > 書式 > ハイライト の順にクリックすると、ハイライトのポップアップ画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/1a070fc4-ad01-1822-5da9-e60c6c8f4cc9.png "ハイライト画面の表示の仕方")
2. ハイライトの名前：「**出荷済み**」。また、ハイライト・スタイルは、バックグラウンド・カラー：「**#cce5ff**」、テキスト・カラー：「**#0076df**」で指定します。更に、列：「**Order Status**」、式：「**3-Shipped**」で指定します。
3. [適用] ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/0facca02-12af-e739-e13c-4bbbc3e1f6cc.png "ハイライト情報の指定")
4. 確かに、Order Status : 「**3-Shipped**」の行がハイライトになりました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/f277bd8a-7f75-3186-5dd4-3d57cd3ecd95.png "ハイライト表示ができた！")
### 3-3-5. 変更データのダウンロード
それでは、ここまでにいくつかデータの編集を行ったので、最後にそのデータの出力をしたいと思います。

1. アクション > ダウンロード の順にクリックすると、ダウンロードのポップアップ画面が表示されます。
1. 今回は、レポート形式を「**csv形式**」で選択して、[ダウンロード] ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/e025768e-3b62-e2e5-4c2c-41025749ba38.png "ダウンロード画面の出し方")
2. ダウンロードしたcsvファイルを開いてみると・・
確かに、今回、作成・編集したデータも含まれてダウンロードできていました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/9d678f05-b50e-0f19-9668-e11a2413dcfb.png)
## 3-4. フィードバック機能
では、先ほど飛ばしてしまった[3-1. ダッシュボード](#3-1-ダッシュボード)のpoint 4：フィードバック機能を見てみましょう！

1. コメントマークをクリックすると、フィードバックのポップアップ画面が表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/fdd1fd24-8e86-25e5-a21c-828c7af8a115.png "コメントマークをクリック！")
2. ニコちゃん:grinning:マークをクリックし、テキストボックスにも入力してみます。
3. [フィードバックの送信] をクリックします。
3. ちゃんとフィードバックが発行されたみたいです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/404428d8-cea8-66d7-8994-909af064003a.png "フィードバック送信完了！")
5. 左側のメニューバー > [管理] をクリックします
6. 管理画面内の [ユーザ・フィードバック] のリンクをクリック
6. 先程送信したフィードバックを確認できました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079416/54652227-e56f-1f5e-16cb-739b7f1dca2d.png "フィードバックの管理")

# まとめ / 所感
かなり盛沢山でしたが、最後まで読んで下さりありがとうございます:sob:
[実施内容](#実施内容)の項目はすべて確認できました！
作業していくうちに、「こんな機能も！」とどんどん楽しくなっていました。

まだ、ボタンに他ページへの遷移機能がついていないので、ここからさらに手を加えてみる余地はありそうですね・・・。
フィードバック機能については、ユーザの声を直接聞くことができるので、更に良いページを作りたい！といったときには有効そうですね。