Pixi.jsのライブラリはESモジュールとして読み込みます。ライブラリの読み込みからアニメーションの描画を行うコードは別のファイルに記述し、Oracle APEXのページにはコードを一切埋め込まないようにします。
作成したAPEXのアプリケーションは以下のように動作します。Pixi.jsのGetting Startedにはありませんが、アニメーションの開始と終了をするボタンを付けています。
以下より簡単に実装について紹介します。ボタンの実装についてはLottieのアニメーションの記事と同じなので省略します。
空のAPEXアプリケーションを作成します。名前はPlay Pixi.jsとしました。
ホーム・ページにPixi.jsのアニメーションを表示する領域を作成します。
静的コンテンツのリージョンを作成し、ソースのHTMLコードとして以下を記述します。
<div id="container" style="width: 400px; height: 400px;"></div>
Getting startedのアニメーションを描画するDIV要素になります。余計な装飾を除くために、外観のテンプレートにBlank with Attributes (No Grid)を選択しています。
ページ・プロパティのJavaScriptのファイルURLに以下を記述します。
[module,defer]#APP_FILES#app#MIN#.js
HTMLヘッダーにimportmapを記述します。
<script type="importmap">
{
"imports": {
"pixi.js": "https://cdn.jsdelivr.net/npm/pixi.js@8.6.6/+esm"
}
}
</script>
静的アプリケーション・ファイルとしてapp.js（およびミニファイしたapp.min.js）を作成します。内容として以下を記述します。ほとんどPixi.jsのGetting startedそのままですが、TickerPluginを明示的にextensionsに追加しているのと、アニメーションをHTML要素に表示するように変更しています。また、ボタンの処理も加えています。
以上でアプリケーションは完成です。
今回作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/play-pixi-js.zip
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完
