Electronを使ったデスクトップアプリの作成

こんにちは。

最近？FPSゲームのApexLegendsにハマっていて、

業務終了後や空き時間にチョコチョコやっているのですが、

とても楽しいですね。

しかしこのゲーム・・・

まじで難しい

キャラの移動速度がとても速いので、

近距離戦でキャラの動きにあわせてエイムするのがめちゃくちゃ難易度が高いんですよね

近距離戦だとスコープを覗かずに腰撃ちで戦うので、

自分の照準が敵に合っているのかどうもわかりにくい・・・

そこで閃いたのが

「画面の真ん中にレティクルを表示させるアプリ作ったらいいんじゃね！？」

腰撃ち中でもレティクルが表示されれば、狙いやすさは上がるはず・・・

思い立ってから即行動ということで、いざ開発に入りました。

前置きが長くなりましたが、これから開発した手法を説明していきます。

---

環境

OS：Widows10

使用ライブラリ：Electron

「Electronとはなにか」軽く説明をすると、HTML/CSS/JSの技術でデスクトップアプリが作れるアツいライブラリです。（代表的なデスクトップアプリでは、AtomやSlack等がElectronで作成されています）

私みたいなバックエンド苦手なWeb開発者にとっては、これほど嬉しいツールはないので、早速使って見ることにしました。

---

出来上がったモノ

こんな感じで、画面の中央に薄緑色のドットが表示されるようになりました

これはElectronで作成したデスクトップアプリを、windowフレームを非表示にし、常に最前面に固定させ、かつ、クリックしてもそのアプリに判定がいかないように調整したものになります。

（細かいコードは今度書きます）

「いい感じにうまくできた！！！」

と喜んだのですが、実はこれApexを仮想フルスクリーンで動かしており、

フルスクリーン表示にすると作成したElectronアプリの「最前面に固定する」というオプションがApexに負けてしまうのですね・・・

他のフルスクリーンアプリよりも優先度高めで最前面に固定する方法を調べたのですが、MacOSだとElectronが用意しているAPIで実現出来るという記事を見つけたものの、Windowsでは効果がなく、夢半ばで終わってしまったのでした・・・。

リファレンスを読んで、1日調べてもあらゆるアプリよりも最前面に表示させるような絶対的指定をする方法が見当たらなかったので、一旦断念することにしました（笑）

また今度開発手段を変えて挑戦してみようと思います