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

RiveのアニメーションをOracle APEXのアプリケーションに表示してみます。組み込みにはRiveのDocsのRuntimesのGetting startedのWeb (JS)に記載されている手順を元にします。

今回は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に記載されているアニメーション表示を実行します。

	require(["https://unpkg.com/@rive-app/canvas"], (rive) => {
	function newRive() {
	const r = new rive.Rive({
	src: "https://cdn.rive.app/animations/vehicles.riv",
	// OR the path to a discoverable and public Rive asset
	// src: '/public/example.riv',
	canvas: document.getElementById("canvas"),
	autoplay: true,
	// artboard: "Arboard", // Optional. If not supplied the default is selected
	stateMachines: "bumpy",
	onLoad: () => {
	r.resizeDrawingSurfaceToCanvas();
	}
	});
	return r;
	};
	/*
	* DOMContentLoadedのイベントがまだ発生していないときは、
	* それが発生したときにアニメーションを描画する。
	* すでにイベントが発生済みであれば、そのままアニメーションを描画する。
	*/
	if ( document.readyState === "loading" ) {
	document.addEventListener("DOMContentLoaded", () => {
	newRive();
	});
	} else {
	newRive();
	}
	});

view raw play-rive.js hosted with ❤ by GitHub

静的アプリケーション・ファイルの一覧を開き、ファイルとして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のアプリケーション作成の参考になれば幸いです。

完