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

Electron の API ワーキング グループ は、Electron のコアへのより大きな変更を支援するために、オープンな Requests for Comments (RFC) プロセスを採用しようとしています。

なぜ RFC なのでしょうか?​

要するに、Electron のコアへの重要な変更を実装するプロセスをスムーズにしたいのです。

現在、新しいコードの変更は主に GitHub の Issue とプルリクエストを通じて議論されています。 Electron のほとんどの変更においては、これは良いシステムです。 多くのバグ修正、ドキュメントの変更、さらには新機能も、標準の GitHub フローを介せば非同期的にレビューおよびマージできるほど簡単です。

より重大な変更—たとえば大規模な API サーフェスや、Electron アプリの大部分に影響する重大な変更などの場合、コードの大部分が記述される前のアイデア段階でレビューを行うほうが合理的です。

このプロセスは一般公開されるように設計すべきです。そうすることで、Electron に導入される前に、オープンソースコミュニティ全体が潜在的な変更についてフィードバックを提供しやすくなります。

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

RFC 全体のプロセスは、GitHub 上の electron/rfcs リポジトリに保管されます。 プロセスの手順は、リポジトリの README で詳しく説明しています。

簡単に言うと、electron/rfcs リポジトリに PR が作成されると、RFC は 提唱 になります。 提唱の RFC は次のように遷移します。

• アクティブ は、PR がリポジトリの main ブランチにマージされた場合になります。つまり、Electron のメンテナが electron/electron での実装に同意できることを意味します。
• 拒絶 は PR が最終的に拒否された場合になります。

実装が electron/electron にマージされたとき、アクティブな RFC は 完了 になります。

誰が参加できますか?​

Electron コミュニティの誰もが、RFC を提出したり、electron/rfcs リポジトリにフィードバックを残したりできます!

• アクティブな RFC を一覧する場合は、リポジトリ内の text フォルダ を参照してください。
• 提唱状態の RFC にフィードバックを残す場合は、開かれている PR のリスト を確認してください。
• 新しい RFC を提出する場合は、レポジトリの README と RFC テンプレート を確認してください。

私たちは、このプロセスを双方向の対話にして、コミュニティの参加を奨励し、将来これらの API を使用する可能性のある Electron アプリからの多様な意見を得たいと考えていました。 現在提唱状態の RFC にフィードバックを残したい方向けに、Electron のメンテナが既に作成したいくつかの RFC を下記します。

• Electron の C API
• サービスワーカー向けのプリロードレルム

クレジット​

Electron の RFC プロセスは、多くの確立されたオープンソースの RFC プロセスに基づいてモデル化されました。 多くのアイデアやコピーライティングの主要部分のインスピレーションは、以下から得ました。

• 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 宛にツイートしましょう。