PWAって、もっと普及しても良い気がするので、インストーラーを作ってみました。

私のWebアプリに、**スマホのホーム画面にアイコンとして置いてもらうための案内**を
組み込んでください。お年寄りやスマホに不慣れな人が、説明する人なしで自力で設置できることが目的です。

私はプログラミングが分かりません。**専門用語を使わず、質問は必ず Yes/No か A/B/C の選択肢**に
してください。私に何かさせるときは、1回に1つの動作だけ、押す場所まで書いてください。

## 使う部品

Jag's PWA installer — https://github.com/jagyamamoto/pwa-install-guide

まずこの部品を手元に持ってきて（`git clone` でもZIPのダウンロードでも構いません）、
**README.md を最後まで読んでください。**

読まずにコードだけ写さないでください。READMEには、実機で10回以上やり直して分かった
「こうすると必ず失敗する」が書いてあります。**次の5つは、私が後から頼んでも変えないでください。**

1. 手順を**時間で自動送りしない**（実機で必ずズレます）
2. 帯は共有ボタンと**反対側**に置く（iPhoneは上・Androidは下）
3. **画面全体を1色で塗らない**（ブラウザのバーまで染まって、押すボタンが見えなくなります）
4. 共有シートの題名は `document.title` と `og:title` の**両方**を書き換える
5. その題名は**15文字以内**（超えると「…」で切れて読めません）

## 先に確かめてほしいこと

この案内は、アプリが「ホーム画面に追加できる状態」でないと意味がありません。
次の3つを調べて、**足りないものがあったら、何が足りなかったかを先に私に教えてから**用意してください。

- `https://` で見られること（`http://` だと追加できません）
- manifest（アプリの名前とアイコンを書いた設定ファイル）があること
- service worker（通信をいったん受け取る仕組み）があること

## 組み込みかた

1. 私のアプリが **React なら**、`src/` の3ファイルをコピーして使ってください
   （`InstallGuide.tsx` / `strings.ts` / `install-guide.css`）。
   **React でないなら**、同じ判定・同じ文言・同じ配色・同じ制約で作り直して構いません。
   ただし**画面の見た目と手順の中身は変えないでください。**

2. `assets/` の画像を、私のアプリの公開フォルダにコピーし、`assetBase` にその場所を渡してください。
   この画像はiPhone・Androidの画面写真で、**どのアプリでも共通です。撮り直しは要りません。**

3. ページの `<head>` に manifest / apple-touch-icon / og:image / og:title を入れてください。
   ⚠ `og:title` は部品が書き換えるので、**空でもいいので必ず置いてください。**

4. 案内を閉じたあとに、**また開ける場所を2つ**作ってください。
   - ×で閉じた**その瞬間**に、小さな入口に切り替わること
   - メニューに「最初の設定」を**常に**置くこと

5. 表示する言語は `lang` で選べます（日本語・やさしい日本語・英語・中国語・ベトナム語が入っています）。
   私のアプリに合うものを選んでください。

## 今回はやらなくていいこと

- **「もう追加済みかどうか」をサーバーに記録する仕組みは、今回は作らないでください。**
  ログインの仕組みがあるアプリ向けの、上級者向けの話です。
  もし私のアプリにログインがあって作ったほうがいいと思ったら、
  作る前に「作りますか？ はい／いいえ」と聞いてください。

- **完成後のホーム画面アイコンの写真（`done-icon.png`）は、後で私が用意します。**
  無くても動くように組み込んでください。

## 終わったら、私にこう教えてください

次の3つを、**1つずつ、押す場所まで**書いてください。

1. パソコンの画面で確かめる方法（開くURLと、どこを見るか）
2. 自分のiPhoneで確かめる方法
3. 自分のAndroidで確かめる方法（持っていれば）

そのうえで、次を箇条書きで報告してください。

- 足したファイル・変えたファイル
- 足りなくて用意したもの（https / manifest / service worker）
- 迷って決めたところ
- 私にまだ残っている作業

## 最後に、あなた自身で確かめてほしいこと

- 型チェックとビルドが通ること
- **Androidで開いたときに、iPhone用の「Safariで開き直してください」が出ないこと**
  （2026年8月に実際に起きた不具合です。Androidでは1回押すだけのボタン、
  それが使えない端末では文字だけの3手順が**画面の下**に出るのが正しい形です）
- 一番小さい画面（iPhone SEなど）でも手順が全部見えて、横スクロールが出ないこと
- ⚠ **確かめるために作ったテスト用のファイルを、公開フォルダに残さないこと。**
  そのまま世界に公開されてしまいます。