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 について] ウィンドウを追加したものです。アプリケーションの外観はウェブ バージョンとほぼ同じです。
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 の使用は習慣になっています。しかし、現在は jQuery が必要ない可能性もあります。Electron には、Electron が不要な場合があるという適切な名前の類似リソースがあります。Electron が必要ないと考える理由を簡単に説明します。
インストール可能なプログレッシブ ウェブアプリ
現在、Excalidraw は、Service Worker と ウェブアプリ マニフェストを備えたインストール可能な Progressive Web App です。すべてのリソースを 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 の図はリンクで共有できます。例を次に示します。今後、Excalidraw を PWA としてインストールしている場合、このようなリンクはブラウザタブで開かれるのではなく、新しいスタンドアロン ウィンドウで起動されます。実装が完了すると、宣言型リンク キャプチャによって機能するようになります。これは、執筆時点では新しいウェブ プラットフォーム機能の最新プロポーザルです。
まとめ
ウェブは長い道のりを歩んできました。数年前、あるいは数か月前にはウェブでは考えられなかった機能が、プラットフォーム固有のアプリケーションに限定されていた機能が、ブラウザに次々と導入されています。Excalidraw は、ブラウザで可能な機能の最先端を走っていますが、すべてのプラットフォームのすべてのブラウザが、使用するすべての機能をサポートしているわけではありません。Google は、段階的な機能強化戦略を採用することで、可能な限り最新の機能を利用しながら、誰も取り残さないようにしています。任意のブラウザで表示することをおすすめします。
Electron はこれまでよく機能してきましたが、2020 年以降はなくても問題ありません。@vjeux 様のご希望に沿って、Android Play ストアでは Trusted Web Activity というコンテナ形式の PWA が承認されるようになり、Microsoft ストアでも PWA がサポートされるようになったため、近い将来、これらのストアで Excalidraw が提供される予定です。それまでは、ブラウザ内で、またはブラウザから Excalidraw を使用、インストールできます。
謝辞
この記事は、@lipis、@dwelle、Joe Medley が確認しました。