プログレッシブウェブアプリのインストールや操作方法だけをご覧になりたい方は、目次に🌟マークが付いている部分をタップしてください。
すぐにジャンプできますよ！

個人サイトをそのまんまアプリにする方法

「アプリを自分で作れたらなぁ…」
インターネットで遊んでいる人なら、たいていの人がチラっと思ったことがあるのでは？
大変恐縮ではございますが、私で良ければ道案内を致します。
次のようにしてみてはいかがでしょう。

自分でWebサイトを作る
作ったWebサイトを Progressive Web Application（PWA）プログレッシブウェブアプリにする

では、プログレッシブウェブアプリの作り方をご紹介します🎵

IT知識に関する推奨レベル

「ハードウェア系」などと呼ばれる、パソコン本体の知識だけでは厳しいです。
このページは次のような方を対象として書かれています。

Webサイトの構造・公開方法の基礎的事項について把握しており、実際にやったことがある
フロントエンド技術・バックエンド技術について基礎的な知識がある
HTMLを読み書きできる
CSSもある程度は調べながら書ける
JavaScriptもある程度は調べながら書ける
スマホではなく、パソコンないしはパソコン同等の機能を持つデバイスを持っている

ていうか、このページに来る人の大多数がこのくらいかと。
いわゆる「開発者」と呼ばれる人たちですね。
しかしプログレッシブウェブアプリそのものが新しい技術ですから、これから敷居が下がってくる可能性はあります。

プログレッシブウェブアプリを作る手順

この手のWebページはたいてい「PWAとは何ぞや？」といった能書きから始まります😆ww
でも私の場合、いきなり手順から初めます。
その後で具体的なコードを掲載しましょう。
合間を縫って「PWAとは何ぞや？」というお話をさせて頂きます。

プログレッシブウェブアプリ（PWA）を作る手順は以下の通りです。
簡単に概要を説明しますね。

1. ベーシックなウェブアプリを作成: HTML, CSS, JavaScriptを使って、基本的なウェブアプリを作成します。
まずは、動作するシンプルなウェブサイトを構築しましょう。
2. HTTPSを使用: PWAはHTTPSでホストされる必要があります。
SSL証明書を取得して、ウェブサイトをHTTPSで提供しましょう。
3. マニフェストファイルを作成: manifest.json ファイルを作成して、アプリのメタデータを定義します。
これには、アプリの名前、アイコン、テーマカラー、起動URLなどが含まれます。
4. サービスワーカーを登録: service-worker.js ファイルを作成し、ウェブアプリに登録します。
これでオフライン機能やキャッシュ管理が可能になります。
5. マニフェストファイルとサービスワーカーをHTMLにリンク: index.html ファイルの <head> セクションにリンクを追加して、マニフェストファイルとサービスワーカーを登録します。
6. テストとデプロイ: アプリをテストし、PWAとして正しく動作することを確認します。
最後に、クラウドサービスを利用してデプロイします。

これが基本的なPWAの作成手順です。
だから、何はともあれ自分でWebサイトを作れないと話が始まらないんだよね。

1. ベーシックなウェブアプリを作成

【HTML, CSS, JavaScriptを使って、基本的なウェブアプリを作成します。まずは、動作するシンプルなウェブサイトを構築しましょう。】

これは説明不要でしょうね。
コンテンツがなければアプリもクソもありません。
参考までにお伝えしておくと、できる限り息の長い話題がお勧めですよ？
そもそもHTML, CSS, JavaScriptを使って基本的なウェブアプリを作成すること自体が大変な作業です。

流行りのパソコンパーツではなく、パソコンの基礎知識
流行のファッションではなく、無難な洋服選び
話題のニュースではなく、国際社会と経済の関係

こんな感じで、話題の賞味期限が短いものは避けると良いです。
旬が短い話題ばかりだと、一生懸命Webサイトを作っても3か月後には陳腐化しちゃうでしょ？

プログレッシブウェブアプリ（PWA）とは

プログレッシブウェブアプリ（PWA）とは、ウェブアプリケーションとネイティブアプリケーションの利点を組み合わせたものです。
ウェブアプリケーションというのは、簡単に言えば「ホームページ」などです。
ネイティヴアプリケーションというのは、巷でアプリアプリと呼ばれているものです。

インストール可能: PWAはユーザーがホーム画面に追加して、ネイティブアプリのように使用することができます。
オフライン対応: サービスワーカーを使用して、オフラインでも動作するように設計されています。ネットワークが不安定な状況でも使用できます。
レスポンシブ: さまざまなデバイスや画面サイズに対応するように設計されており、スマートフォン、タブレット、デスクトップなど、どんなデバイスでも快適に使えます。
プッシュ通知: プッシュ通知を利用して、ユーザーにリアルタイムで情報を提供することができます。
高速なパフォーマンス: キャッシュ機能を活用して、迅速にコンテンツを読み込むことができ、ユーザー体験を向上させます。
セキュア: HTTPSを必須とし、セキュリティを確保しています。
自動アップデート: バージョン管理と自動アップデートが行われ、ユーザーが常に最新の機能を利用できるようになっています。

PWAはこれらの特徴を活かして、ウェブの利便性とネイティブアプリのユーザーエクスペリエンスを融合させたアプリケーションです。
でも全てを導入する必要もないんですよね。
私のアプリの場合、例えばプッシュ通知は入れていません。
プッシュされてくると鬱陶しいことがあるでしょ？

2. HTTPSを使用

【PWAはHTTPSでホストされる必要があります。SSL証明書を取得して、ウェブサイトをHTTPSで提供しましょう。】

と言いたいのですが、これはもう素直にクラウドサービスを使った方がラクですよ？
言い変えると、クラウドサービスにデプロイすれば https を自動的に提供してくれます。
そうではない状況はいくらでもあるのですが、あんまり掘り下げるとキリがないし、このWebページの話題から外れてしまいます。

私が使っているのは Google App Engine です。
Google App Engineは自動的に無料のSSL証明書を生成し、HTTPSでサイトを提供するための設定を行ってくれます。
閲覧者はHTTPSを使用して、安全にウェブサイトにアクセスすることができるのです。
他のクラウドサービスなら、次のようなものがあります。

Firebase Hosting: デフォルトでSSL証明書が組み込まれており、すべてのコンテンツが安全に配信されます。
Cloud Run: 自動的にHTTPSを有効にし、安全な接続を提供します。
Azure Static Web Apps: HTTPSをサポートしており、すべての静的コンテンツが安全に配信されます。
AWS Amplify: 自動的にSSL証明書をプロビジョニングし、HTTPSを有効にします。

どのサービスを選ぶかは、他の機能やニーズに応じて決めると良いでしょう。
ただクラウドは非常に注目を集めており、仕様が変わる可能性を否定できません。
御自身でも調べるようにしてください。

このページに関する注意事項

ちょっと硬いけど、ここいらへんで注意書きをしておきますね？
たとえ詳しそうな人が話していることでも、ネットにある情報は決して鵜呑みにしない。これは「鉄則」です。

当Webサイト作成者は、例示を目的としてマークアップ及びプログラミング例を提供しており、明示または黙示にかかわらず、いかなる責任も負わないものとします。
このページは、説明されているマークアップ及びプログラミング言語、手順を作成およびデバッグするために使用される各種ツールに読者が精通していることを前提にしています。
このページは、特定の機能を説明するのに役立つ可能性がありますが、当Webサイト作成者がこれらの例を変更した上で、特定の要件を満たすために追加の機能を提供したり、システムを構築したりすることはできません。
加えて、この例の手順に従う場合は、読者の各種ファイルを事前にバックアップすることを推奨いたします。

3. マニフェストファイルを作成

【manifest.json ファイルを作成して、アプリのメタデータを定義します。これには、アプリの名前、アイコン、テーマカラー、起動URLなどが含まれます。】

ここからいよいよコードの記載です。
manifest.json はウェブアプリの名刺のようなものです。
アプリの名前、アイコン、テーマカラーなどを定義し、ホーム画面に追加するときの設定とか、アプリとして表示する際の情報を提供します。
つまり、ウェブアプリがどんなものか、どう見えるかをブラウザに教える役割を持っています。
さっそく見ていきましょう。

PWAのメタデータを定義するmanifest.json


{
 "name": "fein's App",
 "short_name": "fein's App",
 "description": "fein has transformed a static website with a simple design & simple front-end technology into a progressive web app.",
 "start_url": "/index.html",
 "display": "standalone",
 "background_color": "#ffffff",
 "theme_color": "#000000",
 "icons": [
  {
   "src": "/icons/kyabiaicon.png",
   "sizes": "192x192",
   "type": "image/png"
  },
  {
   "src": "/icons/rikuicon.png",
   "sizes": "512x512",
   "type": "image/png"
  }
 ]
}

"name": "fein's App",
アプリのフルネームです。
この名前はアプリストアやインストール時に表示されます。

"short_name": "fein's App",
アプリの短い名前です。
ホームスクリーンに追加された際に表示される名前です。

"description": "fein has transformed a static website with a simple design & simple front-end technology into a progressive web app.",
アプリの説明文です。
アプリの目的や特徴について簡単に説明しています。

"start_url": "/index.html",
アプリが起動する際に最初に読み込むURLです。
通常はアプリのホームページが指定されます。

"display": "standalone",
アプリの表示スタイルを設定します。
standalone は、アプリがネイティブアプリのように独立して表示されることを意味します。

"background_color": "#ffffff",
アプリの背景色を指定します。
初期画面の背景色として使用されます。

"theme_color": "#000000",
アプリのテーマカラーを指定します。
ブラウザやデバイスのUIに反映される色です。

"icons": [
アプリのアイコンを指定します。
以下に複数のアイコンを指定しています。

{
"src": "/icons/kyabiaicon.png",
"sizes": "192x192",
"type": "image/png"
},
192x192ピクセルのPNG画像がアイコンとして使われます。

{
"src": "/icons/rikuicon.png",
"sizes": "512x512",
"type": "image/png"
}
512x512ピクセルのPNG画像がアイコンとして使われます。
複数サイズのアイコンを指定することで、異なるデバイスや表示状況に対応できます。

manifest.json は、PWA（プログレッシブウェブアプリのことだよ？）のルートディレクトリに置くのが一般的です。
多くの静的webサイトの場合、index.html や他の主要なファイルと同じディレクトリに配置します。
別の場所でも動作すると思いますが、上述したように新しい技術ですから、セオリーに習った方が良いと思います。
次のような理由があるんだよね。

アクセスの容易さ: manifest.json ファイルは、ブラウザがPWAとしてアプリを認識するために読み込む必要があります。
ルートディレクトリに配置することで、<link rel="manifest" href="/manifest.json"> タグを使って簡単に参照できます。
標準的な配置: 多くのガイドラインやドキュメントが、manifest.json をルートディレクトリに配置することを推奨しています。
他の開発者がプロジェクトを理解しやすくなります。
簡潔な構造: ファイル構造がシンプルで分かりやすくなります。
PWAの重要なファイルが一箇所に集まっているため、管理や更新が容易です。

それから index.html ファイルで manifest.json をリンクすると、ブラウザは manifest.json を正しく読み込み、PWAとしての機能を提供することができます。

専門的なページは少々読みにくいですが…お時間があれば目を通すことをお勧めします。

個人サイトをアプリとしてリリースできるかも？！

PWAは言葉通り、アプリです。
だからアプリとしてリリースできるのですよ。
リリース先のストアには次のものがあります。

Microsoft Store
Google Play
Apple Store
Meta Quest Store

特にGoogle PlayやApple Storeはお馴染みですよね？
これらのストアではPWAをアプリとして公開し、ユーザーがインストールして利用可能にできます。
プログレッシブウェブアプリは、マジもんのアプリなんです🥱
アプリとしての要件を満たして審査を通しつつ、開発者アカウントを作って費用を支払えば、個人で作ったWebサイトをアプリ配信できちゃいます。
そういう意味でも、しっかりとWebサイトを作って頂くのが最優先ですよね。

4. サービスワーカーを登録

【service-worker.js ファイルを作成し、ウェブアプリに登録します。これでオフライン機能やキャッシュ管理が可能になります。】

次はJavaScriptです。
Service-worker.jsは、ウェブアプリをオフラインでも使えるようにするスクリプトです。
ウェブページをバックグラウンドで操作し、ネットが無くても以前見たページを表示したり、プッシュ通知を送ったりできます。

オフラインキャッシュとバックグラウンドタスクを管理するservice-worker.js


const CACHE_NAME = 'fein-cache-v1';
const urlsToCache = [
 '/index.html'
];

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

self.addEventListener('fetch', event => {
 event.respondWith(
  caches.match(event.request)
   .then(response => {
    return response || fetch(event.request);
   })
 );
});

上述したように、このコードはウェブアプリがオフラインでも動作できるようにするためのものです。
サービスワーカーは、ブラウザのバックグラウンドで実行され、キャッシュを管理して、ウェブページのリソースをオフラインでも提供できるようにします。
とは言え、私はオフライン動作機能については、さほど重視していません。
だからキャッシュするURLのリストも index.html のみ。

あまり多くをキャッシュさせてもユーザーのデバイスに負担がかかるし、スマホの通信は常に通ってるもんでしょ？
それより、ブラウザのUIではなくアプリのUIとして表示させることが優先順位高いと考えていますね。
単純に見やすく、コンテンツとしてのクオリティーが高いからです。
加えて、プログレッシブウェブアプリの実装方法は、マルチクラウドを視野に入れると身動きが取りやすいということもあるよね。

キャッシュ名の設定: const CACHE_NAME = 'fein-cache-v1';
キャッシュを識別するための名前です。
バージョン管理に使います。
キャッシュするURLのリスト: const urlsToCache = [
'/index.html'
];
キャッシュに追加するリソースのURLをリスト化しています。
今回は index.htmlだけをキャッシュします。
インストールイベントのリスナー: self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => {
return cache.addAll(urlsToCache);
})
);
});
サービスワーカーがインストールされるときに発生するイベントです。; - event.waitUntil：インストールが完了するまで待機させます。; - caches.open(CACHE_NAME)：指定されたキャッシュ名でキャッシュを開きます。; - cache.addAll(urlsToCache)：リスト内のすべてのURLをキャッシュに追加します。
フェッチイベントのリスナー: self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => {
return response || fetch(event.request);
})
);
});
ウェブページのリソースがリクエストされるときに発生するイベントです。; - event.respondWith：カスタムレスポンス（ここではキャッシュされたリソース）を返すために使用されます。; - caches.match(event.request)：リクエストされたリソースがキャッシュにあるかどうかをチェックします。; - response がキャッシュに存在する場合はそれを返し、存在しない場合はネットワークからリクエストします。

私も様子を見つつ、あるいは古いキャッシュを削除するスクリプトとかも入れると良いだろうなーと思っているところです。
そもそもindex.html 以外のURLもキャッシュすることで、オフラインでもより多くのページやリソースを利用できるようになるのですから。
オンライン時の高速なページ読み込みや、ネットワーク負荷の軽減も期待できるでしょう。
それらを鑑みた上で、利用者のストレージを圧迫しないバランスを考えていくわけです。
普通にやるなら、スタイルシート（CSS）、JavaScriptファイル、画像ファイルなどもキャッシュすることをおすすめします。

プログレッシブウェブアプリ（PWA）の将来性

PWAは比較的新しい技術であり、ウェブアプリケーションの開発とユーザー体験を大きく進化させるものとして注目されています。
特に次のようなポイントがあるでしょうね。

ユーザーエクスペリエンスの向上: PWAはネイティブアプリのようにスムーズでレスポンシブな操作感を提供しつつ、ウェブのアクセス性を維持しています。
これが本当に大切なんですよ。
ウェブのアクセス性を維持できるのです。
これによって、ユーザーはデバイスに依存せずに高品質な体験を享受できます。
アップデートの柔軟性: PWAはウェブベースのため、開発者が更新を行うとユーザーは自動的に最新バージョンを利用できます。
ユーザーはアプリのアップデートに付き合うことなく、常に最新の機能やセキュリティ対策が適用されます。
マルチプラットフォーム対応: PWAはブラウザさえあれば、どのプラットフォームでも同じように動作します。
開発者は一度の開発で多くのデバイスに対応可能です。
これはまさに、いま私がやっていることです！

これらの理由からPWAは非常に先進的であり、従来のウェブアプリやネイティブアプリの制約を克服する新しいアプローチとして注目を集めているんですよね。

5. マニフェストファイルとサービスワーカーをHTMLにリンク

【index.html ファイルの <head> セクションにリンクを追加して、マニフェストファイルとサービスワーカーを登録します。】

ここはちょっと説明が必要なんだよ…
基本的には、index.htmlだけにマニフェストファイルとサービスワーカーのリンクを追加すれば十分です。
なぜなら、サービスワーカーは一度インストールされると、指定したスコープ内の全てのページに対して機能するからです。
ただし、注意すべきポイントがいくつかあります。

スコープの設定
サービスワーカーのスコープ（影響範囲）は、サービスワーカーの登録時に指定できます。
通常はサービスワーカーが置かれたディレクトリとそのサブディレクトリがスコープに含まれます。例えば、index.htmlに次のように記述する場合を考えてみましょう。


<script>
 if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
   .then(registration => {
    console.log('ServiceWorker registration successful with scope: ', registration.scope);
   })
   .catch(error => {
    console.log('ServiceWorker registration failed: ', error);
   });
 }
</script>

この場合、/service-worker.js が置かれているディレクトリとそのサブディレクトリがスコープに含まれます。

2. マニフェストファイルのリンク
マニフェストファイルはアプリの外観や動作に関するメタデータを提供するため、主要なHTMLファイル（例えば、index.html）にリンクを追加すればOKです。
ほとんどのブラウザは、一度マニフェストファイルを読み込めば、その設定をすべてのページに適用します。

ここまでで、index.html にマニフェストファイルとサービスワーカーのリンクを追加すれば、他のページにも適用されることが分かります。
ただし、サービスワーカーのスコープを確認して、必要に応じて適切に設定することが重要になってくるんです。
サービスワーカーの「スコープ」とは、サービスワーカーが管理・操作できる範囲（URLの範囲）のことを指します。
簡単に言うと、サービスワーカーが影響を与えることができるウェブページやリソースの範囲です。
ちょっと説明しますね？

スコープの範囲: サービスワーカーのスコープは、サービスワーカーがどのディレクトリやファイルに対して動作するかを決定します。; 例えば、/service-worker.js がルートディレクトリ（/）に置かれている場合、そのスコープはルートディレクトリ以下の全てのファイルとディレクトリになります。
スコープの設定: サービスワーカーの登録時にスコープを指定することができます。

次の例では、スコープを明示的に設定しています。


navigator.serviceWorker.register('/service-worker.js', { scope: '/' })
  .then(registration => {
    console.log('ServiceWorker registration successful with scope: ', registration.scope);
  })
  .catch(error => {
    console.log('ServiceWorker registration failed: ', error);
  });

ここではスコープをルートディレクトリに設定しているため、ルートディレクトリ以下のすべてのファイルに対してサービスワーカーが機能します。
サービスワーカーを一度登録すれば、そのスコープ内の全てのページで機能するため、効率的にキャッシュ管理やオフライン機能を提供できますよね。
また、スコープ内のリソースがキャッシュされることで、オフライン時でも素早くページが読み込まれます。
しかしこのスコープが広すぎると、不要なファイルやリソースまでキャッシュしてしまう可能性があるため、適切な範囲を設定することが重要ということになります。

ここ、けっこう難しいのですよ。
私もどうするのが一番良いのか、迷っています。
とりあえず今は、全てのHTMLファイルにマニフェストファイルとサービスワーカーをリンクしています。
そうやって多くのHTMLファイルに同じコードを追加してしまったとしても、大きな問題は起きないからです。
次のようなことを考慮しているんだよね。

冗長なコード: すべてのHTMLファイルに同じコードが追加されると、冗長になるでしょうね。
でも、機能的には問題ありません。
一貫性の確保: この方法で、すべてのページが確実にサービスワーカーとマニフェストファイルを利用できるようになります。
パフォーマンス: 多少のパフォーマンスに影響があるかもしれませんが、今のブラウザはこの程度のスクリプトの重複を効率的に処理します。

あるいは、index.html のみに追加して他のページでは削除しても良いかもしれませんね？
しかし、すべてのHTMLファイルに追加されていても、正常に動作することが期待されます。
まぁここに関しては、今後の課題にしましょう。
ではでは、実際のソースコードを見ていきます。

PWAのメタデータを設定し、サービスワーカーを登録するためのコード


<head>
<!--他のhead要素は省略-->
 <link rel="manifest" href="/manifest.json">

 <script>
  if ('serviceWorker' in navigator) {
   navigator.serviceWorker.register('/service-worker.js')
    .then(registration => {
     console.log('ServiceWorker registration successful with scope: ', registration.scope);
    })
    .catch(error => {
     console.log('ServiceWorker registration failed: ', error);
    });
  }
 </script>
<!--他のhead要素は省略-->
</head>

このコードはウェブアプリのマニフェストファイルをリンクし、サービスワーカーを登録するためのものです。
サービスワーカーの登録が成功すると、ブラウザのコンソールに成功メッセージが表示され、失敗した場合はエラーメッセージが表示されます。

次に、<script>から </script> で囲まれている部分は、サービスワーカーを登録するためのスクリプトです。
サービスワーカーは、オフライン機能やプッシュ通知などを提供するための背景スクリプトです。
if ('serviceWorker' in navigator) は、ブラウザがサービスワーカーをサポートしているかどうかを確認しています。
サポートされている場合にのみ、以下のコードが実行されます。

navigator.serviceWorker.register('/service-worker.js')
この行は、/service-worker.js ファイルをサービスワーカーとして登録しています。
ここでサービスワーカーがブラウザにインストールされ、管理できるようになります。

.then(registration => {
console.log('ServiceWorker registration successful with scope: ', registration.scope);
})
サービスワーカーの登録が成功すると、この部分が実行されます。
console.log は、登録が成功したことと、そのスコープ（適用範囲）をブラウザのコンソールに表示します。

.catch(error => {
console.log('ServiceWorker registration failed: ', error);
})
サービスワーカーの登録が失敗した場合、この部分が実行されます。
console.log は、失敗したこととそのエラー内容をブラウザのコンソールに表示します。

このセクションは少し長引いてしまったね。
あともう一息です。

6. テストとデプロイ

【アプリをテストし、PWAとして正しく動作することを確認します。最後に、クラウドサービスを利用してデプロイします。】

初めてアプリ化するときには、ちゃんとローカルサーバを立てたほうが良いかな。
Webサイト制作の効率を上げるPythonというページに「PythonによるHTTPサーバー構築」というセクションがあるので、そちらを参照してください。
Visual Studio Codeを触ってみようというページにある Live Server はあくまでも確認用みたいなもんだからさ。
しっかりとブラウザで動きをチェックしたほうが良いということです。
いったんやってしまえば、次からは Live Server だけでいけるよ。

🌟プログレッシブウェブアプリを動かしてみよう

普通のアプリと変わらないから、特に難しいことはないですよ？
ここまで長々と書いてきた内容は、開発者側の都合です。
プログレッシブウェブアプリにおいて、スマホとパソコンで共通しているのは、ブラウザから直接インストールできる点ですかね。
いちいちApple storeとかに行かなくて良いです🥱
アンインストールも自由。
どっちみち普通のWebサイトとして機能するのだから、より広い画面で見たい時なんかにインストールしていただければ。

このサイトはソースコードやVS Codeの解説、加えてアナザーエデンのグラスタ表あたりに来訪者が多いです。
特にソースコードの解説ページは、ブラウザで見るのが窮屈なケースもあるでしょうから。
ユーザーの利便性を向上させるための実装ですよね。

🌟スマホから見たプログレッシブウェブアプリ

初めて私のサイトに来訪された方は、あるいはインストールを促すポップアップが出る可能性もあります。
その時はとりあえずキャンセルで良いと思う。

課題に感じているのは、後からインストールする場合です。
プログレッシブウェブアプリそのものが新しい技術であるため、ブラウザの操作も今後は変わっていく可能性があります。
現在の操作もちょっと分かりにくいよね…
ホームへショートカットを作る機能をタップすると、インストールとショートカットの両方の選択肢が出てくる。

このサイトに限らず、現代ではモバイルデバイスからのアクセスが圧倒的に多いはずです。
だからレスポンシブデザインが必須条件なわけで。
いずれにしても画面は小さいので、狭苦しいと感じる方はインストールしてくださいな。
スマホの容量はほっとんど食わないようにしているので。

🌟パソコンから見たプログレッシブウェブアプリ

パソコンのアプリ、というかソフトウェアとしてインストールもできます。
プログレッシブウェブアプリへ対応したWebサイトへアクセスすると、アドレスバーの右側にタイルみたいなボタンが出てくるのですよ。

あとはクリックをポンポンしていくだけでインストールできます。
普段からパソコンに慣れている方なら、余裕過ぎると思う。
Webサイトを見やすくするために額縁を取り付けるようなイメージですよね。

マジのソフトウェアとして動作するので、スタートボタンやタスクバーにも登録できちゃいます。
でもプログレッシブウェブアプリの本性は静的webサイトなんだよ。

パソコンの場合、全画面表示なんかも簡単にできますよね。
だからインストールしてもスマホほど利便性の向上は感じられないかも。

ちなみにアプリのサイズもマウスで簡単に調整できます。
このサイトはレスポンシブデザインなので、ウィンドウを縦長にすれば自動的にモバイルデバイスとしての表示形態に切り替わります。

これからも記載は増えるだろうなー

プログレッシブウェブアプリは、まだまだこれからの技術です。
中にはネイティヴアプリが減っていってプログレッシブウェブアプリが増えていくなんていう専門家もいるよね。
実際にどうなるかは分からないけど、開発者側にもユーザー側にもメリットがいっぱいあるから、発展していくと見て間違いないでしょう。
このページも、どんどん拡張していくことになるでしょうね？
あんまり大きなページになってきたら、またどこかで区切って分けていくさ。

サイトマップ

全ページをリスト化したサイトマップも用意していますが、けっこうなページ数があります。
下記の「カテゴリー分けサイトマップ」のほうが使いやすいでしょう。

アナザーエデン関連ページ・サイトマップ

アナザーエデンの強敵戦やストーリーコンテンツのリスト、お勧めバッジなどを掲載したコーナーです。
期間限定のない普通のRPGですので、初心者でも安心して続けていけるゲームとなっています。
もっとも重要なグラスタについては、場所別に網羅した表があります。

個人サイトのホスティングとコンテンツ作成

個人でウェブサイトを作るにはどうすればいいか。
HTML・CSS・JavaScriptの書き方はもちろん、無料かつ広告なしでホームページを作る方法を掲載したコーナーです。
Webデザインやレイアウトについても書いてあります。

魚釣りなどアウトドアのエリア

ゲームとパソコンだけじゃなく、アウトドアも趣味なんです。
このコーナーでは魚釣りの記録とか、魚料理のレシピ、はたまたサイクリングなどなど。
アウトドアに関連するコンテンツが詰め込まれています。