アイコンが参照できない状態でビルドされている？

[bino98]

とても便利なライブラリを開発いただき、ありがとうございます。

section editorを https://github.com/thinreports/thinreports-section-editor/releases/tag/v1.0.0-dev からダウンロードさせていただいたのですが(mac)、アプリケーション内で使用されているアイコンが抜けているようです。

手元でのビルドは試せていないので原因究明まではできてはいません。

[hidakatsuya]

ご報告ありがとうございます。確認してみます。

[hidakatsuya]

production でビルドしたとき、WebFont が参照できない状態になるようです。development ビルドでは問題ないため、electron ビルドの問題だと思います。

[hidakatsuya]

以下は、npm run electron:build して dist_electron/ の editor を起動した場合の devtool の Sources:

fonts が Electron Isolated Context に含まれていないためこの事象が生じている。

[hidakatsuya]

contextIsolation boolean (任意) - Electron APIと指定された preload スクリプトを別々のJavaScriptコンテキストで実行するかどうか。 省略値は true です。 preload スクリプトが実行されるコンテキストでは、専用の document および window グローバルと、独自の JavaScript ビルドインのセット (Array, Object, JSON など) にのみアクセスできます。これらすべてはロードされたコンテンツからは見えません。 Electron API は preload スクリプトでのみ利用可能で、読み込まれたページでは利用できません。 このオプションは、信頼できない可能性のあるリモートコンテンツをロードする際に使用します。ロードされたコンテンツが preload スクリプトや使用する Electron API を改ざんできないようにするためです。 このオプションは、Chrome のコンテンツスクリプト のものと同じ技術を使用しています。 Console タブの一番上のコンボボックスの中にある 'Electron Isolated Context' という項目を選択することによって、開発者ツールでこのコンテキストにアクセスできます。 https://www.electronjs.org/ja/docs/latest/api/browser-window#new-browserwindowoptions

contextIsolation は有効にしている。省略しているためデフォルトの true となる。 https://github.com/thinreports/thinreports-section-editor/blob/2c72c9c0b6f3a516a606f9f0e5ed0c7bb9686f87/src/background.ts#L53-L59

[hidakatsuya]

一方、npm run electron:serve の場合 (NODE_ENV != "development")は fonts は Electron Isolated Context に含まれている。

[hidakatsuya]

開発版 (macOS) https://github.com/thinreports/thinreports-section-editor/releases/tag/v1.0.0-dev で確認したところ、アイコンが表示されていました。