# Electronでデスクトップマスコットを開発

## デスクトップマスコットとは？

デスクトップ上に常住するキャラクター。
犬、猫といった動物系、人型キャラクターなど多種多様にある。

https://forest.watch.impress.co.jp/docs/serial/yajiuma/1404090.html

## 環境構築

#### yarnをインストール
https://qiita.com/suisui654/items/1b89446e03991c7c2c3d

#### electronのセットアップ

yarn create next-app --example with-electron-typescript desktop-mascot
cd desktop-mascot
# test
yarn dev

yarn devでウィンドウが表示されれば成功


#### .gitignoreの設定
以下を追加

main
dist
renderer/.next
renderer/out

## 使用技術

#### electron
> Electronとは、GitHubが開発したオープンソースのフレームワークです。macOS、Windows、Linuxといったクロスプラットフォームに対応したデスクトップアプリを開発することができます。

> ChromiumとNode.jsを使用しているため、HTML、CSS、JavaScriptなどのWeb技術を駆使してデスクトップアプリをつくれるのが大きな特徴のひとつです。

> エンジニアにはお馴染みのVSCodeやSlackをはじめ、FigmaやTwich、Microsoft TeamsなどのデスクトップアプリにもElectronが採用されています。

https://zenn.dev/unsoluble_sugar/articles/c5b5faefddd35c1be8a3

#### Next.js
> Next.jsとは、Reactをベースに開発された、フロントエンドフレームワークです。ReactはJavaScript言語を用いた、Webサイト上のUIを構築するためのライブラリで、フレームワークとは、開発を効率化するための枠組みです。

https://udemy.benesse.co.jp/development/app/what-is-next-js.html

#### TypeScript

> マイクロソフトが開発したオープンソース言語で、一言で言うと、「型定義できるJavaScript」。

https://qiita.com/EBIHARA_kenji/items/4de2a1ee6e2a541246f6

## 今回の目標

- デスクトップマスコットのさわりの部分だけ試す。
- ウィンドウの透過
- キャラクターの表示
- キャラクターを動かす

## ディレクトリ構造

- /electron-src (electronのコード)
- /main.ts (起動時に初めに読みこまれる)
- /renderer (Next.jsのコード)
- /pages (Nextのページ。URLとファイルが１対１で対応)
- /components (Reactのコンポーネント)
- /public (画像ファイルなどを保存)
- /package.json (nodeの設定ファイル)

## 始めに

1. /renderer/pagesと/renderer/componentsをディレクトリごと削除しよう！
2. pagesとcomponentsディレクトリを作成。
3. pages/index.tsxファイルを作る
4. 次のコードをコピペ

const IndexPage = () => {
  return <h1>Hello, World</h1>;
};

export default IndexPage;

5. yarn devで表示


## キャラクター画像を表示しよう

1. /renderer/public/img フォルダを作る
2. 表示したいキャラクター画像をダウンロードして、imgフォルダに置く (ファイル名はcat.png)
3. pages/index.tsxに以下のコードをコピペ

import Image from "next/image";

const IndexPage = () => {
  return (
    <div>
      <div style={{ position: "relative", width: "100px", height: "100px" }}>
        <Image src="/img/cat.png" layout="fill" />
      </div>
    </div>
  );
};

export default IndexPage;

4. yarn dev


## 背景を透過しよう

1. 背景を透過

/electron-src/index.tsの以下の部分を修正
14行目当たり
frame: false,
transparent: true,
を追加

  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false,
    transparent: true,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: false,
      preload: join(__dirname, "preload.js"),
    },
  });

2. マウスクリックの透過 and 常に最前面表示
3. ウィンドウ画面を最大サイズに調整

/electron-src/index.tsの以下の部分を修正
mainWindowの定義の下の行あたりに追加

mainWindow.setIgnoreMouseEvents(true);
mainWindow.setAlwaysOnTop(true);
mainWindow.setFullScreen(true);


## キャラクターを動かす

TODO:
javascriptを使わず、css animationで動かしてみる

pages/index.tsxを更新

import Image from "next/image";
import Animation from "./index.module.css";

const IndexPage = () => {
  return (
    <div style={{ width: "90vw", height: "90vh" }}>
      <div
        className={Animation.animation}
        style={{ position: "absolute", width: "100px", height: "100px" }}
      >
        <Image src="/img/cat.png" width={100} layout="fill" />
      </div>
    </div>
  );
};

export default IndexPage;

style/style.cssを作成

.animation {
    animation-name: diagonal-move-anim;
    animation-duration: 10s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
}

@keyframes rotation {
    0% {
      transform: scale(.3);
    }
  
    50% {
        margin-left: 50vw;
        transform: scale(.6) rotate(-45deg);
        background: red;
    }
  
    100% {
        margin-left: 100vw;
        transform: scale(1) rotate(180deg);
        background: blue;
    }
  }

  @keyframes diagonal-move-anim {

	0% {
		transform: translate(0, 0);
	}

    25% {
        transform: translate(90vw, 0);
    }

	50% {
		transform: translate(90vw, 80vh);
	}

    75% {
		transform: translate(0, 80vh);
	}

    100% {
        transform: translate(0, 0);
    }

}

[CSSアニメーション 入門](https://qiita.com/soarflat/items/4a302e0cafa21477707f#animation)

[【CSS】animation・keyframesを徹底解説](https://webdesignday.jp/inspiration/technique/css/5167/)

transform css MDN
https://developer.mozilla.org/en-US/docs/Web/CSS/transform

## この方法で開発したデスクトップマスコット

https://github.com/Al-Mikan/contore