Electron 上級トピック

Electron はクロスプラットフォームのデスクトップアプリを構築できるだけでなく、システムへの深い統合や高度な機能拡張もサポートしています。これらの上級テクニックを習得することで、アプリをより専門的で強力なものにできます。

Native Node モジュールの統合

node-gyp の使用

  • node-gypNode.js ネイティブモジュールのコンパイルツールであり、C/C++ モジュールのコンパイルをサポートします。

  • インストール：

    npm install -g node-gyp
  • プロジェクトの初期化：
    node-gyp configure
node-gyp build
  • 出力.nodeファイルは、Electron で直接読み込むことができます：
    const native = require('./build/Release/native.node')

ネイティブモジュールのコンパイル

  • ネイティブモジュールは、Electron の Node バージョンと ABI に合わせてコンパイルする必要があります。
  • 使用electron-rebuildツール：
    npm install --save-dev electron-rebuild
npx electron-rebuild
  • モジュールが現在の Electron バージョンと互換性があることを確認します。

よくある問題の解決

  • ABI の非互換：Electron は異なる Node バージョンを使用するため、再コンパイルが必要ですelectron-rebuild
  • コンパイル失敗：C++ コンパイル環境を確認してください（Windows では Visual Studio Build Tools、macOS では Xcode Command Line Tools のインストールが必要です）
  • パスの問題：モジュールのパスが正しいことを確認し、絶対パスで読み込みます.nodeファイル

システムとの深い統合

システムテーマの検出

  • ダーク/ライトテーマを検出：
    const { nativeTheme } = require('electron')
console.log(nativeTheme.shouldUseDarkColors)
nativeTheme.on('updated', () => {
  console.log('主题更新:', nativeTheme.shouldUseDarkColors)
})
  • システムのスリープを防止：
    const { powerSaveBlocker } = require('electron')
const id = powerSaveBlocker.start('prevent-display-sleep')
powerSaveBlocker.stop(id)
  • 電源状態を検出：
    const { systemPreferences } = require('electron')
console.log(systemPreferences.getSystemIdleTime())

スクリーン管理

  • スクリーン情報を取得：
    const { screen } = require('electron')
const primaryDisplay = screen.getPrimaryDisplay()
console.log(primaryDisplay.size)
  • マルチスクリーン対応、解像度検出、ウィンドウの自動適応

システムアイドル状態の検出

  • を通じてsystemPreferences.getSystemIdleTime()ユーザーのアイドル時間を取得
  • 自動ロック、省エネ、リマインダー機能などに使用できます

多言語サポート

i18n 実装方法

よく使われるライブラリ：

  • i18next：JSON / YAML 言語パックをサポートし、動的切り替えが可能
  • vue-i18n / react-i18next：フロントエンドフレームワークとの統合

ファイル構造：

locales/
  en.json
  zh.json

言語切り替え：

const i18next = require('i18next')
i18next.init({
  lng: 'en',
  resources: {
    en: { translation: require('./locales/en.json') },
    zh: { translation: require('./locales/zh.json') }
  }
})
console.log(i18next.t('hello')) // 输出 hello

動的に変更できlng、リアルタイムで言語を切り替えることができます。

言語パックの動的読み込み

  • 大規模プロジェクトでは、言語パックを必要に応じて読み込むことができます：
    async function setLanguage(lang) {
  const resources = await import(`./locales/${lang}.json`)
  i18next.addResources(lang, 'translation', resources.default)
  i18next.changeLanguage(lang)
}
  • パッケージのサイズを最適化し、起動時の読み込み時間を短縮します

カスタムプロトコル

Electron はカスタムプロトコルの登録をサポートしており、アプリは特定の URL スキームを通じて内部機能を呼び出したり、ディープリンク（Deep Linking）を実装したりできます。

カスタムプロトコルの登録

  • 使用protocolモジュールでカスタムプロトコルを登録
  • アプリ内部のリソースの読み込みや、特定の URL への応答に使用できます
const { app, protocol } = require('electron')

app.whenReady().then(() => {
  protocol.registerFileProtocol('myapp', (request, callback) => {
    const url = request.url.substr(7) // 去掉 'myapp://'
    callback({ path: `${__dirname}/${url}` })
  })
})

説明：

  • 'myapp'：カスタムプロトコル名
  • request.url：渡される完全な URL
  • callback({ path })：ローカルファイルのパスを指し、HTML や画像などの読み込みに使用できます

ディープリンク（Deep Linking）

  • ディープリンクを使用すると、ユーザーは URL を通じてアプリの特定のページや機能を直接開くことができます
  • システムプロトコルの登録：
    if (!app.isDefaultProtocolClient('myapp')) {
  app.setAsDefaultProtocolClient('myapp')
}
  • macOS / Windows では、クリックするとmyapp://note/123アプリのイベントをトリガーできます
  • ディープリンクの処理：
    app.on('open-url', (event, url) => {
  event.preventDefault()
  console.log('接收到深度链接:', url)
  // 可解析 URL 跳转到应用内部页面
})
  • Windows のイベント処理：
    app.on('second-instance', (event, argv) => {
  const url = argv.find(arg => arg.startsWith('myapp://'))
  if (url) {
    console.log('接收到深度链接:', url)
  }
})

プロトコル処理

  • セキュリティ：

    • URL の内容を検証し、未承認の操作の実行を防止します
    • 悪意のあるファイルの読み込みや任意のコマンドの実行を避けます

  • アプリケーションシナリオ：

    • 特定のノート、ドキュメント、またはページを開く
    • Web ページと連携し、ローカル機能を呼び出す
    • アプリ間またはプラットフォーム間の通信

  • 注意事項：

    • macOS では Info.plist での設定が必要ですCFBundleURLTypes
    • Windows ではレジストリにプロトコルを登録する必要があります
    • プロトコル処理ロジックはメインプロセスに置くことをお勧めします。レンダラープロセスはイベントを受け取るだけにしてください
その他の拡張