速報！娘のひと言から生まれた広告なし子ども向けお絵かきPWAをGoogle AI Studioで作った話

「パパ、またCMが来た…」

お子さんがいる方なら、この状況、わかりますよね。無料のお絵かきアプリを使っていたら、数分おきに広告が割り込んでくる。しかも全画面で、スキップできない。子どもの集中力がバッサリ切られてしまう、あの感じ。

海外のある開発者がこんなエピソードをシェアして、いま話題になっています。娘さんに「自分たちでアプリを作ろうよ」と言われた彼は、Google AI Studioを使って広告ゼロのお絵かきPWAをゼロから構築。その体験記がdev.toで大きな反響を呼んでいます。

Contents

🎨 PWAって何？ざっくり説明します
🤖 Google AI Studioをどう活用したの？
💻 お絵かきPWAの核心部分：Canvas APIのコード例
📌 まとめ

🎨 PWAって何？ざっくり説明します

kids drawing app / Photo by Ariel Paredes via Pexels

PWA（Progressive Web App）とは、Webサイトなのにアプリのように動くしくみのことです。インストール不要、App Storeも不要。ブラウザからアクセスするだけで、ホーム画面に追加してオフラインでも使えます。

今回のケースでいうと、こんなメリットがあります：

✅ 広告を一切入れずに済む（自作だから！）
✅ iPadのホーム画面にアイコンを置ける
✅ インターネットなしでも動く
✅ App Storeの審査なしでデプロイできる

🤖 Google AI Studioをどう活用したの？

Google AI Studioは、GeminiモデルをブラウザからすぐにAPIで試せるGoogleの開発者向けツールです。コードを書く補助として使われていて、今回のプロジェクトでもHTML・CSS・JavaScriptのコア部分をAIと対話しながら生成していったそうです。

「むずかしそう」を「できそう」に変えてくれるのが、まさにこういったAI活用の醍醐味ですよね。

💻 お絵かきPWAの核心部分：Canvas APIのコード例

お絵かきアプリの中心はブラウザのCanvas APIです。ポイントをまとめるとこんな感じです：

mousedown で描画開始
mousemove で線を引き続ける
mouseup で描画終了

<!-- index.html -->
<canvas id="drawCanvas" width="800" height="600"></canvas>

<script>
const canvas = document.getElementById('drawCanvas');
const ctx = canvas.getContext('2d');
let isDrawing = false;

// 描画開始
canvas.addEventListener('mousedown', (e) => {
  isDrawing = true;
  ctx.beginPath();
  ctx.moveTo(e.offsetX, e.offsetY);
});

// 線を引く
canvas.addEventListener('mousemove', (e) => {
  if (!isDrawing) return;
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.strokeStyle = '#FF69B4'; // 子ども向けにピンク！
  ctx.lineWidth = 5;
  ctx.lineCap = 'round';       // 線の端を丸くしてやさしい印象に
  ctx.stroke();
});

// 描画終了
canvas.addEventListener('mouseup', () => {
  isDrawing = false;
});
</script>

これにPWA化に必要な manifest.json と service-worker.js を追加すれば、ホーム画面に置けるアプリの完成です。AIに「子ども向けのUIにして」と指示するだけで、色のチョイスやボタンサイズまで提案してもらえるのが今っぽいですよね。