OJapp Guide

1P1Aとは？1ページを1アプリとして扱うPWA設計

スマホのホーム画面に複数のWebページを置くイメージ

1P1Aは、One Page. One App.の略です。

その名前の通り、1つのWebページを1つのAppとして扱う考え方です。

一般的なPWAでは、サイト全体をひとつのAppとしてまとめる形がよく使われます。 でも、Webサイトの中には「このページだけでひとつの道具として成立している」というケースがけっこうあります。

たとえば、タイマー、画像加工ツール、計算ツール、予約ページ。

こういうページは、毎回サイトのトップページから探して開くより、そのページ自体をホーム画面に置いた方が早いです。

1P1Aは、そんな使い方を前提にしたPWAの設計です。

1P1Aでは「サイト」ではなく「ページ」がAppになる

1P1Aで一番大事なのは、何をひとつのAppとして見るかです。

たとえば、ひとつのサイトに次のようなページがあるとします。

サイト運営側から見ると、全部同じドメインにあるページです。

でも使う側から見ると、それぞれ役割の違う道具です。

「タイマーを使いたい」と思ったときに、トップページを開いてからタイマーを探す必要はありません。

タイマーのページそのものがホーム画面にあれば、アイコンを押すだけで直接開けます。

このページそのものを入口にするのが、1P1Aです。

1S1Aとの違いは、Appとして扱う範囲

1P1Aを理解するときは、1S1Aと比べると分かりやすいです。

1S1Aは、One Site. One App. つまり、サイト全体をひとつのAppとして扱います。

一方、1P1Aは、One Page. One App. ページごとに別のAppとして扱います。

どちらが優れているという話ではありません。

サイト全体でひとつのサービスとして使うなら1S1Aが自然です。

逆に、ページ単位で役割がはっきり分かれているなら1P1Aの方が使いやすいことがあります。

Webページごとに役割を分けるイメージ

1P1Aではページごとに名前・アイコン・起動URLを持たせる

1P1Aでは、各ページを別のAppとして扱うため、ページごとに入口の情報を持たせます。

たとえば、同じサイト内にあるページでも、

のように、それぞれ別の見た目でホーム画面へ置けます。

URLは同じドメインでも、使う側から見ると別の道具として扱えます。

1P1Aで重要になるstart_url: "."

OJappの1P1Aでは、ページ単位で起動するために start_url: "." を使います。

この指定は、今いるページを基準に起動URLを決める考え方です。

たとえば、あるページでManifestを読み込んだとき、そのページを基準にホーム画面から起動できます。

これによって、ひとつのサイト内に複数のページがあっても、それぞれのページを別の入口として扱いやすくなります。

OJappでは、PC・Android・iPhoneでページ単位のホーム画面追加を実機確認しています。

1P1Aが向いているページ

1P1Aは、ページ単体で役割が完結しているものと相性がいいです。

たとえば、こんなページです。

「このページをまた使いたい」と思うものなら、1P1Aに向いています。

逆に、サイト内を何ページも移動しながら使うサービスなら、サイト全体をひとつのAppとして扱う1S1Aの方が自然な場合もあります。

ページごとにアイコンを変えられるのも大きい

1P1Aでは、ページごとに別のアイコンを持たせられます。

これは見た目の話だけではありません。

ホーム画面に並んだときに、何のページなのか一目で分かるようになります。

たとえば、全部同じサイトロゴだと、 「どれがタイマーで、どれが画像ツールだったっけ？」 となりやすいです。

それぞれの機能に合ったアイコンなら、見ただけで役割が分かります。

ページごとに意味を持たせるという1P1Aの考え方は、ホーム画面の見た目とも相性がいいです。

機能ごとに違うアイコンをホーム画面へ置くイメージ

1P1Aは「小さなWebツール」と特に相性がいい

個人開発をしていると、小さなWebツールを作ることがよくあります。

わざわざApp Storeへ出すほどではない。 でも、ブラウザで毎回検索して使うには少し面倒。

そういうツールをホーム画面に置くと、かなり使いやすくなります。

ページそのものが完成した機能なら、サイト全体をAppにする必要はありません。

そのページだけを入口にすればいい。

1P1Aは、そういう小さなWeb機能をホーム画面へ持ってくるときに分かりやすい設計です。

WordPressの記事や商品にも使える

1P1AはWebツールだけの考え方ではありません。

WordPressの記事や商品ページも、ページ単位で見ればひとつの入口として扱えます。

たとえば、よく読む記事をそのままホーム画面に置いたり、特定の商品ページを専用アイコンで置いたりすることもできます。

OJappのWordPress向けPluginでも、このページ単位の考え方を使っています。

サイト全体をひとつのAppにするだけではなく、記事や商品そのものをホーム画面へ置く。

これも1P1Aの使い方のひとつです。

OJapp FREEでは1P1Aを1行で導入できる

OJapp FREEでは、Webページにスクリプトを追加して1P1Aを導入できます。

ページごとにManifestファイルを手作業で用意するのではなく、ページ側の情報を使って動的に生成する形です。

1P1Aを実際に試したい場合は、 OJapp FREE から確認できます。

普通のHTMLサイトでも使えるので、小さなWebツールや個人サイトで試しやすい形にしています。

1P1Aを使うときに気をつけたいこと

ページ単位で複数のAppを作れるのは便利ですが、iPhoneとAndroidではホーム画面追加の挙動が完全に同じではありません。

特に、次のような設定は端末によって影響が変わります。

そのため、「Manifestを書いたから完成」ではなく、実際の端末でホーム画面に追加して確認することが大切です。

Guideでは現在確認できている仕様を整理し、細かい検証やトラブルの経緯はTipsやLAB側で扱います。

まとめ

1P1Aは、 1つのWebページを1つのAppとして扱うPWA設計です。

サイト全体をひとつにまとめるのではなく、ページごとに名前・アイコン・起動URLを持たせます。

特に、

のように、ページそのものに役割があるケースと相性がいいです。

PWAだからサイト全体をひとつのAppにしなければいけない、というわけではありません。

ユーザーが何をひとつの道具として使うのか。

その単位が「ページ」なら、1P1Aという設計が自然です。