小さな“デジタル時計”から始まった個人開発が、最終的に
位置情報で最寄りエリアの天気を自動表示できるアプリに進化しました。
本記事では、AIサービス manus と ChatGPT を使い分けながら
「作る→直す→また試す」を繰り返したプロセスを、スクリーンショットとともに振り返ります。
まずは“超シンプル”な時計から
AIにひな形を頼んでみた
出発点は「大きくて見やすい時計を作りたい」という思いつき。
自分で一からコードを書くこともできますが、今回はスピード優先で
AIの生成力を試すことに。まずは manus に「デジタル時計のWebアプリ」を依頼しました。
数分でベースができあがり、最初の形がこちら。
▲ 初期の時計アプリ（manus生成）——シンプルで視認性は高いけど、少し物足りない…
manusはどんなサービス？生成と実行環境が一体の“加速装置”
ここで少しだけ解説。manus は、依頼した要件に対して
HTML/CSS/JS（時にフレームワーク込み）をサクッと組み上げ、その場で実行・プレビューできるのが特長。
「こうしたい」を投げると、UIごと雛形を返してくれるので、
個人開発の初速が一気に上がるのが魅力です。
今回は時計の土台をmanusにお任せし、ここから機能を足していきました。
“時計だけ”では寂しい…画面上部に天気を足して情報密度アップ
毎日開くなら「今の天気」も見られると便利。
そこで、時計の上に天気カードを載せる方針に変更。
manusに「天気も出したい」と追加指示を出し、UIのラフとコードを整えてもらいました。
Yahooの天気情報をどう扱う？manusがAPI候補まで提案してくれた
驚いたのは、manusが単にUIを作るだけでなく、
Yahoo天気のAPIドキュメントや取得項目の候補まで示してくれたこと。
「降水強度」「予報」「地点切替のUI」など、
要件の洗い出しに役立つ観点が次々に出てきます。
▲ APIの候補や表示スタイルの相談までAIがガイド。要件の“穴”を埋めるのに助かる
天気カードが乗って“アプリ感”が一気にUP…が、無料クレジット切れ！
都市名、天気アイコン、最高・最低、降水（午前/午後）をカード化。
時計＋天気で、毎朝使えるダッシュボードらしくなりました。ところがここで、
manusの無料クレジットが終了。続きの微調整や検証ができない…。
▲ 天気カードが加わり“使えるアプリ”に。ここでmanusの無料枠が終了…
ここからはChatGPTの出番：バグ取り＆体験磨きに全振り
プラットフォームを切り替え、残りはChatGPTで実装と修正を回しました。
やったことは多岐にわたります。
- 天気スライダーをページ中央上に固定し、時計とバランス良く配置
- 画像の混在コンテンツ対策：
httpアイコンURLをhttpsに置換 Promise.allSettledで一部の都市取得が失敗しても部分成功で描画継続- 降水確率の
%%問題を修正（API文字列に%が含まれる仕様） - ドラッグ中の安定性：document への
mousemove/touchmoveバインド - インターバルの二重起動を防ぐため、
setTimeoutループ＋refで制御 - ローディングは初回のみ、以降は「更新中…」の軽量バッジでチカつきを抑制
位置情報に対応：最寄り都市を自動表示して“開いた瞬間に使える”体験へ
仕上げに、Geolocation API を使ってユーザーの位置を（許可があれば）取得。
関東の主要都市（東京・横浜・さいたま・千葉・水戸）の中から
最寄りの地域の天気を初期スライドに設定するようにしました。
拒否されても問題なし。フォールバック動作で安全に表示します。
▲ 位置情報を許可すれば最寄り都市に自動フォーカス。時計との一体感も向上
学びと気づき：AIを“役割分担”で使うと、個人開発でも驚くほど速い
今回の流れで実感したのは、AIの役割分担が効くということ。
manusでひな形と初速を、ChatGPTで検証・改善・仕上げを担わせると、
個人でも短時間で「作って動かす」ところまで行けます。
小さく始めて、必要になったら機能を足す。このサイクルが一番強い。
次は地域追加や1時間ごとの降水グラフ、UIテーマの切替などにも挑戦予定。
今回のソースは1ファイル版でもまとめたので、配布や埋め込みも簡単です。
「まず動くもの」をAIに作ってもらい、そこから自分の色をのせていく。
このスタイルで、また新しい一日を積み重ねていきます。
コメント