ページの構成

WASM の Web ツールを github pages で公開する

やっと最後になりました。

WASM の Web ツールを github pages で公開する方法はすでに書きました。

ただ、個人的に気になったのが、複数の Web ツールを一つのページ以下に置く方法です。

例えばすでに作った計算機と Unixtime ツールを一つのページ以下にぶら下げるにはどうすればいいでしょうか？

github pages の仕様上、すべて/docsディレクトリ以下にツールを配置する必要があります。

ここに置く、Web ツールの Top ページとして、index.htmlを作ると以下のようになるでしょう

<html>
    <head>
       <meta charset="utf-8" />
       <link rel="shortcut icon" href="#" />
   </head>

    <body>
        <ul>
            <li><a href="./calc3_tinygo/calc.html">Calculator</a></li>
            <li>
                <a href="./calc3_tinygo_tricky_args/calc.html">Calculator(不具合)</a>
            </li>
            <li><a href="./unixtime_tinygo/unixtime.html">Unixtime変換ツール</a></li>
        </ul>
    </body>
</html>

これまでに作った計算機（TinyGo 版）をCalculator、Unixtime ツール（TinyGo 版）をUnixtime変換ツールとして Top ページ以下に配置しました。

Calculator(不具合)は、前述の TinyGo の//exportを使った場合でも文字列を直接関数に受け渡しする方法をあれこれ考えて、完成させる前に諦めたものです。もしやる気になったら直すかもしれません（時間かけすぎて挫折してトラウマなのでもう触らない気もします）

ここで気になる点は、複数の Web ツールのディレクトリそれぞれに、wasm_exec.jsや、WebAssembly.instantiateStreamingをするだけのinstantiateWasm.jsを配置するのは無駄に思えることです。

そこで、wasm_exec.jsとinstantiateWasm.jsは/docs以下において、その下の Web ツールから呼びだすようにしました。

以下のような構成では、

$tree docs
docs
├── calc3_tinygo
│   ├── calc.go
│   ├── calc.html
│   ├── calc.js
│   └── calc.wasm
省略
├── index.html
├── instantiateWasm.js
└── wasm_exec.js

/docs/calc3_tinygoの中のcalc.jsからinstantiateWasm.jsを import するには以下のように../で相対パスを指定します。

import { wasmBrowserInstantiate } from "../instantiateWasm.js";

同様に、/docs/calc3_tinygoの中のcalc.htmlからwasm_exec.jsを呼びだすためには以下のように相対パスを指定すればいいです。

<html>
    <head>
       <meta charset="utf-8" />
       <title>wasam-calculator</title>
       <link rel="shortcut icon" href="#" />
       <script src="../wasm_exec.js"></script>
       ← この部分
       <script type="module" src="./calc.js"></script>
   </head>
</html>