かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

Uno Platform から JavaScript のライブラリを使いたい

日本語情報だとひらりんさんのブログにまとまってます!

himanago.hatenablog.com

私がはまったのは、iziToast というライブラリでトースト出そうとして

function showToast(text) {
    iziToast.show({ title: 'Info', message: text });
}

という関数を JS に作って C# 側から以下のように呼んでも iziToast が undefined になっていてエラーになる感じです。iziToast.js と css は WasmScripts と WasmCSS フォルダーにおいて埋め込みリソースに設定していてもダメでした。

WebAssemblyRuntime.InvokeJS($"showToast('{text}');");

解決策

iziToast.js をステップ実行していると最初の iziToast の宣言をする処理が以下のようになっていたのですが

f:id:okazuki:20200114005804p:plain

最初の if 文に入っていて define 関数で定義されるようなルートを通ってました。require.js が Uno Platform の WASM の実行時には読み込まれているようで(実際に Chrome の開発者モードで見てみるとそうなってました)特に名前指定なしで define したときはファイル名で require しないといけないみたいなんですね。

qiita.com

なので、JavaScript の showToast を以下のようにして require するようにしたら無事 iziToast を Uno Platform から使えました。

// こんな感じか
function showToast(text) {
    require(['iziToast'], function (iziToast) {
        iziToast.show({ title: 'Info', message: text });
    });
}

// こっちでも OK
function showToast(text) {
    const iziToast = require('iziToast');
    iziToast.show({ title: 'Info', message: text });
}

ちゃんとトースト出てますね。

f:id:okazuki:20200114010035p:plain

iziToast のサイト

https://izitoast.marcelodolza.com/