Loading...
本文へスキップ
開発

WebアプリをMacアプリにする方法(実際の選択肢、メリット・デメリット、選び方)

· siimplelab
WebアプリをMacアプリに:PWA、Electron、App Storeの選択肢
Chromeで動作するWebアプリとPWA、Electron、App Storeの選択肢

すでにWebアプリがある場合、「Macアプリ」を作るというのは、かなり意味が変わってきます:

  • アプリのように開くサイト(Dockアイコン、別ウィンドウ)
  • ユーザーに配布できる .app
  • OSレベルの統合があるデスクトップ製品(ファイルシステム、通知、ディープリンク、自動更新)

以下は、いま実際に使われている実践的なルートです—もっともシンプルなものから、もっとも「本物のアプリ」に近いものまで順に並べています。


1) Safari Webアプリ(Dockに追加):もっとも手軽な「アプリっぽい」Macでの存在感

macOS Sonoma以降、SafariはサイトをスタンドアロンWebアプリとして保存でき、Dockに表示され、Safariとは独立して動作します。 Appleサポート

こんなときに使う

  • ほぼゼロコストで軽いデスクトップでの存在感が欲しいとき。
  • WebアプリがデスクトップSafariで既に問題なく動いているとき。

正直な限界

  • パッケージ製品を自分で配布するのとは違います。主にユーザー側の「インストール」体験です。
  • 本物のアプリに比べ、ネイティブ統合は最小限です。

2) デスクトップPWA:プラットフォーム横断の「インストール可能なWebアプリ」(注意点あり)

Progressive Web Appは、manifestとservice workerで、対応ブラウザにおいてインストール可能性とオフライン寄りの挙動を実現します。 Appleサポート

こんなときに使う

  • Webファーストでいたい、アプリのパッケージングやネイティブビルドパイプラインを避けたいとき。
  • アプリが主にフォーム、ダッシュボード、コンテンツ、社内ツールであるとき。

デメリット

  • デスクトップの「インストール」挙動はブラウザ・OSによってばらつきます。体験が一貫しないことがあります。

3) Electron:Web UIを本物のMacアプリとして配布するデフォルトの答え

Electronは「Web技術でデスクトップアプリ」の代表的な方法です。UIをデスクトップランタイムと一緒に配布し、Electron環境とNodeでOS機能にアクセスします。Electron公式ドキュメントでは、チュートリアル、ベストプラクティス、アーキテクチャガイドを備えたフルフレームワークとして紹介されています。 electronjs.org

こんなときに使う

  • 本当に配布できるアプリが必要なとき(DMG、notarizationワークフローなど)。
  • Web機能の最大互換性が欲しいとき(自前のChromiumを同梱するため)。
  • 成熟したエコシステムと豊富な例が欲しいとき。

トレードオフ(率直に)

  • 重いです。ブラウザランタイムを同梱します。シンプルなアプリでも「でかい」と感じることがあります。

4) Tauri:Electronと同じ発想だが、システムのWebレンダラーで軽量化

Tauriは、OSのネイティブWebレンダラーを使いバイナリを小さくすることを目指し、どんなフロントエンドスタックでも維持したまま、Rustでバックエンドを書けます。 Tauri

こんなときに使う

  • Electronの開発モデルは好きだが、より小さいアプリとセキュリティ重視の設計が欲しいとき。
  • 「デスクトップアプリ」にRust/バックエンドの考えが少し入ってもよいとき。

現実

  • 必要に応じて、Electronより早くネイティブ寄りのツールに触れることになります。

5) Neutralinojs:超軽量「Web→デスクトップ」ラッパー

Neutralinojsは、HTML/CSS/JSでデスクトップアプリを組み、IPC拡張で機能を広げられる、軽量・ポータブルなツールとして位置づけています。 Neutralinojs

こんなときに使う

  • Electronが蚊に大砲なとき。
  • アプリがシンプルで、オーバーヘッドを最小にしたいとき。

デメリット

  • Electronに比べエコシステムは小さいです。変わったOS統合が必要なら、DIYが多くなります。

6) ネイティブmacOSシェルを自作(WKWebView):最大のコントロール、最大の責任

Swift/SwiftUI/AppKitでネイティブmacOSアプリを組み、その中にWebアプリをWebViewで載せ、JS↔ネイティブのブリッジを自分で実装できます。macOS統合のストーリーはもっともクリーンになりますが、あらゆるエッジケースを自分で抱えることになります。

こんなときに使う

  • macOSの挙動をきっちり制御したいとき(カスタムメニュー、深い統合、厳格なセキュリティ)。
  • 更新、権限、アプリのライフサイクルを完全にコントロールしたいとき。

デメリット

  • 「シンプル」に見えるのは機能要望が来るまでです。その後は、WebViewの中にWeb UIがあるネイティブ開発になります。

どれを選ぶか

率直な選択ガイドです。

Safari Webアプリ / PWAを選ぶとき…

  • 「アプリのように開く」だけでよく、製品が本質的にウェブサイトであるとき。 Appleサポート

Electronを選ぶとき…

  • Webレンダリングの挙動で驚かされない、デスクトップ製品の配布でもっとも実績のあるルートが欲しいとき。 electronjs.org

Tauriを選ぶとき…

  • デスクトップ製品が欲しいが、サイズとシステムのWebレンダラー活用をかなり気にするとき。 Tauri

Neutralinojsを選ぶとき…

  • アプリがシンプルで、デスクトップアプリ感を保ちつつもっとも軽いラッパーが欲しいとき。 Neutralinojs

ネイティブWKWebViewシェルを選ぶとき…

  • macOS特化の統合が目的そのもので、ネイティブコードベースの維持ができるとき。

数ヶ月を無駄にするよくある失敗

  • 「ウィンドウに入れたWebアプリ」が製品と同じだと思い込むこと。 配布、更新、権限、ディープリンク、セキュリティポリシーが重要です。
  • 自動更新の戦略を無視すること。 デスクトップアプリを配布するなら、ユーザーに負担をかけずに更新する計画が必要です。
  • 「デスクトップUX」を甘く見ること。 メニュー、キーボードショートカット、ウィンドウの挙動、ドラッグ&ドロップ、ファイル処理—ユーザーはデスクトップの標準を期待します。