PWAの作り方｜Webアプリをネイティブ風に

よう、みんな。きこにいだよ。

今日は、俺が今一番注目してる技術の一つ、「PWA（Progressive Web App）」について、みっちり語らせてもらうぜ。

俺の人生、ジェットコースターみたいなもんでさ。元年商1.6億から、2億の負債抱えて自己破産、うつ病でどん底まで落ちた。そこからTikTokで再起して、今じゃ株式会社終焉祝祭の代表、そしてコミュニティ「アジト」の運営までやってる。この経験を通して、一つだけ確信したことがある。それは「変化に対応できる人間だけが生き残る」ってことだ。

そして、今のWeb業界における最大の変化の一つが、このPWAだと俺は思ってる。

PWAって、ぶっちゃけ何がすごいの？

みんな、スマホでアプリ使うだろ？ App StoreとかGoogle Playからダウンロードして、ホーム画面にアイコンがあって、タップしたらサクッと起動する。通知も来るし、オフラインでも使えるやつもある。あれって「ネイティブアプリ」って呼ばれてる。

一方、WebサイトはブラウザでURL叩いてアクセスするよな。別に悪いってわけじゃないけど、ネイティブアプリと比べると、ちょっと使い勝手が劣る部分もあった。

PWAは、このWebサイトとネイティブアプリの「いいとこ取り」したような技術なんだ。Webサイトなのに、ネイティブアプリみたいな使い心地を提供できる。これ、めちゃくちゃ革命的だと思わないか？

PWAのメリット、具体的にいくぞ

俺がPWAに惚れ込んだ理由は、大きく分けて以下の5つだ。

インストール不要、なのにホーム画面に追加可能: これが一番のキモだよな。ユーザーはApp StoreとかGoogle Playを経由せずに、Webサイトを訪れるだけで「ホーム画面に追加」できる。このハードルの低さが半端ない。俺も新しいサービスを立ち上げる時、ユーザー獲得の障壁をいかに下げるかを常に考えてるから、このメリットはマジでデカい。
オフライン対応: 電波が悪くても、最悪オフラインでも使えるようにできる。これって、ユーザー体験としてはめちゃくちゃ大きい。俺がうつ病で引きこもってた時、ネットが繋がらないとマジで世界から切り離された気分になったから、常にアクセスできるってのは精神衛生上も大事なんだよ。
高速動作: PWAはキャッシュをうまく利用するから、一度アクセスすれば、次からの表示が爆速になる。Webサイトがなかなか表示されないストレスって、みんな経験あるだろ？あのイライラから解放されるんだ。
プッシュ通知: ネイティブアプリみたいに、ユーザーに直接プッシュ通知を送れるようになる。これ、リエンゲージメント率を高める上でめちゃくちゃ重要。俺もTikTokでライブ通知とか流してるけど、直接ユーザーにアプローチできる手段は多ければ多いほどいい。
開発コストが低い: ここがビジネス的に一番デカいポイントかもしれない。ネイティブアプリって、iOS用とAndroid用でそれぞれ開発しないといけないだろ？開発期間もコストも倍かかる。PWAなら、Webサイトを一つ作るだけで、両方のプラットフォームに対応できるんだ。俺が2億の負債抱えた経験から言わせてもらうと、開発コストの最適化は企業の生命線だ。

俺のビジネスでPWAをどう使うか？

俺が運営してるコミュニティ「アジト」でも、PWAの導入を真剣に検討してる。例えば、メンバー限定の記事や動画を配信するプラットフォームとして。プッシュ通知で新しいコンテンツの更新を知らせたり、オフラインでも読めるようにしたり。

あと、俺がこれから仕掛けていきたい新しいサービスでも、PWAを積極的に活用していくつもりだ。ユーザーに「アプリをダウンロードしてください」って言わずに、Webサイトを見に来た人に、そのまま「ホーム画面に追加」してもらう。この動線は、スタートアップにとってめちゃくちゃ有利に働くはずだ。

PWAの作り方、ざっくり解説！

じゃあ、具体的にPWAってどうやって作るんだ？ここからは、ちょっとだけ技術的な話になるけど、心配すんな。めちゃくちゃ難しいわけじゃない。

PWA化するために必要な要素は、主に以下の3つだ。

HTTPS接続: これ、絶対条件。Webサイト全体がSSL/TLSで暗号化されてないとPWA化はできない。今はLet's Encryptとか無料で使えるものもあるから、まだHTTPS化してないサイトはすぐにやれ。セキュリティは信頼の基本だ。

Web App Manifestファイル: これがPWAの「設定ファイル」みたいなもんだ。JSON形式で書かれていて、ホーム画面に表示されるアプリ名、アイコン、テーマカラー、起動時の表示モード（全画面表示とか）なんかを定義する。

{
  "name": "アジト",
  "short_name": "アジト",
  "description": "きこにいが運営する秘密基地",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

こんな感じで、サイトのルートディレクトリにmanifest.jsonとかの名前で置いて、HTMLの<head>タグ内でリンクするだけだ。

<link rel="manifest" href="/manifest.json">

Service Worker: これがPWAの心臓部だ。JavaScriptファイルで書かれていて、ブラウザとネットワークの間に入って、キャッシュの管理やオフライン対応、プッシュ通知なんかを実現する。

Service Workerのコードは、ちょっと複雑になるから、ここでは概念だけ説明する。
- インストールイベント: Service Workerが初めて登録された時に発生するイベント。ここで、オフラインでも表示したいファイル（HTML、CSS、JavaScript、画像など）をキャッシュに保存する処理を書く。
- フェッチイベント: ブラウザがリソースをリクエストした時に発生するイベント。ここで、キャッシュにデータがあればキャッシュから返したり、なければネットワークから取得してキャッシュに保存したり、といった処理を書く。これでオフライン対応や高速化を実現するんだ。
- アクティベートイベント: Service Workerが有効化された時に発生するイベント。古いキャッシュの削除なんかに使う。
Service Workerを導入するには、まずJavaScriptでService Workerを登録するコードを書く。
```
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then(registration => {
        console.log('Service Worker registered: ', registration);
      })
      .catch(error => {
        console.log('Service Worker registration failed: ', error);
      });
  });
}
```
そして、service-worker.jsというファイルに、実際のキャッシュ戦略などを記述していくんだ。

例えば、シンプルなオフラインキャッシュの例だとこんな感じ。
```
const CACHE_NAME = 'my-pwa-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/styles/main.css',
  '/scripts/main.js',
  '/images/logo.png'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        if (response) {
          return response; // キャッシュがあればそれを返す
        }
        return fetch(event.request); // なければネットワークから取得
      })
  );
});
```
これはあくまで基本的な例で、実際にはもっと複雑なキャッシュ戦略（ネットワーク優先、キャッシュ優先、Stale-while-revalidateなど）を組むことになる。

ツールを使えばもっと簡単！

「おいおい、きこにい。なんかコードがゴリゴリ出てきて、俺にはハードル高いぜ」って思ったやつもいるかもしれないな。安心しろ。

最近は、PWA化をサポートしてくれるフレームワークやライブラリもたくさんある。

Workbox: Googleが提供してるService Workerのライブラリ。これを使えば、Service Workerの複雑な処理を簡単に書けるようになる。俺もこれを使うつもりだ。
Next.jsやNuxt.jsなどのモダンフレームワーク: これらは、PWA化するための設定が最初から用意されてたり、プラグインを使えば簡単に導入できたりする。
WordPressプラグイン: WordPressサイトなら、PWA化用のプラグインもいくつかあるから、それを使えばコードを書かずにPWA化できる場合もある。

俺も最初は全部自分でやろうとするタイプだけど、効率を考えたら、使えるツールはガンガン使うべきだ。2億の負債を抱えた経験から学んだのは、完璧主義は諸刃の剣だってこと。スピードもめちゃくちゃ大事なんだ。

PWAのデメリットも知っておけ！

なんでもかんでもPWAが良い！ってわけじゃない。デメリットもいくつかある。

Appleの対応が遅かった（過去形）: 以前はiOSでのPWAサポートがAndroidに比べて限定的だった。特に、ホーム画面への追加機能がSafariからしかできなかったり、通知周りが弱かったり。でも、最近はAppleもかなり力を入れてきて、iOS 16.4以降はプッシュ通知もサポートされたり、かなり改善されてる。
ネイティブアプリにしかできない機能もある: 例えば、特定のハードウェア機能（NFCとか、高精度なBluetooth制御とか）へのアクセスは、まだネイティブアプリの方が優れてる場合が多い。
アプリストアでの露出がない: これはメリットの裏返しでもあるんだけど、App StoreやGoogle Playでユーザーに発見される機会はなくなる。Web検索やSNSでの集客がメインになる。

この辺りは、自分のサービスやビジネスモデルに合わせて、PWAが最適なのか、それともネイティブアプリが必要なのか、あるいは両方を組み合わせるのか、しっかりと見極める必要がある。

まとめ

PWAは、Webサイトの良さとネイティブアプリの良さを融合させた、これからのWebの形だと俺は確信してる。

俺みたいに、一度どん底まで落ちて、そこから這い上がってきた人間だからこそわかる、変化の重要性。新しい技術をいち早く取り入れて、自分のビジネスに活かす。これが、俺が生き残るための戦略だ。

もし、お前がWebサービスをやってるなら、PWA化は絶対に検討すべきだ。ユーザー体験の向上、エンゲージメント率の向上、そして開発コストの削減。これらを同時に実現できるPWAは、マジで「アリ」だ。

俺のコミュニティ「アジト」でも、PWAの導入を進めて、メンバーにより良い体験を提供していくつもりだ。新しいWebの波に乗り遅れるなよ！

じゃあな！

PWAの作り方｜Webアプリをネイティブ風に

よう、みんな。きこにいだよ。

今日は、俺が今一番注目してる技術の一つ、「PWA（Progressive Web App）」について、みっちり語らせてもらうぜ。

そして、今のWeb業界における最大の変化の一つが、このPWAだと俺は思ってる。

PWAって、ぶっちゃけ何がすごいの？

PWAのメリット、具体的にいくぞ

俺がPWAに惚れ込んだ理由は、大きく分けて以下の5つだ。

インストール不要、なのにホーム画面に追加可能: これが一番のキモだよな。ユーザーはApp StoreとかGoogle Playを経由せずに、Webサイトを訪れるだけで「ホーム画面に追加」できる。このハードルの低さが半端ない。俺も新しいサービスを立ち上げる時、ユーザー獲得の障壁をいかに下げるかを常に考えてるから、このメリットはマジでデカい。
オフライン対応: 電波が悪くても、最悪オフラインでも使えるようにできる。これって、ユーザー体験としてはめちゃくちゃ大きい。俺がうつ病で引きこもってた時、ネットが繋がらないとマジで世界から切り離された気分になったから、常にアクセスできるってのは精神衛生上も大事なんだよ。
高速動作: PWAはキャッシュをうまく利用するから、一度アクセスすれば、次からの表示が爆速になる。Webサイトがなかなか表示されないストレスって、みんな経験あるだろ？あのイライラから解放されるんだ。
プッシュ通知: ネイティブアプリみたいに、ユーザーに直接プッシュ通知を送れるようになる。これ、リエンゲージメント率を高める上でめちゃくちゃ重要。俺もTikTokでライブ通知とか流してるけど、直接ユーザーにアプローチできる手段は多ければ多いほどいい。
開発コストが低い: ここがビジネス的に一番デカいポイントかもしれない。ネイティブアプリって、iOS用とAndroid用でそれぞれ開発しないといけないだろ？開発期間もコストも倍かかる。PWAなら、Webサイトを一つ作るだけで、両方のプラットフォームに対応できるんだ。俺が2億の負債抱えた経験から言わせてもらうと、開発コストの最適化は企業の生命線だ。

俺のビジネスでPWAをどう使うか？

PWAの作り方、ざっくり解説！

じゃあ、具体的にPWAってどうやって作るんだ？ここからは、ちょっとだけ技術的な話になるけど、心配すんな。めちゃくちゃ難しいわけじゃない。

PWA化するために必要な要素は、主に以下の3つだ。

HTTPS接続: これ、絶対条件。Webサイト全体がSSL/TLSで暗号化されてないとPWA化はできない。今はLet's Encryptとか無料で使えるものもあるから、まだHTTPS化してないサイトはすぐにやれ。セキュリティは信頼の基本だ。

{
  "name": "アジト",
  "short_name": "アジト",
  "description": "きこにいが運営する秘密基地",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

こんな感じで、サイトのルートディレクトリにmanifest.jsonとかの名前で置いて、HTMLの<head>タグ内でリンクするだけだ。

<link rel="manifest" href="/manifest.json">

Service Worker: これがPWAの心臓部だ。JavaScriptファイルで書かれていて、ブラウザとネットワークの間に入って、キャッシュの管理やオフライン対応、プッシュ通知なんかを実現する。

Service Workerのコードは、ちょっと複雑になるから、ここでは概念だけ説明する。
- インストールイベント: Service Workerが初めて登録された時に発生するイベント。ここで、オフラインでも表示したいファイル（HTML、CSS、JavaScript、画像など）をキャッシュに保存する処理を書く。
- フェッチイベント: ブラウザがリソースをリクエストした時に発生するイベント。ここで、キャッシュにデータがあればキャッシュから返したり、なければネットワークから取得してキャッシュに保存したり、といった処理を書く。これでオフライン対応や高速化を実現するんだ。
- アクティベートイベント: Service Workerが有効化された時に発生するイベント。古いキャッシュの削除なんかに使う。
Service Workerを導入するには、まずJavaScriptでService Workerを登録するコードを書く。
```
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then(registration => {
        console.log('Service Worker registered: ', registration);
      })
      .catch(error => {
        console.log('Service Worker registration failed: ', error);
      });
  });
}
```
そして、service-worker.jsというファイルに、実際のキャッシュ戦略などを記述していくんだ。

例えば、シンプルなオフラインキャッシュの例だとこんな感じ。
```
const CACHE_NAME = 'my-pwa-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/styles/main.css',
  '/scripts/main.js',
  '/images/logo.png'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        if (response) {
          return response; // キャッシュがあればそれを返す
        }
        return fetch(event.request); // なければネットワークから取得
      })
  );
});
```
これはあくまで基本的な例で、実際にはもっと複雑なキャッシュ戦略（ネットワーク優先、キャッシュ優先、Stale-while-revalidateなど）を組むことになる。

ツールを使えばもっと簡単！

「おいおい、きこにい。なんかコードがゴリゴリ出てきて、俺にはハードル高いぜ」って思ったやつもいるかもしれないな。安心しろ。

最近は、PWA化をサポートしてくれるフレームワークやライブラリもたくさんある。

Workbox: Googleが提供してるService Workerのライブラリ。これを使えば、Service Workerの複雑な処理を簡単に書けるようになる。俺もこれを使うつもりだ。
Next.jsやNuxt.jsなどのモダンフレームワーク: これらは、PWA化するための設定が最初から用意されてたり、プラグインを使えば簡単に導入できたりする。
WordPressプラグイン: WordPressサイトなら、PWA化用のプラグインもいくつかあるから、それを使えばコードを書かずにPWA化できる場合もある。

PWAのデメリットも知っておけ！

なんでもかんでもPWAが良い！ってわけじゃない。デメリットもいくつかある。

Appleの対応が遅かった（過去形）: 以前はiOSでのPWAサポートがAndroidに比べて限定的だった。特に、ホーム画面への追加機能がSafariからしかできなかったり、通知周りが弱かったり。でも、最近はAppleもかなり力を入れてきて、iOS 16.4以降はプッシュ通知もサポートされたり、かなり改善されてる。
ネイティブアプリにしかできない機能もある: 例えば、特定のハードウェア機能（NFCとか、高精度なBluetooth制御とか）へのアクセスは、まだネイティブアプリの方が優れてる場合が多い。
アプリストアでの露出がない: これはメリットの裏返しでもあるんだけど、App StoreやGoogle Playでユーザーに発見される機会はなくなる。Web検索やSNSでの集客がメインになる。

まとめ

PWAは、Webサイトの良さとネイティブアプリの良さを融合させた、これからのWebの形だと俺は確信してる。

俺のコミュニティ「アジト」でも、PWAの導入を進めて、メンバーにより良い体験を提供していくつもりだ。新しいWebの波に乗り遅れるなよ！

じゃあな！

PWAの作り方｜Webアプリをネイティブ風に

PWAって、ぶっちゃけ何がすごいの？

PWAのメリット、具体的にいくぞ

俺のビジネスでPWAをどう使うか？

PWAの作り方、ざっくり解説！

ツールを使えばもっと簡単！

PWAのデメリットも知っておけ！

まとめ

RELATED POSTS

PWAの作り方｜Webアプリをネイティブ風に

PWAって、ぶっちゃけ何がすごいの？

PWAのメリット、具体的にいくぞ

俺のビジネスでPWAをどう使うか？

PWAの作り方、ざっくり解説！

ツールを使えばもっと簡単！

PWAのデメリットも知っておけ！

まとめ

RELATED POSTS