【React】Electronでピンチイン・アウトを有効にする方法

electronでピンチイン・アウトをするのに少々手こずったのでメモ。

コードとしてはこれを入れるだけ。

webFrame.setVisualZoomLevelLimits(1, 3);

方法は色々あるのかもしれませんが、これをpreload.jsに書けばいい。

というわけなのですが、これを入れてもピンチイン・アウトが有効にならない。

色々端折ってますが、こんな感じのコードを書いてた。

const { webFrame } = require("electron");

webFrame.setVisualZoomLevelLimits(1, 3);

これではダメっぽい。

いろいろ試行錯誤すること数時間。。
やっと原因が分かった。

どうやら、何かしらの関数内に入れてやらないと有効にならないっぽい。

というわけで、こんな感じにするよ良い。

const { contextBridge, webFrame } = require("electron");

contextBridge.exposeInMainWorld("myAPI", {
  pinch: () => {
    webFrame.setVisualZoomLevelLimits(1, 3);
  },
});

で、こんな感じで呼び出してあげると有効になる。

export default function App() {
  window.myAPI.pinch();

  return (
     ...
  );
}

これで無事解決。

しかしここにたどり着くまでが難しかった。

他サイトだと、「標準でピンチが効いてるので無効にする」というのは書いてあったんだけど、今のプロジェクトではだれも標準では有効になってなかった。

Electronのバージョンアップで仕様が変わったのかもしれないが、なかなか文献も少なくて苦労した。。。

Follow me!

@takuya_osushi