Electronテンプレート with 公式サイト

概要

Electronアプリケーションの開発を効率化するテンプレートです。自動アップデート機能と設定画面を共通化し、Next.js（SSG）で作成した公式サイトもセットで提供します。

解決する課題

• Electronアプリ開発時の初期設定の煩雑さ
• 自動アップデート機能の実装の複雑さ
• 設定画面のUI/UXの統一性の欠如
• アプリとWebサイトの一貫性のないブランディング
• アプリのプロモーション用サイトの別途開発の手間

主要機能

Electronアプリテンプレート

• 自動アップデート機能: electron-updaterを使用した自動更新システム
• 統一された設定画面: 再利用可能な設定画面コンポーネント
• ダークモード対応: システム設定に連動したテーマ切り替え
• ローカルストレージ管理: 設定値の永続化
• エラーハンドリング: 統一されたエラー処理とレポート機能
• ビルド設定: macOS、Windows、Linux向けのビルド設定済み

Next.js（SSG）公式サイト

• ランディングページ: アプリの紹介とダウンロードリンク
• 機能紹介ページ: スクリーンショットと詳細説明
• ダウンロードページ: OS別のダウンロードリンク
• 更新履歴ページ: バージョン履歴とリリースノート
• SEO最適化: メタタグとOG画像の自動生成

技術スタック

Electronアプリ

• Electron
• React
• TypeScript
• Vite
• electron-builder
• electron-updater

公式サイト

• Next.js（SSG）
• TypeScript
• Tailwind CSS

プロジェクト構造

electron-template/
├── app/                    # Electronアプリケーション
│   ├── src/
│   │   ├── main/          # メインプロセス
│   │   ├── renderer/      # レンダラープロセス
│   │   └── preload/       # プリロードスクリプト
│   └── package.json
├── site/                   # Next.js公式サイト
│   ├── pages/
│   ├── components/
│   └── package.json
└── package.json           # ルートパッケージ

想定ユーザー

• Electronアプリを開発したい個人開発者
• プロトタイプを素早く作りたいスタートアップ
• 統一されたUI/UXを持つデスクトップアプリを作りたい企業
• アプリとWebサイトを同時に開発したいチーム

開発ロードマップ

1. フェーズ1: 基本的なElectronテンプレートの作成
2. フェーズ2: 自動アップデート機能の実装
3. フェーズ3: 設定画面の共通化とテーマ機能
4. フェーズ4: Next.js公式サイトの開発
5. フェーズ5: ドキュメントとサンプルアプリの作成

参考情報

• Electron公式ドキュメント
• electron-builder
• Next.js Static Site Generation