日日是Oracle APEX: オラクルのマニュアルを検索するアプリを作る

2022年4月6日水曜日

APEXでアプリを作っていると、オラクル・データベースのSQLリファレンスやPL/SQLリファレンス、APEXのリファレンスをよく検索するのですが、そのまま検索すると古いバージョンのマニュアルがヒットします。

siteを指定すれば限定されるのですが指定が面倒なので、siteに指定したいURLをデータベースに登録して、そのサイトに限定して検索を呼び出すアプリを作ってみました。

https://apex.oracle.com/pls/apex/japancommunity/r/search/

以下、作成手順を紹介します。

最初に検索対象とするサイトを保持する表MDSH_SITESを作成します。

SQLワークショップのユーティリティのクイックSQLを開き、以下のモデルを記述します。

# prefix: mdsh

sites

site_name vc100 /nn /unique

site_url vc400 /nn /unique

display_order num

SQLの生成、続けてSQLスクリプトを保存、最後にレビューおよび実行を行います。

SQLのレビュー画面が開きます。実行をクリックし、表MDSH_SITESを作成します。確認画面が開いたら、即時実行をクリックします。

表が作成されたのちに、アプリケーションの作成を実行します。確認画面が表示されたら、重ねてアプリケーションの実行をクリックします。

アプリケーション作成ウィザードが開きます。アプリケーションの名前は検索とします。表MDSH_SITESへのサイトの登録を管理作業とするため、Sitesのページの編集をクリックします。

詳細をクリックします。管理ページとして設定にチェックを入れ、変更の保存をクリックします。

アプリケーションの作成をクリックします。

処理はすべてホーム・ページに実装します。

ページ・デザイナにてホーム・ページを開きます。

Bodyにリージョンを作成します。

識別の名前を検索、タイプとしてクラシック・レポートを選択します。ソースのタイプをSQL問合せを選択し、SQL問合せに以下を記述します。

	select
	apex_item.hidden(
	p_idx => 1
	, p_value => substr(site_url,1,instr(site_url,'/',-1))
	, p_attributes => 'id="site_url-' \|\| rownum \|\| '"'
	) site_url
	, '<a href="https://' \|\| site_url \|\| '" target="_blank">' \|\| site_name \|\| '</a>' site_name
	, apex_item.text(
	p_idx => 2
	, p_size => 80
	, p_item_label => 'TERM'
	, p_attributes => 'data-term-index=' \|\| rownum
	) term
	from mdsh_sites
	order by display_order asc

APEXのPL/SQL APIのパッケージAPEX_ITEMを使って、レポートに検索する単語を入力するテキスト・フィールドを作成しています。

ファンクションAPEX_ITEM.HIDDENおよびTEXTはHTMLを生成します。レポートに表示される列の値は、デフォルトではエスケープされ、文字列として表示されます。そうではなくHTMLとして解釈されるようにします。列SITE_NAMEもHTMLを記述しています。

列をすべて選択し、セキュリティの特殊文字をエスケープをOFFにします。

JavaScriptのコードよりクラシック・レポートのリージョンを指定するために、詳細の静的IDとしてsearchDocを設定します。

検索する単語を入力してEnterを入力したときに、別画面に検索結果を表示させるJavaScriptのコードを記述します。

ホーム・ページのJavaScriptのファンクションおよびグローバル変数の宣言として、以下のJavaScriptのコードを記述します。

	// サイトとして設定されているドキュメントを検索する。
	var elem = document.getElementById("searchDoc");
	elem.addEventListener('keypress', do_search);
	// Enterを押したときの列のサイトを検索する。
	function do_search(e) {
	if (e.keyCode === 13) {
	let ie = e.srcElement;
	let idx = ie.getAttribute("data-term-index");
	let term = ie.value;
	let site_url = "site:" + document.querySelector("#site_url-" + idx).value + " ";
	let searchUrl = "https://www.google.com/search?q=" + escape(site_url) + term;
	console.log(searchUrl);
	window.open(searchUrl, "_blank");
	}
	return false;
	}

view raw mdsh-javascript.js hosted with ❤ by GitHub

列SITE_URLはデータとしては必要ですが（レポート列として非表示にできない）、画面には表示させたくありません。

CSSのインラインに以下を記述し、列SITE_URLを非表示にします。

view raw mdsh-hide.css hosted with ❤ by GitHub

検索に関する動作の実行は、以上で完了です。

これ以降は、ブレッドクラムの削除や管理ページの構成など、見栄えの調整になります。これらの作業については説明を割愛します。

今回作成したアプリケーションのエクスポートを以下に置きました。

https://github.com/ujnak/apexapps/blob/master/exports/my-document-search.sql

Oracle APEXのアプリケーション作成の参考になれば幸いです。

完