## はじめに「自分で作った Web アプリを、スマホのホーム画面からアプリっぽく開けたらいいのに...」と思ったことはありませんか？実は **PWA（Progressive Web App）** という仕組みを使えば、Safari や Chrome で「ホーム画面に追加」するだけで、以下のことが実現できます。 - **自分で設定したアプリアイコン**がホーム画面に表示される - **アプリ名**もそのまま表示される - 起動時に**アドレスバーが表示されない**ため、ネイティブアプリのような見た目になるこの記事では、実際に Next.js で作ったポケモン図鑑アプリを PWA 化した手順を、わかりやすく解説します。 --- ## PWA とは？ PWA（Progressive Web App）は、Web アプリをネイティブアプリのように使えるようにする技術の総称です。 ### PWA のメリット | メリット | 説明 | |---|---| | ホーム画面に追加できる | アプリアイコン・アプリ名を自分で設定できる | | アドレスバーが消える | `display: "standalone"` にすることでブラウザの UI が非表示になり、フルスクリーンのアプリのように見える | | インストール不要 | App Store や Google Play を経由せず、ブラウザから直接追加できる | | URL を共有できる | 通常の Web ページと同じく URL でシェアできる | 特に**アドレスバーが出ない**という点は大きなメリットです！
通常のブラウザで Web アプリを開くと、画面上部にアドレスバーが表示されて画面が狭くなりますが、PWA として起動するとこれが消え、画面全体をアプリの表示に使えます！ --- ## 今回のディレクトリ構成 PWA 化に関係するファイルだけを抜粋しています。 ``` my-pokemon-app/ ├── app/ │ └── layout.tsx # メタ情報を追加する ├── public/ │ ├── manifest.json # 新規作成：PWA の設定ファイル │ └── img/ │ └── thumbnail/ │ └── pikatyuu.jpeg # アイコンに使用する画像 ``` ## 実装手順 PWA の最小構成はとてもシンプルで、必要なのはたった **2 ステップ**です。 ### ステップ 1: `manifest.json` を作成する `public/manifest.json` を作成します。これが PWA の設定ファイルです。 ```json { "name": "ポケモン図鑑", "short_name": "ポケモン図鑑", "description": "PokeAPIを使ったポケモン図鑑アプリ", "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#ef4444", "icons": [ { "src": "/img/thumbnail/pikatyuu.jpeg", "type": "image/jpeg", } ] } ``` #### 各プロパティの説明 | プロパティ | 説明 | |---|---| | `name` | アプリのフルネーム。インストール画面などに表示される | | `short_name` | ホーム画面のアイコン下に表示される短い名前 | | `description` | アプリの説明文 | | `start_url` | アプリ起動時に開かれる URL | | `display` | **`"standalone"`** を指定するとアドレスバーが非表示になる。これが PWA の肝！ | | `background_color` | アプリ起動時のスプラッシュスクリーンの背景色 | | `theme_color` | ステータスバーやタスクバーの色 | | `icons` | ホーム画面に表示されるアイコン画像 | > **ポイント**: `display: "standalone"` がアドレスバーを消す設定です。これを `"browser"` にするとアドレスバーが表示されたままになります。 ### ステップ 2: `layout.tsx` にメタ情報を追加する Next.js の App Router では、`metadata` オブジェクトに PWA の設定を追加します。 ```tsx // app/layout.tsx import type { Metadata } from "next"; export const metadata: Metadata = { title: "ポケモン図鑑", description: "PokeAPIを使ったポケモン図鑑アプリ", manifest: "/manifest.json", appleWebApp: { capable: true, statusBarStyle: "default", title: "ポケモン図鑑", }, }; ``` また、`` タグ内の `` に以下を追加します。 ```tsx {/* ... */} ``` #### 各設定の役割 | 設定 | 説明 | |---|---| | `manifest` | `manifest.json` のパスを指定。これでブラウザが PWA として認識する | | `appleWebApp.capable` | Safari（iOS）でホーム画面追加時に PWA として動作させる | | `appleWebApp.statusBarStyle` | iOS でのステータスバーのスタイル | | `appleWebApp.title` | iOS のホーム画面に表示されるタイトル | | `apple-touch-icon` | iOS でホーム画面に追加した時のアイコン画像 | | `theme-color` | ブラウザのテーマカラー（アドレスバーの色など） | --- #### 補足 : 今回使用するアプリのサムネはピカチュウです！(ｶﾜｲｲ😍) ![](https://zpzlrsnbhqsowafzujcb.supabase.co/storage/v1/object/public/post-images/media/1775212905739_r423ih.jpeg) ## 実際に試してみよう！ ### iPhone（Safari）の場合 1. Safari でアプリの URL を開く
- https://poke-zukan.vercel.app/ 2. 下部の**共有ボタン**（四角に上矢印のアイコン）をタップ
![](https://zpzlrsnbhqsowafzujcb.supabase.co/storage/v1/object/public/post-images/media/1775212918313_upgik5.jpeg) 3. **ホーム画面に追加**をタップ
![](https://zpzlrsnbhqsowafzujcb.supabase.co/storage/v1/object/public/post-images/media/1775212924814_zao3nd.jpeg) 4. アプリ名を確認して**追加**をタップ ![](https://zpzlrsnbhqsowafzujcb.supabase.co/storage/v1/object/public/post-images/media/1775212930659_szdd6f.jpeg) ホーム画面に、`manifest.json` で設定したアイコンと名前でアプリが追加されます！ ![](https://zpzlrsnbhqsowafzujcb.supabase.co/storage/v1/object/public/post-images/media/1775212939404_syl8s0.jpeg) ※androidも同様に設定してください。 --- ## アドレスバーが消える仕組み PWA の大きなメリットの一つが、**アドレスバーが表示されない**ことです。これは `manifest.json` の `display` プロパティを `"standalone"` に設定することで実現されます。ブラウザの UI が非表示になり、まるでネイティブアプリのような体験をユーザーに提供できます。 ### display の選択肢 | 値 | 説明 | |---|---| | `"standalone"` | アドレスバーなし。アプリのような見た目（おすすめ） | | `"fullscreen"` | ステータスバーも含めて完全にフルスクリーン | | `"minimal-ui"` | 最小限のブラウザ UI（戻るボタンなど）を表示 | | `"browser"` | 通常のブラウザと同じ見た目 | --- ## アイコン画像のベストプラクティス今回は既存の JPEG 画像をそのまま使いましたが、本格的に運用する場合は以下のサイズで PNG 画像を用意するのがおすすめです。 ```json "icons": [ { "src": "/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" } ] ``` - **192x192**: ホーム画面のアイコン - **512x512**: スプラッシュスクリーン（アプリ起動時の画面） --- ## まとめ PWA 化に必要な作業は、たったこれだけです。 1. **`public/manifest.json`** を作成する 2. **`app/layout.tsx`** にメタ情報を追加する個人開発したアプリを気軽に使いたい時に、いちいちブラウザで検索するのは面倒なので、ホーム画面に追加してみましょう！！ ___ ## 最後に今回、例で使用したポケモン図鑑アプリですが、以下にリンクを添付しておくのでホーム画面に追加してみてください！
- https://poke-zukan.vercel.app --- ## 参考リンク - [MDN - Progressive Web Apps](https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps) - [MDN - Web App Manifest](https://developer.mozilla.org/ja/docs/Web/Manifest)

最新記事

タグ: