2024年12月19日木曜日

Mo.jsのアニメーションをOracle APEXのアプリケーションに表示する

Mo.jsのアニメーションをOracle APEXのアプリケーションに表示してみます。Mo.jsのTutorialsのGetting startedにあるbouncyCircleとspinnerの表示に取り組みます。

Mo.jsのライブラリはESモジュールとして読み込みます。ライブラリの読み込みからアニメーションの描画を行うコードは別のファイルに記述し、Oracle APEXのページにはコードを一切埋め込まないようにします。

作成したAPEXのアプリケーションは以下のように動作します。Mo.jsのプレイヤーなしのページとプレイヤーありのページを作成します。


以下より簡単に実装について紹介します。

空のAPEXアプリケーションを作成します。名前はPlay Mo.jsとしました。

ホーム・ページに、プレイヤーなしのbouncyCircleとspinnerのアニメーションを表示します。

静的コンテンツのリージョンを作成し、ソースのHTMLコードとして以下を記述します。bouncyCircleのアニメーションを描画するDIV要素になります。

<div id="bouncyCircle" class="w95p h300"></div>


同様に静的コンテンツのリージョンを作成します。ソースのHTMLコードとして以下を記述します。spinnerのアニメーションを描画するDIV要素になります。

<div id="spinner" class="w95p h300"></div>


ページ・プロパティのJavaScriptのファイルURLに以下を記述します。

[module]#APP_FILES#app-mojs#MIN#.js

HTMLヘッダーにimportmapを記述します。ES6モジュールを対象としたCDNサービスのesm.shを指しています。
<script type="importmap">
    {
        "imports": {
            "@mojs/core": "https://esm.sh/@mojs/core"
        }
    }
</script>

静的アプリケーション・ファイルとしてapp-mojs.js（およびミニファイしたapp-mojs.min.js）を作成します。内容として以下を記述します。ほとんどMo.jsのGetting startedそのままです。



プレイヤーなしのバージョンは以上で完成です。

空白ページをページ番号２として作成し、ホーム・ページと同じく静的コンテンツのリージョンbouncyCircleとspinnerを作成します。

ページ・プロパティのJavaScriptのファイルURLに以下を記述します。

[module]#APP_FILES#app-mojs-player#MIN#.js

CSSのファイルURLに以下を記述します。

#APP_FILES#app-mojs-player#MIN#.css

HTMLヘッダーに以下を記述します。
<script type="importmap">
    {
        "imports": {
            "@mojs/core": "https://esm.sh/@mojs/core",
            "@mojs/player": "https://esm.sh/@mojs/player"
        }
    }
</script>

静的アプリケーション・ファイルとしてapp-mojs-player.js（およびミニファイしたapp-mojs-player.min.js）を作成します。内容として以下を記述します。



Mo.jsのドキュメントからはプレイヤーの位置を指定する方法を見つけられず、コードから見つけています。MojsPlayerのインスタンスを作成する際に、parentとしてアニメーションを描画するDIV要素を指定し、classNameに指定したCSSクラス（上記のコードではmy-mojs-player）で表示位置を決めます。デフォルトでは、ウィンドウの最下部にプレイヤーが表示されます（parentの指定がdocument.bodyになる）。

プレイヤーの表示位置を定義するCSSクラスmy-mojs-playerは、app-mojs-player.cssで定義します。静的アプリケーション・ファイルとして作成します。



以上でアプリケーションは完成です。

今回作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/play-mojs.zip

Oracle APEXのアプリケーション作成の参考になれば幸いです。

完
投稿者 時刻:
ラベル: , ,