日日是Oracle APEX: デジタル庁のイラストレーション・アイコン素材を使用する

2023年6月29日木曜日

デジタル庁のイラストレーション・アイコン素材を使用する

デジタル庁よりイラストレーション・アイコン素材が提供されています。配布の目的や利用方法、利用規約などは、デジタル庁のイラストレーション・アイコン素材の紹介記事に記載されています。

この記事の最後の方にダウンロードして使うというセクションがあり、イラストレーション・アイコン素材をzip形式でダウンロードすることができます。designsystem-assets.zipという名前で、素材を含んだZIPファイルがダウンロードされます。

このファイルに含まれるイラストレーションおよびアイコンを、Oracle APEXのアプリケーションで使用してみます。

アプリケーション作成ウィザードを起動し、空のアプリケーションを作成します。

素材のファイルはワークスペース内のすべてのアプリケーションから参照できるように、静的ワークスペース・ファイルとして作成する予定です。しかし、なぜか、静的ワークスペース・ファイルはアプリケーションの共有コンポーネントに含まれています。そのため、ワークスペースに保存するファイルでもアプリケーションを開いて操作する必要があります。

アプリケーションの名前はデジタル庁 - イラストレーション・アイコン素材とします。

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

アプリケーションが作成されたら、共有コンポーネントの静的ワークスペース・ファイルを開きます。

作成済みの静的ワークスペース・ファイルが一覧されます。ファイルの作成をクリックします。

コンテンツとしてデジタル庁よりダウンロードしたファイルdesignsystem-assets.zipを選択します。ファイルの解凍をオンにすることで、ZIPファイルに含まれるファイルを静的ワークスペース・ファイルとして参照できるようにします。

今回は、ディレクトリは特に指定しません。designsystem-assets.zipを展開するとファイルはすべてディレクトリdesignsystem-assets以下に作成されます。使い方によっては、ディレクトリを指定した方がよいでしょう。ファイルの文字セットはUnicode(UTF-8)とします。

以上で作成をクリックします。

ZIPファイルのアップロードと解凍には、手元の時計で２分くらいの時間がかかりました。

作成された静的ワークスペース・ファイルを一覧します。

LICENSE.txtを含む、色々なファイルが作成されていることが確認できます。

ファイルの内容を確認するために、ページを作成して画像を一覧します。

イラストレーションのPNG画像を一覧するページを作成します。スマート・フィルタとカード・リージョンを使います。

ページの作成をクリックします。

スマート・フィルタを選択します。

ページ定義の名前はイラストレーションとします。データ・ソースのソース・タイプとしてSQL問合せを選択し、SQL SELECT文を入力に以下を記述します。

	select
	workspace_file_id, file_name, mime_type, file_charset, file_content, last_updated_on
	, replace(file_name,'designsystem-assets/illustration/png/','') as file_name_short
	, '#' \|\| 'WORKSPACE_FILES' \|\| '#' \|\| file_name as file_name_long
	from apex_workspace_static_files
	where file_name like 'designsystem-assets/illustration/png/%.png'
	and workspace_id = :WORKSPACE_ID

view raw digital-agency-illustration-source.sql hosted with ❤ by GitHub

次へ進みます。

表示形式としてカードを選択します。

列FILE_NAME、FILE_NAME_SHORT、FILE_NAME_LONGは重複の無い一意の文字列ですし、列MIME_TYPE、FILE_CHARSETはすべて同じ値です。そのため、すべてのフィルタのチェックを外します。

スマート・フィルタでは、文字列検索のみを行います。

次へ進みます。

カード・レイアウトとしてグリッド、タイトル列にFILE_NAME_SHORT(Varchar2)を選択します。

ページの作成をクリックします。

ページが作成されます。いくつかの設定を調整します。

スマート・フィルタのフィルタP2_SEARCHを選択し、ソースのデータベース列をFILE_NAME_SHORTに限定します。

デフォルトでは検索可能なすべての列が指定されています。

カード・リージョン検索結果の属性を開きます。

カードの主キー列1としてWORKSPACE_FILE_IDを選択します。

２次本体の列としてFILE_NAME_LONGを選択します。これは静的アプリケーション・ファイルを直接指定するURLの一部です。

メディアのソースとしてBLOB列、BLOB列としてFILE_CONTENTを選択します。位置は本体、外観は自動、サイズ指定は適合を選択します。

BLOB属性のMIMEタイプ列としてMIME_TYPE、最終更新列としてLAST_UPDATED_ONを選択します。

以上で変更を保存します。

ページを実行すると以下のように表示されます。

イラストレーションの素材の画像と、それをAPEXで参照するための文字列が表示されます。

アイコン素材のSVGについても、スマート・フィルタとカード・リージョンを使って一覧画面を作成します。ページの作成を実行し、スマート・フィルタを選択します。

アイコン素材のページの名前はアイコン、SQL問合せとして以下を記述します。

	select
	workspace_file_id, file_name, mime_type, file_charset, to_clob(file_content) file_content, last_updated_on
	, replace(file_name,'designsystem-assets/icon/svg/','') as file_name_short
	, '#' \|\| 'WORKSPACE_FILES' \|\| '#' \|\| file_name as file_name_long
	from apex_workspace_static_files
	where file_name like 'designsystem-assets/icon/svg/%.svg'
	and workspace_id = :WORKSPACE_ID

view raw digital-agency-icon-source.sql hosted with ❤ by GitHub

以降は、イラストレーションのページと同じ作業を行います。

ページが作成されたら、イラストレーションと同様にフィルタP2_SEARCHのソースのデータベース列をFILE_NAME_SHORTに限定します。

カード・リージョン検索結果の属性は、以下のように変更します。

本体の拡張フォーマットをオンにして、HTML式として&FILE_CONTENT!RAW.を記載します。列FILE_CONTENTとしてSVG要素が記述されており、SVG要素がエスケープされずにHTMLとして解釈されるようにしています。

カードの主キー列1としてWORKSPACE_FILE_ID、２次本体の列としてFILE_NAME_LONGを選択します。

ページを実行すると以下のように表示されます。

アイコンの素材の画像と、それをAPEXで参照するための文字列が表示されます。

これらの素材からアイコンやイラストレーションを選んで、APEXのページで使ってみます。

ホーム・ページにアイコンやイラストレーションを表示させます。

最初に、ボタンのアイコンとしてfast_track_line.svgを表示します。fast_track_line.svgの参照を確認します。

ホーム・ページのページ・プロパティのCSSのインラインに以下を記述します。

	.fast-track-line {
	background-image: url(#WORKSPACE_FILES#designsystem-assets/icon/svg/fast_track_line.svg);
	background-repeat: no-repeat;
	display: block;
	background-position: center center;
	background-size: contain;
	width: 48px;
	height: 48px;
	}