web-demo-suit というマジモンのクソwebアプリを以前作ったことがあります。 今回は、それをデスクトップアプリにしたので、紹介していこうと思います。
この記事は クソアプリ Advent Calendar 2020 の4日めの記事になります。 ギリギリで申し訳ない。
web-demo-suit について
コロナが流行りかけて、皆がリモートになったりし始めた頃、修論が終わった暇だったぼくはTwitterを見ていました。 「Web会議なのにスーツを着ないといけない」「就活にて通話をするときにスーツを着るように言われた」みたいなツイートを見て、これや〜〜〜〜！！！と思い、ある web アプリを作ったのでした。 それが web-demo-suit です。
いや〜〜〜〜〜、よいクソ具合ですね。 まず、クソなのが位置合わせです。 なんかめっちゃガクガク動くし、腕の動きには対応していません。 あとこれはWebアプリです。 Webページにスーツ着てる自分が表示されて、一体どうしろと言うんだって話なんですよ。
何故かそこそこ流行って、ねとらぼやMoguLiveに取り上げられました。 意味がわからないよ。
デスクトップアプリにしよう
どうしてデスクトップアプリにする必要があるんですか（半ギレ）。 えっ誰かこのデスクトップアプリ使いますか？僕は使いませんが...。
と、デスクトップアプリにすることで発生するメリットは何も思いつきませんでしたが、デスクトップアプリにしてみることにしました。 クソアプリ Advent Calendar なので。
今回は Electron を採用することで、既存の実装を使い回せるようにしました。 なんとクソアプリがマルチプラットフォーム化してしまうわけです。
それでは、Webページとして動作していたものを Electron でデスクトップアプリにする、その手順を紹介していきましょう。
electron を使うには、諸々の設定やスクリプト、追加のパッケージの追加が必要です。
基本的には以下の内容で対応ができました。 その中でもポイントとなる部分を紹介していこうと思います。
スクリプトまず、起動用のスクリプトですが、以下のドキュメントを参考に作っていきます。
ここで、もともとのWebページを npm run dev のようなコマンドで開発を行っていた場合は、以下のようにすると正しく動作します。
const isDev = require("electron-is-dev");
...
mainWindow.loadURL(
isDev
? "http://localhost:1234" // これが開発用。ポート番号は適宜変える。
: `file://${path.join(__dirname, "../dist/index.html")}` //ここがビルド用
);
...
package.json も以下のようにすると開発しやすそうだったです。
{
...
"scripts": {
...
"dev": "parcel src/index.html",
"dev:electron": "concurrently \"npm run dev\" \"wait-on http://localhost:1234 && electron . \""
...
},
...
}
ビルド時には electron-builder を使うことが多いようです。 electron-builder のドキュメントを見ながら適宜設定を書いて行きます。
またその上で、package.json を以下のようにすると良いでしょう。
{
...
"scripts": {
...
"build": "parcel build src/index.html --public-url .",
"build:electron": "npm run build && electron-builder -mw",
...
},
...
}
ちなみに CI でビルドしたかったんですけど、署名とかがややこしくて本日中にやるのは諦めました。 気が向いたらやります。
完成！
起動おっそ.......！ これはクソアプリですね〜〜〜〜〜！ ダウンロードしないほうが良いと思いました！
一応これを使う場合は、 cam-twist というツールと組み合わせることで zoom 等の通話で利用できることが出来ます。 ただし、そのカメラ映像には「私服でカメラの前に座ったら上から画像重ねてスーツを着たような感じになるやつ」というバーが上に表示されるのでお気をつけください。 マジでデメリットしかねえな、デスクトップアプリ化。
ダウンロードはこちらから出来ます！
リポジトリはこちらになります。 もとがクソなので、気軽に貢献に参加できると思います。 PRお待ちしております。
さいごに
以上でした。 いかがでしたでしょうか？
読んでいただきありがとうございました。
次回は sadnessOjisan の記事です！ 楽しみだな〜〜〜〜〜！
