これらの国旗のアイコンをAPEXアプリケーションに表示してみます。
先日の記事で作成した表EBAJ_COUNTRIESを作成します。
-- create tables
create table ebaj_countries (
iso_code varchar2(2) not null
constraint ebaj_countries_pk primary key,
country_name varchar2(255) not null,
capital_name varchar2(255),
longitude number(9,6),
latitude number(9,6) )
/SQLワークショップのSQLスクリプトを開き、作成をクリックします。
スクリプト名としてcountriesを入力し、上記のCREATE TABLE文を貼り付けて、実行をクリックします。
即時実行をクリックします
表EBAJ_COUNTRIESが作成されます。続けてアプリケーションの作成をクリックします。
確認画面が開きます。アプリケーションの作成をクリックします。
アプリケーション作成ウィザードが開きます。スクリプト名よりアプリケーションの名前はCountriesとなっています。表EBAJ_COUNTRIESをソースとしたフォーム付き対話モード・レポートのページが追加されています。
このままアプリケーションの作成を実行します。
アプリケーションが作成されます。
表EBAJ_COUNTRIESにデータを投入します。Claude 3.5 Sonnetに以下の指示を与えました。
現在、国連に加盟している国名、ISO3166-1 Alpha-2コード、首都名、首都の位置の経度と緯度をCSV形式で出力してください。データは英語で一覧してください。ISO3166-1のコードは英子文字で出力してください。
アーティファクトとして作成されたので、クリップボードにコピーします。
APEXに戻り、SQLワークショップのユーティリティに含まれるデータ・ワークショップを開きます。
データのロードをクリックします。
コピー・アンド・ペーストを選択し、先ほどコピーしたアーティファクトをペーストします。
次へ進みます。
データのロード先となる列をマッピングするため、構成をクリックします。
ソース列COUNTRYのマップ先としてCOUNTRY_NAME(Varchar2)、ソース列CAPITALのマップ先としてCAPITAL_NAME(Varchar2)を選択します。それ以外のすべてのソース列について、マップ先が設定されていることを確認します。
変更の保存をクリックします。
準備ができたので、データのロードをクリックします。
作成済みのAPEXアプリケーションCountriesを実行して、表EBAJ_COUNTRIESの内容を一覧する対話モード・レポートを表示します。
ISOコードの表示の前に国旗を表示させます。
Font APEXのリファレンスを開きアイコンを表示するHTMLを確認します。日本の国旗を検索し、そのHTML式をコピーします。
対話モード・レポートの列ISO_CODEの列の書式のHTML式に以下を記述します。日本の国旗のHTML式のjpの部分を、列ISO_CODEの値である#ISO_CODE#に置き換えます。
<span aria-hidden="true" class="fa fa-flag-#ISO_CODE#"></span>#ISO_CODE#
変更を保存します。
同様にしてマップ・リージョン上にポイントとして国旗を表示させようとしたのですが、国旗のアイコンのソースがSVGであるため表示はできませんでした。
日本の国旗のアイコンは、以下のように定義されています。SVGのバックグランド・イメージです。大抵のアイコンは、SVGではありません。
.fa-flag-jp {
background-image: url(../images/flags/flag-jp.svg)
}マップ・リージョンにSVGを表示するには、属性のカスタムSVGスタイルに、表示する図形を登録します。
ページの作成をクリックします。
マップを選択します。
次へ進みます。
ページの作成をクリックします。
マップ・リージョンのページが作成されます。
ページを実行してみます。各国の首都の位置にデフォルトのピンが立っています。
ポイント・オブジェクトのスタイルをアイコンに変更し、アイコン・ソースにアイコン・クラス、アイコンCSSクラスとしてfa-dot-circle-oを指定します。国旗のアイコン（SVGがソース)でなければ、ポイント・オブジェクトとしてアイコンが表示されます。
首都の位置にfa-dot-circle-oのアイコンが表示されます。
マップ・リージョンの属性のカスタムSVGスタイルに以下を記述します。SVGをJSON形式で定義しています。SVGからJSONに書き換える作業が大変なので、日本の国旗だけを登録します。
[
{
"name": "fa-flag-jp",
"width": 24,
"height": 24,
"paint-order": "stroke",
"viewBox": "0 0 24 24",
"fill": "none",
"fill-rule": "evenodd",
"elements": [
{
"type": "rect",
"width": 24,
"height": 18,
"y": 3,
"fill": "#fcfbfa",
"rx": 2
},
{
"type": "circle",
"cx": 12,
"cy": 12,
"r": 5,
"fill": "#e70a2d"
},
{
"type": "rect",
"width": 23,
"height": 17,
"x": 0.5,
"y": 3.5,
"stroke": "#100f0e",
"opacity": 0.1,
"rx": 2
}
]
}
]
マップ・リージョンに日本の国旗を表示します。日本に限定するため、レイヤー世界地図のソースのWHERE句にiso_code = 'jp'を記述します。
ポイント・オブジェクトのスタイルとしてSVG、形状にfa-flag-jpを指定します。
もし、各国の国旗のアイコンがカスタムSVGスタイルに登録されていると、レイヤーのソースを以下のように変更し、形状に&ICON.と設定することで、それぞれの国の首都の位置にその国の国旗を表示できます。
select ISO_CODE,
COUNTRY_NAME,
CAPITAL_NAME,
LONGITUDE,
LATITUDE,
'fa-flag-' || iso_code icon
from EBAJ_COUNTRIES
以下のような表示なります。日本以外はSVGスタイルが登録されていないため、デフォルトの形状が表示されています。
以上でアプリケーションの作成は完了です。
今回作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/sample-font-apex-country-flag-icons.zip
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完
