LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@oniemikel

Gmail PWA - GmailをPWA化して mailto リンクの既定のアプリ化

Last updated at Posted at 2025-09-09

Gmail PWA

記事を改めて書き直しました。（2025年9月9日）

Gmail をシンプルな PWA (Progressive Web App) として利用できるラッパーアプリケーション。
Windows 上で Gmail を既定のメールアプリとして使う場合に便利。

1. はじめに

Windows 上で mailto リンクをクリックしたとき、Gmail で直接メールを作成したい 場合がある。
2025年9月5日現在、Windows 用の公式 Gmail アプリは存在せず、mailto リンクを直接 Gmail で開くことはできない。

Gmail PWA は Gmail 本体のラッパーで、Sideload 可能な Windows アプリとして mailto リンクの既定アプリに設定可能。
「メールを送るときは Gmail を直接開く」ためのソリューション。

2. この記事でわかること

  • Web サイトを PWA 化する方法
  • MSIX パッケージに自己署名する方法
  • Windows 上で Gmail をネイティブ感覚で利用する方法

3. 推奨（一般ユーザー向け）導入方法

もっとも簡単で安全な方法。URL を開いて、表示される「アプリとしてインストール」ボタンをクリックするだけで導入可能。

まだ開発中です。機能が不完全ですのでご了承ください。

  1. 以下のリンクをクリックして Gmail PWA を開く
    Gmail PWA を開く
  2. ブラウザのインストール案内に従い「アプリとしてインストール」を選択
  3. Windows の設定で Gmail PWA を既定のメールアプリに設定
    • 「設定」 > 「アプリ」 > 「既定のアプリ」
    • 「mailto」リンクの既定アプリとして Gmail PWA を選択

この方法なら署名やコマンド操作は不要

4. 上級者向け（カスタム MSIX パッケージ生成・署名）

開発者や自己署名パッケージを扱う方向け。
PWABuilder や signtool/MSIX Packaging Tool を使って独自の MSIX パッケージを作成・署名可能。

4.1 プロジェクト構造（参考）

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 ライセンス

4.2 手順の概要

  1. PWABuilder で MSIX を生成
    • manifest.json の URL を指定して Windows 向けパッケージを生成
  2. 署名方法を選択
    • 自己署名（signtool.exe / PowerShell）
      • 開発用や個人利用向け
      $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

signtool sign /fd SHA256 /a /f "C:\GmailPWA\GmailPWA.pfx" /p YourPasswordHere "Gmail PWA.sideload.msix"
    • MSIX Packaging Tool（GUI）
      • 独自署名付きで MSIX を生成可能
    • Microsoft Store 配布用署名
      • 公式署名付きで第三者配布可能
  3. 署名済み MSIX をインストール 
    Add-AppxPackage -Path "Gmail PWA.sideload.msix"
  4. Windows の既定メールアプリに設定（mailto リンク用）

警告

  • 自己署名の PFX は絶対に公開禁止
  • 上級者向け手順で、操作ミスによりインストールに失敗する場合あり

5. 使用技術

  • Web App Manifest v3 準拠
  • Service Worker によるオフライン対応
  • PWABuilder によるクロスプラットフォーム配布
  • Windows MSIX / Sideload による PWA 配布
  • アイコン画像は ChatGPT により作成

6. 技術的ポイント

6.1 Service Worker の設置と登録

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/gmail-pwa/service-worker.js', { scope: '/gmail-pwa/' })
        .then(reg => console.log('Service Worker registered:', reg.scope))
        .catch(err => console.error('Service Worker registration failed:', err));
}

6.2 キャッシュ戦略（オフラインページ）

const CACHE_NAME = 'gmail-pwa-shell-v1';
const APP_SHELL = [
    '/gmail-pwa/public/manifest.json',
    '/gmail-pwa/index.html',
    '/gmail-pwa/main.js',
    '/gmail-pwa/offline.html',
    '/gmail-pwa/public/icons/monochrome.svg'
];

self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(CACHE_NAME).then(cache => cache.addAll(APP_SHELL))
    );
    self.skipWaiting();
});

self.addEventListener('fetch', event => {
    const { request } = event;
    if (request.mode === 'navigate') {
        event.respondWith(
            caches.match(request).then(cached => cached || fetch(request).catch(() => caches.match('/gmail-pwa/offline.html')))
        );
        return;
    }
    if (new URL(request.url).origin === self.location.origin) {
        event.respondWith(
            caches.match(request).then(cached => {
                if (cached) return cached;
                return fetch(request).then(res => {
                    const resClone = res.clone();
                    caches.open(CACHE_NAME).then(cache => cache.put(request, resClone));
                    return res;
                }).catch(() => caches.match('/gmail-pwa/offline.html'));
            })
        );
    }
});

6.3 mailto ハンドラ登録

manifest.json と handler/ 内 HTML で Gmail PWA を既定アプリに設定可能。

"protocol_handlers": [
    {
        "protocol": "mailto",
        "url": "/gmail-pwa/public/handler/mailto.html?url=%s"
    }
]

6.4 PWA インストールプロンプト（カスタマイズ例）

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 本体のコピーではなく、公式 Gmail へのラッパー
  • Gmail は Google LLC の商標
  • 自己署名パッケージを使う場合は、第三者による保証なし、自己責任
  • PFX を配布してはいけない

8. ライセンス

このリポジトリは MIT License の下で公開
詳細は LICENSE を参照

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?