本文へスキップ

Electron 0.37の新機能

·読了時間：4分
zeke
zeke

Electron 0.37が最近リリースされ、Chrome 47からChrome 49へのメジャーアップデートと、いくつかの新しいコアAPIが含まれていました。この最新のリリースでは、Chrome 48とChrome 49で提供されたすべての新機能が導入されています。これには、CSSカスタムプロパティ、強化されたES6サポート、KeyboardEventの改善、Promiseの改善、そしてElectronアプリで利用できるようになった多くの新機能が含まれています。

新機能​

CSSカスタムプロパティ​

SassやLessなどのプリプロセッサ言語を使用してきたことがあるなら、おそらく変数に精通しているでしょう。変数を使用すると、配色やレイアウトなど、再利用可能な値を定義できます。変数は、スタイルシートをDRYでより保守しやすくするのに役立ちます。

CSSカスタムプロパティは、再利用可能であるという点でプリプロセスの変数に似ていますが、さらに強力で柔軟にする独自の特性も備えています。**JavaScriptで操作できる**ということです。この微妙ながらも強力な機能により、ビジュアルインターフェースを動的に変更しながら、CSSのハードウェアアクセラレーションと、フロントエンドコードとスタイルシート間のコード重複の削減の恩恵を受けることができます。

CSSカスタムプロパティの詳細については、MDNの記事とGoogle Chromeのデモを参照してください。

CSS変数の実際​

アプリでライブで調整できるシンプルな変数の例を見てみましょう。

:root {
  --awesome-color: #a5ecfa;
}

body {
  background-color: var(--awesome-color);
}

変数の値は、JavaScriptで直接取得および変更できます。

// Get the variable value ' #A5ECFA'
let color = window
  .getComputedStyle(document.body)
  .getPropertyValue('--awesome-color');

// Set the variable value to 'orange'
document.body.style.setProperty('--awesome-color', 'orange');

変数の値は、開発ツールの**スタイル**セクションからも編集して、迅速なフィードバックと調整を行うことができます。

CSS properties in Styles tab

KeyboardEvent.codeプロパティ​

Chrome 48では、KeyboardEventイベントで使用できる新しいcodeプロパティが追加されました。これは、オペレーティングシステムのキーボードレイアウトとは無関係に、押された物理キーを表します。

これにより、Electronアプリでカスタムキーボードショートカットを実装する際に、マシンや構成間でより正確で一貫性のあるものになります。

window.addEventListener('keydown', function (event) {
  console.log(`${event.code} was pressed.`);
});

この例で動作を確認できます。

Promise拒否イベント​

Chrome 49では、処理されない拒否されたPromiseを通知できる2つの新しいwindowイベントが追加されました。

window.addEventListener('unhandledrejection', function (event) {
  console.log('A rejected promise was unhandled', event.promise, event.reason);
});

window.addEventListener('rejectionhandled', function (event) {
  console.log('A rejected promise was handled', event.promise, event.reason);
});

この例で動作を確認できます。

V8のES2015アップデート​

現在のElectronのV8バージョンには、ES2015の91％が組み込まれています。すぐに使用できる興味深い追加機能をいくつか紹介します（フラグやプリコンパイラは不要です）。

デフォルトパラメータ​

function multiply(x, y = 1) {
  return x * y;
}

multiply(5); // 5

デストラクチャリング代入​

Chrome 49では、デストラクチャリング代入が追加され、変数と関数パラメータの代入がはるかに容易になりました。

これにより、Electronはよりクリーンでコンパクトな代入が可能になります。

ブラウザプロセス要件​
const { app, BrowserWindow, Menu } = require('electron');
レンダラプロセス要件​
const { dialog, Tray } = require('electron').remote;
その他の例​
// Destructuring an array and skipping the second element
const [first, , last] = findAll();

// Destructuring function parameters
function whois({ displayName: displayName, fullName: { firstName: name } }) {
  console.log(`${displayName} is ${name}`);
}

let user = {
  displayName: 'jdoe',
  fullName: {
    firstName: 'John',
    lastName: 'Doe',
  },
};
whois(user); // "jdoe is John"

// Destructuring an object
let { name, avatar } = getUser();

新しいElectron API​

新しいElectron APIのいくつかを以下に示します。Electronリリースのリリースノートで、各新しいAPIを確認できます。

BrowserWindowのshowおよびhideイベント​

これらのイベントは、ウィンドウが表示または非表示になったときに発生します。

const { BrowserWindow } = require('electron');

let window = new BrowserWindow({ width: 500, height: 500 });
window.on('show', function () {
  console.log('Window was shown');
});
window.on('hide', function () {
  console.log('Window was hidden');
});

OS Xのappに対するplatform-theme-changed​

システムのダークモードテーマが切り替えられた時に、このイベントが発行されます。

const { app } = require('electron');

app.on('platform-theme-changed', function () {
  console.log(`Platform theme changed. In dark mode? ${app.isDarkMode()}`);
});

OS X の app.isDarkMode()​

このメソッドは、システムがダークモードの場合にtrueを、それ以外の場合にfalseを返します。

OS X の BrowserWindow に対する scroll-touch-begin および scroll-touch-end イベント​

スクロールホイールイベントのフェーズが開始または終了したときに、これらのイベントが発行されます。

const { BrowserWindow } = require('electron');

let window = new BrowserWindow({ width: 500, height: 500 });
window.on('scroll-touch-begin', function () {
  console.log('Scroll touch started');
});
window.on('scroll-touch-end', function () {
  console.log('Scroll touch ended');
});