1. はじめに
Windows 上で mailto リンクをクリックしたとき、 Gmail で直接メールを作成したい と考えたことはないだろうか。2025年9月5日現在、Windows用の公式Gmailアプリは存在しておらず、 mailto リンクを直接Gmailで開くことはできない。
本記事では、私OnieMikelが制作した Gmail PWA を例に、Windows ネイティブ感覚で Gmail を扱う方法と、裏でどのような技術が使われているかを解説する。
以下のレポジトリは、MITライセンスで公開している。
この Gmail PWA は、Gmail 本体のラッパーであり、 Sideload 可能な Windows アプリとして mailto リンクの既定アプリとして設定可能。
「メールを送るときは Gmail を直接開きたい」人に最適なソリューションである。
2. この記事でわかること
- webサイトをPWA化する方法
- msix パッケージに自己署名する方法
3. 結論（すぐに Gmail PWA を利用したい人）
以下のリンクから、最新リリース版をダウンロードし、説明に従って導入すればよい。
4. なぜ Gmail PWA を作ったか
- mailto リンクをクリックしても Gmail が開かない
- ブラウザで Gmail を開いても、自動で入力されるテンプレをコピペする必要がある
Gmail PWA はこれらを解消し、Windows 上で Gmail を直接呼び出す「ネイティブ感覚のラッパー」 として設計した。
- mailto リンクを Gmail に直結
- タスクバーやスタートメニューにピン留め可能
5. Gmail PWA プロジェクト概要
Gmail PWA のディレクトリ構造（抜粋）：
gmail-pwa/
├─ public/ # 公開リソース用ディレクトリ
│ ├─ handler/ # mailto リンクなどの HTML ハンドラ
│ │ ├─ compose.html # メール作成画面へのリダイレクト
│ │ ├─ mailto-handler.js
│ │ └─ mailto.html # mailto ハンドリング用ページ
│ ├─ icons/ # PWA 用アイコン
│ │ ├─ icon-192.png
│ │ ├─ icon-512.png
│ │ ├─ maskable-192.png
│ │ ├─ maskable-512.png
│ │ └─ monochrome.svg
│ └─ manifest.json # Web App Manifest
├─ offline.html # オフライン表示用ページ
├─ index.html # PWA 起動・Gmail へのリダイレクト
├─ main.js # Service Worker 登録スクリプト
├─ service-worker.js # オフライン対応 Service Worker
├─ README.md # 説明書
└─ LICENSE # MIT ライセンス
6. 技術的解説
ここからは、開発者向けに MSIX パッケージ化や Service Worker、mailto ハンドラなどの技術的ポイント を解説する。
使用技術
- Web App Manifest v3 準拠
- Service Worker によるオフライン対応
- PWABuilder によるクロスプラットフォーム配布
- Windows MSIX / Sideload による PWA 配布
- アイコン画像は ChatGPT により作成
MSIX パッケージ化と署名
Windows 向け PWA 配布には MSIX パッケージ化と署名 が必要。署名によりユーザーは安全にインストール可能。
signtool.exe による自己署名
開発環境や社内配布向け。
# 自己署名証明書の作成
$pwd = ConvertTo-SecureString -String "YourPasswordHere" -Force -AsPlainText
$cert = New-SelfSignedCertificate -Type Custom -Subject "CN=Gmail PWA" `
-CertStoreLocation "Cert:\CurrentUser\My" -KeyExportPolicy Exportable -KeySpec Signature
Export-PfxCertificate -Cert "Cert:\CurrentUser\My\$($cert.Thumbprint)" `
-FilePath "C:\GmailPWA\GmailPWA.pfx" -Password $pwd
# MSIX 署名
signtool sign /fd SHA256 /a /f "C:\GmailPWA\GmailPWA.pfx" /p YourPasswordHere "Gmail PWA.sideload.msix"
⚠️ 注意
.pfxは秘密鍵を含むため絶対に公開禁止- 自己署名の場合、Windows に信頼済み証明書として登録が必要
MSIX Packaging Tool を使った GUI 署名
GUI ツールで署名作業を視覚的に確認可能。
- MSIX Packaging Tool を起動
- パッケージを選択
-
.pfxを指定して署名 - 生成後 Sideload 可能
Service Worker の設置と登録
オフラインページやバックグラウンド処理の形を用意。
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(reg => console.log('Service Worker registered:', reg.scope))
.catch(err => console.error('Service Worker registration failed:', err));
}
キャッシュ戦略（オフラインページ）
Gmail 本体はオンライン依存だが、オフラインページの形は用意。
const CACHE_NAME = 'gmail-pwa-cache-v1';
const OFFLINE_URL = '/offline.html';
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.add(OFFLINE_URL))
);
});
self.addEventListener('fetch', event => {
event.respondWith(
fetch(event.request).catch(() => caches.match(OFFLINE_URL))
);
});
Background Sync / Periodic Sync / Push 通知
形だけ用意。実際の動作はなし。
// Background Sync（形だけ）
self.addEventListener('sync', event => {
if (event.tag === 'send-email-queue') {
event.waitUntil(Promise.resolve());
}
});
// Periodic Sync（形だけ）
navigator.serviceWorker.ready.then(reg => {
reg.periodicSync.register('update-inbox', {
minInterval: 60 * 60 * 1000
});
});
// Push 通知（形だけ）
self.addEventListener('push', event => {
const data = event.data ? event.data.json() : {};
event.waitUntil(
self.registration.showNotification(data.title || 'Gmail PWA', {
body: data.body || '',
icon: '/icons/icon-192.png'
})
);
});
mailto: ハンドラ登録
manifest.json と handler/ 内 HTML で Gmail PWA を既定アプリに。
"protocol_handlers": [
{
"protocol": "mailto",
"url": "/handler/mailto.html?url=%s"
}
]
-
mailto.htmlは Gmail 作成画面にリダイレクト - Windows の設定で Gmail PWA を既定アプリに指定
PWA インストールプロンプト
ユーザーに PWA インストールを促す UI をカスタマイズ可能。
let deferredPrompt;
window.addEventListener('beforeinstallprompt', e => {
e.preventDefault();
deferredPrompt = e;
showInstallButton(); // UI 表示関数
});
installButton.addEventListener('click', async () => {
deferredPrompt.prompt();
const { outcome } = await deferredPrompt.userChoice;
console.log('User response:', outcome);
deferredPrompt = null;
});
7. まとめ
Gmail PWA は Windows 上で mailto リンクを Gmail に直結する ネイティブ感覚ラッパー。
技術的には MSIX 署名や Service Worker などを組み合わせ、以下を提供：
- Windows 既定メールアプリとして mailto 連携
- Sideload 可能な MSIX パッケージ
- オフラインページ・バックグラウンド処理の形（動作しない）
- PWA インストールプロンプトのカスタマイズ
オンライン Gmail 依存だが、mailto 利用者にとっては大きな利便性を提供する。