デジタル庁よりイラストレーション・アイコン素材が提供されています。配布の目的や利用方法、利用規約などは、デジタル庁のイラストレーション・アイコン素材の紹介記事に記載されています。
この記事の最後の方にダウンロードして使うというセクションがあり、イラストレーション・アイコン素材をzip形式でダウンロードすることができます。designsystem-assets.zipという名前で、素材を含んだZIPファイルがダウンロードされます。
このファイルに含まれるイラストレーションおよびアイコンを、Oracle APEXのアプリケーションで使用してみます。
アプリケーション作成ウィザードを起動し、空のアプリケーションを作成します。
素材のファイルはワークスペース内のすべてのアプリケーションから参照できるように、静的ワークスペース・ファイルとして作成する予定です。しかし、なぜか、静的ワークスペース・ファイルはアプリケーションの共有コンポーネントに含まれています。そのため、ワークスペースに保存するファイルでもアプリケーションを開いて操作する必要があります。
アプリケーションの名前はデジタル庁 - イラストレーション・アイコン素材とします。
アプリケーションの作成を実行します。
アプリケーションが作成されたら、共有コンポーネントの静的ワークスペース・ファイルを開きます。
コンテンツとしてデジタル庁よりダウンロードしたファイルdesignsystem-assets.zipを選択します。ファイルの解凍をオンにすることで、ZIPファイルに含まれるファイルを静的ワークスペース・ファイルとして参照できるようにします。
今回は、ディレクトリは特に指定しません。designsystem-assets.zipを展開するとファイルはすべてディレクトリdesignsystem-assets以下に作成されます。使い方によっては、ディレクトリを指定した方がよいでしょう。ファイルの文字セットはUnicode(UTF-8)とします。
以上で作成をクリックします。
ZIPファイルのアップロードと解凍には、手元の時計で２分くらいの時間がかかりました。
作成された静的ワークスペース・ファイルを一覧します。
ファイルの内容を確認するために、ページを作成して画像を一覧します。
イラストレーションのPNG画像を一覧するページを作成します。スマート・フィルタとカード・リージョンを使います。
ページの作成をクリックします。
スマート・フィルタを選択します。
ページ定義の名前はイラストレーションとします。データ・ソースのソース・タイプとしてSQL問合せを選択し、SQL SELECT文を入力に以下を記述します。
次へ進みます。
表示形式としてカードを選択します。
列FILE_NAME、FILE_NAME_SHORT、FILE_NAME_LONGは重複の無い一意の文字列ですし、列MIME_TYPE、FILE_CHARSETはすべて同じ値です。そのため、すべてのフィルタのチェックを外します。
スマート・フィルタでは、文字列検索のみを行います。
次へ進みます。
ページの作成をクリックします。
ページが作成されます。いくつかの設定を調整します。
スマート・フィルタのフィルタ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で参照するための文字列が表示されます。
アイコン素材のページの名前はアイコン、SQL問合せとして以下を記述します。
以降は、イラストレーションのページと同じ作業を行います。
ページが作成されたら、イラストレーションと同様にフィルタ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の参照を確認します。
ボタンを作成します。
識別のボタン名はFAST_TRACK、ラベルはFast Trackとします。外観のボタン・テンプレートとしてText with Iconを選択し、アイコンとしてfast-track-lineを指定します。
ページを実行すると、以下のようにボタンが表示されます。
イラストレーションl_01_rectangle_white.pngを表示してみます。
参照を確認しておきます。
ページ・アイテムを作成します。
識別の名前はP1_IMAGE、タイプはイメージの表示、ラベルはImageとします。
設定の基準としてImage URL stored in Page Item Valueを選択し、デフォルトのタイプとして静的、静的値として上記の静的ワークスペース・ファイルの参照を記述します。
デジタル庁から提供されているイラストレーション・アイコン素材集を、Oracle APEXで利用する方法の紹介は以上になります。
例えば、画像アドレスをコピーすると確認できますが、静的ワークスペース・ファイルはブラウザからみると静的なファイルと違いがありません。
そのため、静的ワークスペース・ファイル（静的アプリケーション・ファイルも同様）へのアクセスが多い場合は、ファイルをCDNなどに移動するとデータベースへの負荷を下げることができます。
今回作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/digital-agency-illustrations-and-icons.zip
静的ワークスペース・ファイル（デジタル庁が提供している素材）は、アプリケーションのエクスポートに含んでいません。
Oracle APEX 22.2からは、コンポーネントのエクスポートとして、静的ワークスペース・ファイルをアプリケーションのエクスポートに含めることができるようになっています。
エクスポートの際にタスクからコンポーネントのエクスポートを呼び出します。
アプリケーションのエクスポートに含めたい静的ワークスペース・ファイルを選択し、エクスポートに追加することができます。
ホーム・ページで使用しているfast_track_line.svg、l_01_rectangle_white.pngに限定すると、以下の選択でアプリケーションのエクスポートにファイルが含まれるようになります。
今回の記事は以上になります。
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完
