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

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

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 には、サービス メニューなど、システム定義の標準メニューが多数あります。メニューを標準メニューにするには、デベロッパーがメニューの role を適切に設定する必要があります。Electron はこれを認識し、標準メニューにします。つまり、メニュー関連のコードでは、const isMac = process.platform === 'darwin' というプラットフォーム チェックが頻繁に使用されます。

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

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

Excalidraw Desktop の続き

現時点での Excalidraw Desktop は、基本的に Excalidraw ウェブアプリを .asar ファイルとしてバンドルし、[Excalidraw について] ウィンドウを追加したものです。アプリケーションの外観はウェブ バージョンとほぼ同じです。

Electron ラッパーで実行されている Excalidraw Desktop アプリケーション。
Excalidraw Desktop はウェブ版とほとんど区別がつきません
Electron ラッパーとウェブアプリのバージョンが表示された Excalidraw Desktop の [概要] ウィンドウ。
[Excalibur について] メニューでバージョンに関する情報を確認できます

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

macOS 版 Excalidraw のメニューバー。[ファイル] メニュー項目と [ウィンドウを閉じる] メニュー項目が選択されています。
macOS 版 Excalidraw Desktop のメニューバー

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 の使用は習慣になっています。しかし、現在は jQuery が必要ない可能性もあります。Electron には、Electron が不要な場合があるという適切な名前の類似リソースがあります。Electron が必要ないと考える理由を簡単に説明します。

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

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

2 つの Excalidraw キャッシュが表示された Chrome DevTools の [Application] タブ。
Excalidraw のキャッシュ コンテンツ

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

macOS の Chrome にアプリをインストールするようユーザーに求める Excalidraw のプロンプト。
Chrome の Excalidraw インストール ダイアログ

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

独自のウィンドウで実行されている Excalidraw。
スタンドアロン ウィンドウ内の Excalidraw PWA
macOS の Dock にある Excalidraw アイコン。
macOS ドックの Excalidraw アイコン

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

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

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

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

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

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

[SVG としてクリップボードにコピー] メニュー項目と [PNG としてクリップボードにコピー] メニュー項目が表示された Excalidraw のコンテキスト メニュー。
クリップボード アクションを提供する Excalidraw のコンテキスト メニュー

ファイル処理

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@dwelleJoe Medley が確認しました。