Electronで美少女キャラをPC常駐（お座りマスコットウィジェットの歴史）

2025年（社会人21年）

2025.08.23

2000年代中盤に

ウィジェット（パソコン画面に表示する小さなアプリ）

が大流行した。

2000年初期は「時計」「カレンダー」「天気予報」などの小型アプリが日本でも注目を集めた。

主に「デスクトップをカスタマイズする」文化の一部として広がり、特に若いユーザーやテクノロジー愛好者の間で一部流行。

その後 2006年9月4日にYahoo! JAPANが「Yahoo!ウィジェット」の提供を開始。

Yahoo! JAPANのデータベースと連携し、メールチェック、カレンダー管理、地図検索などが可能なウィジェットが提供された。

これによりウィジェットが大流行

もはや「お前パソコンの目的はｗｗ」と質問したくなるレベルの奴もいたわ。

2012年12月12日に「Yahoo!ウィジェット」がサービスを終了し、ウィジットも殆ど見かけなくなった。

常駐ウェジットを Node.jsとElectron で実現
1. Electronのインストールからアプリの実行まで
おわりに

そんな中、時期を同じくして実用性よりも装飾性や娯楽性を重視した

お座りマスコット

なるアプリが一部のマニアの間で流行していた。

例）ActX：Windows95/98用ゲーム『ONE ～輝く季節へ～』の長森瑞佳がオリジナルマスコット。

ActX : Introduction

To Heartのキャラの「お座りマルチ」ってのものあった。

To Heartなソフト

ただ……、当時は「オタク」文化が根付いてない時代。

「知的でクールだな……」と尊敬していた研究室や会社の先輩が、時々 PCでこれらのマスコットを飼ってる事があり……

ドン引きしたよ、ドン引き……

プライベートでやれよ……社内や研究室でやる事はないだろ。免疫ない女性もいるんだよ……

多くの人が使ってたのは「伺かうかがか（2000年5月25日初公開：別称：偽春菜・任意・何か）」らしい。Windows11でも動作した。

Disc-2 伺かとは？

当時、

このアプリって何ですか？

何か・・・・

・・・・。

コミュ障のクソがぁ！！

と思ったことがあるけど、アプリ名だったんだね……申し訳なかった。

因みに今は 2025年1月8日にインフィニットループが公開した「Desktop Mate」というアプリが人気……と教えてもらった。

【やじうまミニレビュー】かわいいだけじゃない。人気のデスクトップマスコット「Desktop Mate」とは

　2025年1月8日にインフィニットループが公開した「Desktop Mate」が人気だ。公開から2日経過した1月10日時点で30万ダウンロードを達成したという。

常駐ウェジットを Node.jsとElectron で実現

冒頭が長すぎたので本題はサクッと。今回は「美少女ウィジット」を作ってみよう。

利用する技術はマルチプラットフォーム対応の「Electron」。

Electronは、Node.jsとChromiumを組み合わせて、デスクトップアプリケーションを構築するためのフレームワーク。

技術	主な使用言語	プラットフォーム	UIのモダンさ
Electron	JavaScript (Node.js)	Windows, macOS, Linux	高い（最新Web技術対応）
HTA	HTML/CSS/JavaScript, VBScript	Windowsのみ	制限あり（IEベース、HTML5一部対応）
PowerShell	PowerShell	Windowsのみ（CoreはクロスだがGUI制限）	中程度（Windows Forms/WPFはモダンさに欠ける）
WinForms	C#	Windowsのみ	中程度（クラシックなUI）
WPF	C#, XAML	Windowsのみ	高い（モダンUI、XAMLでカスタマイズ可）
Qt	C++, Python (PyQt/PySide)	Windows, macOS, Linux, モバイル	高い（モダンUI、カスタマイズ性強い）
JavaFX	Java, FXML	Windows, macOS, Linux	高い（モダンUI、CSSカスタマイズ可）

で、前回Vroid Studioで作成した美少女キャラを利用。

VRoid StudioとAutohotKeyで撮影した背景透過画像からGIFアニメ作成

xAIは、AIアシスタント「Grok」において、3Dキャラクターと対話できる「コンパニオンモード」の提供を2025年7月15日に開始。iOSしか提供されておらずマレーシア出張中でニュースだけ把握。好感度アップ...

Electronのインストールからアプリの実行まで

まずはソースコードをAIで作成する。この際、WEBP/GIFアニメーションのアセットも準備。

main.js: Electronのメインプロセスを管理。ウィンドウの作成やアプリのライフサイクルを制御。
index.html: レンダラープロセスで表示されるUIのHTMLテンプレート。
renderer.js: レンダラープロセスで実行されるJavaScript。UIの動的動作やイベント処理を担当

次にNode.jsをインストール。一般的な方法なので、こちらを参照を。

Node.js・npmのインストール方法 - Qiita

なんとなく使っていたnode.jsとnpmについての今日、基礎を教わる機会があったのでメモ代わりに書いておく。 Node.jsのインストール Node.jsとはサーバサイド側で動くJavaScriptのこと。インストール方法は、まずはnodeのwebページに行く。 no...

１）デフォルトのpackage.json、package-lock.jsonを生成

npm init -y

1	npm init -y

package.jsonは、プロジェクトのメタデータ、依存関係、スクリプトを定義する。

２）Electronのインストール

npm install electron --save-dev

1	npm install electron --save-dev

これで、次のものがインストールされる。

Electronフレームワーク本体
関連する依存パッケージ
Chromiumブラウザエンジン
Node.js実行環境
その他必要なライブラリ

３）package.jsonの編集

package.jsonファイルを開いて、scriptsセクションを次のように編集。

```json
"scripts": {
  "start": "electron .",
  "test": "echo \"Error: no test specified\" && exit 1"
}
```

```json

"scripts": {

"start": "electron .",

"test": "echo \"Error: no test specified\" && exit 1"

}

```

４）アプリの実行

npm start

npm start

実行すると、こんな感じ。

今の時代はAIがあるので、ウィジットにお喋りさせてもイイね。

おわりに

LLMの実装のおかげで実装時間が大幅に減り、アイデアをどんどん実現できるようになった。

これも「やりたかった100」の1つだけど、残りの99つは覚えてない。

この美少女ウィジット作成目的は恒例の社内ハッカソンの素材のためであり、個人的趣味ではない。

ほぼ毎年参加する羽目になっているハッカソン。

こんなツマラナイものを作って満足して過ごしてる間に、周囲の人は資格取得したり旅行行ったり、交流深めたりして過ごしてる。