Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

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

365 visualizaciones

Publicado el

Oracle APEX Plug-inを使ってリージョンの作成をしてみるハンズオン資料です。

Publicado en: Ingeniería
  • Inicia sesión para ver los comentarios

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

  1. 1. 株式会社シックススクウェアジャパン Oracle APEX Plug-in プラグインを作ろう! 2018/5/19 1 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved.
  2. 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. 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. 4. 1. PLUG-INのアーキテクチャ 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 4
  5. 5. Plug-inの種類 • Plug-inの種類 – リージョン(本日の対象) – プロセス – アイテム – 動的アクション – 認可スキームタイプ – 認証スキームタイプ 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 5 プラグイン作成画面
  6. 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. 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. 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. 9. 2. PLUG-INを作ってみる 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 9
  10. 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. 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. 12. Plug-in01-01. テーブルを作る 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 12 テーブルを作ります。 SQLワークショップ > オブジェクト・ブラウザ
  13. 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. 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. 15. Plug-in02-01. アプリを作る 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 15 プラグインを利用するアプリケーションを作ります。 デスクトップを選択 ※画面は APEX 5.1です。
  16. 16. Plug-in02-02. アプリを作る 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 16 プラグインを利用するアプリケーションを作ります。(続き) 好きな名前を入力し、次へ(画面は”Plug-in Demo”)
  17. 17. Plug-in02-03. アプリを作る 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 17 ページの追加 プラグインを利用するアプリケーションを作ります。(続き)
  18. 18. Plug-in02-04. アプリを作る 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 18 プラグインを利用するアプリケーションを作ります。(続き) 作成した表名(T_PRODUCTS)を入力 他は好きに指定
  19. 19. Plug-in02-05. アプリを作る 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 19 プラグインを利用するアプリケーションを作ります。(続き) 他は指定不要の為、アプリケーションの作成をクリック
  20. 20. Plug-in03-01. Plug-inを作る 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 20 プラグインを作ります。 アプリケーション・ビルダー > 共有コンポーネント プラグインをクリック
  21. 21. Plug-in03-02. Plug-inを作る 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 21 プラグインを作ります。(続き) 最初からをクリック (前の画面で作成をクリック)
  22. 22. Plug-in03-03. Plug-inを作る 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 22 プラグインを作ります。(続き) 名前 : ハイライトレポート 内部名 : <ドメイン>.highlightreport タイプ : リージョン • 名前 : アプリケーション内での表示名です。分かりやすい名前を付けてください。 • 内部名 : アプリケーション内で一意の必要があります。基本意識しません。 外部利用等を考慮する場合、ドメイン名を付けることが推奨されています。 • タイプ : 今回はリージョンタイプを作成します。別のタイプを選ぶと、 他の項目が変化しますので、どんなものが必要か見ることが出来ます。
  23. 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. 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. 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. 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. 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. 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. 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. 30. Plug-in03-06. Plug-inを作る 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 30 プラグインを作ります。(続き) モバイルは新バージョンではないので、気にせ ずデスクトップを指定してください。
  31. 31. Plug-in03-07. Plug-inを作る 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 31 プラグインを作ります。(続き) 開発画面の右側に出てくるオプションの 指定をします。 今回はSQLから表を生成するため、 「リージョン・ソースはSQL文です」を 選択します。
  32. 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. 33. Plug-in03-09. Plug-inを作る 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 33 プラグインを作ります。(続き) アプリケーションビルダーから見えるヘルプを入力します。大事な ので入力することをお勧めします。 --- SQL結果を表にして、特定の行をハイライトするプラグインです。
  34. 34. Plug-in03-09. Plug-inを作る 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 34 プラグインを作ります。(続き) プラグインの作成をしますが、CSSの登録をまだしてい ません。こちらは作成後に登録します。 SQLソースの細かい設定も作成後になります。
  35. 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. 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. 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. 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. 39. 3.よく利用しそうなAPI 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 39
  40. 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. 41. 2018/5/19 All contents copyright Six Square Japan Co., Ltd. All Rights Reserved. 41 お疲れ様でした!

×