Oracle APEXで対話モード・レポートにハイライトを実装してみた

# はじめに
Oracle APEXでハイライト表示をする方法は沢山あります。
対話モード・レポートのハイライト機能を使えば、直ぐにレポート内の任意の行をハイライト表示することが出来ます。

ただ、行すべてをハイライトするのではなく、**任意の列のみハイライト**するにはどうすれば良いでしょうか。本記事では**CSS**を記述し、以下の様にハイライトを実装してみます。
![スクリーンショット 2024-06-18 092410.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/4b53e987-938e-bf8f-0a37-e9b1c95ae5c0.png)


**【前提条件】**
- Oracle APEXのワークスペースを作成済みであること

# 1. APEX環境の準備
Oracle APEXのワークスペース上で、新しいアプリケーションを作成します。（ハイライト実装を試すことの出来るデータと、対話モード・レポートが既に作成済みであれば、[2. ハイライトの実装](https://qiita.com/marfujim/items/ccef70ab1b63ecbc8cc4#2-%E3%83%8F%E3%82%A4%E3%83%A9%E3%82%A4%E3%83%88%E3%81%AE%E5%AE%9F%E8%A3%85)へスキップします）

1. Oracle APEXのワークスペースへログインし、**アプリケーション・ビルダー**をクリックします。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/c7fcd483-24aa-7802-5818-3dffc9158377.png)


2. 新たなアプリケーションを作成するので、**作成**をクリックします。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/860f28f4-d962-7127-d2aa-484de78b08aa.png)


3. サンプルデータセットとして、student.xlsxというExcelファイルのデータを使用します。**ファイルからアプリケーションの作成**をクリックし、アプリケーションを作成します。
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/73bb09c1-8525-310d-9e60-042510fd71be.png)


4. [こちら](https://github.com/marina-fujimoto/qiita/blob/main/student.xlsx)からstudent.xlsxというExcelファイルをダウンロードし、APEXの画面にドラッグアンドドロップします。
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/410a364f-f459-e394-4abf-d359375319a7.png)

5. 表名を**STUDENT**とし、インポートしたstudent.xlsx内のデータを、STUDENTという新規表へロードします。

    インポートしたExcelファイルのデータは、画面下部のプレビューから見ることが出来ます。Excelファイルには、生徒の氏名、生年月日、都道府県、メールアドレスなどのデータが格納されています。
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/c2c83e8d-985a-617c-2819-a4973eaf3732.png)

6. データのロードが終了し、STUDENT表が新規に作成されました。作成された表を基に、アプリケーションを作成します。**アプリケーションの作成**をクリックします。
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/68f05eb4-3650-b4c5-3d1f-19e00eef7002.png)


7. アプリケーションの作成ページが表示されたら、何も変更せず、**アプリケーションの作成**をクリックします。
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/4d9f30ef-5bf9-781d-d390-e22b737f51e1.png)


8. アプリケーションが作成されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/b18170b1-f523-cf42-d268-aba2e280c792.png)
画面上部のSQLワークショップから、作成されたSTUDENT表を確認する事が出来ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/e292ce9b-9475-bd8b-bafc-6c1aaec80385.png)


# 2. ハイライトの実装
1. 対話モードレポートのあるページのページ・デザイナを開きます。（4 - Studentレポートに対話モードレポートが作成されているので、**4 - Studentレポート**をクリックします。）
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/3ac674d1-c5c9-1403-c753-1fd5026fef86.png)


2. ページの**CSS>インライン**をクリックし、コードエディタを開きます。
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/d34cd251-e7b2-0cfd-70fd-5305fd32f004.png)


3. コードエディタに以下のCSSを記述します。
    ```
    .chip {
    padding: 4px 10px;
    border-radius: 20px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
    }
    
    .chip-success {
    background: #cdffe0;
    color: #00592e;
    }
    
    .chip-warning {
    background: #faf334;
    color: #cf630b;
    }
    
    .chip-danger {
    background: #f3cee5;
    color: #990067;
    }
    ```
    chipを定義、背景色や文字色を変更したchip-success、chip-warning、chip-dangerも定義します。それぞれのchipの背景色（background）と文字色（color）等は自由に変更可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/2fd74f95-2d65-ad03-131f-69da2cc3a7ca.png)


4. **Student**リージョンをクリックし、**ソース>タイプ>SQL問合せ**と変更します。
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/9239b653-3903-b949-c4cc-f483ab3b54f2.png)


5. **SQL問合せ**をクリックし、編集します。
本記事では、生徒の年齢が18歳未満の場合はピンク色でハイライト、生徒の年齢が55歳以上の場合は黄色でハイライトをしたいと思います。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/22fd9287-42e2-d6c1-9be0-810947cac988.png)
 SQL問合せのコードエディタで、以下の様に記述します。
CASE式を使用して、年齢が18歳未満だった場合はchip-danger内に年齢を表示、年齢が55歳以上だった場合はchip-warning内に年齢を表示するように記述しました。
    ```
    select ID,
           "氏名",
           "フリガナ",
           "性別",
           "生年月日",
           (CASE
                WHEN "年齢" < 18
                    THEN '<span class="chip chip-danger">'||to_char("年齢")||'</span>'
                WHEN "年齢" >= 55
                    THEN '<span class="chip chip-warning">'||to_char("年齢")||'</span>'
                ELSE to_char("年齢")
           END) "年齢",
           "郵便番号",
           "都道府県",
           "メールアドレス"
      from STUDENT
    ```

6. 本記事では、STUDENT表の中の年齢列にハイライトを表示させたいので、**Student>年齢>セキュリティ>特殊文字をエスケープ**の**トグルをオフ**にします。（他の列にもハイライトを表示させる場合は、同様にトグルをオフにします。）
![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/64e7478e-f85f-8fdd-9d49-42216ed23d83.png)


7. これでハイライトの実装が終わりました。画面上部の緑色の**保存と実行**ボタンをクリックし、確認してみます。
![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/629be0cf-9c4c-9843-0811-2c3b90b50b2f.png)

8. デフォルトで作成されるログイン画面が表示されます。APEXのユーザー名とパスワードを入力し、ログインします。
![スクリーンショット 2024-06-18 091900.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/2e7094c2-b088-4907-4b9c-385b5a5a1855.png)

9. 対話モード・レポートが作成されたページをクリックします。（Studentレポートページに対話モードレポートが作成されているので、**Studentレポート**ページを**クリック**します。）
![スクリーンショット 2024-06-18 091946.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/5cf7332d-7b32-4d25-5491-bfdff35c571e.png)

10. 変更を加えた**年齢**列は非表示になっているので、列を追加し、表示させます。**アクション**をクリックし、**列**をクリックします。
![スクリーンショット 2024-06-18 092035.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/a5f88750-daf7-b48c-969a-224ea2a69efc.png)

11. **列**をクリックすると、**列の選択**という画面が表示されます。**年齢**をクリック、**＞**の記号をクリックし、**年齢**をレポートに表示に移動します。
![スクリーンショット 2024-06-18 092106.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/3b433be0-231f-fbce-3422-1bba54bfa218.png)

12. **レポートに表示**の右隣りにある記号をクリックし、**年齢**を生年月日の隣に表示させます。
![スクリーンショット 2024-06-18 092124.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/660bffe7-e774-d3fe-9ae4-512a61cef172.png)

13. 設定した通り、年齢が18歳未満の場合は年齢がピンクでハイライト、年齢が55歳以上の場合は年齢が黄色でハイライトされるようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/31fcb6f6-c928-cb97-7b00-24bbe1f54fb8.png)

本記事は以上となります。是非、様々な条件でハイライトを実装してみて下さい。