※この記事はZennにも投稿しています。
https://zenn.dev/n_kemmochi/articles/72905405ad673c
はじめに
こんにちは、@NaokiKenmochiです。
GoogleのAI「Antigravity」とのペアプログラミングで開発している日程調整ツール「ScheduLinx」。
これまでの記事:
爆速でのプロトタイプ完成、一晩での実用化に続き、今回は**「ユーザーに使ってもらい、定着してもらう」** ためのグロース施策を一気に実装しました。
「PWA対応」「Chrome拡張機能」「SNSシェア」「セキュリティ強化」……これらを一人でやると数週間はかかりそうですが、AIとペアプロすることでわずか数時間で実装完了しました。
今回は、個人開発アプリを「野良アプリ」から「プロダクト」に引き上げるために実装した5つの機能と、AIとの共創プロセスについて共有します。
1. PWA対応 (スマホホーム画面への追加)
スマホユーザーにとって、毎回ブラウザを開いてURLを入力するのは手間です。
AIに「PWA対応したい」と伝えると、即座に manifest.json のテンプレートと layout.tsx へのメタデータ追加コードを提示してくれました。
実装のポイント
-
public/manifest.jsonを作成し、アイコンやテーマカラーを定義。 -
layout.tsxのmetadataにmanifestへのリンクを追加。 - これだけで、iOS/Androidの「ホーム画面に追加」に対応できます。
2. Google SheetsをDB代わりにしたフィードバックフォーム
個人開発では、ユーザーの声を聞く仕組みが重要ですが、専用の管理画面を作るのはコストがかかります。
「スプレッドシートに保存したい」という要望に対し、AIは googleapis を使ったAPIルートの実装から、Google Cloudの認証設定手順まで完璧にガイドしてくれました。
技術スタック
-
googleapis(Node.js client) - Google Cloud Service Account
- Next.js API Route (
/api/feedback)
メリット
- 管理画面の実装ゼロ。
- スマホからスプレッドシートを見るだけで、リアルタイムに要望を確認可能。
- 無料枠で十分運用可能。
3. Chrome拡張機能での「ワンクリック取り込み」
「調整さん」や「伝助」のURLをコピペするのが面倒…という課題に対し、Chrome拡張機能をプロトタイプ開発しました。
Web開発者の私にとってChrome拡張機能は未知の領域でしたが、AIが manifest.json popup.js popup.html の一式を生成し、Webアプリ側との連携ロジック（URLパラメータ経由でのデータ渡し）まで設計してくれました。
仕組み
- 拡張機能のポップアップボタンを押す。
- 現在のタブのURLを取得 (
chrome.tabs.query)。 - ScheduLinxを開き、クエリパラメータとしてURLを渡す (
?importUrl=...)。 - ScheduLinx側で
useSearchParamsを検知し、自動で取り込みモーダルを開く。
これにより、UXが劇的に向上しました。
4. セキュリティ強化 (SSRF対策 & 入力制限)
外部URLを取り込む機能 (/api/parse) には、SSRF (Server-Side Request Forgery) のリスクがあります。
AIにセキュリティレビューを依頼したところ、即座にこの脆弱性を指摘し、ドメイン許可リストの実装コードを提案してくれました。
-
ドメイン許可リスト:
densuke.biz,chouseisan.comなど、許可されたドメイン以外はリクエストを拒否。 - 入力バリデーション: フィードバックフォームの文字数制限など。
自分一人では見落としがちなセキュリティホールも、AIがペアプロ相手だと安心です。
5. SNSシェア機能 (Web Share API & Fallback)
ユーザー数を増やすため、X (Twitter), LINE, Facebook へのシェアボタンを実装しました。
ここでは「スマホならネイティブのシェア機能を使いたい」というこだわりに対し、AIが navigator.share の判定ロジックと、PC/スマホでのUI出し分けを実装してくれました。
スマホとPCの出し分け
-
スマホ:
navigator.share(Web Share API) を使用。OS標準のシェア画面が開き、LINEやSlackなど好きなアプリを選べます。 -
PC:
navigator.shareが非対応の環境では、各SNSのシェアボタンを個別に表示。
// Web Share APIの使用例
const handleNativeShare = async () => {
if (navigator.share) {
await navigator.share({
title: 'ScheduLinx',
text: '...',
url: '...',
});
}
};
まとめ
機能を作るだけでなく、「使いやすさ」「安全性」「拡散の仕組み」を整えることで、アプリの完成度が一段階上がりました。
これら全てを短時間で実現できたのは、「実装の詳細はAIに任せ、人間は仕様とUXの意思決定に集中する」 という新しい開発スタイルのおかげです。
ScheduLinxは現在ベータ版として公開中です。ぜひ使ってみてください！
https://schedule-manager-beta.vercel.app