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

Excalidraw プロジェクトが Electron ラッパーを非推奨にしてウェブ バージョンに移行した理由について説明します。

Thomas Steiner

Excalidraw プロジェクトでは、Excalidraw の Electron ラッパーである Excalidraw Desktop のサポートを終了し、excalidraw.com で常に利用可能なウェブ版に移行することにしました。慎重な分析の結果、プログレッシブ ウェブアプリ（PWA）を今後の基盤とすることに決定しました。その理由について以下で説明します。

Excalidraw Desktop の誕生

@vjeux が 2020 年 1 月に Excalidraw の初期バージョンを作成してブログに投稿した直後、Issue #561 で次のように提案しました。

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

@voluntadpear はすぐに次のように提案しました。

代わりに PWA にするのはどうでしょうか？現在、Android では Trusted Web Activity として Google Play ストアに追加できます。iOS でも近日中に同様の機能が提供される予定です。デスクトップでは、Chrome を使用して PWA のデスクトップ ショートカットをダウンロードできます。

@vjeux が最終的に下した判断はシンプルでした。

両方やるべきです。

Excalidraw のバージョンを PWA に変換する作業は、@voluntadpear が最初に開始し、その後他のユーザーも参加しましたが、@lipis は独立して先に進み、Excalidraw Desktop 用の別のリポジトリを作成しました。

@vjeux が設定した最初の目標である、Excalidraw をさまざまなアプリストアに送信するという目標は、現在も達成されていません。正直なところ、どのストアでも提出プロセスを開始した人はいません。なぜでしょうか？質問に答える前に Electron のプラットフォームを見てみましょう

Electron とは

Electron のユニークなセールスポイントは、「JavaScript、HTML、CSS を使用してクロスプラットフォームのデスクトップ アプリを構築」できることです。Electron でビルドされたアプリは、「Mac、Windows、Linux と互換性がある」、つまり「Electron アプリは 3 つのプラットフォームでビルド、実行される」ことを意味します。Electron のホームページによると、Electron の導入が容易なのは、自動更新、システムレベルのメニューと通知、クラッシュ レポート、デバッグとプロファイリング、Windows インストーラです。約束された機能の一部は、細かい文字をよく読む必要があります。

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

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

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

これらの 3 つの例だけでも、Electron が「一度作成してどこでも実行」というコンセプトからかけ離れていることが明らかです。アプリストアでアプリを配信するには、アプリの所有権を証明するセキュリティ技術であるコード署名が必要です。アプリをパッケージ化するには、electron-forge などのツールを使用し、アプリのアップデート用にパッケージをホストする場所を検討する必要があります。特にクロスプラットフォームサポートが目標の場合は 比較的短期間で複雑になります十分な努力と献身があれば、魅力的な電子アプリを作成することは間違いなく可能です。Excalidraw Desktop では、そうではありませんでした。

Excalidraw Desktop の続き

これまでのところ、Excalidraw Desktop は基本的に Excalidraw ウェブアプリであり、Excalidraw についてウィンドウが追加された .asar ファイルとしてバンドルされています。アプリケーションの外観はウェブ バージョンとほぼ同じです。

macOS では、アプリケーションの上部にシステム レベルのメニューが追加されましたが、[ウィンドウを閉じる] と [Excalidraw について] を除くメニュー アクションは何も接続されていないため、現在の状態ではメニューはほとんど役に立ちません。もちろん、すべての操作は通常の Excalidraw ツールバーとコンテキスト メニューから行うことができます。

electron-builder を使用します。これは、ファイル形式の関連付けをサポートしています。.excalidraw ファイルをダブルクリックすると、Excalidraw デスクトップ アプリが開きます。electron-builder.json ファイルの関連する抜粋を以下に示します。

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

残念ながら、インストール タイプ（現在のユーザー用、すべてのユーザー用）によっては、Windows 10 のアプリにファイルタイプを関連付ける権限がないため、実際には意図したとおりに機能しないことがあります。

こうした欠点と保留中の作業が、すべてのプラットフォームで真にアプリのような体験にするための作業です（これも、十分な労力を費やせば可能）、Excalidraw Desktop への投資を再検討する大きな根拠となりました。しかし、私たちが考えるユースケースでは、Electron が提供するすべての機能は必要ありません。ウェブの機能は成長を続け、より優れたものになっています。

ウェブが現在と将来、人々にどのように役立っているか

2020 年に入っても、jQuery は依然として高い人気を誇っています。現在では jQuery は必要ないにもかかわらず、多くのデベロッパーにとってはこれを使用するのが習慣となっています。Electron には、Electron が不要な場合があるという適切な名前の類似リソースがあります。Electron が必要ないと考える理由を簡単に説明します。

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

現在、Excalidraw は、Service Worker と ウェブアプリ マニフェストを備えたインストール可能な Progressive Web App です。すべてのリソースは 2 つのキャッシュ（フォントとフォント関連の CSS 用、その他すべて用）にキャッシュされます。

つまり、アプリケーションは完全なオフライン対応であり、ネットワーク接続がなくても実行できます。パソコンとモバイルの両方の Chromium ベースのブラウザでは、アプリをインストールするようユーザーにプロンプトが表示されます。インストール プロンプトは以下のスクリーンショットに示されています。

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

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

Excalidraw は、browser-fs-access を使用してオペレーティング システムのファイル システムにアクセスします。サポートされているブラウザでは、真の「オープン」>「編集」>「保存」のワークフロー、実際の過剰保存、「名前を付けて保存」が可能です。また、他のブラウザには透過的にフォールバックします。この機能について詳しくは、私のブログ投稿「browser-fs-access ライブラリによるファイルとディレクトリの読み取りと書き込み」をご覧ください。

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

プラットフォーム固有のアプリケーションと同様に、ファイルを Excalidraw ウィンドウにドラッグ＆ドロップできます。File System Access API をサポートしているブラウザでは、ドロップしたファイルをすぐに編集し、変更を元のファイルに保存できます。操作が直感的であるため、ウェブアプリを操作していることを忘れてしまうこともあります。

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

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

ファイル処理

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

宣言型リンク キャプチャ

Excalidraw の図形描画はリンクで共有できます。例を次に示します。今後、ユーザーが Excalidraw を PWA としてインストールしている場合、このようなリンクはブラウザタブでは開かず、新しいスタンドアロン ウィンドウが開きます。実装が完了すると、宣言型リンク キャプチャにより機能するようになります。これは、執筆時点では新しいウェブ プラットフォーム機能の最新プロポーザルです。

まとめ

ウェブは長い道のりを歩んできました。数年前、あるいは数か月前にはウェブでは考えられなかった機能が、プラットフォーム固有のアプリケーションに限定されていた機能が、ブラウザに次々と導入されています。Excalidraw は、ブラウザで可能な機能の最先端を走っていますが、すべてのプラットフォームのすべてのブラウザが、使用するすべての機能をサポートしているわけではありません。Google は、段階的な機能強化戦略を採用することで、可能な限り最新の機能を利用しながら、誰も取り残さないようにしています。任意のブラウザで表示することをおすすめします。

Electron はこれまでよく機能してきましたが、2020 年以降はなくても問題ありません。@vjeux 様のご要望に沿って、Android Play ストアでは Trusted Web Activity というコンテナ形式の PWA が承認されるようになりました。また、Microsoft ストアでも PWA がサポートされているため、近い将来、これらのストアで Excalidraw が提供される予定です。それまでは、ブラウザ内で、またはブラウザから Excalidraw を使用、インストールできます。

謝辞

この記事は、@lipis、@dwelle、Joe Medley が確認しました。