メインコンテンツへ飛ぶ

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 での Mac App Store と Windows 自動更新

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

最近、Electron は 2 つの面白い機能を追加しました。Mac App Store 互換ビルドと組み込み Windows 自動更新です。


Mac App Store サポート

v0.34.0 現在、Electron の各リリースは Mac App Store 互換のビルドとなっています。 以前は、Electronで構築されたアプリケーションは、Mac App Store に提出する際の Apple の要件を満たしていませんでした。 これら要件のほとんどは、非公開 API の使用に関するものです。 Electron をサンドボックス化して要件を満たすようにするには、2 つのモジュールを削除する必要があります。

  • crash-reporter
  • auto-updater

加えて、DNS の変更、ビデオキャプチャ、アクセシビリティ機能の検出に関して、いくつかの動作が変更されました。 変更の詳細についてはドキュメント内の Mac App Store へのアプリ提出 を参照してください。 このディストリビューションは Electron リリースページ にあり、頭に mas- が付いています。

関連するプルリクエストは以下の通りです。electron/electron#3108electron/electron#2920

Windows 自動更新

Electron v0.34.1 では、auto-updater モジュールが Squirrel.Windows で動作するように改善されました。 つまり、Electron なら OS X と Windows の両方で簡単に自動更新できるアプリを公開できます。 ドキュメントに Windows での自動更新のアプリ設定 に関する読み物があります。

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

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 によるネイティブ風ウェブアプリ制作

GitHub 本社での Electron 交流会

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

9月29日の GitHub 本社の Electron 交流会に参加しましょう。Atom チームのメンバー @jlord@kevinsawicki が主催します。 お喋り、おやつ、Electron の凄い人たちに会って遊ぶ時間もあります。 興味のある人向けに、短いプレゼンをする時間もあります。 会えるのが楽しみです!


講演

  • JiboJonathan RossFrancois Laberge は、Electron でロボットをアニメ化する方法を共有します。
  • Jessica Lord は、Electron 製の学習ツール Git-it の制作について講演します。
  • Tom Moor は、speak.io を使用して、Electron でビデオと画面の共有を構築する長所と短所について講演します。
  • Ben Gotow は N1 の The Nylas Mail Client を見せつつ、Electron での開発について講演します。

詳細

  • 場所: GitHub HQ, 275 Brannan Street, San Francisco, CA, 94107
  • 日付: 2015 年 9 月 29 日 (火)
  • 時間: 午後 6 時 - 午後 9 時
  • 参加申込: ti.to/github-events/electron-meetup

electron-meetup-office-2

Electron ドキュメント

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

今週、electronjs.org にて Electron のドキュメントを掲載しました。 /docs/latest に最新のドキュメントがあります。 古いバージョンのドキュメントも保持します。/docs/vX.XX.XX.X にアクセスすれば、使用バージョンに関するドキュメントも確認できます。


/docs で利用可能なバージョンを確認するか、 /docs/all で最新バージョンのドキュメントを 1 ページに表示できます ( cmd + f 検索しやすい) 。

ドキュメントの内容に貢献したい方は、ドキュメントの取得元である Electron リポジトリ でどうぞ。 マイナーリリースのたびに取得して Jekyll で作られた Electron サイトリポジトリ へ追加します。

どのようにリポジトリから他のリポジトリへドキュメントを移動しているかについて興味があれば、続きを読んでください。 そうでない場合は、 ドキュメント をお楽しみください!

技術的な小話

私たちは Electron コアリポジトリ内のドキュメントをそのまま保存しています。 これは electron/electron が常に最新版のドキュメントを持つことを意味します。 新しいバージョンの Electron がリリースされるとき、 Electron Web サイトリポジトリ electron/electronjs.org へ複製します。

script/docs

ドキュメントを取得するために、 スクリプト を、 script/docs vX.XX.X のコマンドラインインターフェースで、 --latest オプション付き及び無しで (取得しようとしているバージョンが最新かどうかによる) 実行します。 私たちの ドキュメントを取得するスクリプト はいくつかのおもしろい Node モジュールを使用します:

すべて正常に行われたかどうかを テスト が私たちに教えてくれます。

Jekyll

Electron の Web サイトは Jekyll サイトであり、以下のような構成のドキュメントに Collections 機能を使っています:

electron.atom.io
└── _docs
├── latest
├── v0.27.0
├── v0.26.0
├── 続く
└── さらに続く

フロントマター

Jekyll が各ページをレンダリングするには、少なくとも空のフロントマターが必要です。 すべてのページでフロントマターを利用するため、 /docs ディレクトリからストリーミングしている間、ファイルが README.md ファイルである (この場合は特定のフロントマター構成を取得します) か、 Markdown の拡張子を持つ他のファイルである (この場合は少し異なるフロントマターを取得します) かを確認します。

各ページは、次のようなフロントマター変数を取得します:

---
version: v0.27.0
category: Tutorial
title: 'クイックスタート'
source_url: 'https://github.com/electron/electron/blob/master/docs/tutorial/quick-start.md'
---

README.md では、 /readme/ とせずに、 index.html の共通なルートを持つ URL を追加の permalink として設定します。

permalink: /docs/v0.27.0/index.html

構成とリダイレクト

サイトの _config.yml 内の latest_version 変数は、ドキュメントの取得時に --latest フラグが使われるたびに設定されます。 また、サイトに追加されたすべてのバージョンのリストと、ドキュメントコレクション全体に必要なパーマリンクも追加します。

latest_version: v0.27.0
available_versions:
- v0.27.0
collections:
docs: { output: true, permalink: '/docs/:path/' }

サイトのルートにある latest.md はこのフロントマターを除いて空です。これによって、ユーザはバージョンを指定することなく、ドキュメントの最新バージョンのインデックス (README とも言う) を この URL: electron.atom.io/docs/latest から参照することができます (バージョンを指定することもできます) 。

---
permalink: /docs/latest/
redirect_to: /docs/{{ site.data.releases[0].version }}
---

レイアウト

docs.html のレイアウトテンプレートでは、条件によって情報をヘッダやパンくずリストに表示または非表示しています。

{% raw %} {% if page.category != 'ignore' %}
<h6 class="docs-breadcrumb">
{{ page.version }} / {{ page.category }} {% if page.title != 'README' %} / {{
page.title }} {% endif %}
</h6>
{% endif %} {% endraw %}

利用可能なバージョンを示すページを作成するために、サイトのルートにある versions.md に記されたリストをループします。 また、このページに /docs/ のパーマリンクを与えます。

{% raw %} {% for version in site.available_versions %} - [{{ version
}}](/docs/{{ version }}) {% endfor %} {% endraw %}

これらの技術的な小話を楽しんでいただけたことを願います! ドキュメントサイトで Jekyll を使用することについての詳しい情報に興味がありましたら、 GitHub ドキュメントチームがどのように公開しているか GitHub's docs on Jekyll をご覧ください。

Atom Shell は Electron になりました

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

Atom Shell は Electron という名前になりました。 新しいホームページ electronjs.org で Electron とその開発者の制作物を詳しく学ぶことができます。


electron

Electron は、当初 Chromium/Node.js イベントループ統合とネイティブ API を処理するために Atom エディタ 用に構築したクロスプラットフォームアプリケーションシェルです。

これを始めたときの目標は、テキストエディタの要件をサポートすることだけではありませんでした。 ウェブ技術を使用して、ネイティブの付属品すべてを備えたクロスプラットフォームデスクトップアプリを構築できる平易なフレームワークも作成したいと考えました。

2 年の時を経て、Electron は非常に成長しました。 これには、アプリの自動更新、Windows インストーラー、クラッシュレポート、通知、そしてその他の便利なネイティブアプリ機能が含まれており、これはすべてJavaScript API を通して公開されています。 そして、私たちはさらなる作業をしています。 Atom からさらに多くのライブラリを抽出し、ウェブ技術でネイティブアプリをできるだけ簡単に構築できるようにする予定です。

これまで、個人開発者、若いスタートアップ企業、大企業は、Electron でアプリを構築しています。 チャットアプリ、データベースエクスプローラー、マップデザイナー、共同設計ツール、モバイルプロトタイプアプリなど、幅広いアプリを作成してきました。

新しくなった electronjs.org を見て、人々が Electron で構築したアプリを色々と見てみましょう。もしくは、ドキュメント を見て他に何ができるのかもっと学びましょう。

既に始めている方は、Electron で構築しているアプリについて話がしたいと思うでしょう。 info@electronjs.org にメールで詳しく教えてもらえませんか。 新しくなった @ElectronJS Twitter アカウントをフォローして、プロジェクトと繋がったままにもできます。

💙 🔌