mcpField
E
electron-egg

electron-egg

github.com/full-stack-skills開発8188 回インストール5 週間前に更新
リポジトリ

electron-egg について

electron-egg は、Electron EGG でデスクトップアプリを開発する人向けのスキルです。公式ドキュメントに沿った構成で、セットアップ、API、例、テンプレート、設定、トラブルシューティングを扱います。

主な機能

  1. 01インストールとプロジェクト設定の案内
  2. 02メインプロセスとレンダラープロセスの解説
  3. 03IPC とウィンドウ管理の説明
  4. 04ビルド、パッケージ、設定のリファレンス
  5. 05API ドキュメント、例、テンプレート

活用シーン

  1. 01Electron EGG プロジェクトのセットアップ
  2. 02プロセス間通信の実装
  3. 03デスクトップアプリの設定とパッケージ化
  4. 04Electron EGG API の利用方法の確認

インストール

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

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

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

同梱ファイル

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

LICENSE.txt
agents/
openai.yaml
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 ee-core

yarn を使用する場合：

yarn add ee-core

pnpm を使用する場合：

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

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

コメント

Markdown 対応