今回はRiveのライブラリをRequireJSを使って読み込むようにします。また、ライブラリの読み込みからアニメーションの描画を行うコードを別のファイルに記述し、Oracle APEXのページにはコードを一切埋め込まないようにします。
作成したAPEXアプリケーションは以下のように動作します。
以下より実装について簡単に紹介します。
空のAPEXアプリケーションを作成します。名前はPlay Riveとしました。
ホーム・ページに静的コンテンツのリージョンを作成し、ソースのHTMLコードにRiveのアニメーションを表示するキャンバス要素を記述します。
<canvas id="canvas" width="500" height="500"></canvas>
共有コンポーネントの静的アプリケーション・ファイルとして、play-rive.jsを作成します。
ファイル名としてplay-rive.jsを入力します。作成をクリックします。
スクリプト・エディタが開きます。以下の内容を記述し、変更の保存をクリックします。参照はページ・プロパティのJavaScriptのファイルURLに記載するため、コピーしておきます。
RequireJSを使ってRiveのランタイム・ライブラリを読み込んだ後に、RiveのGetting startedに記載されているアニメーション表示を実行します。
静的アプリケーション・ファイルの一覧を開き、ファイルとしてplay-rive.jsとミニファイルされたplay-rive.min.jsが作成されていることを確認します。
ページ・プロパティのJavaScriptのファイルURLに、作成した静的アプリケーション・ファイルへの参照を記述します。RequireJSを使えるように参照の前に[require requirejs]を付加します。Oracle APEX 24.1に含まれている、RequireJSの2.3.7が自動的にロードされます。
[require requirejs]#APP_FILES#play-rive#MIN#.js
以上でアプリケーションは完成です。アプリケーションを実行すると、記事の先頭のようなアニメーションが表示されます。
JavaScriptのモジュール・システムのトレンドはESモジュールだと思いますが、Oracle APEXにはRequireJSがバンドルされていて、比較的簡単にRequireJSを呼び出すことができます。
今回作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/play-rive.zip
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完
