"機能"タグ付き投稿5件

ElectronのAPIワーキンググループは、Electronコアへの大規模な変更を管理するために、オープンな**コメント依頼（RFC）**プロセスを採用しています。

RFCの理由​

簡単に言うと、Electronコアへの重要な変更の着陸プロセスを円滑化したいと考えています。

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

より重要な変更（例：大規模なAPIサーフェスや、ほとんどのElectronアプリに影響を与える破壊的変更）の場合、ほとんどのコードが記述される前に、構想段階でレビューを行うことが理にかなっています。

このプロセスは一般公開することを目的としており、オープンソースコミュニティ全体がElectronに反映される前に潜在的な変更についてフィードバックしやすくなります。

仕組み​

RFCプロセス全体は、GitHubのelectron/rfcsリポジトリに存在します。手順は、リポジトリのREADMEに詳細に記載されています。

簡単に言うと、RFCは、electron/rfcsリポジトリにPRが作成されると**提案**されます。提案されたRFCは、

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

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

参加資格​

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

• アクティブなRFCのリストを見るには、リポジトリのtextフォルダを参照してください。
• 提案されたRFCにフィードバックを残すには、未解決のPRのリストを確認してください。
• 新しいRFCを提出するには、リポジトリのREADMEとRFCテンプレートを確認してください。

このプロセスを双方向の対話にし、コミュニティの参加を促進して、将来これらのAPIを使用する可能性のあるElectronアプリからの多様な意見を得たいと考えていました。現在提案されているRFCへのフィードバックを残すことに関心がある場合は、Electronのメンテナが既にいくつか作成しています。

• 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を使用して取得するか、リリースウェブサイトから直接ダウンロードできます。

仕組み​

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用)を配布する必要があります。electron-packager、electron-rebuild、そしてelectron-forgeは既にarm64アーキテクチャのターゲティングをサポートしているという朗報があります。これらのパッケージの最新バージョンを使用している限り、ターゲットアーキテクチャをarm64に更新すれば、アプリは問題なく動作するはずです。

将来的には、arm64とx64アプリを単一のユニバーサルバイナリに「マージ」できるパッケージをリリースする予定ですが、このバイナリは非常に大きくなり、ユーザーへの配布には理想的ではない可能性があることに注意してください。

アップデート：このパッケージは現在@electron/universalで利用可能です。これを使用して、パッケージ化されたx64とarm64アプリを単一のバイナリにマージできます。

潜在的な問題​

ネイティブモジュール​

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

これらの依存関係のバージョン要件の結果として、特定のネイティブモジュールを修正/更新する必要がある場合があります。注目すべき点の1つは、Xcodeのアップグレードにより新しいバージョンのmacOS SDKが導入されることで、ネイティブモジュールのビルドエラーが発生する可能性があることです。

テスト方法は？​

現在、Apple SiliconアプリケーションはApple Siliconハードウェアでのみ実行されますが、このブログ投稿を作成時点では市販されていません。Developer Transition Kitをお持ちの場合は、そこでアプリケーションをテストできます。それ以外の場合は、本番用のApple Siliconハードウェアがリリースされるまで、アプリケーションが動作するかどうかをテストする必要があります。

Rosetta 2について​

Rosetta 2は、Appleの最新のRosettaテクノロジーの改良版であり、x64 Intelアプリケーションを新しいarm64 Apple Siliconハードウェアで実行できます。x64 ElectronアプリはRosetta 2で動作すると考えられますが、いくつかの重要な点に注意する必要があります（そして、ネイティブのarm64バイナリを配布する理由があります）。

• アプリのパフォーマンスが大幅に低下します。Electron / V8はJavaScriptにJITコンパイルを使用しており、Rosettaの動作方法により、事実上JITを2回実行することになります（V8で1回、Rosettaで1回）。
• Apple Siliconの新しいテクノロジー（メモリページサイズの増加など）のメリットが失われます。
• パフォーマンスが大幅に低下すると申し上げましたか？

新しいElectron 2.0リリースラインは多くの新機能と修正を含んでいます。この新しいメジャーバージョンのハイライトの1つは、AppleのMac App Store用の新しいinAppPurchase APIです。

アプリ内購入により、アプリ内から直接コンテンツまたはサブスクリプションを購入できます。これにより、開発者はフリーミアムビジネスモデルを簡単に採用できます。このモデルでは、ユーザーはアプリをダウンロードするために料金を支払う必要がなく、プレミアム機能、追加コンテンツ、またはサブスクリプションに対してオプションのアプリ内購入が提供されます。

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

AmanoteのMac版にアプリ内購入サポートを追加して以来、Adrienは売上高が40％増加したと述べています！

はじめに​

新しいinAppPurchase APIは、最新のElectronベータ版に既に導入されています。

npm i -D electron@beta

APIのドキュメントはGitHubで確認できます。また、AdrienはAPIの使い方に関するチュートリアルを書いてくれています。アプリにアプリ内購入を追加するには、チュートリアルを参照してください。

APIへのさらなる改善が進行中で、近日中に今後のElectronベータ版でリリースされる予定です。

次はWindowsの可能性​

次に、AdrienはElectronでMicrosoft Storeのアプリ内購入サポートを追加することで、Amanoteの新しい収益チャネルを開拓することを期待しています。続報にご期待ください！

Electron 1.6.3ベータリリースには、macOS Touch Barの初期サポートが含まれています。

新しいTouch Bar APIを使用すると、ボタン、ラベル、ポップオーバー、カラーピッカー、スライダー、スペーサーを追加できます。これらの要素は動的に更新でき、操作されたときにもイベントを発生させます。

これはこのAPIの最初のリリースであるため、次のいくつかのElectronリリースで進化します。今後のアップデートについてはリリースノートを確認し、問題や機能の不足については問題を報告してください。

このバージョンはnpm install electron@betaでインストールでき、TouchBarとBrowserWindowのElectronドキュメントで詳細を確認できます。

Electronへの貢献してくれた@MarshallOfSoundに多謝。🎉

Touch Barの例​

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

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

const { TouchBarButton, TouchBarLabel, TouchBarSpacer } = TouchBar;

let spinning = false;

// Reel labels
const reel1 = new TouchBarLabel();
const reel2 = new TouchBarLabel();
const reel3 = new TouchBarLabel();

// Spin result label
const result = new TouchBarLabel();

// Spin button
const spin = new TouchBarButton({
  label: '🎰 Spin',
  backgroundColor: '#7851A9',
  click: () => {
    // Ignore clicks if already spinning
    if (spinning) {
      return;
    }

    spinning = true;
    result.label = '';

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

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

      if (Date.now() - startTime >= spinLength) {
        finishSpin();
      } else {
        // Slow down a bit on each spin
        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) {
    // All 3 values are the same
    result.label = '💰 Jackpot!';
    result.textColor = '#FDFF00';
  } else if (uniqueValues === 2) {
    // 2 values are the same
    result.label = '😍 Winner!';
    result.textColor = '#FDFF00';
  } else {
    // No values are the same
    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の変更ログに注目してください。Electronで使用されているNode.js、Chromium、V8のバージョンはelectronjs.org/#electron-versionsで確認できます。

V8によるES6サポート​

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

以下にいくつかの例を示しますが、厳格モードでのクラス、ブロックスコープ、Promise、型付き配列なども使用できます。V8のES6機能の詳細については、このリストを参照してください。

アロー関数

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

文字列補間

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

new.target

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

// Throws
Octocat();
// Logs
new Octocat();

Array.includes

// Returns true
[1, 2].includes(2);

レストパラメーター

// Represent indefinite number of arguments as an array
(o, c, ...args) => {
  console.log(args.length);
};

Chromiumの機能​

Googleと貢献者によるChromiumへの多大な努力のおかげで、Electronアプリを構築する際に、（これらに限定されませんが）以下のような優れた機能も使用できます。

• MouseEvent.getModifierState()
• CSS.escape()
• Fetch APIストリーミング

Google Chromiumブログをフォローして、新バージョンのリリースに伴う機能について学び、Electronで使用されているChromiumのバージョンはこちらで確認できます。

何が楽しみです？​

@ElectronJSに、お気に入りのV8またはChromiumに組み込まれた機能をツイートしてください。