Excalidraw Electron のサポート終了とウェブ版への移行

Excalidraw プロジェクトがウェブを優先するために Electron ラッパーのサポートを終了することにした理由をご覧ください できます。

Thomas Steiner

Excalidraw プロジェクトで、 Excalidraw Desktop のサポートを終了しました。 Excalidraw の Electron ラッパー。ウェブ版の方がよい excalidraw.com で検索できます。慎重に分析した結果、 プログレッシブ ウェブアプリ（PWA）の未来を Google が構築する できます。その理由について以下で説明します。

Excalidraw Desktop の誕生

@vjeux が Excalidraw の初期バージョンを 2020 年 1 月のブログ投稿で、 問題 #561:

Excalidraw を Electron（または同等のもの）でラップし、[プラットフォーム固有] として公開することをおすすめします。 アプリをさまざまなアプリストアに配布できます。

@voluntadpear は次のような反応を示しました。

PWA にしたらどうでしょうか？Android では現在、Google Play ストアに 信頼できるウェブ アクティビティと iOS でも近日中に同じことができるようになる予定です。パソコンでは Chrome を使用して PWA にデスクトップ ショートカットをダウンロードします。

最終的に @vjeux が下した決定は簡単でした。

両方やるべきです。

Excalidraw のバージョンを PWA に変換する作業は、 @voluntadpear 以降、 個別に @lipis 進化して Excalidraw Desktop 用の別のリポジトリを用意してください。

これまで、@vjeux によって設定された初期目標、つまり さまざまなアプリストアへの Excalidraw はまだ到達していません。正直誰も AI と ML を すべての店舗に送信できますなぜでしょうか締めくくりに、 プラットフォームである Electron を見てみましょう

Electron とは？

Electron の独自のセールス ポイントは、 JavaScript、HTML、CSS を使用したクロスプラットフォーム デスクトップ アプリ」をご覧ください。Electron で作成されたアプリは、 "Mac、Windows、Linux と互換性があります"、つまり"Electron アプリは 3 つの OS で構築され、実行されます プラットフォーム」をご覧ください。ホームページによると、Electron の難しい部分は、 自動更新 システムレベルのメニューと通知 障害レポート デバッグとプロファイリング Windows インストーラ。その結果、 記載された機能には、小さな文字を細かく確認する必要があります。

• たとえば、自動更新は「現在、macOS と Windows でのみ [サポート] されています。Google Linux には自動アップデータのサポートが組み込まれていないため、ディストリビューションの パッケージ マネージャーを使用してアプリを更新する」をご覧ください。

• デベロッパーは、Menu.setApplicationMenu(menu) を呼び出すことでシステムレベルのメニューを作成できます。Windows と Linux ではメニューが各ウィンドウのトップメニューとして設定されるが、macOS では多数のメニューがある メニューバーなどのシステム定義の サービス 選択します。メニューを標準メニューにするには、それに応じてメニューの role を設定する必要があります。 Electron がそれらを認識し、標準メニューにしました。つまり メニュー関連のコードでは、次のプラットフォーム チェックを使用します。 const isMac = process.platform === 'darwin'。

• Windows インストーラは、 windows-installer。プロジェクトの README 「本番環境のアプリでは、アプリケーションに署名する必要があります。Internet Explorer の SmartScreen フィルタはアプリのダウンロードをブロックし、多くのウイルス対策ベンダーは 有効な証明書を取得していないと、そのアプリをマルウェアと見なすことはできません。」[sic]。

これら 3 つの例だけを見れば、Electron が「書き込みは一度、 できます。アプリストアでアプリを配信するには、 コード署名は、Google Chat で アプリのオーナー権限を証明できます。アプリをパッケージ化するには、 電磁作りを行い、検出に使用する場所を アプリ アップデートのパッケージをホストします。比較的短期間で状況が複雑になります。特に、目的とする目標が クロスプラットフォームサポートですただし、驚くほど美しい映像を 十分な努力と献身を持った電子アプリ。Excalidraw Desktop の場合はそのようなことはありませんでした。

Excalidraw Desktop の続き

Excalidraw Desktop は現在のところ、Excalidraw ウェブアプリが [Excalidraw について] ウィンドウが追加された .asar ファイル。外観 アプリケーションの操作性や操作性は、ウェブ版とほぼ同じです。

</ph>

</ph>

macOS では、アプリケーションの上部にシステムレベルのメニューが表示されるようになりました。ただし、どのメニューも [Close Window] と [About Excalidraw] 以外のアクションは、 現状ではまったく役に立たないでしょう当然ながら、すべてのアクションは 通常の Excalidraw ツールバーとコンテキスト メニューを使用します。

</ph>

Google は electron-builder を使用して、 ファイル形式の関連付け。 .excalidraw ファイルをダブルクリックすると、Excalidraw Desktop アプリが開きます。「 electron-builder.json ファイルの関連する抜粋は次のようになります。

{
  "fileAssociations": [
    {
      "ext": "excalidraw",
      "name": "Excalidraw",
      "description": "Excalidraw file",
      "role": "Editor",
      "mimeType": "application/json"
    }
  ]
}

残念ながら、実際には、これは常に意図したとおりに機能するとは限りません。これは、 （現在のユーザー向け、すべてのユーザー向け）、Windows 10 上のアプリには そのファイル形式を自身に関連付ける権限を持ちます。

これらの欠点と保留中の作業により、すべてのプラットフォームで真にアプリのようなエクスペリエンスが得られる （繰り返しになりますが、十分な努力があれば可能です）ことが、 Excalidraw Desktop への投資も行いました。しかし、私たちにとって大きな議論は、 私たちのユースケースでは、Electron が提供するすべての機能は必要ありません。どんどん成長するセット ウェブの能力によって、同等に活用できます。

現在と未来にウェブが果たす役割

jQuery は 2020 年も引き続き 大人気を誇る広告です。多くの人向け 開発者の間でよく利用されていますが、今日では jQuery が不要になる場合があります。Google Cloud 向けの同様のリソース Electron（現在は You Might Not Need Electron）許可 Electron が不要だと思う理由を説明します。

インストール可能なプログレッシブ ウェブアプリ

Excalidraw は、インストール可能なプログレッシブ ウェブアプリです。 Service Worker と ウェブアプリ マニフェストをご覧ください。すべてのリソースが 2 つのキャッシュにキャッシュされます。 1 つはフォントとフォント関連の CSS 用 もう 1 つはその他すべての用です

</ph>

つまり、アプリケーションは完全にオフラインに対応しており、ネットワーク接続がなくても実行できます。 パソコンとモバイルのどちらの Chromium ベースのブラウザでも、ユーザーにアプリのインストールを求められます。 以下のスクリーンショットにインストール プロンプトを示します。

</ph>

Excalidraw はスタンドアロン アプリとして動作するように設定されているため、インストールするとアプリが ウィンドウで実行されますオペレーティング システムのマルチタスク UI に完全に統合されており、 ホーム画面、ドック、タスクバーに専用のアプリアイコンが表示される。インストール先のプラットフォームによって できます。

</ph>

</ph>

ファイル システムへのアクセス

Excalidraw は browser-fs-access を使用して ファイルシステムにアクセスする というシナリオですこれにより、対応しているブラウザでは、 オープン → 編集 → 保存ワークフロー、実際の過剰保存と「名前を付けて保存」、 できます。この機能について詳しくは、こちらのブログ投稿をご覧ください。 browser-fs-access ライブラリを使用したファイルやディレクトリの読み取りと書き込み。

ドラッグ&ドロップのサポート

プラットフォーム固有のアプリの場合と同様に、Excalidraw ウィンドウにファイルをドラッグ&ドロップできます。 File System Access API をサポートするブラウザには、 ファイルはすぐに編集でき、変更内容は元のファイルに保存されます。つまり、 ウェブアプリで作業していることを忘れてしまうことがあります。

クリップボードへのアクセス

Excalidraw はオペレーティング システムのクリップボードで適切に動作します。Excalidraw の図形全体、または 個々のオブジェクトを image/png 形式と image/svg+xml 形式でコピーして貼り付けることができ、 Inkscape やウェブベースの他のツールと簡単に統合できる SVGOMG などのツールを使用できます。

</ph>

ファイル処理

Excalidraw はすでに試験運用版の File Handling API をサポートしていますが、 つまり、オペレーティング システムのファイル マネージャーで .excalidraw 個のファイルをダブルクリックし、 Excalidraw は .excalidraw のファイル ハンドラとして登録されるため、Excalidraw アプリで直接開く 自動的に作成されます。

宣言型リンク キャプチャ

Excalidraw の図形描画はリンクで共有できます。こちらの 例:将来的に Excalidraw を PWA としてインストールしている場合、このようなリンクはブラウザタブでは開かず、 新しいウィンドウで開きます実装は保留中ですが、 宣言型リンク キャプチャ 現時点では、新しいウェブ プラットフォーム機能に関する画期的な提案です。

まとめ

ウェブは大きく進化し、多くの機能がブラウザに導入されてきましたが、 数年前にはウェブでは想像もつかず、プラットフォーム固有のアプリケーション限定だったのです。 Excalidraw は、ブラウザが実現する可能性の最前線に立っており、 使用する各機能は、すべてのプラットフォームのすべてのブラウザでサポートされています。プログレッシブ ゲームに賭けることで、 強化戦略により、最新の優れた機能を可能な限り享受しながら、 遅れています。任意のブラウザで最適に表示できます。

電子は私たちに恩恵をもたらしましたが、2020 年以降は、電子なしで暮らすことができます。そして、そのためには @vjeux の目標: Android Play ストアでは、 「Trusted Web Activity」というコンテナ形式と、 以降 Microsoft Store は PWA をサポートしています。 Excalidraw も近い将来、これらの店に進出することが予想されます。当面は、 常に ブラウザから Excalidraw を使用してインストールしてください。

謝辞

この記事は @lipis によってレビューされました。 @dwelle、 Joe Medley。