+ Jag's PWA installer
はじめてのAIコーディング向け

gitもAIコーディングも
したことがない方へ。

「町内会で、少しスマホやパソコンに詳しい」くらいの前提で書いています。 専門用語が出てきたら、その都度かんたんに説明します。上から順に進めてください。

これは何をするページですか

自前のWebアプリなどがある方向けに、Webアプリ（PWA）をスマホ初心者や苦手な方でも簡単に導入するためのインストーラーです。 「スマホのホーム画面にアイコンとして置いてもらう」までを、実機で10回以上やり直して見つけた迷わせない作り方で案内します。 あなたがコードを書く必要はありません。AI（Claude Codeなど）に下の依頼文を渡すだけです。

前提条件

すでに動いている自分のWebアプリ（サイト）が必要です。まだ何もない場合は、 まず町内会向けアプリのひな形 kairanban-app を使うところから始めてください。そちらの 「AIコーディング初心者向け。最初に用意するもの」 ページに、アカウントの作り方や、AIにファイルを読ませる方法の基礎がまとまっています。 本ページはその続き（すでにAIコーディング環境がある前提）として読めます。

  1. AIコーディングツールで、自分のプロジェクトを開く

    Claude Code や Codex など、普段AIにコードを書いてもらっているツールを開き、 自分のアプリのフォルダを開いてください（いつもの手順と同じです）。

    この部品を先にダウンロードする必要はありません。 下の依頼文の中に取りに行く指示が入っているので、AIが自分で持ってきます。

  2. 下の依頼文をコピーして、AIに貼り付ける

    書き換えるところはありません。まるごとコピーして、 AIのチャット欄に貼り付けてEnterを押してください。 

    私の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など）でも手順が全部見えて、横スクロールが出ないこと
- ⚠ **確かめるために作ったテスト用のファイルを、公開フォルダに残さないこと。**
  そのまま世界に公開されてしまいます。

    同じ文章は PROMPT.md にもあります。すでに運用中のアプリに入れる方や、もっと細かく指定したい方は INTEGRATION.md（上級者向け）をお使いください。

  3. AIの質問には、選択肢から選ぶだけで答える

    依頼文の中に「仕様に関わる判断は、Yes/Noか選択肢で聞くこと」と書いてあるので、 専門用語で聞かれることはないはずです。もし専門用語で聞かれたら、 「非開発者にも分かる言葉で、選択肢にして」とだけ返してください。

  4. できあがったら、自分のiPhoneで実際に試す

    AIの作業が終わったら、「画面を見て終わり」にせず、実際に自分のiPhoneで 「ホーム画面に追加」を最初から最後までやってみてください。特に次の3つを確認します。

    • 案内の帯が、共有ボタンを隠していないか
    • いちばん小さい画面（iPhone SE等）でも、手順がすべて見えるか
    • ホーム画面から開いたときに「設定できました」と出るか

  5. 困ったとき

    AIが3回試しても解決しない場合や、ここまでの手順自体が分からない場合は、 GitHubのIssue に、今どういう状態か（何をしたか・何が起きたか）を書き込んでください。 コードが分からなくても、状況を書くだけで大丈夫です。

このページ自体、上と同じやり方でAIに作らせています。うまくいかない箇所があれば、 それも含めて教えてください。

GitHubへ → この部品について、もう一度読む