メインコンテンツへ飛ぶ

"Release" タグの記事が 1 件の投稿 件あります

新しい Electron リリースについてのブログ記事

全てのタグを表示

Electron 0.37 の新機能

· 読むのにかかる時間 1 分

Electron 0.37 が先日 リリースされました。Chrome 47 から Chrome 49 へのメジャーアップグレードと、いくつかの新しいコア API が入っています。 この最新リリースでは、Chrome 48Chrome 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 で取得や変更ができます。

// 変数の値 '#A5ECFA' を取得
let color = window
.getComputedStyle(document.body)
.getPropertyValue('--awesome-color');

// 変数の値を 'orange' に設定
document.body.style.setProperty('--awesome-color', 'orange');

変数の値は、デベロッパー ツールの Styles セクションからも編集でき、素早いフィードバックと微調整ができます。

Styles タブの CSS プロパティ

KeyboardEvent.code プロパティ

Chrome 48 では、新しい code プロパティが KeyboardEvent イベントで利用できるようになりました。これは、オペレーティングシステムのキーボードレイアウトとは独立した、押された物理キーです。

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

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

こちらのサンプル で実際にどうなるのか確認できます。

Promise 拒否イベント

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

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 の require はより簡潔でコンパクトな代入になりました。

ブラウザプロセスの Require
const { app, BrowserWindow, Menu } = require('electron');
レンダラープロセスの Require
const { dialog, Tray } = require('electron').remote;
その他の例
// 配列を分割して 2 つ目の要素を飛ばす
const [first, , last] = findAll();

// 関数の仮引数の分割
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"

// オブジェクトの分割代入
let { name, avatar } = getUser();

新しい Electron API

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

BrowserWindowshow イベントと 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 向けに appplatform-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');
});

Electron 1.0 における API の変更点

· 読むのにかかる時間 1 分

Electron が始まって以来、以前の Atom-Shell と呼ばれていた頃から、Chromium のコンテンツモジュールとネイティブ GUI コンポーネント向けに、クロスプラットフォームの JavaScript API を提供する実験を行ってきました。 この API の始まりは非常に原始的で、時間をかけて初期設計を改善するためにいくつかの変更を加えてきました。


Electron は 1.0 リリースに向けて準備を進めていますが、この機会を利用して、最後の問題となっていた API の詳細を記述したいと考えています。 以下で述べる変更点は 0.35.x のものです。古い API の利用に対する非推奨の警告を発するので、将来の 1.0 リリースに備えてアップデートしてもよいでしょう。 Electron 1.0 は数ヶ月先になりますので、これらの変更が破壊的になるまでの猶予があります。

非推奨の警告

デフォルトでは、非推奨 API を使用している場合に警告が表示されます。 これを無効にするには、process.noDeprecationtrue にします。 非推奨の API 利用のソースをトラッキングするには、警告を表示する代わりに例外を投げるように process.throwDeprecationtrue に設定したり、非推奨のトレースを表示するように process.traceDeprecationtrue に設定したりすることができます。

組み込みモジュールの新しい利用方法

組み込みモジュールは、独立したモジュールに分離されるのではなく 1 つのモジュールにまとめられるようになったので、他のモジュールと競合することなく 使用できます。

var app = require('electron').app;
var BrowserWindow = require('electron').BrowserWindow;

従来の require('app') の方法は後方互換性のためにまだサポートされますが、以下のようにして無効化もできます。

require('electron').hideInternalModules();
require('app'); // エラーを送出します。

remote モジュールの利用がより簡単に

組み込みモジュールの使い方が変わったので、レンダラープロセスでメインプロセス側のモジュールを使いやすくしました。 以下のように、remote の属性にアクセスするだけで利用できるようになります。

// 新しい方法です。
var app = require('electron').remote.app;
var BrowserWindow = require('electron').remote.BrowserWindow;

以下のような長い require チェーンはもう不要です。

// 古い方法です。
var app = require('electron').remote.require('app');
var BrowserWindow = require('electron').remote.require('BrowserWindow');

ipc モジュールの分割

ipc モジュールはメインプロセスとレンダラープロセスの両方に存在し、それぞれの側での API が異なっていたため、新規ユーザーは非常に混乱していました。 混乱を避けるため、メインプロセスの ipcMain とレンダラープロセスの ipcRenderer にモジュール名を変更しました。

// メインプロセス
var ipcMain = require('electron').ipcMain;
// レンダラープロセス
var ipcRenderer = require('electron').ipcRenderer;

また、ipcRenderer モジュールでメッセージを受け取る際に event オブジェクトが追加されました。これは ipcMain モジュールでメッセージがどのように処理されるかを併せています。

ipcRenderer.on('message', function (event) {
console.log(event);
});

BrowserWindow オプションの標準化

BrowserWindow のオプションは、他 API のオプションとスタイルが異なっていたり、名前に - が入っていたりしていたため、JavaScript では少し扱いづらかったようです。 これらは、従来の JavaScript の名前に標準化されました。

new BrowserWindow({ minWidth: 800, minHeight: 600 });

DOM の API 名の規約に準拠

Electron の API 名は、以前は URLではなく Url のように、すべての API 名で camelCase を使用していましたが、DOM には独自の規約があり、ID ではなく Id を使いつつも、Url ではなく URL を使用しています。 DOM のスタイルに合わせて、以下の API の名称変更を行いました。

  • UrlURL に名称変更しました。
  • CspCSP に名称変更しました。

これらの変更によって、アプリで Electron v0.35.0 を使用していると非推奨の通知が多く出てくると思われます。 これは簡単な方法で修正できます。すべての Url の記述を URL に置換するだけです。

Tray のイベント名の変更

Tray のイベント名のスタイルが他のモジュールと少し異なっていたため、他のモジュールと一致するように名前を変更しました。

  • clickedclick に名称変更しました。
  • double-clickeddouble-click に名称変更しました。
  • right-clickedright-click に名称変更しました。

Electron が新しくなりました

· 読むのにかかる時間 1 分

近日中、Electron に面白いアップデートと講演がいくつかあります。ここではそのまとめを紹介します。


資料

Electron は v0.32.0 で Chrome 45 に更新します。 その他アップデートもあります...

ドキュメントの改善

新しくなったドキュメント

見た目と読みやすさを向上するために、ドキュメントを再構成し標準化しました。 日本語や韓国語など、コミュニティが寄稿したドキュメントの翻訳もあります。

関連するプルリクエストは次の通りです。 electron/electron#2028electron/electron#2533electron/electron#2557electron/electron#2709electron/electron#2725electron/electron#2698electron/electron#2649

Node.js 4.1.0

v0.33.0 から Electron は Node.js 4.1.0 を同梱します。

関連するプルリクエストは electron/electron#2817 です。

node-pre-gyp

node-pre-gyp 依存のモジュールは、ソースからビルドするときに Electron に対してコンパイルできるようになりました。

関連するプルリクエストは mapbox/node-pre-gyp#175 です。

ARM サポート

Electron は ARMv7 の Linux 向けビルドを提供するようになります。 Chromebook や Raspberry Pi 2 といった人気プラットフォームで動きます。

関連する Issue は次の通りです。 atom/libchromiumcontent#138electron/electron#2094electron/electron#366

Yosemite 式フレームレスウインドウ

フレームレスウィンドウ

@jaanus によるパッチがマージされました。OS X Yosemite 以降は、他の組み込み OS X アプリと同様に、システム信号機ボタンが統合されたフレームレスウィンドウを作成できます。

関連するプルリクエストは electron/electron#2776 です。

Google Summer of Code 印刷サポート

Google Summer of Code 開催後、@hokein によるパッチをマージして、印刷サポートを改善し、ページを PDF ファイルに印刷する機能を追加しました。

関連する Issue は次の通りです。 electron/electron#2677electron/electron#1935electron/electron#1532electron/electron#805electron/electron#1669electron/electron#1835

Atom

Atom は Chrome 44 を動かしている Electron v0.30.6 にアップグレードされました。 v0.33.0 へのアップグレードは atom/atom#8779 で進行中です。

講演

GitHubber の Amy Palamountain は、Nordic.js の講演で Electron について素晴らしい紹介をしました。 彼女は electron-accelerator ライブラリも作成しています。

Amy Palomountain による Electron でのネイティブアプリケーション構築

同じく Atom チームの Ben Ogle は、YAPC Asia で Electron の講演を行いました。

Ben Ogle によるウェブ技術を使用したデスクトップアプリ構築

Atom チームのメンバー Kevin Sawicki などが最近 Bay Are Electron User Group 交流会で Electron について講演しました。 こちらに 映像 が二つ投稿されています。

Kevin Sawicki による Electron 史

Ben Gotow によるネイティブ風ウェブアプリ制作