狠狠撸

狠狠撸Share a Scribd company logo
株式会社シックススクウェアジャパン
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
All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
目次
2018/5/19 3
All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
1. Plug-inのアーキテクチャ
2. Plug-inを作ってみる
3. よく利用しそうなAPI
1. PLUG-INのアーキテクチャ
2018/5/19
All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
4
Plug-inの種類
? Plug-inの種類
– リージョン(本日の対象)
– プロセス
– アイテム
– 動的アクション
– 認可スキームタイプ
– 認証スキームタイプ
2018/5/19
All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
5
プラグイン作成画面
ワーク?スペース
アプリケーション
Plug-inのアーキテクチャ概要
2018/5/19
All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
6
Plug-inの登録
共有コンポーネント
Oracle APEX
Plug-in
外部からのインポート
または自分で作成
ページ?デザイナ
自動で追加される
クライアントサイドサーバーサイド
リージョン
Plug-in(リージョン)
Plug-inのアーキテクチャ概要
2018/5/19
All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
7
Plug-in利用時の動作イメージ
【PL/SQL】
Plug-in(アイテム)
【PL/SQL】
JavaScript/CSS
HTMLの描画
読込/実行
クライアントOracle APEX Plug-in
Plug-inのアーキテクチャ概要
2018/5/19
All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
8
Plug-inの中身
CSS
JavaScript
外部のライブラリな
どが利用できる
【PL/SQL】
HTMLをPL/SQLコードで記
述。分岐などの作りこみ。
(JavaScriptの読込対象など
も指定)
画面の描画
【属性の定義】
開発者が指定するSQLの条件
や値、属性などを選択
PL/SQLで呼び出されたファイ
ルは、HTMLにパスが記載され、
ユーザから利用可能となる。 読込/実行
開発画面
2. PLUG-INを作ってみる
2018/5/19
All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
9
作成するPlug-inの概要
2018/5/19
All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
10
select PRODUCT -– 商品名
, P_VALUE -- 価格
, HIGHLIGHT -- ハイライト(0|1)
from T_PRODUCTS
ページにHTMLの表を作成し、
High Light が”1”の行について、強調表示する。
T_PRODUCTS
作成するPlug-inで説明するポイント
2018/5/19
All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
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
All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
12
テーブルを作ります。
SQLワークショップ > オブジェクト?ブラウザ
Plug-in01-02. テーブルを作る
2018/5/19
All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
13
テーブルを作ります。(続き)
T_PRODUCTS
ID NUMBER
PRODUCT VARCHAR2(255)
P_VALUE NUMBER
HIGHLIGHT NUMBER
Plug-in01-03. テーブルを作る
2018/5/19
All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
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
All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
15
プラグインを利用するアプリケーションを作ります。
デスクトップを選択 ※画面は APEX 5.1です。
Plug-in02-02. アプリを作る
2018/5/19
All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
16
プラグインを利用するアプリケーションを作ります。(続き)
好きな名前を入力し、次へ(画面は”Plug-in Demo”)
Plug-in02-03. アプリを作る
2018/5/19
All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
17
ページの追加
プラグインを利用するアプリケーションを作ります。(続き)
Plug-in02-04. アプリを作る
2018/5/19
All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
18
プラグインを利用するアプリケーションを作ります。(続き)
作成した表名(T_PRODUCTS)を入力
他は好きに指定
Plug-in02-05. アプリを作る
2018/5/19
All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
19
プラグインを利用するアプリケーションを作ります。(続き)
他は指定不要の為、アプリケーションの作成をクリック
Plug-in03-01. Plug-inを作る
2018/5/19
All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
20
プラグインを作ります。
アプリケーション?ビルダー > 共有コンポーネント
プラグインをクリック
Plug-in03-02. Plug-inを作る
2018/5/19
All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
21
プラグインを作ります。(続き)
最初からをクリック
(前の画面で作成をクリック)
Plug-in03-03. Plug-inを作る
2018/5/19
All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
22
プラグインを作ります。(続き)
名前 : ハイライトレポート
内部名 : <ドメイン>.highlightreport
タイプ : リージョン
? 名前 : アプリケーション内での表示名です。分かりやすい名前を付けてください。
? 内部名 : アプリケーション内で一意の必要があります。基本意識しません。
外部利用等を考慮する場合、ドメイン名を付けることが推奨されています。
? タイプ : 今回はリージョンタイプを作成します。別のタイプを選ぶと、
他の項目が変化しますので、どんなものが必要か見ることが出来ます。
Plug-in03-04. Plug-inを作る
2018/5/19
All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
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;
l_data_type_list(3) := 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>');
sys.htp.p(' </tr>');
end loop;
sys.htp.p('</tbody>');
sys.htp.p('</table>');
return null;
exception
when OTHERS then
raise;
end highlight_report_render;
小さいですがソースです。
Plug-in03-04. Plug-inを作る
2018/5/19
All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
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',
p_directory => p_plugin.file_prefix);
HTMLをレンダリングするファンクションで定義します。
apex_plugin.t_region_render_resultはDOM名を指定
するとそこにフォーカスするようですが、試していませ
ん。
l_stmt – SQL文の一時領域として使用します。
l_data_type_list – SQL実行結果の型を定義します。
l_column_value_list – SQL結果を格納します。
highlight.cssというファイルを読み込みます。
Plug-in03-04. Plug-inを作る
2018/5/19
All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
25
プラグインを作ります。(ソース画面詳細です。2/5)
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;
l_data_type_list(3) := 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/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文の整形をします。副問い合わせとして商
品名順に並べ替えています。
Plug-in03-04. Plug-inを作る
2018/5/19
All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
26
プラグインを作ります。(ソース画面詳細です。3/5)
--
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;
sys.htp.pファンクションにて、HTMLをレンダリングします。
ハイライトさせる部分を分岐させます。ハイラ
イト対象はclassを指定します。
取得したデータをもとにループします。
(マニュアルの構文の例は間違っているため、
注意してください)
Plug-in03-04. Plug-inを作る
2018/5/19
All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
27
プラグインを作ります。(ソース画面詳細です。4/5)
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>');
sys.htp.p(' </tr>');
end loop;
SQLにて取得した各値を出力します。
Plug-in03-04. Plug-inを作る
2018/5/19
All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
28
プラグインを作ります。(ソース画面詳細です。5/5)
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などでエラー内容をユーザ側
に表示します。
Plug-in03-05. Plug-inを作る
2018/5/19
All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
29
プラグインを作ります。(続き)
ソースに記述したファンクション名を入力します。
Ajaxについては、別ファンクションをソース内に記載し、
apex.server.pluginを利用して、Ajaxのリクエストを投げるような処理を追
加する場合に利用します。(jQuery.ajaxのラッパーです)
https://docs.oracle.com/cd/E57425_01/121/AEAPI/javascript_api.htm#BGBDIHHD
レンダリング?プロシージャ/ファンク
ション名 : highlight_report_render
Plug-in03-06. Plug-inを作る
2018/5/19
All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
30
プラグインを作ります。(続き)
モバイルは新バージョンではないので、気にせ
ずデスクトップを指定してください。
Plug-in03-07. Plug-inを作る
2018/5/19
All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
31
プラグインを作ります。(続き)
開発画面の右側に出てくるオプションの
指定をします。
今回はSQLから表を生成するため、
「リージョン?ソースはSQL文です」を
選択します。
Plug-in03-08. Plug-inを作る
2018/5/19
All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
32
プラグインを作ります。(続き)
バージョンにとりあえず1.0を入れます。
URL情報は作者や追加の情報のURLを入力する箇所です。
Plug-in03-09. Plug-inを作る
2018/5/19
All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
33
プラグインを作ります。(続き)
アプリケーションビルダーから見えるヘルプを入力します。大事な
ので入力することをお勧めします。
---
SQL結果を表にして、特定の行をハイライトするプラグインです。
Plug-in03-09. Plug-inを作る
2018/5/19
All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
34
プラグインを作ります。(続き)
プラグインの作成をしますが、CSSの登録をまだしてい
ません。こちらは作成後に登録します。
SQLソースの細かい設定も作成後になります。
Plug-in03-10. Plug-inを作る
2018/5/19
All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
35
プラグインを作ります。(続き)
共有コンポーネント > プラグイン > プラグイン名 > ファイル
CSSを登録します。以下のファイルを作成し、アップロードしてください。
ファイル名:highlight.css
内容:
.highlight {
background: #86E0E0
}
Plug-in03-11. Plug-inを作る
2018/5/19
All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
36
プラグインを作ります。(続き)
共有コンポーネント > プラグイン > プラグイン名
> 標準属性の追加メタデータ > Region Source is SQL Statement
【設定】列の数を指定します。リージョンに指定され
たSQLが、ここで指定された列の数と一致しない場合
エラーを戻します。
必須:はい
最小列数:3
最大列数:3
Plug-in03-11. Plug-inを作る
2018/5/19
All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
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
All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
38
1. アプリケーション?ビルダーから組み込んでみましょう。
ヘルプに記載した通りにSQLを入力すれば動作します。
※ プラグインの中でSQL文の文字列結合しているため、セミコロンが
あるとエラーとなります。
2. 例えばプラグインのタグに以下クラシックレポート用のclassを入
れると見た目がAPEXぽくなります。
table class="t-Report-report"
th class="t-Report-colHead"
td class="t-Report-cell"
3.よく利用しそうなAPI
2018/5/19
All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
39
よく利用しそうなAPI
2018/5/19
All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
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
All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
41
お疲れ様でした!

More Related Content

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

  • 1. 株式会社シックススクウェアジャパン Oracle APEX Plug-in プラグインを作ろう! 2018/5/19 1 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
  • 2. 私と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 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
  • 3. 目次 2018/5/19 3 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 1. Plug-inのアーキテクチャ 2. Plug-inを作ってみる 3. よく利用しそうなAPI
  • 4. 1. PLUG-INのアーキテクチャ 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 4
  • 5. Plug-inの種類 ? Plug-inの種類 – リージョン(本日の対象) – プロセス – アイテム – 動的アクション – 認可スキームタイプ – 認証スキームタイプ 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 5 プラグイン作成画面
  • 6. ワーク?スペース アプリケーション Plug-inのアーキテクチャ概要 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 6 Plug-inの登録 共有コンポーネント Oracle APEX Plug-in 外部からのインポート または自分で作成 ページ?デザイナ 自動で追加される
  • 7. クライアントサイドサーバーサイド リージョン Plug-in(リージョン) Plug-inのアーキテクチャ概要 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 7 Plug-in利用時の動作イメージ 【PL/SQL】 Plug-in(アイテム) 【PL/SQL】 JavaScript/CSS HTMLの描画 読込/実行
  • 8. クライアントOracle APEX Plug-in Plug-inのアーキテクチャ概要 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 8 Plug-inの中身 CSS JavaScript 外部のライブラリな どが利用できる 【PL/SQL】 HTMLをPL/SQLコードで記 述。分岐などの作りこみ。 (JavaScriptの読込対象など も指定) 画面の描画 【属性の定義】 開発者が指定するSQLの条件 や値、属性などを選択 PL/SQLで呼び出されたファイ ルは、HTMLにパスが記載され、 ユーザから利用可能となる。 読込/実行 開発画面
  • 9. 2. PLUG-INを作ってみる 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 9
  • 10. 作成するPlug-inの概要 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 10 select PRODUCT -– 商品名 , P_VALUE -- 価格 , HIGHLIGHT -- ハイライト(0|1) from T_PRODUCTS ページにHTMLの表を作成し、 High Light が”1”の行について、強調表示する。 T_PRODUCTS
  • 11. 作成するPlug-inで説明するポイント 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 11 select PRODUCT -– 商品名 , P_VALUE -- 価格 , HIGHLIGHT -- ハイライト(0|1) from T_PRODUCTS ページにHTMLの表を作成し、 High Light が”1”の行について、強調表示する。 T_PRODUCTS ? アプリケーション?ビ ルダーから入力した SQLの操作方法 ? PL/SQLのHTMLレン ダリング方法 ? CSSの読み込み
  • 12. Plug-in01-01. テーブルを作る 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 12 テーブルを作ります。 SQLワークショップ > オブジェクト?ブラウザ
  • 13. Plug-in01-02. テーブルを作る 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 13 テーブルを作ります。(続き) T_PRODUCTS ID NUMBER PRODUCT VARCHAR2(255) P_VALUE NUMBER HIGHLIGHT NUMBER
  • 14. Plug-in01-03. テーブルを作る 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 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; /
  • 15. Plug-in02-01. アプリを作る 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 15 プラグインを利用するアプリケーションを作ります。 デスクトップを選択 ※画面は APEX 5.1です。
  • 16. Plug-in02-02. アプリを作る 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 16 プラグインを利用するアプリケーションを作ります。(続き) 好きな名前を入力し、次へ(画面は”Plug-in Demo”)
  • 17. Plug-in02-03. アプリを作る 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 17 ページの追加 プラグインを利用するアプリケーションを作ります。(続き)
  • 18. Plug-in02-04. アプリを作る 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 18 プラグインを利用するアプリケーションを作ります。(続き) 作成した表名(T_PRODUCTS)を入力 他は好きに指定
  • 19. Plug-in02-05. アプリを作る 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 19 プラグインを利用するアプリケーションを作ります。(続き) 他は指定不要の為、アプリケーションの作成をクリック
  • 20. Plug-in03-01. Plug-inを作る 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 20 プラグインを作ります。 アプリケーション?ビルダー > 共有コンポーネント プラグインをクリック
  • 21. Plug-in03-02. Plug-inを作る 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 21 プラグインを作ります。(続き) 最初からをクリック (前の画面で作成をクリック)
  • 22. Plug-in03-03. Plug-inを作る 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 22 プラグインを作ります。(続き) 名前 : ハイライトレポート 内部名 : <ドメイン>.highlightreport タイプ : リージョン ? 名前 : アプリケーション内での表示名です。分かりやすい名前を付けてください。 ? 内部名 : アプリケーション内で一意の必要があります。基本意識しません。 外部利用等を考慮する場合、ドメイン名を付けることが推奨されています。 ? タイプ : 今回はリージョンタイプを作成します。別のタイプを選ぶと、 他の項目が変化しますので、どんなものが必要か見ることが出来ます。
  • 23. Plug-in03-04. Plug-inを作る 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 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; l_data_type_list(3) := 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>'); sys.htp.p(' </tr>'); end loop; sys.htp.p('</tbody>'); sys.htp.p('</table>'); return null; exception when OTHERS then raise; end highlight_report_render; 小さいですがソースです。
  • 24. Plug-in03-04. Plug-inを作る 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 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', p_directory => p_plugin.file_prefix); HTMLをレンダリングするファンクションで定義します。 apex_plugin.t_region_render_resultはDOM名を指定 するとそこにフォーカスするようですが、試していませ ん。 l_stmt – SQL文の一時領域として使用します。 l_data_type_list – SQL実行結果の型を定義します。 l_column_value_list – SQL結果を格納します。 highlight.cssというファイルを読み込みます。
  • 25. Plug-in03-04. Plug-inを作る 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 25 プラグインを作ります。(ソース画面詳細です。2/5) 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; l_data_type_list(3) := 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/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文の整形をします。副問い合わせとして商 品名順に並べ替えています。
  • 26. Plug-in03-04. Plug-inを作る 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 26 プラグインを作ります。(ソース画面詳細です。3/5) -- 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; sys.htp.pファンクションにて、HTMLをレンダリングします。 ハイライトさせる部分を分岐させます。ハイラ イト対象はclassを指定します。 取得したデータをもとにループします。 (マニュアルの構文の例は間違っているため、 注意してください)
  • 27. Plug-in03-04. Plug-inを作る 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 27 プラグインを作ります。(ソース画面詳細です。4/5) 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>'); sys.htp.p(' </tr>'); end loop; SQLにて取得した各値を出力します。
  • 28. Plug-in03-04. Plug-inを作る 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 28 プラグインを作ります。(ソース画面詳細です。5/5) 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などでエラー内容をユーザ側 に表示します。
  • 29. Plug-in03-05. Plug-inを作る 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 29 プラグインを作ります。(続き) ソースに記述したファンクション名を入力します。 Ajaxについては、別ファンクションをソース内に記載し、 apex.server.pluginを利用して、Ajaxのリクエストを投げるような処理を追 加する場合に利用します。(jQuery.ajaxのラッパーです) https://docs.oracle.com/cd/E57425_01/121/AEAPI/javascript_api.htm#BGBDIHHD レンダリング?プロシージャ/ファンク ション名 : highlight_report_render
  • 30. Plug-in03-06. Plug-inを作る 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 30 プラグインを作ります。(続き) モバイルは新バージョンではないので、気にせ ずデスクトップを指定してください。
  • 31. Plug-in03-07. Plug-inを作る 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 31 プラグインを作ります。(続き) 開発画面の右側に出てくるオプションの 指定をします。 今回はSQLから表を生成するため、 「リージョン?ソースはSQL文です」を 選択します。
  • 32. Plug-in03-08. Plug-inを作る 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 32 プラグインを作ります。(続き) バージョンにとりあえず1.0を入れます。 URL情報は作者や追加の情報のURLを入力する箇所です。
  • 33. Plug-in03-09. Plug-inを作る 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 33 プラグインを作ります。(続き) アプリケーションビルダーから見えるヘルプを入力します。大事な ので入力することをお勧めします。 --- SQL結果を表にして、特定の行をハイライトするプラグインです。
  • 34. Plug-in03-09. Plug-inを作る 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 34 プラグインを作ります。(続き) プラグインの作成をしますが、CSSの登録をまだしてい ません。こちらは作成後に登録します。 SQLソースの細かい設定も作成後になります。
  • 35. Plug-in03-10. Plug-inを作る 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 35 プラグインを作ります。(続き) 共有コンポーネント > プラグイン > プラグイン名 > ファイル CSSを登録します。以下のファイルを作成し、アップロードしてください。 ファイル名:highlight.css 内容: .highlight { background: #86E0E0 }
  • 36. Plug-in03-11. Plug-inを作る 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 36 プラグインを作ります。(続き) 共有コンポーネント > プラグイン > プラグイン名 > 標準属性の追加メタデータ > Region Source is SQL Statement 【設定】列の数を指定します。リージョンに指定され たSQLが、ここで指定された列の数と一致しない場合 エラーを戻します。 必須:はい 最小列数:3 最大列数:3
  • 37. Plug-in03-11. Plug-inを作る 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 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
  • 38. Plug-in04-01. Plug-inを使う 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 38 1. アプリケーション?ビルダーから組み込んでみましょう。 ヘルプに記載した通りにSQLを入力すれば動作します。 ※ プラグインの中でSQL文の文字列結合しているため、セミコロンが あるとエラーとなります。 2. 例えばプラグインのタグに以下クラシックレポート用のclassを入 れると見た目がAPEXぽくなります。 table class="t-Report-report" th class="t-Report-colHead" td class="t-Report-cell"
  • 39. 3.よく利用しそうなAPI 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 39
  • 40. よく利用しそうなAPI 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 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を利用する場合に使用します。
  • 41. 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 41 お疲れ様でした!

Editor's Notes

  • #24: プラグインソース: 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; l_data_type_list(3) := 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/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 ); -- sys.htp.p('<table class="t-Report-report">'); -- 表のヘッダ sys.htp.p('<thead>'); sys.htp.p(' <tr>'); sys.htp.p(' <th class="t-Report-colHead">商品名</th>'); sys.htp.p(' <th class="t-Report-colHead">価格</th>'); sys.htp.p(' <th class="t-Report-colHead">ハイライト</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 class="t-Report-cell">' || sys.htf.escape_sc(l_column_value_list(1).value_list(i).varchar2_value) || ' </td>'); -- 価格 sys.htp.p( ' <td class="t-Report-cell">' || 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 class="t-Report-cell">' || sys.htf.escape_sc(l_column_value_list(3).value_list(i).number_value) || ' </td>'); sys.htp.p(' </tr>'); end loop; sys.htp.p('</tbody>'); sys.htp.p('</table>'); return null; exception when OTHERS then raise; end highlight_report_render;