版を固定したCDNモジュールでブラウザ分子解析を追加する

課題別チュートリアル

版を固定したCDNモジュールでブラウザ分子解析を追加する

バンドラやバックエンドを追加せずに、公開済みWebAssemblyパッケージを小さなブラウザページで読み込みます。

作るもの

リリース版を固定したモジュール読み込みで、アスピリンの計算結果をブラウザコンソールへ出すこと。

手順

HTTPSまたはローカルWebサーバーから配信する小さなHTMLページを用意します。
下の版固定モジュールスクリプトを貼り付け、ブラウザで読み込みます。
コンソールにアスピリンの180.16が表示されることを確認し、分子オブジェクトを解放します。

<script type="module">
  import init, { parse_smiles } from "https://cdn.jsdelivr.net/npm/@kent-tokyo/chematic@1.1.7/chematic_wasm.js";

  await init();
  const mol = parse_smiles("CC(=O)Oc1ccccc1C(=O)O"); // アスピリン
  console.log(mol.molecular_weight().toFixed(2)); // 180.16
  mol.free();
</script>

期待する結果

版を固定したWebAssemblyモジュールの初期化後、ブラウザコンソールにアスピリンの分子量180.16が表示されます。SMILESの計算はブラウザ内で実行されます。

うまくいかないとき

明示したリリース版を@latestへ置き換えないでください。file URLではESモジュールをブロックするブラウザがあるため、ローカルWebサーバーを使います。CDNからのパッケージ取得と、分子入力をchematic.ioへ送ることは別です。