LocalToolsオフラインブラウザツール集

カテゴリー: 開発ツール

Webアプリマニフェストジェネレーター

サイト側で企画したツールツールが見つからない？

インストール可能なWebアプリ向けのmanifest.webmanifestを生成

アプリの名前、開始URL、表示モード、テーマカラー、背景色、アイコン一覧を入力するだけで、サイトをPWA（Progressive Web App）としてインストール可能にする、そのまま使えるmanifest.webmanifestのJSONファイルが手に入ります。すべてブラウザ内でローカルに生成されます。

manifest.webmanifest
{
  "name": "LocalTools",
  "short_name": "LocalTools",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#1f6f4a",
  "background_color": "#faf8f3",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

このページの処理はすべてブラウザ内で行われます。アップロードは一切ありません。

このツールでできること

Webアプリマニフェストは、サイトがインストールされたときにブラウザがどう振る舞うべきかを伝えるJSONファイルです。ホーム画面上の名前とアイコン、ステータスバーの色、スタンドアロンウィンドウで開くか通常のブラウザタブで開くか、どこから起動するかなどを指定します。これがないと、「ホーム画面に追加」機能が提供されないか、アプリらしい体験ではなく単なるブックマークになってしまいます。

使い方

  1. アプリの名前、短縮名、開始URLを入力します。
  2. 表示モード、テーマカラー、背景色を選びます。
  3. アイコンを1行に1つずつ、「/icon-192.png 192x192」のようにパスとサイズで一覧にします。
  4. 生成されたJSONをmanifest.webmanifestファイルとして保存し、ページの<head>から<link rel="manifest" href="/manifest.webmanifest">でリンクします。

プライバシー

このツールはすべてブラウザ内で動作します。入力した内容がアップロード・保存・共有されることはなく、タブを閉じれば消えます。

よくある質問

アイコンはどのサイズが必要ですか。
最低限192x192と512x512のPNGがあれば、ほとんどのインストールプロンプトやアプリアイコンの用途をカバーできます。特定のプラットフォームでよりくっきり表示したい場合は、さらにサイズを追加してください。
theme_colorとbackground_colorの違いは何ですか。
theme_colorはアプリの周りのブラウザUI（アドレスバーやステータスバーなど）に色を付けます。background_colorはアプリの読み込み中、実際のコンテンツが描画される前のスプラッシュ画面の背景として一時的に表示されます。
PWAを作っていない場合でもこれは必要ですか。
オフライン対応やサービスワーカーによる本格的な機能がなくても、マニフェストがあれば、訪問者がサイトをブックマークしたりホーム画面に追加したりしたときのアイコンや名前の表示が改善されます。

すべてのツールに戻る