概要

環境

• OS：Windows11
• 主な言語：Node.js
• フレームワーク：Electron
• コードエディタ：Visual Studio Code

ざっくりと、今回使用していく環境の中で重要な物を解説していきます。

不要な方は読み飛ばして下さい。

公式のドキュメントや他サイトなどを参考に、Node.jsをインストールします。

インストールが終了したら、「Windows(マークの)キー + Rキー」を押し、出てきた欄に「cmd」と入力して「OK」を押して下さい。


コマンドで「node -v」を入力をした後エンターを押し、画像のような「V **.**.* (*は数字)」の表示が出てきたらNode.jsのインストール完了です。

今回のプロジェクトフォルダを作成します。

フォルダを作成する場所はどこでも大丈夫です。

自分の場合は、「C: > Users > ユーザー名 > Documents > My Program」という形で配置しました。

「Visual Studio Code」で先ほどのプロジェクトフォルダを開きます。


「ctrl + shift + @」でターミナルを開き以下のコマンドを実行します。

  npm init -y

  npm install -D electron

      Desktop-GPT/
      ┠ node_modules/
      ┠ index.js  ←
      ┠ package-lock.json
      └ package.json

      // モジュールのインポート
    const { app, BrowserWindow } = require('electron');

    // メインウィンドウの変数
    let mainWindow = null;

    // ウィンドウを作成する関数を定義
    function createWindow () {
      // メインウインドウを作成
      mainWindow = new BrowserWindow({
        width: 1000,
        height: 1000,
        webPreferences: {
          nodeIntegration: false,
        },
      });

      // パスを指定
      let mainPath = 'https://chat.openai.com';
      mainWindow.loadURL(mainPath);

      // ウィンドウが閉じられた時にmainWindowにnullを設定する
      mainWindow.on('closed', () => {
        mainWindow = null;
      });
    }

    // アプリケーションが起動した時に呼び出されるイベントリスナー
    app.on('ready',() => {
      // メインウィンドウの作成
      createWindow();
    });

    // パスを指定 (ローカルのHTMLファイルへの指定に変える場合)
    // let mainPath = 'https://chat.openai.com';
    let mainPath = ‘file://’, + __dirname + ‘/index.html’;
    mainWindow.loadURL(mainPath);

      npx electron index.js 

内容が多いので、ひとまずはパート1として「初期設定 ～ デスクトップアプリとしての起動」までを行いました。

このままでは単純にページが表示されているだけなので、時点以降では簡単に表示・非表示ができるようにしたり、パッケージングをしてexeファイルを作ったりしていきたいと思います。