はじめに

こんにちは！今回は、Electronを使ってクリックするたびに名言が変わるおしゃれなデスクトップアプリを作成します。このアプリは初心者でも簡単に作れるので、初めてのデスクトップアプリ開発にぴったりです。ぜひ一緒にチャレンジしてみましょう！

Electronとは？

Electronは、JavaScript、HTML、CSSを使用してクロスプラットフォームのデスクトップアプリケーションを作成できるフレームワークです。GitHubによって開発され、Visual Studio CodeやSlackなどの有名なアプリケーションにも使われています。

事前準備

まずは、Electronを使うために必要な環境を整えましょう。

1. Node.jsのインストール

Electronを動かすためにはNode.jsが必要です。以下の公式サイトからNode.jsをダウンロードしてインストールしてください。

Node.js公式サイト

2. Electronのインストール

Node.jsのインストールが完了したら、次にElectronをインストールします。コマンドプロンプトまたはターミナルを開き、以下のコマンドを実行します。

npm install --save-dev electron

これでElectronのインストールは完了です。

アプリケーションの作成

次に、アプリケーションのファイルを作成し、コードを書いていきましょう。

1. プロジェクトのセットアップ

新しいフォルダを作成し、ターミナルでそのフォルダに移動します。

mkdir my-quote-app
cd my-quote-app

次に、npm initコマンドを使用して、プロジェクトを初期化します。

npm init -y

2. 必要なファイルを作成

以下の3つのファイルを作成します：

main.js：アプリのメインプロセスを管理するファイル
index.html：ユーザーインターフェースを作成するHTMLファイル
renderer.js：ユーザーインターフェースの動作を制御するJavaScriptファイル
styles.css：スタイリングのためのCSSファイル

`main.js`

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'renderer.js')
    }
  });

  win.loadFile('index.html');
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

`index.html`

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Quote App</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="quote-container">
    <div id="quote">クリックして名言を表示</div>
  </div>
  <script src="renderer.js"></script>
</body>
</html>

`renderer.js`

const quotes = [
  "成功する人は失敗するまでやめない。- 田中角栄",
  "失敗は成功の母である。- スピノザ",
  "努力は夢中に勝てない。- スティーブ・ジョブズ",
  "夢を追いかける勇気を持ちなさい。- ウォルト・ディズニー",
  "どんなに暗い夜でも必ず明ける。- 西郷隆盛",
  "行動することでのみ、希望は現実になる。- アインシュタイン",
  "学びて思わざればすなわち罔し、思いて学ばざればすなわち殆し。- 孔子",
  "昨日の自分に勝つ。- 本田圭佑",
  "運命を切り開くのは自分自身だ。- ナポレオン",
  "変化を恐れるな、それは常にチャンスだ。- アンドリュー・カーネギー",
  "幸福は作るものであって、得るものではない。- デイル・カーネギー"
];

document.getElementById('quote').addEventListener('click', () => {
  const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
  document.getElementById('quote').innerText = randomQuote;
});

`styles.css`

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  font-family: 'Arial', sans-serif;
  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
  transition: background-color 0.5s ease;
}

#quote-container {
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 15px;
  padding: 30px;
  max-width: 600px;
  text-align: center;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
}

#quote-container:hover {
  transform: scale(1.05);
}

#quote {
  color: #ffffff;
  font-size: 24px;
  line-height: 1.5;
  cursor: pointer;
  user-select: none;
}

3. アプリケーションの起動

全てのファイルを保存したら、ターミナルで次のコマンドを実行してアプリを起動します。

npm start

画面表示

これで、クリックするたびに背景が変わり、名言がランダムに表示されるスタイリッシュなデスクトップアプリが完成です！

おわりに

Electronを使えば、JavaScriptとHTML、CSSだけでこのようなデスクトップアプリを簡単に作成することができます。さらに機能を追加して、より複雑なアプリケーションを作ってみてください！

ご質問やフィードバックがあれば、コメント欄でお知らせください。