2024年11月11日月曜日

Oracle APEXのアプリのページにPyodideを組み込んでみる

PyodideのGetting startedのページを参照して、Oracle APEXのアプリケーションに簡単なPythonのスクリプトを実行するページを作ってみました。

フィボナッチ数列を出力するPythonのコードを実行してみました。
def fibonacci(n):
  """
  フィボナッチ数列のn番目の数字を返す関数

  Args:
    n: 数列のn番目 (整数)

  Returns:
    フィボナッチ数列のn番目の数字 (整数)
  """
  if n <= 1:
    return n
  else:
    return fibonacci(n-1) + fibonacci(n-2)

# フィボナッチ数列の最初の10個の数字を計算して出力
for i in range(10):
  print(fibonacci(i))


空のAPEXアプリケーションを作成し、ホーム・ページにPyodideを組み込んでいます。


コードを入力するページ・アイテムとしてP1_CODEを作成しています。タイプテキスト領域としています。


Pythonのコードの出力は、ページ・アイテムP1_OUTPUTに出力します。タイプテキスト領域としています。


ボタンとしてRUNCLEARを作成しています。ボタンRUNをクリックすることにより、P1_CODEに記述したPythonのコードを実行します。ボタンCLEARは、ページ・アイテムP1_CODEP1_OUTPUTをクリアします。

両方のボタン共に、動作は動的アクションにて定義しています。


Pyodideのロードと初期化を行なう設定を追加します。

ページ・プロパティJavaScriptファイルURLに以下を記述します。2024年11月11日現在では、v0.26.3が最新の模様です。

https://cdn.jsdelivr.net/pyodide/v0.26.3/full/pyodide.js

ファンクションおよびグローバル変数の宣言に以下を記述します。
var pyodide;

async function main() {
  pyodide = await loadPyodide();

  /*
   * 追加のライブラリの読み込みの例
   * Ref:
   * https://pyodide.org/en/stable/usage/packages-in-pyodide.html
   */
  await pyodide.loadPackage('scikit-learn');

  pyodide.setStdout({
    batched: (msg) => {
        let smsg = apex.item("P1_OUTPUT").getValue();
        apex.item("P1_OUTPUT").setValue(`${smsg}\n${msg}`);
    }
  });

  // Pyodide is now ready to use...
  console.log(pyodide.runPython(`
    import sys
    sys.version
  `));
};
ページ・ロード時に実行に以下を記述します。

main();

以上の設定により、ページ・ロード時にPyodideが初期化されます。


ボタンRUNを押した時に、ページ・アイテムP1_CODEに記述されたPythonのコードを実行します。

ボタンRUNTRUEアクションとしてJavaScriptコードの実行を選択し、設定コードとして以下を記述します。

pyodide.runPython(apex.items.P1_CODE.value);


ボタンCLEARを押した時に、ページ・アイテムP1_CODEP1_OUTPUTクリアします。


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

このAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/pyodide-on-apex.zip

Pythonのコードは単にテキスト領域に記述していますが、apex.worldに載っているMonaco Editorのプラグインを代わりに使うと、Pythonのコードも書きやすくなるかと思います。

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