mcpField
E
electron-egg

electron-egg

github.com/partme-ai開発71672 回インストール3 週間前に更新
リポジトリ

electron-egg について

electron-eggは、ElectronとEgg.jsを使ったデスクトップアプリ開発者向けのドキュメントスキルです。公式ドキュメントに沿って、セットアップやプロセス間通信、設定、パッケージ化の例、API資料、テンプレートを整理しています。

主な機能

  1. 01インストールとプロジェクト設定の案内
  2. 02メイン・レンダラープロセスの解説
  3. 03IPC通信とウィンドウ管理
  4. 04ビルドとパッケージ化の案内
  5. 05サンプル、API資料、テンプレート

活用シーン

  1. 01Electronデスクトップアプリの作成
  2. 02アプリ設定とプロセス間通信の実装
  3. 03アプリのビルド、パッケージ化、問題調査

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/partme-ai/full-stack-skills --skill electron-egg

インストール後、Claude Code で/electron-eggを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

LICENSE.txt
api/
config-api.md
ipc-api.md
main-api.md
renderer-api.md
window-api.md
examples/features/
ipc-communication.md
main-process.md
renderer-process.md
examples/guide/
build.md
configuration.md
installation.md
intro.md
project-structure.md
quick-start.md
templates/
configuration.md
installation.md
project-setup.md

詳細

このスキルを使用する場面

ユーザーが次のことを希望する場合は、このスキルを使用してください。

  • プロジェクトに Electron EGG をインストールしてセットアップする
  • Electron のデスクトップアプリケーションを作成する
  • Electron EGG のコア機能を使用する
  • Electron EGG を設定する
  • メインプロセスとレンダラープロセス間の通信を処理する
  • Electron EGG の API メソッドを使用する
  • Electron アプリケーションをビルドしてパッケージ化する
  • Electron EGG の問題をトラブルシューティングする

このスキルの使用方法

このスキルは、Electron EGG の公式ドキュメントの構成(https://www.kaka996.com/, https://www.kaka996.com/pages/987b1c/, https://www.kaka996.com/pages/a99b72/)に合わせて整理されています。Electron EGG を使用する際は、次の手順に従ってください。

  1. ユーザーのリクエストからトピックを特定します。

    • インストール/安装 → examples/guide/installation.md
    • クイックスタート/快速开始 → examples/guide/quick-start.md
    • 機能/功能特性 → examples/features/
    • API/API 文档 → api/
  2. examples/ ディレクトリから適切なサンプルファイルを読み込みます。

    ガイド(使用文档):

    • examples/guide/intro.md - Electron EGG の概要
    • examples/guide/installation.md - インストールガイド
    • examples/guide/quick-start.md - クイックスタートガイド
    • examples/guide/project-structure.md - プロジェクト構成
    • examples/guide/configuration.md - 設定
    • examples/guide/build.md - ビルドとパッケージ化

    機能(功能特性):

    • examples/features/main-process.md - メインプロセス
    • examples/features/renderer-process.md - レンダラープロセス
    • examples/features/ipc-communication.md - IPC 通信
    • examples/features/window-management.md - ウィンドウ管理
    • examples/features/menu.md - メニュー
    • examples/features/tray.md - システムトレイ
    • examples/features/auto-updater.md - 自動アップデーター
    • examples/features/plugin-system.md - プラグインシステム
  3. 構文、構成、ベストプラクティスについては、該当するサンプルファイルの具体的な指示に従います。

    重要な注意事項:

    • Electron EGG は Electron と Egg.js を基盤としています
    • メインプロセスとレンダラープロセスを分離します
    • プロセス間の IPC 通信を使用します
    • 各サンプルファイルには、重要な概念、コード例、要点が含まれています
  4. 必要に応じて、api/ ディレクトリの API ドキュメントを参照します。

    • api/main-api.md - メインプロセス API
    • api/renderer-api.md - レンダラープロセス API
    • api/ipc-api.md - IPC API
    • api/window-api.md - ウィンドウ API
    • api/config-api.md - 設定 API

    API ファイル:

    • api/main-api.md - Application クラス、BrowserWindow、ipcMain、app のメソッド
    • api/renderer-api.md - ipcRenderer、contextBridge、DOM API
    • api/ipc-api.md - IPC 通信のメソッドとイベント
    • api/window-api.md - ウィンドウの作成と管理
    • api/config-api.md - 設定オプションと環境変数
  5. templates/ ディレクトリのテンプレートを使用します。

    • templates/installation.md - インストール用テンプレート
    • templates/project-setup.md - プロジェクトセットアップ用テンプレート
    • templates/configuration.md - 設定用テンプレート
1. Electron EGG について

Electron EGG は Electron と Egg.js を基盤とするデスクトップアプリケーション開発フレームワークであり、包括的な開発ツールチェーンとベストプラクティスを提供します。

主な概念:

  • Electron:クロスプラットフォームのデスクトップアプリケーションフレームワーク
  • Egg.js:Node.js のエンタープライズアプリケーションフレームワーク
  • メインプロセス:アプリケーションのメインプロセス
  • レンダラープロセス:UI の描画プロセス
  • IPC:プロセス間通信
  • プラグインシステム:拡張可能なプラグインアーキテクチャ
2. インストール

npm を使用する場合:

npm install electron-egg

yarn を使用する場合:

yarn add electron-egg

pnpm を使用する場合:

pnpm add electron-egg
3. 基本的なセットアップ
// main.js
const { Application } = require('electron-egg')

const app = new Application({
  // Configuration
})

app.start()
ドキュメント対応表(公式ドキュメントとの一対一対応)

例とテンプレート

このスキルには、公式ドキュメントの構成に合わせて整理された詳細な例が含まれています。すべての例は examples/ ディレクトリにあります(上記の対応表を参照してください)。

例を使用するには:

  • ユーザーのリクエストからトピックを特定します
  • 上記の対応表から該当する例のファイルを読み込みます
  • そのファイルに記載された手順、構文、ベストプラクティスに従います
  • コード例を具体的なユースケースに合わせて調整します

テンプレートを使用するには:

  • よく使用するひな型については、templates/ ディレクトリ内のテンプレートを参照します
  • テンプレートを具体的なニーズやコーディングスタイルに合わせて調整します

API リファレンス

詳細な API ドキュメントは api/ ディレクトリにあり、公式の Electron EGG API ドキュメントの構成に合わせて整理されています(https://www.kaka996.com/pages/a99b72/):

メインプロセス API(api/main-api.md)
  • Application クラスとメソッド
  • BrowserWindow の作成と管理
  • ipcMain による IPC 処理
  • アプリケーションのライフサイクルフック
レンダラープロセス API(api/renderer-api.md)
  • ipcRenderer による IPC 通信
  • セキュアな API 公開のための contextBridge
  • レンダラーで利用可能な DOM API
  • イベント処理
IPC API(api/ipc-api.md)
  • IPC 通信メソッド(ipcMain、ipcRenderer)
  • メッセージの送受信
  • 非同期および同期の IPC
  • イベント処理とチャネル
ウィンドウ API(api/window-api.md)
  • BrowserWindow の作成とオプション
  • ウィンドウ管理メソッド
  • ウィンドウイベント
  • ウィンドウのライフサイクル
設定 API(api/config-api.md)
  • 設定ファイルの構造
  • アプリ情報の設定
  • ウィンドウ設定
  • プラグイン設定
  • 環境変数

API リファレンスを使用するには:

  1. 確認したい API を特定します
  2. api/ ディレクトリから対応する API ファイルを読み込みます
  3. API シグネチャ、パラメーター、戻り値の型、例を確認します
  4. 詳細な使用パターンについては、リンク先の例ファイルを参照します
  5. すべての API ファイルには、examples/ ディレクトリ内の関連する例ファイルへのリンクが含まれています

ベストプラクティス

  1. プロセスの分離:メインプロセスとレンダラープロセスのコードを分離します
  2. IPC の使用:プロセス間通信には IPC を使用します
  3. エラー処理:両方のプロセスでエラーを適切に処理します
  4. セキュリティ:Electron のセキュリティに関するベストプラクティスに従います
  5. パフォーマンス:アプリケーションのパフォーマンスを最適化します
  6. ビルド設定:ビルドとパッケージを適切に設定します
  7. プラグインシステム:拡張性のためにプラグインシステムを使用します

リソース

キーワード

Electron EGG, electron-egg, Electron, Egg.js, デスクトップアプリケーション, デスクトップアプリ, メインプロセス, レンダラープロセス, IPC, プロセス間通信, ウィンドウ管理, メニュー, システムトレイ, 自動更新, プラグインシステム, main process, renderer process, inter-process communication, window management, menu, system tray, auto updater, plugin system

コメント