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

Electron’s API Working Group is adopting an open Requests for Comments (RFC) process to help shepherd larger changes to Electron core.

Why RFCs?​

In short, we want to smooth out the process of landing significant changes to Electron core.

Currently, new code changes are mostly discussed through issues and pull requests on GitHub. For most changes to Electron, this is a good system. Many bug fixes, documentation changes, and even new features are straightforward enough to review and merge asynchronously through standard GitHub flows.

For changes that are more significant—for instance, large API surfaces or breaking changes that would affect the majority of Electron apps—it makes sense for review to happen at the ideation stage before most of the code is written.

This process is designed to be open to the public, which will also make it easier for the open source community at large to give feedback on potential changes before they land in Electron.

どのように動作するのですか?​

The entire RFC process lives in the electron/rfcs repository on GitHub. The steps are described in detail in the repository README.

In brief, an RFC is Proposed once a PR is made to the electron/rfcs repository. A Proposed RFC becomes:

• Active when the PR is merged into the main branch of the repository, which means that Electron maintainers are amenable to an implementation in electron/electron, or
• Declined if the PR is ultimately rejected.

An Active RFC is Completed if the implementation has been merged into electron/electron.

Who can participate?​

Anyone in the Electron community can submit RFCs or leave feedback on the electron/rfcs repository!

• To see the list of active RFCs, refer to the text folder in the repository.
• To leave feedback on proposed RFCs, check out the list of open PRs.
• To submit a new RFC, check out the repo’s README and the RFC template.

We wanted to make this process a two-way dialogue and encourage community participation to get a diverse set of opinions from Electron apps that might consume these APIs in the future. If you’re interested in leaving feedback on currently proposed RFCs, the Electron maintainers have already created a few:

• Electron C APIs
• Preload Realm for Service Workers

Credits​

Electron's RFC process was modeled on many established open source RFC processes. Inspiration for many ideas and major portions of copywriting go to:

• emberjs/rfcs
• reactjs/rfcs
• rust-lang/rfcs
• tauri-apps/rfcs
• vuejs/rfcs
• yarnpkg/rfcs

Apple Silicon ハードウェアが下半期にリリース予定です。 新ハードウェアで Electron アプリを動作させるにはどうすればよいでしょうか?

Electron 11.0.0-beta.1 のリリースに伴い、Electron チームでは Apple が下半期に出荷予定の新 Apple Silicon ハードウェア上で動作する Electron ビルドを頒布しています。 npm install electron@beta で最新のベータ版を入手するか、 releases website から直接ダウンロードできます。

どのように動作するのですか?​

Electron 11 では、Intel Mac と Apple Silicon Mac で別々のバージョンの Electron がリリースされます。 これに先立ち、既に darwin-x64 と mas-x64 の 2 つのアーティファクトがリリースされました。 後者には Mac App Store との互換性があります。 上記のアーティファクトの Apple Silicon に相当する、darwin-arm64 と mas-arm64 の 2 つのアーティファクトもリリースしています。

必要事項は何ですか?​

x64 (Intel Mac) 用 と arm64 (Apple Silicon) 用、2 つのバージョンのアプリを頒布する必要があります。 electron-packagerとelectron-rebuildと electron-forge はすでにこの arm64 アーキテクチャターゲットをサポートしていす。 これらのパッケージの最新バージョンを実行している限り、 ターゲットアーキテクチャを arm64に更新すると、アプリが完璧に動作するはずです。

将来的には、 arm64 とx64 アプリを単一のユニバーサルバイナリにマージできるパッケージをリリースしますが、このバイナリは_巨大になるため_、おそらくユーザーへのリリースには適していません。

更新: このパッケージは現在 @electron/universal で利用できます。 パッケージ化された x64 と arm64 の 2 つのアプリを、1 つのバイナリへ統合するために使用できます。

潜在的な問題​

ネイティブモジュール​

新しいアーキテクチャをターゲットにしているため、いくつかの依存関係はビルドで問題を引き起こす可能性があるため更新する必要があります。 各依存関係の最小バージョンは、以下をご参照ください。

これらの依存関係のバージョン要件のために、特定のネイティブモジュールを修正/更新しなければならない場合があるでしょう。 注意として、Xcode のアップグレードによって新しいバージョンの macOS SDK が導入されるため、ネイティブモジュールのビルドに失敗する可能性があります。

どのようにテストするのですか?​

現在、Apple Silicon アプリケーションは、このブログ記事を書いている時点では市販されていない Apple Silicon ハードウェア上でしか動作しません。 開発者移行キット をお持ちの場合、そのマシン上でアプリケーションをテストできます。 さもなくば、アプリケーションの動作テストには、製品版の Apple Silicon ハードウェアのリリースを待つ必要があります。

Rosetta 2 についてはどうなるのでしょうか?​

Rosetta 2 は、Apple の Rosetta 技術の最新の成果で、同社の新しい arm64 Apple Silicon ハードウェア上でも x64 Intel アプリケーションを実行できます。 x64 Electron アプリは Rosetta 2 で動作すると推測していますが、注意すべき重要な点が (ネイティブ arm64 バイナリを頒布すべきかどうかについても) いくつかあります。

• アプリのパフォーマンスが著しく低下します。 Electron / V8 は JavaScript を JIT コンパイルしており、Rosetta の動作方式によっては、事実上 JIT を 2 回 (V8 で 1 回、Rosetta で 1 回) 実行します。
• メモリのページサイズ増大など、Apple Sillicon の新技術の恩恵を受けられなくなります。
• パフォーマンスが 大幅に 低下するって言いましたよね?

新しい Electron 2.0 リリースラインは新しい機能と修正が 詰め込まれて います。 この新しいメジャーバージョンのハイライトの1つは、Apple の Mac App Store 向けの inAppPurchase API です。

アプリ内購入により、コンテンツやサブスクリプションをアプリ内から直接購入できます。 これにより、開発者は 基本無料ビジネスモデル を簡単に取り入れることができます。これは、プレミアム機能、追加コンテンツ、サブスクリプションのための任意のアプリ内購入が提供されるものです。

新しい API は、コミュニティのコントリビューター Adrien Fery によって Electron に追加され、講義や会議用のメモをとる Electron アプリ Amanote でアプリ内購入ができるようになりました。 Amanote は無料でダウンロードでき、数式、図面、音声録音などの機能を備え、明確で構造化されたメモを PDF に追加できます。

Mac 版 Amanote にアプリ内購入サポートを追加して以来、Adrien は 売り上げが 40% 増加 しました!

始めましょう​

新しい inAppPurchase API には、すでに最新の Electron ベータ版に入っています。

npm i -D electron@beta

API のドキュメントは GitHub にあります。Adrien の API の使用方法に関するチュートリアルも十二分に親切です。 アプリへアプリ内課金を追加していくには [チュートリアルを参照してください](https://github.com/AdrienFery/electron/blob/a69bbe882aed1a5aee2b7910afe09900275b2bf6/docs/tutorial/in-app- purchases.md)。

APIの改善 は現在進行中です。間もなくリリースされる Electron ベータリリースで公開されます。

次は Windows かも​

次に、Adrien は Electron に Microsoft Store のアプリ内購入サポートを追加することで、Amanote の新しい収益口を開こうと考えています。 今後の開発にご期待ください!

Electron の 1.6.3 ベータリリースは macOS の Touch Bar に対する初期サポートを含みます。

新しい Touch Bar API により、ボタン、ラベル、ポップオーバー、カラーピッカー、スペーサを追加することができます。 これらの要素は動的に更新され、対話が起こった際にはイベントが発生します。

この API の最初のリリースに過ぎないため、いくつかの Electron のリリースの間に進化していくでしょう。 詳しい更新内容についてはリリースノートを参照してください。なんらかの問題が生じているか、機能が欠けている場合は、 Issue を開いてください。

このバージョンは npm install electron@beta でインストールできます。詳細は Electron ドキュメントの TouchBar 及び BrowserWindow を参照してください。

@MarshallOfSound による Electron への貢献に大いなる感謝を表します。 🎉

Touch Bar の例​

以下は Touch Bar を用いたシンプルなスロットゲームの例です。 Touch Bar の作成方法、アイテムにスタイルを適用する方法、ウィンドウと関連付ける方法、ボタンクリックイベントを扱う方法、ラベルを動的に更新する方法を示しています。

const { app, BrowserWindow, TouchBar } = require('electron');

const { TouchBarButton, TouchBarLabel, TouchBarSpacer } = TouchBar;

let spinning = false;

// リールのラベル
const reel1 = new TouchBarLabel();
const reel2 = new TouchBarLabel();
const reel3 = new TouchBarLabel();

// スピン結果のラベル
const result = new TouchBarLabel();

// スピンのボタン
const spin = new TouchBarButton({
  label: '🎰 Spin',
  backgroundColor: '#7851A9',
  click: () => {
    // 既にスピン中であれば無視する
    if (spinning) {
      return;
    }

    spinning = true;
    result.label = '';

    let timeout = 10;
    const spinLength = 4 * 1000; // 4 秒
    const startTime = Date.now();

    const spinReels = () => {
      updateReels();

      if (Date.now() - startTime >= spinLength) {
        finishSpin();
      } else {
        // スピンするごとに少しづつ遅くする
        timeout *= 1.1;
        setTimeout(spinReels, timeout);
      }
    };

    spinReels();
  },
});

const getRandomValue = () => {
  const values = ['🍒', '💎', '7️⃣', '🍊', '🔔', '⭐', '🍇', '🍀'];
  return values[Math.floor(Math.random() * values.length)];
};

const updateReels = () => {
  reel1.label = getRandomValue();
  reel2.label = getRandomValue();
  reel3.label = getRandomValue();
};

const finishSpin = () => {
  const uniqueValues = new Set([reel1.label, reel2.label, reel3.label]).size;
  if (uniqueValues === 1) {
    // 3 つの値すべてが同じ
    result.label = '💰 Jackpot!';
    result.textColor = '#FDFF00';
  } else if (uniqueValues === 2) {
    // 2 つの値が同じ
    result.label = '😍 Winner!';
    result.textColor = '#FDFF00';
  } else {
    // どの値も異なる
    result.label = '🙁 Spin Again';
    result.textColor = null;
  }
  spinning = false;
};

const touchBar = new TouchBar([
  spin,
  new TouchBarSpacer({ size: 'large' }),
  reel1,
  new TouchBarSpacer({ size: 'small' }),
  reel2,
  new TouchBarSpacer({ size: 'small' }),
  reel3,
  new TouchBarSpacer({ size: 'large' }),
  result,
]);

let window;

app.once('ready', () => {
  window = new BrowserWindow({
    frame: false,
    titleBarStyle: 'hidden-inset',
    width: 200,
    height: 200,
    backgroundColor: '#000',
  });
  window.loadURL('about:blank');
  window.setTouchBar(touchBar);
});

Electron アプリケーションの構築は、1 つのブラウザ向けに 1 つのコードベースとデザインを作成するだけでいいので、非常に手軽です。 しかも Electron は最新リリースの Node.js と Chromium を保持しており、同梱の優れた機能を利用できます。 これにより以前はウェブアプリに含める必要があった依存関係が解消される場合があります。

多くの機能があるため、ここでは例をいくつか取り上げます。すべての機能について知りたい場合は、Google Chromium ブログ 及び Node.js 変更ログ に目を通してください。 Node.js、Chromium、V8 の Electron での使用バージョンは electronjs.org/#electron-versions で確認できます。

V8 による ES6 サポート​

Electron は Chromium のレンダリングライブラリに Node.js を組み合わせています。 二者は同じ JavaScript エンジン V8 を共有します。 多くの ECMAScript 2015 (ES6) の機能はすでに V8 に組み込まれており、コンパイラーがなくても Electron アプリケーションで使用できます。

以下にいくつかの例を示しますが、class (strict モード)、ブロックスコープ、Promise、TypedArray などを書くこともできます。 V8 の ES6 機能の詳細については このリスト を参照してください。

アロー関数

const findTime = () => {
  console.log(new Date())
}

文字列内挿

var octocat = 'Mona Lisa';
console.log(`The octocat's name is ${octocat}`);

new.target

function Octocat() {
  if (!new.target) throw "Not new";
  console.log("New Octocat");
}

// 例外が投げられる
Octocat();
// ログが出る
new Octocat();

Array.includes

// true を返します
[1, 2].includes(2);

残余引数

// R可変長引数を配列として表現します
(o, c, ...args) => {
  console.log(args.length);
};

Chromium の機能​

Google と Chromium に貢献してくれた皆の協力のおかげで、Electron アプリを構築するときに、以下のすごいものも使用できます (これだけではありません)。

• MouseEvent.getModifierState()
• CSS.escape()
• Fetch API ストリーム

Google Chromium ブログ をフォローすれば、新しいバージョンが出るたびにその機能について知ることができます。また、Electronが使用する Chromium のバージョンは こちら で確認できます。

何か好きなものはありましたか?​

V8 や Chromium のお気に入りの組み込み機能を @ElectronJS 宛にツイートしましょう。