WebアプリをデスクトップアプリにするPake活用法【1コマンドでmacOS/Windows対応アプリ化】

日頃からWebアプリを多用していませんか？ ブラウザのタブが常に数十個開いていて、目的のページを見失うことはありませんか？ 社内のNotionページ、個人のタスク管理ツール、よく使うSaaSなど、特定のWebサービスを独立したアプリケーションとして使いたいと考える人は多いでしょう。

しかし、既存のWebアプリをデスクトップ化するツールは、Electronベースで容量が大きく、動作が重くなりがちです。もっと軽量で高速、そして手軽にデスクトップアプリを作成したい。macOSとWindowsの両方に対応させたい。

そんな悩みを解決するのが「Pake」です。Pakeはたった1つのコマンドで、どんなWebページも軽量なデスクトップアプリケーションに変換します。RustとTauriを基盤としているため、従来のJavaScriptフレームワークよりも高速で、メモリ使用量も抑えられます。

この記事では、Pakeを使ってWebアプリをデスクトップ化する具体的な方法を、3つの実践例とともに紹介します。

全体像：PakeがWebアプリをデスクトップアプリに変える仕組み

Pakeは、WebサイトのURLを受け取り、それをデスクトップアプリケーションとしてパッケージ化するツールです。Web技術とネイティブ技術を組み合わせた「ハイブリッドアプリ」の一種ですが、その基盤にRust製の「Tauri」フレームワークを採用している点が特徴です。

Tauriは、Webコンテンツを表示する「WebView」と、ネイティブ機能を提供するRustのバックエンドを組み合わせます。これにより、ElectronのようなJavaScriptランタイム全体をバンドルする必要がなく、非常に軽量で高速なアプリケーションが実現します。

Pakeの役割は、このTauriのパワーをCLI（コマンドラインインターフェース）を通じて簡単に利用できるようにすることです。

ユーザー (CLI操作)
    ↓
WebサイトのURL (例: https://notion.so/my-page)
    ↓
Pake (Rust + Tauri ベース)
        - 軽量 (インストーラーサイズ約5MB)
        - 高速 (低メモリ使用)
        - macOS, Windows, Linux対応
    ↓
独立したデスクトップアプリ (.app / .exe)
    (ブラウザから分離され、集中して利用可能)

この仕組みにより、Webサービスをまるでネイティブアプリのように扱えるようになります。

セットアップ手順：Pake CLIをインストールする

Pakeを利用するには、まずCLIツールをインストールする必要があります。Node.jsとnpm（またはYarn）が事前にインストールされていることを前提とします。もしインストールされていない場合は、先にNode.jsの公式サイトからインストールしてください。

また、PakeはRustとTauriを基盤としているため、Pakeが内部で利用するビルドツールとしてRustの環境が必要です。

1. Rustのインストール

Pakeでアプリをビルドするには、Rust言語の環境が必要です。以下のコマンドでRustをインストールします。

macOSの場合（Homebrewを使用）

Homebrewがインストールされていない場合は、公式ウェブサイトの指示に従ってインストールしてください。

brew install rust

Windowsの場合（rustupを使用）

コマンドプロンプトまたはPowerShellで以下のコマンドを実行します。

winget install Rustlang.Rustup # Windows Package Managerを使用
# または
# curl --proto "=https" --tlsv1.2 -sSf https://sh.rustup.rs | sh

インストーラーの指示に従って進めてください。多くの場合、デフォルトの「1」を選択すれば問題ありません。

2. Pake CLIのインストール

Rustのインストールが完了したら、npmを使ってPake CLIをグローバルにインストールします。

npm install -g pake-cli

またはYarnを使用する場合：

yarn global add pake-cli

インストールが完了したかを確認するには、以下のコマンドを実行します。

pake -h

ヘルプメッセージが表示されれば、Pake CLIのインストールは成功です。

3. Windowsユーザー向けの追加設定（WebView2 Runtime）

Windows環境でPakeによって生成されたアプリを実行するには、「Microsoft Edge WebView2 Runtime」が必要です。これは通常、Windows 10/11の最新バージョンにプリインストールされていますが、もし存在しない場合はMicrosoftの公式サイトからダウンロードしてインストールしてください。

• Microsoft Edge WebView2 Runtime

これで、Pakeを使ってWebアプリをデスクトップアプリにする準備が整いました。

実際の使い方：シナリオ別の実践例3選

ここからは、Pakeを使った具体的なデスクトップアプリ化の例を3つのシナリオで紹介します。これらの例を参考に、あなたのよく使うWebサービスをアプリ化してみてください。

シナリオ1：社内Notionページを独立したアプリにする

多くの企業で情報共有ツールとしてNotionが使われています。特定のNotionページを頻繁に参照する場合、ブラウザのタブに埋もれず、独立したアプリとして素早く開けると便利です。

例えば、社内Wikiのトップページや、自分のタスク管理ページをアプリ化してみましょう。

準備：アイコンファイルの用意

デスクトップアプリにはアイコンを設定できます。macOSでは.icns形式、Windowsでは.ico形式のファイルが必要です。Web上にはフリーで使えるアイコンジェネレーターや、Notionのロゴアイコンなどが公開されていますので、事前に準備しておくと良いでしょう。

例えば、Notionのアイコンファイル（notion.icnsまたはnotion.ico）を現在のディレクトリに配置すると仮定します。

コマンド例

仮に社内NotionページのURLが https://www.notion.so/your-company/your-wiki-page-id だとします。

pake "https://www.notion.so/your-company/your-wiki-page-id" \
    --name "社内Wiki" \
    --icon "./notion.icns" \
    --width 1400 \
    --height 900

• "https://www.notion.so/your-company/your-wiki-page-id": アプリ化したいNotionページのURLを指定します。
• --name "社内Wiki": 生成されるアプリの名前を指定します。Dockやタスクバーに表示される名前です。
• --icon "./notion.icns": アプリのアイコンファイルを指定します。パスは相対パスでも絶対パスでも構いません。Windowsの場合は.icoファイルを指定します。
• --width 1400 --height 900: アプリの初期ウィンドウサイズを設定します。

このコマンドを実行すると、現在のディレクトリにmacOSでは.appファイル、Windowsでは.exeファイルが生成されます。これをアプリケーションフォルダやデスクトップに配置すれば、クリック一つでNotionページを専用アプリとして開けます。

シナリオ2：個人のタスク管理ツール（Todoist Web版）をアプリ化する

Todoistのようなタスク管理ツールをWebブラウザで利用している人も多いでしょう。ブラウザから独立させることで、他の作業に気を取られずにタスク管理に集中できます。

今回はTodoistのWeb版を例に、アプリ名を指定し、ウィンドウサイズを固定してアプリ化してみます。

コマンド例

pake "https://todoist.com/app" \
    --name "MyTodoist" \
    --width 1000 \
    --height 700 \
    --transparent \
    --no-menu

• "https://todoist.com/app": TodoistのWebアプリURLです。
• --name "MyTodoist": アプリの名前を「MyTodoist」とします。
• --width 1000 --height 700: アプリのウィンドウを幅1000px、高さ700pxで開きます。
• --transparent: ウィンドウを透過表示にします。背景が透明になり、Webコンテンツのみが浮かび上がったように見えます。
• --no-menu: アプリケーションのメニューバーを非表示にします。より没入感のある体験を提供します。

Todoistのアプリは、ログイン後にタスクリストが表示されるため、透過設定やメニュー非表示によって、よりデスクトップに溶け込むようなUIが実現できます。

シナリオ3：よく使うWebサービス（ChatGPT）をデスクトップアプリにする

ChatGPTやGeminiのようなAIチャットサービスは、日々の業務や学習で頻繁に利用されます。これらのサービスを独立したアプリとして持つことで、ブラウザの履歴に埋もれることなく、素早くアクセスできるようになります。

コマンド例

pake "https://chat.openai.com/" \
    --name "ChatGPT" \
    --icon "./chatgpt.icns" \
    --fullscreen \
    --user-agent "Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Mobile/15E148 Safari/604.1"

• "https://chat.openai.com/": ChatGPTのWebアプリURLです。
• --name "ChatGPT": アプリ名を「ChatGPT」とします。
• --icon "./chatgpt.icns": ChatGPTのアイコンファイルを指定します。
• --fullscreen: アプリを起動時にフルスクリーンで表示します。
• --user-agent "...": アプリのUser-Agent文字列を変更します。この例ではiPhoneのUser-Agentを設定しており、Webサイト側がモバイルフレンドリーな表示を提供している場合、モバイル版のUIでアプリを表示させることができます。

ChatGPTをフルスクリーンで利用し、さらにモバイル表示にすることで、スマートフォンアプリのような感覚で集中して利用できるかもしれません。

カスタマイズ例：CLIオプションでアプリをより使いやすく

PakeはCLIオプションが豊富で、生成するアプリの挙動を細かく制御できます。上記のシナリオで紹介した以外にも、便利なカスタマイズオプションが多数あります。

主要なカスタマイズオプションをいくつか紹介します。

ウィンドウの表示設定

• --width <number>: アプリの初期ウィンドウの幅を指定します（ピクセル単位）。
• --height <number>: アプリの初期ウィンドウの高さを指定します（ピクセル単位）。
• --transparent: ウィンドウの背景を透過させます。Webコンテンツのみが表示されるように見えます。
• --fullscreen: アプリ起動時にフルスクリーンモードで開きます。
• --always-on-top: アプリウィンドウを常に最前面に表示します。
• --no-menu: アプリケーションのメニューバーを非表示にします。
• --resizable false: ウィンドウのリサイズを無効にします。
• --frameless: ウィンドウのフレーム（タイトルバー、境界線）を非表示にします。

例えば、常に最前面で表示される小さなメモアプリを作成する場合：

pake "https://memo.example.com" \
    --name "QuickMemo" \
    --width 400 \
    --height 300 \
    --always-on-top \
    --no-menu \
    --transparent \
    --resizable false

ユーザーエージェントの変更

• --user-agent "<string>": アプリがWebサイトにアクセスする際のUser-Agent文字列を変更します。特定のWebサイトでモバイル版の表示を強制したい場合などに役立ちます。

例えば、YouTubeをモバイル表示でアプリ化する場合：

pake "https://m.youtube.com/" \
    --name "YouTube Mobile" \
    --user-agent "Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Mobile/15E148 Safari/604.1" \
    --width 400 \
    --height 700

スクリプトやスタイルの注入

• --inject-script "<path-to-js-file>": アプリがWebページを読み込んだ後に実行されるJavaScriptファイルを指定します。
• --inject-style "<path-to-css-file>": アプリがWebページを読み込んだ後に適用されるCSSファイルを指定します。

これらは、Webサイトの特定の要素を非表示にしたり、見た目を変更したりするのに使えます。例えば、Webサイトの広告要素をCSSで非表示にするスタイルシートを作成し、それを注入することで、広告のない環境でアプリを利用できます。

adblock.css の例:

/* 例: 特定の広告要素を非表示にする */
.ad-container, #sidebar-ad {
    display: none !important;
}

コマンド例:

pake "https://news.example.com" \
    --name "Clean News" \
    --inject-style "./adblock.css"

これらのオプションを組み合わせることで、Webアプリをよりパーソナルで使いやすいデスクトップ体験に変えられます。PakeのGitHubリポジトリにはさらに多くのオプションが記載されていますので、ぜひ参照してみてください。

今日からできる実行プラン：3ステップでデスクトップアプリ化

Pakeを使ってWebアプリをデスクトップ化するプロセスは非常にシンプルです。以下の3ステップで、あなたもすぐに実践できます。

ステップ1：Pake CLIをインストールする

まずはPake CLIツールをあなたのPCにインストールします。Node.jsとnpm（またはYarn）、そしてRustの環境が整っていることを確認してください。

# Rustのインストール（未導入の場合）
# macOS: brew install rust
# Windows: winget install Rustlang.Rustup

# Pake CLIのインストール
npm install -g pake-cli
# または
# yarn global add pake-cli

このコマンドを実行するだけで、Pakeを利用する準備は完了です。

ステップ2：最初のデスクトップアプリを作成してみる

インストールが完了したら、すぐに最初のアプリを作成してみましょう。まずは簡単なWebサイトや、普段よくアクセスするページから試すのがおすすめです。

例えば、Google検索ページをアプリ化してみます。

pake "https://www.google.com/" --name "Google Search"

このコマンドを実行すると、数秒で「Google Search.app」（macOS）または「Google Search.exe」（Windows）が生成されます。これをクリックして、ブラウザとは独立したGoogle検索アプリを体験してみてください。

ステップ3：よく使うWebサービスをリストアップし、順次アプリ化する

最初のアプリ作成に成功したら、次にあなたがデスクトップアプリ化したいWebサービスをリストアップしてみましょう。

• 社内ツール（Notion、Confluence、Jiraの特定のボード）
• 個人ツール（Todoist、Evernote Web、Google Calendar）
• 頻繁に使うSaaS（Slack Web、Gmail、ChatGPT、DeepL）

これらのWebサービスのURLと、設定したいアプリ名、アイコン、ウィンドウサイズなどのオプションをメモしておきます。そして、一つずつPakeコマンドを実行してアプリを作成していきます。

例えば、アイコンを準備し、ウィンドウサイズも指定して、より実用的なアプリを作成してみてください。

# 例：DeepL翻訳をアプリ化
pake "https://www.deepl.com/translator" \
    --name "DeepL Translator" \
    --icon "./deepl.icns" \
    --width 800 \
    --height 600

Pakeを活用することで、ブラウザのタブ管理から解放され、より集中して作業に取り組めるようになるでしょう。

関連ページ

• JavaScript / フロントエンド開発ツール総まとめ

参考文献

• Pake GitHub Repository
• Tauri Official Website
• Node.js Official Website
• Microsoft Edge WebView2 Runtime