Oracle APEX もくもく会プラグインを作ろう

株式会社シックススクウェアジャパン
Oracle APEX Plug-in
プラグインを作ろう！
2018/5/19 1
All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.

私とOracle APEX Plug-in について
会社：株式会社シックススクウェアジャパン
氏名：亀井良
職務： 1人会社なので何でもやります
技術：大体DBA/昔プログラム（C言語）/たまに知識として言語勉強する
プログラム言語は10年ほど前にPro*C（C言語ベースでOracle DBのSQLを直接コード
に埋め込みが出来るような言語）を1年くらいです。以降ほぼDBA一色です。でもシェ
ルはよく書きます。APEXは触り始めてそろそろ2年くらいになります。
APEXを触ることになった切っ掛けは、DBの提案する際に、ユーザ内のIT部門でもアプ
リケーションの作成やメンテナンスが出来るような製品探しをしていたところたどり着
きました。
ですが、実態としてはAPEX自体が少し難しいので、メンテナンスとかも自分ではちょっ
とというお客さんが多いように感じています。
もっと簡単にする為にPlug-in使ってパッケージ作ろう！といことで、Plug-in触り始め
ました。賛同してくれる方は一緒に仕事してくれると嬉しいです。
2018/5/19 2

目次
2018/5/19 3
1. Plug-inのアーキテクチャ
2. Plug-inを作ってみる
3. よく利用しそうなAPI

1. PLUG-INのアーキテクチャ
2018/5/19
4

Plug-inの種類
• Plug-inの種類
– リージョン（本日の対象）
– プロセス
– アイテム
– 動的アクション
– 認可スキームタイプ
– 認証スキームタイプ
2018/5/19
5
プラグイン作成画面

ワーク・スペース
アプリケーション
Plug-inのアーキテクチャ概要
2018/5/19
6
Plug-inの登録
共有コンポーネント
Oracle APEX
Plug-in
外部からのインポート
または自分で作成
ページ・デザイナ
自動で追加される

クライアントサイドサーバーサイド
リージョン
Plug-in（リージョン）
2018/5/19
7
Plug-in利用時の動作イメージ
【PL/SQL】
Plug-in（アイテム）
【PL/SQL】
JavaScript/CSS
HTMLの描画
読込/実行

クライアントOracle APEX Plug-in
2018/5/19
8
Plug-inの中身
CSS
JavaScript
外部のライブラリな
どが利用できる
【PL/SQL】
HTMLをPL/SQLコードで記
述。分岐などの作りこみ。
（JavaScriptの読込対象など
も指定）
画面の描画
【属性の定義】
開発者が指定するSQLの条件
や値、属性などを選択
PL/SQLで呼び出されたファイ
ルは、HTMLにパスが記載され、
ユーザから利用可能となる。読込/実行
開発画面

2. PLUG-INを作ってみる
2018/5/19
9

作成するPlug-inの概要
2018/5/19
10
select PRODUCT -– 商品名
, P_VALUE -- 価格
, HIGHLIGHT -- ハイライト(0|1)
from T_PRODUCTS
ページにHTMLの表を作成し、
High Light が”1”の行について、強調表示する。
T_PRODUCTS

作成するPlug-inで説明するポイント
2018/5/19
11
select PRODUCT -– 商品名
, P_VALUE -- 価格
, HIGHLIGHT -- ハイライト(0|1)
from T_PRODUCTS
ページにHTMLの表を作成し、
High Light が”1”の行について、強調表示する。
T_PRODUCTS
• アプリケーション・ビ
ルダーから入力した
SQLの操作方法
• PL/SQLのHTMLレン
ダリング方法
• CSSの読み込み

Plug-in01-01. テーブルを作る
2018/5/19
12
テーブルを作ります。
SQLワークショップ > オブジェクト・ブラウザ

2018/5/19
13
テーブルを作ります。（続き）
T_PRODUCTS
ID NUMBER
PRODUCT VARCHAR2(255)
P_VALUE NUMBER
HIGHLIGHT NUMBER

2018/5/19
14
テーブルを作ります。（続き）
新規順序から移入
主キーにIDを指定、他はデフォルト
他は画面飛ばします。以下出来たSQLです。
CREATE table "T_PRODUCTS" (
"ID" NUMBER,
"PRODUCT" VARCHAR2(255),
"P_VALUE" NUMBER,
"HIGHLIGHT" NUMBER,
constraint "T_PRODUCTS_PK" primary key ("ID")
)
/
CREATE sequence "T_PRODUCTS_SEQ"
/
CREATE trigger "BI_T_PRODUCTS"
before insert on "T_PRODUCTS"
for each row
begin
if :NEW."ID" is null then
select "T_PRODUCTS_SEQ".nextval into :NEW."ID" from sys.dual;
end if;
end;
/

Plug-in02-01. アプリを作る
2018/5/19
15
プラグインを利用するアプリケーションを作ります。
デスクトップを選択 ※画面は APEX 5.1です。

2018/5/19
16
プラグインを利用するアプリケーションを作ります。（続き）
好きな名前を入力し、次へ(画面は”Plug-in Demo”)

2018/5/19
17
ページの追加

2018/5/19
18
作成した表名(T_PRODUCTS)を入力
他は好きに指定

2018/5/19
19
他は指定不要の為、アプリケーションの作成をクリック

Plug-in03-01. Plug-inを作る
2018/5/19
20
プラグインを作ります。
アプリケーション・ビルダー > 共有コンポーネント
プラグインをクリック

2018/5/19
21
プラグインを作ります。（続き）
最初からをクリック
（前の画面で作成をクリック）

2018/5/19
22
名前 : ハイライトレポート
内部名 : <ドメイン>.highlightreport
タイプ : リージョン
• 名前 : アプリケーション内での表示名です。分かりやすい名前を付けてください。
• 内部名 : アプリケーション内で一意の必要があります。基本意識しません。
外部利用等を考慮する場合、ドメイン名を付けることが推奨されています。
• タイプ : 今回はリージョンタイプを作成します。別のタイプを選ぶと、
他の項目が変化しますので、どんなものが必要か見ることが出来ます。

2018/5/19
23
ソースに、画面のレンダリングをする
PL/SQLを記載します。
function highlight_report_render (
p_region IN apex_plugin.t_region,
p_plugin IN apex_plugin.t_plugin,
p_is_printer_friendly IN BOOLEAN
) RETURN apex_plugin.t_region_render_result
IS
l_stmt varchar2(32767);
l_data_type_list apex_application_global.vc_arr2;
l_column_value_list apex_plugin_util.t_column_value_list2;
begin
-- CSSの読み込み
apex_css.add_file(p_name => 'highlight',
p_directory => p_plugin.file_prefix);
-- 配列の列タイプを指定
l_data_type_list(1) := apex_plugin_util.c_data_type_varchar2;
l_data_type_list(2) := apex_plugin_util.c_data_type_number;
-- 取得したSQLの並び替えを実施
l_stmt := 'select * from (' || p_region.source || ') a order by 1';
-- SQLを実行して値を取得（普通にカーソルで取得しても大丈夫）
-- 21.13 GET_DATA2ファンクションのシグネチャ1
-- https://docs.oracle.com/cd/E86255_01/AEA PI/GET_DATA 2-Function-Signature-1.htm
l_column_value_list :=
apex_plugin_util.get_data2 (
p_sql_statement => l_stmt
, p_min_columns => 3
, p_max_columns => 3
, p_data_type_list => l_data_type_list
, p_component_name => p_region.name );
--
sys.htp.p('<table>');
-- 表のヘッダ
sys.htp.p('<thead>');
sys.htp.p(' <tr>');
sys.htp.p(' <th>商品名</th>');
sys.htp.p(' <th>価格</th>');
sys.htp.p(' <th>ハイライト</th>');
sys.htp.p(' </tr>');
sys.htp.p('</thead>');
sys.htp.p('<tbody>');
-- 取得したデータの1列目の値配列に対してcount。行の数だけループする。
for i in 1 .. l_column_value_list(1).value_list.count
loop
-- ハイライト対象のチェック
if (l_column_value_list(3).value_list(i).number_value = 1) then
-- 取得したデータの3列目のi行目の値が1の場合はハイライトのクラスを指定する。
sys.htp.p(' <tr class="highlight">');
else
sys.htp.p(' <tr>');
end if;
-- 値のレンダリング時はescape_scにてエスケープする。（特殊文字対策）
-- 商品名
sys.htp.p(
' <td>'
|| sys.htf.escape_sc(l_column_value_list (1).value_list(i).varchar2_value)
|| ' </td>');
-- 価格
sys.htp.p(
' <td>'
|| sys.htf.escape_sc(to_char(l_column_v alue_list(2).value_list(i).number_value,'FM999,999,999,990'))
|| ' </td>');
-- ハイライト
sys.htp.p(
' <td>'
|| sys.htf.escape_sc(l_column_value_list (3).value_list(i).number_value)
|| ' </td>');
end loop;
sys.htp.p('</tbody>');
sys.htp.p('</table>');
return null;
exception
when OTHERS then
raise;
end highlight_report_render;
小さいですがソースです。

2018/5/19
24
プラグインを作ります。（ソース画面詳細です。1/5）
function highlight_report_render (
p_region IN apex_plugin.t_region,
p_plugin IN apex_plugin.t_plugin,
p_is_printer_friendly IN BOOLEAN
) RETURN apex_plugin.t_region_render_result
IS
l_stmt varchar2(32767);
l_data_type_list apex_application_global.vc_arr2;
l_column_value_list apex_plugin_util.t_column_value_list2;
begin
-- CSSの読み込み
apex_css.add_file(p_name => 'highlight',
HTMLをレンダリングするファンクションで定義します。
apex_plugin.t_region_render_resultはDOM名を指定
するとそこにフォーカスするようですが、試していませ
ん。
l_stmt – SQL文の一時領域として使用します。
l_data_type_list – SQL実行結果の型を定義します。
l_column_value_list – SQL結果を格納します。
highlight.cssというファイルを読み込みます。

2018/5/19
25
-- 配列の列タイプを指定
l_data_type_list(1) := apex_plugin_util.c_data_type_varchar2;
-- 取得したSQLの並び替えを実施
l_stmt := 'select * from (' || p_region.source || ') a order by 1';
-- SQLを実行して値を取得（普通にカーソルで取得しても大丈夫）
-- 21.13 GET_DATA2ファンクションのシグネチャ1
-- https://docs.oracle.com/cd/E86255_01/AEAPI/GET_DATA2-Function-Signature-1.htm
l_column_value_list :=
apex_plugin_util.get_data2 (
p_sql_statement => l_stmt
, p_min_columns => 3
, p_max_columns => 3
, p_data_type_list => l_data_type_list
, p_component_name => p_region.name );
--
l_stmt – SQL文の一時領域として使用します。
l_data_type_list – SQL実行結果の型を定義します。
l_column_value_list – SQL結果を格納します。
apex_plugin_util.get_data2を利用してSQL結果を取得
しています。（2のないものは全てchar型となるため、
基本的にはget_data2を利用します。普通にフェッチし
ても問題ありませんが、アイテムのバインド変数を利用
した値の受け渡しが出来ないようです。
SQL文の整形をします。副問い合わせとして商
品名順に並べ替えています。

2018/5/19
26
--
sys.htp.p('<table>');
-- 表のヘッダ
sys.htp.p('<thead>');
sys.htp.p(' <tr>');
sys.htp.p(' <th>商品名</th>');
sys.htp.p(' <th>価格</th>');
sys.htp.p(' <th>ハイライト</th>');
sys.htp.p('</thead>');
sys.htp.p('<tbody>');
-- 取得したデータの1列目の値配列に対してcount。行の数だけループする。
for i in 1 .. l_column_value_list(1).value_list.count
loop
-- ハイライト対象のチェック
if (l_column_value_list(3).value_list(i).number_value = 1) then
-- 取得したデータの3列目のi行目の値が1の場合はハイライトのクラスを指定する。
sys.htp.p(' <tr class="highlight">');
else
sys.htp.p(' <tr>');
end if;
sys.htp.pファンクションにて、HTMLをレンダリングします。
ハイライトさせる部分を分岐させます。ハイラ
イト対象はclassを指定します。
取得したデータをもとにループします。
（マニュアルの構文の例は間違っているため、
注意してください）

2018/5/19
27
end if;
-- 値のレンダリング時はescape_scにてエスケープする。（特殊文字対策）
-- 商品名
sys.htp.p(
' <td>'
|| sys.htf.escape_sc(l_column_value_list(1).value_list(i).varchar2_value)
|| ' </td>');
-- 価格
sys.htp.p(
' <td>'
|| sys.htf.escape_sc(to_char(l_column_value_list(2).value_list(i).number_value,'FM999,999,999,990'))
|| ' </td>');
-- ハイライト
sys.htp.p(
' <td>'
|| sys.htf.escape_sc(l_column_value_list(3).value_list(i).number_value)
|| ' </td>');
end loop;
SQLにて取得した各値を出力します。

2018/5/19
28
end loop;
sys.htp.p('</tbody>');
sys.htp.p('</table>');
return null;
exception
when OTHERS then
raise;
end highlight_report_render;
テーブルタグを閉じてreturn NULLをしています。
プラグインでエラーとなった場合に、エラーが直接通知されます。
この場合、画面自体が出力できなくなるため、内容に応じてエラー
を画面に出力して、raiseしないというのも出来ます。
その場合、raiseの代わりにsys.htp.pなどでエラー内容をユーザ側
に表示します。

2018/5/19
29
ソースに記述したファンクション名を入力します。
Ajaxについては、別ファンクションをソース内に記載し、
apex.server.pluginを利用して、Ajaxのリクエストを投げるような処理を追
加する場合に利用します。（jQuery.ajaxのラッパーです）
https://docs.oracle.com/cd/E57425_01/121/AEAPI/javascript_api.htm#BGBDIHHD
レンダリング・プロシージャ/ファンク
ション名 : highlight_report_render

2018/5/19
30
モバイルは新バージョンではないので、気にせ
ずデスクトップを指定してください。

2018/5/19
31
開発画面の右側に出てくるオプションの
指定をします。
今回はSQLから表を生成するため、
「リージョン・ソースはSQL文です」を
選択します。

2018/5/19
32
バージョンにとりあえず1.0を入れます。
URL情報は作者や追加の情報のURLを入力する箇所です。

2018/5/19
33
アプリケーションビルダーから見えるヘルプを入力します。大事な
ので入力することをお勧めします。
---
SQL結果を表にして、特定の行をハイライトするプラグインです。

2018/5/19
34
プラグインの作成をしますが、CSSの登録をまだしてい
ません。こちらは作成後に登録します。
SQLソースの細かい設定も作成後になります。

2018/5/19
35
共有コンポーネント > プラグイン > プラグイン名 > ファイル
CSSを登録します。以下のファイルを作成し、アップロードしてください。
ファイル名：highlight.css
内容：
.highlight {
background: #86E0E0
}

2018/5/19
36
共有コンポーネント > プラグイン > プラグイン名
> 標準属性の追加メタデータ > Region Source is SQL Statement
【設定】列の数を指定します。リージョンに指定され
たSQLが、ここで指定された列の数と一致しない場合
エラーを戻します。
必須：はい
最小列数：3
最大列数：3

2018/5/19
37
共有コンポーネント > プラグイン > プラグイン名
> 標準属性の追加メタデータ > Region Source is SQL Statement
【ヘルプテキストと例】アプリケーションビルダーから見えるヘルプ
を入力します。大事なので入力することをお勧めします。
【ヘルプ・テキスト】
<pre>
1. 商品名(Varchar2)
2. 価格(Number)
3. ハイライト(0|1)(Number)
3のハイライトが1の場合、行を強調表示します。
</pre>
【例】
select PRODUCT
, P_VALUE
, HIGHLIGHT
from T_PRODUCTS

Plug-in04-01. Plug-inを使う
2018/5/19
38
１．アプリケーション・ビルダーから組み込んでみましょう。
ヘルプに記載した通りにSQLを入力すれば動作します。
※ プラグインの中でSQL文の文字列結合しているため、セミコロンが
あるとエラーとなります。
２．例えばプラグインのタグに以下クラシックレポート用のclassを入
れると見た目がAPEXぽくなります。
table class="t-Report-report"
th class="t-Report-colHead"
td class="t-Report-cell"

3.よく利用しそうなAPI
2018/5/19
39

よく利用しそうなAPI
2018/5/19
40
とりあえずリージョンのプラグイン作成をしてみて、よく利用しそうかなと
思ったAPIの一覧です。
1. apex_javascript.add_attribute
オブジェクトの属性と属性値を二重引用符付きで戻します。
3番目がflaseの場合値がからの場合はNULLを戻し、4番目がfalseの場合カンマを戻し
ません。最後の行でfalse,falseを指定します。
【実行】apex_javascript.add_attribute(
‘FirstName’, sys.htf.escape_sc(l_first_name), true , true);
【結果】"FirstName":"John",
2. apex_javascript.add_library / apex_css.add_file
レンダリング時に指定したJavascript/CSSの読み込みをクライアントで行います。
3. apex_plugin_util.get_data2
SQLの結果を取得します。
4. apex.server.plugin
Ajaxを利用する場合に使用します。

2018/5/19
41
お疲れ様でした！

Oracle APEX もくもく会プラグインを作ろう

More Related Content

What's hot (20)

Similar to Oracle APEX もくもく会プラグインを作ろう (20)