【IT】SvelteKitのアプリをPWA化の対応ついて（第１回目：事前準備編）

T A｜ITインフラ／写真と言葉／英語童話

2025年7月29日 10:26

皆さま
こんにちは

本日は、作成したWebアプリをPWA対応します。

今回の環境は、
PC：MacBook Air（M1)
フレームワーク：SvelteKit V5

本記事は、設定前の事前準備編となります。

・第２回目：SvelteKitの設定編

・第３回目：動作確認（ローカル、ディプロイ）編

０．PWAとは？アプリのように使えるWebサイト

PWA（プログレッシブ・ウェブ・アプリ）とは、**スマホやPCで“アプリのように使えるWebサイト”**のことです。
PWAは、Webとアプリの“いいとこ取り”をしたような存在です。

たとえば、Twitterやスターバックスの公式サイトをスマホで開くと、「このアプリをホーム画面に追加しますか？」という表示が出ることがあります。これは、そのWebサイトがPWAに対応している証拠です。ホーム画面に追加すれば、まるでLINEやYouTubeのようにワンタップで起動できるようになります。

しかも、ブラウザのアドレスバーが消えて、見た目も操作感もアプリのようになります。一度アクセスすれば、一部の機能はオフラインでも使えることもあります（通信がない状態でも前回の画面が表示されたり、書きかけの内容を保持してくれたり）。

📱なぜ注目されているの？

スマホアプリは通常、App StoreやGoogle Playを通じて配信しますが、申請・審査・アップデートなど手間がかかります。それに対してPWAは、Webサイトとして作るだけで、インストールもアップデートも不要。URLを開くだけで使えます。

ユーザーにとっては「わざわざアプリを入れなくても、必要な機能がすぐに使える」手軽さが魅力です。
開発者にとっては、「1つのWebアプリでPC・スマホ両対応でき、配布や更新が簡単」という大きな利点があります。

✅ PWAでできること（例）

ホーム画面からワンタップで起動
オフラインでも一部機能が使える
高速な表示（キャッシュを使うため）
見た目がネイティブアプリのようになる

✅まとめ：iPhoneでは「動くけど、制限あり」

iPhoneでもPWAは使えますが、Safari経由での追加が必要だったり、一部機能が不安定だったりと、Androidに比べると制限があります。最近は改善が進んでいますが、「完全なアプリ体験」を求める場合は、現状ではAndroidのほうが相性がよいかもしれません。
※今回は、iphoneのSafariとPCのChomeの開発者モード（Android）
　で確認を進めます。

１．事前準備（Imagemagickのインストール）

a. Homebrewのインストール

Homebrewを以下のコマンドでインストールします。
（インストール済み方は、スキップください）

 $ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

b. Xcode Command Line Toolsのインストール

Imagemagickをビルドするために、Xcode Command Line Toolsが必要です。ターミナルで以下のコマンドを実行してインストールします。
（インストール済み方は、スキップください）

$ xcode-select --install

c. Imagemagickのインストール

Homebrewを使用してImagemagickをインストールします。

$ brew install imagemagick

d. Imagemagickの動作確認

以下、コマンドを実施してバージョンが表示された正常にインストールされてます。

$ magick --version

Version: ImageMagick 7.1.2-0 Q16-HDRI aarch64 23234 https://imagemagick.org
Copyright: (C) 1999 ImageMagick Studio LLC
License: https://imagemagick.org/script/license.php
Features: Cipher DPC HDRI Modules OpenMP
Delegates (built-in): bzlib fontconfig freetype heic jng jp2 jpeg jxl lcms lqr ltdl lzma openexr png raw tiff webp xml zlib zstd
Compiler: clang (17.0.0)

２．PWA用画像の準備

a. icon画像

３つの種類のアイコン用の画像が必要となります。
・192x192　（アイコン小）
・512x512　（アイコン大）
・180x180　（iphone用）
※２つの同一ファイル
apple-touch-icon.png
apple-touch-icon-precomposed.png

プロジェクトフォルダー/static/
にiconsフォルダーを作成して元のPNG画像を配置します。

以下のコマンドにて変換します。

$ magick ./pwa-orig.png -resize 180x180! apple-touch-icon.png
$ magick ./pwa-orig.png -resize 192x192 icon-192.png
$ magick ./pwa-orig.png -resize 512x512 icon-512.png

apple-touch-icon.pngは、一つ上のディレクトリへ配置します。
$ mv apple-touch-icon.png ../
$ cd ../

apple-touch-icon-precomposed.pngも必要となる場合がありますのでコピーして作成いておきます。
$ cp static/apple-touch-icon.png static/apple-touch-icon-precomposed.png

配置は、以下の通りとなります。

`static/` フォルダに以下の画像を保存：

```
static/
├── apple-touch-icon.png    （180x180 推奨、iOS用）
└── icons/
    ├── icon-192x192.png     （Android用）
    └── icon-512x512.png     （Android用）
```

それぞれVSCode（Cursor）でファイルを開きサイズが正しいか確認します。
サイズが間違っていると正常に動作しませんのでご確認ください。

b. ScreenShot画像

screenshots/フォルダーとscreenshots画像ですが、
・自作アプリを Google Play に PWAとして登録する（TWAなど）
・Androidの「ホーム画面に追加」時にスクリーンショット付きで表現されるようにしたい
・よりブランド感・プロモーション感を強くしたい
の場合に必要となります。

ファイルがないとマニフェストで警告となりますので、icon画像をリサイズしてファイルを作成することします。
※上記の目的の方は、正しい画像を作成ください。

$ magick ./pwa-orig.png -resize 540x720! ../screenshots/screen1.png
$ magick ./pwa-orig.png -resize 1280x720! ../screenshots/screen2.png

$ tree screenshots/
screenshots/
├── screen1.png
└── screen2.png

1 directory, 2 files

✅ 推奨スクリーンショットサイズ（screenshots）

解像度　　　　用途例
ーーーーーーーーーーーーーーーーーーーーーーーー
`540x720` 　　ポートレート（縦長）スマホ表示向け
`720x1280` 　ポートレート（高解像度スマホ）
`1280x720` 　ランドスケープ（横向き）タブレット
`1366x768` デスクトップ向け（任意）

※元のPNG画像は、他のフォルダーへ退避しておきます。
（今回の場合は、プロジェクトフォルダー直下へOLDフォルダーを作成してそこへ移動）

続きは次回へ
では