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

過去2年間、Electron は HTML、CSS、JavaScript を使用したクロスプラットフォームのデスクトップアプリケーション開発を支援してきました。 私たちのフレームワークと、それを作成したコミュニティで大きな節目を共にできるということで興奮しています。 Electron 1.0 のリリースは electronjs.org からご覧いただけます。

Electron 1.0 は、API の安定性と成熟度における大きな節目です。 このリリースでは Windows、Mac、Linux 上で真にネイティブに近い動作のアプリを構築できます。 新しいドキュメント、新しいツール、新しい Electron API 概略アプリにより、Electron アプリの構築がこれまで以上に簡単になりました。

初めての Electron アプリを素早く構築するには クイックスタートガイド を参照してください。

Electron で次に何を作るのか、楽しみにしています。

Electron の道のり​

私たちは 2 年と少し前に Atom を立ち上げた時に Electron をリリースしました。 当初 Atom Shell という名前だった Electron は、Atom のために構築したフレームワークでした。 当時の Atom は Electron が提供する特色と機能性のきっかけを生み、Atom の初期リリースを後押ししていました。

いま Electron を突き動かしているのは、メール、チャット、Git アプリ から、SQL 分析ツール、torrent クライアント、ロボット まで、あらゆる開発者や企業のコミュニティの成長です。

この 2 年間、企業とオープンソースプロジェクトの両方で、アプリケーション基盤として Electron が採用されています。 この 1 年間で、Electron は 120 万回以上ダウンロードされています。 素晴らしい Electron アプリを こちらでご紹介 します。 あなたのアプリがまだない場合は追加しましょう。

Electron API デモ​

1.0 のリリースに合わせて、Electron API を調べたり、Electron アプリをネイティブ風にする方法の詳細を学べる新アプリをリリースします。 1.0 のリリースに合わせて、Electron API を調べたり、Electron アプリをネイティブ風にする方法の詳細を学べる新アプリをリリースします。

Devtron​

Electron アプリのデバッグに役立つ新しい拡張機能も追加しました。 Devtron はオープンソース拡張機能です。 Chrome デベロッパー ツール の拡張で、Electron アプリのインスペクト、デバッグ、トラブルシューティングを支援する設計です。

機能​

• Require グラフ は、メインプロセスとレンダラープロセス両方の、アプリの内部と外部ライブラリとの依存関係の視覚化に役立ちます。
• IPC モニタ は、アプリ内のプロセス間で送受信されたメッセージを追跡して表示します。
• イベントインスペクタ は window、app、process などのコア Electron API にアプリが登録しているイベントやリスナーを表示します。
• アプリリンター はあなたのアプリのよくある間違いや機能の欠損をチェックします。

Spectron​

最後に、Electron アプリの統合テストフレームワーク Spectron の新バージョンをリリースします。

Spectron 3.0 は Electron API 全体を包括的にサポートするため、さまざまなシナリオや環境でアプリケーションを動作検証するテストを、より迅速に記述できます。 Spectron は ChromeDriverとWebDriverIO をベースにしているため、ページナビゲーション、ユーザー入力、JavaScript 実行といった API も備えています。

コミュニティ​

Electron 1.0 は、何百人もの開発者によるコミュニティの努力の成果です。 コアフレームワーク以外では、Electron アプリの構築、パッケージ、デプロイを容易にするライブラリやツールが何百とリリースされています。

新しい コミュニティ ページでは、開発中の素晴らしい Electron のツール、アプリ、ライブラリ、フレームワークを多数掲載しています。 Electron や Electron Userland といった Organization を覗けば、こういった素晴らしいプロジェクトをいくつか見られます。

Electron は初めてですか? Electron 1.0 の紹介ビデオはこちらです。

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 で取得や変更ができます。

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

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

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

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 リリース のリリースノートで確認できます。

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');
});

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

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

非推奨の警告​

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

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

組み込みモジュールは、独立したモジュールに分離されるのではなく 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 の名称変更を行いました。

• Url を URL に名称変更しました。
• Csp を CSP に名称変更しました。

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

Tray のイベント名の変更​

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

• clicked を click に名称変更しました。
• double-clicked を double-click に名称変更しました。
• right-clicked を right-click に名称変更しました。

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

資料​

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

ドキュメントの改善​

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

関連するプルリクエストは次の通りです。 electron/electron#2028、 electron/electron#2533、 electron/electron#2557、 electron/electron#2709、 electron/electron#2725、 electron/electron#2698、 electron/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#138、 electron/electron#2094、 electron/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#2677、 electron/electron#1935、 electron/electron#1532、 electron/electron#805、 electron/electron#1669、 electron/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 によるネイティブ風ウェブアプリ制作​