😽

プログラミング初心者の私がGithub CopilotでWebサービス「Gimmy」を作ってみた

に公開
Flask
Python
GitHub Copilot
ai開発
生成 AI
idea

はじめに：「プログラミングできないけど、作りたいものがある」

はじめまして。この記事を書いている時点での私のプログラミング経験は「CSSの微調整ができる程度」です。

2025年4月、ふと思ったんです。
「AI時代になって、タイムリーな情報か専門的な情報じゃないとブログ読まれなくない？」

そこから「じゃあ、AIに質問したやり取りを共有できるプラットフォームがあったら面白いのでは？」というアイデアが生まれました。その時のChatGPTとの会話です。

当時の私は授業でC言語やPythonを習いましたが、0からコードを書くことはできないレベル。でも、AIを使えば作れるかもと思いました。

作ったもの：Gimmy（ギミー）



Gimmy: https://www.gimmy.jp/

コンセプト

匿名でAIに質問し、その質問と回答を他のユーザーと共有できるWebアプリです。「AIとの会話をアーカイブとして残したい」「他の人がどんな質問をしているか見たい」というニーズに応えるサービスを目指しました。

匿名性を採用した理由

サービス設計において匿名性を重視したのは、以下のような利点があると考えたためです：

  • 心理的ハードルの低減: 実名やアカウント情報を登録する必要がないため、初歩的な質問や些細な疑問でも気軽に投稿できます。「こんなこと聞いて恥ずかしくないか」という懸念を持たずに利用できる環境を提供できます。
  • 投稿の多様性: ユーザー登録が不要なため、一見「くだらない」と思われる内容でも投稿しやすくなります。結果として、幅広いトピックの質問が集まり、サービス全体のコンテンツの多様性が向上します。
  • 開発・運用の簡便性: ユーザー認証システムや個人情報管理の仕組みが不要となり、開発者側のリスクとコストを削減できます。また、個人情報漏洩のリスクも回避できます。

一方で、匿名性には荒らしやスパム投稿のリスクもあるため、適切なモデレーション機能の実装を今後の課題としています。

主な機能

  • 匿名AI質問共有: ユーザー登録不要で気軽に投稿
  • アーカイブ機能: 過去の会話を検索、いいね、コメント
  • スコアシステム: 質問にスコアが付き、合計で特典解放（桜井政博さんのYoutubeチャンネル「桜井政博のゲーム作るには」からヒントを得ました）
  • プライベート/オープンモード: 自分だけか、みんなで共有するか選択可能
  • フラグ機能: 長い会話で特定の質問に素早く戻れる
  • コメント機能: AIを呼び出さずに会話に参加したいときのため
  • 多言語対応: 日本語/英語対応（i18n実装）

技術スタック

Frontend: HTML, CSS (一部TailwindCSS), JavaScript
Backend: Flask (Python)
Database: Supabase (PostgreSQL)
Container: Docker
AI: Gemini API, OpenAI API
Deploy: Render

すべてAIに選定してもらいました。今思えば「本当にこれがベストだったのか？」という不安もありますが、動くものができたので良しとしています。

開発環境の変遷

Phase 1: ChatGPT時代（4月〜5月）

最初は ChatGPT に「匿名でAIへの質問を共有できる掲示板のようなサイトを作りたい」と相談するところから始めました。

開発フロー:

  1. ChatGPTにコンセプトを伝える
  2. 生成されたコードをVS Codeにコピペ
  3. ローカルでテスト実行
  4. エラーが出る
  5. エラーログをコピペして「これ直して」
  6. 修正コードをもらう
  7. 1〜6を無限ループ

この時期は正直、何をやっているのか全く理解していませんでした。でも、動いたらOK精神でゴリ押し。

Phase 2: Github Copilot Plus時代（6月〜9月）

転機が訪れたのは6月。Github Copilot Plusに学割があると知り、即座に乗り換えました。

参考にした記事：学生向けGitHub Copilotの申請方法

使用ツール:

  • Github Copilot Agent (今使っているのは、Claude Sonnet 4.5, GPT-5 Codex)

最初はAskモードで質問していましたが、プロジェクトが大規模になってからはAgentモードがメインに。複数ファイルにまたがる変更もAgent任せです。

クレジット管理について:
正直、節約はしませんでした。使い切ったら翌月まで待って開発再開。

開発の実態：1日4時間 × 5ヶ月の試行錯誤

開発時間の内訳

  • 平日: 授業後に2〜3時間
  • 週末: 4〜6時間

コード生成の割合

  • AI生成: 90%以上
  • 自分で書いた部分: CSSの微調整、色の変更、余白の調整など

恥ずかしい話、ロジックは一切書いていません。全てAI任せです。

AI活用の実践的テクニック

5ヶ月間で学んだ、AIを使った開発の実践的なコツをまとめます。

1. 基本的なフロー

AIへ指示 → テストページで動作確認 → エラーが出たら④へ → 解決したらフロントエンドを改善

2. プロンプトの進化

初期（4月）:

・スレッドカード右下にいいねボタンを追加してください。
・いいねボタンはハートのSVGアイコンを使ってください。

現在（9月）:

## chatページのユーザーメッセージに編集機能を追加実装したいです。フロントエンド・バックエンドともに
- フラグボタン、コピーボタンと並べて**編集ボタン（ペンのみのSVGアイコン）を追加**してください。
- 編集できるのは投稿したユーザーのみです。IDを照らし合わせて権限チェックをしてください。
- **メッセージを編集して、送信ボタンを押すと新規メッセージにAIが回答するようにしてください。**
## 実装イメージ
1.フロントエンド (JavaScript / HTML):

質問表示エリアに「編集」ボタンを追加する。

「編集」ボタンが押されたら、質問文を <textarea> に変えて編集可能にし、「更新」ボタンを表示するJavaScriptロジック。

「更新」ボタンが押されたら、Fetch APIなどで新しい質問文をバックエンドに送信する処理。

2.バックエンド (Flask / PostgreSQL):

リクエストから新しい質問文を受け取り、DBを UPDATE する処理。

マークダウン形式にしてから、AIの理解度が向上した気がします。マークダウン形式はGeminiに作成してもらっています。
実際、上記のプロンプトだけでは完璧に実装できなかったので、以下の「2. UI実装のコツ」、「3. エラー対処の3ステップ」にあるようなプロンプトを実行しました。

3. UI実装のコツ

デザインの指示はスクリーンショット+具体的な指示がうまくいく印象でした。

次は**編集モードでのUI/UX**を改善したいです。
- .message-wrapper.user-message .message-contentの幅を.message-wrapper.ai-message .message-contentと同じにする。
- textareaの背景は透明にする。デザインは.message-wrapper.user-message .message-contentを維持する。レイアウトは**ChatGPTを模倣**する。
- 編集ボタンの背景とエフェクトをフラグボタン、コピーボタンと統一する。

*画像1：私のアプリ
*画像２：ChatGPT（見本）

ポイント:

  • クラス名を明示的に指定
  • 段階的に進める（一度に全部やらない）

4. エラー対処の3ステップ

Step 1: エラーログをそのまま投げる

以下のエラーが出ました。修正してください。

[エラーログ全文をペースト]

Step 2: うまくいかない場合

  • モデルを変更 (Claude ↔ GPT を切り替え)
  • 指示を減らす (3つ→1つに)
  • 指示を具体化 (「バグを直して」→「get_user_data()の戻り値がNoneになる問題を修正」)

Step 3: それでもダメなら

  • 新規会話を開始 (コンテキストリセット)
  • Deep Research で原因調査
  • 最終手段: Githubを巻き戻す (実際2〜3回やりました...)

4. 指示は小分けに、1回最大3つまで

一度に多くの変更を依頼すると、予期しないバグが混入します。

❌ ダメな例:

・ログイン機能追加
・デザイン変更
・データベース構造変更
・i18n対応
・バグ修正10箇所

⭕ 良い例:

以下の3点を実装してください：
1. Google OAuth 2.0の認証エンドポイント作成
2. 認証後のリダイレクト処理
3. セッションへのユーザー情報保存

5. コンテキストの管理

1つの会話は、最初の要望が完成するまでが基本。

  • 新規機能追加: 必ず新規会話で開始
  • バグ修正: 既存会話で対応可
  • 機能が完成したら: すぐに会話を終了し、次の機能は新規会話で

苦労した実装トップ3

1位: 多言語対応（i18n）

英語対応を実装しようとしたとき、予想以上に大変でした。

  • 日本語前提で書かれた既存コードの全文言洗い出し
  • 動的に生成されるテキストの翻訳
  • ユーザーの言語設定を保持する仕組み

結局、AI に「全ファイルを解析して、ハードコードされている日本語を抽出して」と依頼し、3回に分けて対応しました。

2位: Google認証のエラー

OAuth 2.0 の実装で、リダイレクトURIのミスマッチエラーが延々と出続けました。

AIの提案通りに実装してもダメで、結局:

  1. Google Cloud Consoleの設定を見直し
  2. 環境変数の確認
  3. Flaskのルーティングを再確認

という地道な作業で解決。この辺は自分で調べるしかなかったです。

3位: AIの文脈に沿った回答

「前の会話を踏まえて回答してほしい」という機能で、コンテキストウィンドウの管理に苦戦。

  • 長い会話履歴をどうAPIに渡すか
  • トークン数の制限をどう回避するか
  • パフォーマンスの劣化をどう防ぐか

最終的には、

  1. 新しい質問を確実にコンテキストに含める
  2. システムプロンプトを超具体的に修正
  3. 入出力トークンの上限を引き上げ

で解決できました。

コストの実態：ほぼ0円運用

内訳

項目 コスト 備考
Supabase 無料 Free Tierで運用中
API利用料 数円/月 テスト投稿のみ
ドメイン 約200円/月 お名前ドットコム（初年無料、2年目以降年2,000〜3,000円）
Github Copilot Plus 無料 学割適用
Render 無料 Free Tierで運用中
合計 約200円/月 ユーザー増加後は要見直し

現在MAU15人（ページ閲覧のみ）なので、このコストで運用できています。目標の100人に達したら、API利用料が跳ね上がるかも...？

データ収集とプライバシーへの配慮

個人開発でも、データの扱いは慎重にすべきだと考えています。

収集しているデータ

Gimmyでは以下のデータを収集しています：

  • 匿名セッションID: ブラウザのCookieに保存される64文字のランダムな識別子（個人特定不可）
  • 投稿内容: 質問、コメントなどのテキスト
  • 技術情報: アクセス日時、ブラウザ種別などの基本情報
  • IPアドレス: スパム・不正アクセス検知のみに使用（一時的にキャッシュで保持、DBには非保存）
  • 広告配信関連データ: Google AdSense等が取得する閲覧履歴の一部

データ保持期間

  • 投稿から90日以上アクセスがないデータは削除対象として検討
  • 具体的なルールは今後明文化予定

セキュリティチェック

実施頻度: 月1回

方法:

  • 2つのAIモデル（GPT-5 Codex & Claude Sonnet 4.5）でコードレビュー
  • OWASP TOP10に照らした静的チェック
  • 依存関係の脆弱性確認

使用ツール:

  • pip-audit
  • Bandit
  • Trivy
  • gitleaks
  • semgrep
  • OWASP ZAP（公開環境）

ただし、これで完璧というわけではないことは理解しています。今後、ペネトレーションテストや第三者監査も検討中です。

脆弱性報告（Responsible Disclosure）

もし脆弱性を発見された場合は、以下のメールアドレスまでご連絡ください：

gimmy.aiarchive@gmail.com

再現手順と影響範囲を添えていただけると助かります。報告を確認次第、優先的に対応します。

AI開発の未来：アイデアが全て

5ヶ月の開発を終えて思ったことがあります。

学習目的でない限り、AIを信頼して良い。

もちろん、セキュリティやライセンスへの責任は自分にあります。でも、アマチュアの個人開発なら、完璧を目指すより形にすることを優先して良いと思います。

AI がさらに進化する未来では、重要なのはアイデアと実行力。深い専門知識より「広く浅い知識」の方が価値を持つかもしれません。

現在の課題：宣伝に苦戦中

正直に言います。全然使ってもらえてません😭

現在の状況:

  • MAU: 15人（ページ閲覧のみ）
  • 実際に投稿してくれたユーザー: 数名
  • 目標: MAU 100人

この記事も、実は宣伝目的だったりします（笑）

もし興味を持っていただけたら、ぜひ試してみてください。フィードバックは X（Twitter）でお待ちしています！

まとめ：諦めなければ、誰でも作れる

プログラミング知識ゼロでも、AIを活用すれば本格的なWebサービスは作れます。

重要なのは：

  1. 諦めずに試行錯誤を続けること
  2. AIを適切に信頼しつつ、責任は自分で持つこと
  3. 完璧を目指さず、まず形にすること
  4. セキュリティとプライバシーは継続的に改善すること

もし「作りたいものはあるけど、プログラミングできないから...」と諦めている人がいたら、この記事が背中を押せたら嬉しいです。

2025年、アイデアさえあれば誰でも開発者になれる時代です。

Gimmy: https://www.gimmy.jp/
X（フィードバック大歓迎）: https://x.com/konegi_dev

ぜひ使ってみてください。そして、感想を聞かせてください！

参考リンク

#AI開発 #個人開発 #非エンジニア #GithubCopilot #Flask #Supabase #駆け出しエンジニアと繋がりたい

Discussion