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 が簡単にできる部分は、自動更新、システムレベルのメニューと通知、クラッシュ レポート、デバッグとプロファイリング、Windows インストーラです。実際、約束した機能の一部には、小さい文字で詳しく見る必要があることがわかりました。

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

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

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

これら 3 つの例を見ると、Electron が「一度書けば、どこでも実行できる」とはかけ離れていることがわかります。アプリストアにアプリを配布するには、アプリの所有権を証明するセキュリティ技術であるコード署名が必要です。アプリをパッケージ化するには、electron-forge などのツールを使用して、アプリのアップデート用のパッケージをホストする場所を検討する必要があります。特にクロス プラットフォーム サポートが目的の場合は、比較的短時間で複雑になります。十分な労力と献身を持って優れた Electron アプリを作成することは絶対に可能であることに注意してください。Excalidraw Desktop では、

Excalidraw Desktop の中断

これまでの Excalidraw Desktop は、基本的には [Excalidraw] ウィンドウが追加された .asar ファイルとしてバンドルされた Excalidraw ウェブアプリです。アプリの外観は、ウェブ版とほぼ同じです。

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

ファイル形式の関連付けをサポートしている 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 への投資を再検討するべき強力な根拠となりました。しかし、私たちにとって大きな議論は、Google のユースケースでは、Electron が提供するすべての機能が必要ではないと予測することでした。ウェブの機能は増え続けており 今もなお拡大しています

現在と未来のウェブのあり方

2020 年になっても、jQuery は依然として非常に人気となっています。現在は jQuery が不要な場合があるにもかかわらず、多くのデベロッパーにとって jQuery を使用することが習慣となっています。Electron にも同様のリソース（You Might Not Need Electron）があります。なぜ Electron は必要ないと考えるのかを概説します。

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

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

つまり、アプリケーションは完全にオフラインに対応しており、ネットワーク接続がなくても実行できます。パソコンとモバイルの両方で 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 を PWA としてインストールしている場合、このようなリンクはブラウザタブでは開かず、新しいスタンドアロン ウィンドウが開きます。実装は保留中ですが、これは宣言型リンクのキャプチャにより機能します。これは、執筆時点では新しいウェブ プラットフォーム機能の開発段階の提案です。

おわりに

ウェブは長い道のりを歩んできました。わずか数年から数か月前までは、ウェブでは考えられなかった、プラットフォーム固有のアプリ専用の機能がブラウザにもどんどん増えていきました。Excalidraw は、ブラウザで可能なことの最前線に位置していますが、Google が使用する各機能がすべてのプラットフォーム上のすべてのブラウザでサポートされているわけではないことも認識しています。プログレッシブ エンハンスメント戦略に賭けることで、可能な限り最新かつ最高のコンテンツを楽しみながら、誰も後れを取らないようにしています。すべてのブラウザで最適に表示されます。

Electron はこれまでうまくいってきましたが、2020 年以降は、Electron なしでも生きていけるでしょう。また、@vjeux の目標達成に向けて、Android Play ストアでは Trusted Web Activity と呼ばれるコンテナ形式の PWA が受け入れられるようになりました。また、Microsoft Store は PWA をサポートしているため、近い将来、Excalidraw がこれらのストアで利用できるようになります。それまでの間は、ブラウザからの Excalidraw の使用とインストールはいつでも行えます。

謝辞

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