Go to Qiita Advent Calendar 2024 Top
LoginSignup
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@shi6maSencho

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

Last updated at Posted at 2023-02-01

はじめに

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

前提条件

実施内容

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

1.ダッシュボードのページ
　1. 項目名を変更
　2. ボタンを追加

2.検索画面
　1. フィルタリング
　2. チャートを表示

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

4.フィードバック機能の追加

0. サンプルデータの紹介

以下の添付で、黄色ハッチの列名を ORDER_KEY → 注文番号 に変更してみました
※それ以外の項目・値は何も変えていません
sampleData

1. スプレッドシートから簡易アプリケーションの作成

途中までは、チュートリアル (4. スプレッドシートから簡易アプリケーションの作成Permalink) と同様のステップ

  1. APEXコンソールから アプリケーション・ビルダー を起動します
  2. 新規アプリケーションの作成 をクリックします
  3. ファイルから をクリックします

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

4.事前に準備しておいた orders_日本語.csv をドラッグアンドドロップします
image.png
5.表の名前を入力します（ここでは「ORDERS_Japanese」とします）。※エラー表名は自動的に入力されます。
6.データのプレビューで文字化け等が発生していないことを確認します。
→ やはり、列項目名を日本語に書き換えた箇所は文字化けが発生しました！
→ では、文字化けを解消していきます！
image.png
7.ファイル・エンコーディングを 日本語(Shift JIS) へ変更します。
image.png
8.文字化けは解消し、列名もしっかりと日本語で表示されるようになりました！
9.[データのロード]をクリック
image.png
10.ロード完了のメッセージが表示されたら アプリケーションの作成 をクリックします。
　※この時点でDB上にORDERS表が作成されています
image.png
11.アプリケーションに名前を付けます。今回は 「受発注管理システム」 と入力します。
12.今回は、フィードバック機能も追加するので、機能 > フィードバック のチェックボックスにチェックします
13.[アプリケーションの作成]をクリック
image.png
以上で、アプリケーションの作成は完了です。

2. アプリケーションの実行

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

  1. [アプリケーションの実行] をクリックします。
  2. ログイン画面に ユーザー名・パスワード を入力し サインイン します。
    image.png
  3. ログイン完了！
    image.png
    　　　　　　　　　　　　　↑ ページ下部の黒色のメニューバーからもページの改廃が可能です

3. 実行確認

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

ではまず、ダッシュボードから見てみましょう！
image.png

3-1. ダッシュボード

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

point 1：今回は、0. サンプルデータの紹介にて、列名「ORDER_KEY」から「注文番号」と日本語表記に変更しました。
　　　　それに伴い、ダッシュボード上の項目も、日本語表記となっていました！
point 2：左隣が日本語表記ですと、こちらも日本語表記にしてしまいたくなりますね・・・。
point 3：ダッシュボードだけの画面よりも、ボタン を追加してみたいかも・・・
point 4：チュートリアルの図と見比べると、コメントマークが増えています:thinking:。
　　　　(この機能の詳細は、後ほど3-4. フィードバック機能にて！)
image.png
では、上記pointの内容で画面修正に入っていきましょう！

point 2：ダッシュボードで項目名の編集

  1. 黒いメニューバーの [ページ2] をクリックすると、ページデザイナ (開発画面) に遷移できます。
    image.png
  2. ページデザイナ-中央部をスクロールします。
  3. すると、注文番号・Order Status・Units・Discont valueのボックスが現れるので、Order Statusのボックスをクリック
  4. 右側の 識別 > タイトル は Order Status で登録されています。
  5. 4.の箇所を注文状況に変更します。
  6. 変更後は、[保存]ボタン あるいは (▷)ボタン(実行ボタン) をクリック
    image.png
    image.png
  7. もう一度、ダッシュボード画面を確認すると・・・
    確かに、項目名を英語表記から日本語表記に変更できました！
    ※6.で保存ボタンをクリックした方は、ダッシュボード画面でF5などでリフレッシュすれば、変更が反映されます。
    image.png

point 3：ダッシュボードでボタンを追加

では、開発画面に戻りましょう。

  1. ページデザイナ-中央部を最後までスクロール。
  2. ページデザイナ-中央の下部に「リージョン」「アイテム」「ボタン」が選択可能なタブがあると思います。
    その中の「ボタン」をクリック
  3. [text]と記載のあるボタンを、Unitsのボックスの下にドラッグ＆ドロップ
    image.png
    image.png
  4. 新規でボタンのアイコンが中央部に追加されます
    image.png
  5. ボタン名を「新規」→「ボタン」に変更してみます
  6. 変更後は、[保存]ボタン あるいは (▷)ボタン(実行ボタン) をクリック
    image.png
  7. もう一度、ダッシュボード画面を確認すると・・・
    確かに、ボタンを追加できました！
    ※今回はボタンを追加しただけなので、クリックしても同じ画面に戻ってきてしまいます。が、手を加えれば他の画面遷移も！
    ※6.で保存ボタンをクリックした方は、ダッシュボード画面でF5などでリフレッシュすれば、変更が反映されます。
    image.png

3-2. 検索画面

では、続いて左の三本線のメニューバーから、検索画面に遷移しましょう！
今回のサンプルデータ計5,247が確認できます。
image.png

  1. まずは、検索ボックスに「3-Shipped」を入力し、検索してみます。
    確かに、3-Shippedで絞れました！
    image.png
  2. 続いては、フィルタリング機能で「3-Shipped」にチェックし、検索してみます。
    こちらも、3-Shippedで絞れました！
    image.png
  3. では、縦3つに黒ぽちが並ぶボタン > [チャートの表示] の順にクリックしてみます。
    チャートの表示ができました！また、棒グラフ・円グラフの切り替えも可能です！
    image.png

3-3. レポート画面

続いて、左の三本線のメニューバーから、レポート画面に遷移しましょう！
image.png

3-3-1. レコードの追加・削除・編集

  1. まずは、データを追加 しますので、[作成] ボタンをクリックします。
    image.png
  2. 右側にレコード編集画面が表示されるので、今回は注文番号、Order Status、Units、Discnt Valueに適当な値を埋めてみました。
  3. データを反映させるため、[作成] ボタンをクリック
    image.png
  4. ちゃんとデータが追加されました！
    image.png
  5. 続いて、データの編集 をしてみます。
    注文番号：836 の [編集] ボタンをクリックすると、先ほどと同様の編集画面が出てきます。
    image.png
  6. 例えば、Order Statusを「2-Fulfilled」→「3-Shipped」に変更してみます。
  7. [変更の保存] ボタンをクリック
    image.png
  8. ちゃんと値が変更されていました！
    image.png
  9. 最後に、データの削除 を行います。
    5.と同様に、注文番号：2490 の[編集] ボタンをクリックします。
  10. [削除] ボタンをクリックします。(見にくくてすみません・・・)
    image.png
  11. 「この削除操作を実行しますか。」のポップアップで、[削除] ボタンをクリックします。
    image.png
  12. 確かに、注文番号：2490 のデータが削除されました！
    image.png

3-3-2. 表示形式の変更

続いて、データの表示方法に "区切り" を入れていきたいと思います。

  1. アクション > 書式 > コントロール・ブレーク の順にクリックすると、コントロール・ブレークのポップアップ画面が表示されます。
    image.png
  2. 今回は、列項目中の「注文番号」で指定して、[適用] ボタンをクリックします。
    image.png
  3. 確かに、表示形式が「注文番号」毎に区切られました！
    image.png

3-3-3. 集計結果の表示

続いて、レコード間の合計値を出したいと思います。

  1. アクション > データ > 集計 の順にクリックすると、集計のポップアップ画面が表示されます。
    image.png
  2. 今回は、ファンクション：「合計」、列：「Discnt Value」で指定して、[適用] ボタンをクリックします。
    image.png
  3. 確かに、Discnt Value列で「合計値」が表示できるようになりました！
    image.png
    補足) ブレークを外したい場合は、下図赤枠の「×」印をクリックすると初期の画面表示に戻ります。
    image.png

3-3-4. ハイライト表示

続いて、Order Status : 「3-Shipped」の行をハイライトしたいと思います。

  1. アクション > 書式 > ハイライト の順にクリックすると、ハイライトのポップアップ画面が表示されます。
    image.png
  2. ハイライトの名前：「出荷済み」。また、ハイライト・スタイルは、バックグラウンド・カラー：「#cce5ff」、テキスト・カラー：「#0076df」で指定します。更に、列：「Order Status」、式：「3-Shipped」で指定します。
  3. [適用] ボタンをクリックします。
    image.png
  4. 確かに、Order Status : 「3-Shipped」の行がハイライトになりました！
    image.png

3-3-5. 変更データのダウンロード

それでは、ここまでにいくつかデータの編集を行ったので、最後にそのデータの出力をしたいと思います。

  1. アクション > ダウンロード の順にクリックすると、ダウンロードのポップアップ画面が表示されます。
  2. 今回は、レポート形式を「csv形式」で選択して、[ダウンロード] ボタンをクリックします。
    image.png
  3. ダウンロードしたcsvファイルを開いてみると・・
    確かに、今回、作成・編集したデータも含まれてダウンロードできていました！
    image.png

3-4. フィードバック機能

では、先ほど飛ばしてしまった3-1. ダッシュボードのpoint 4：フィードバック機能を見てみましょう！

  1. コメントマークをクリックすると、フィードバックのポップアップ画面が表示されました。
    image.png
  2. ニコちゃん:grinning:マークをクリックし、テキストボックスにも入力してみます。
  3. [フィードバックの送信] をクリックします。
  4. ちゃんとフィードバックが発行されたみたいです。
    image.png
  5. 左側のメニューバー > [管理] をクリックします
  6. 管理画面内の [ユーザ・フィードバック] のリンクをクリック
  7. 先程送信したフィードバックを確認できました！
    image.png

まとめ / 所感

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

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

4
1
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
Sign upLogin
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?