More than 1 year has passed since last update.

ChatGPTとペアプロの個人開発で、ToDoのWebアプリを1日で作った話

Posted at 2023-05-05

Twitter上でノルマをツイートした友人に乗っかり、同じようにツイートしてみたことをきっかけに、Webアプリを作ってみた話です。

プログラミングは趣味でやっている程度のよわよわエンジニアですが、ChatGPTの力を借りたらあっという間にβ版リリースまで漕ぎつけてしまいました。ChatGPTすごい。

褒めったー(β版)

先にリリースしたサービスを紹介します。

褒めったー（β版）｜ノルマを共有してモチベUP！
https://hometter.onrender.com/

▼イメージ図

タスクを登録して、[ツイート]ボタンを押すと、このような形式でツイートできます。

衆人環視のもとにタスクリストを晒すと、やらなきゃいけない気持ちになりますよね。タスクを完了したら、ユーザー同士褒め合える優しい世界を目指しています。

環境

Python
Flask
render
ChatGPT
VS Code

余談ですが、Twitter Botの運用のためにHerokuに課金しています。（が、Twitter APIも無料ではほとんど使えないので、もうそろそろ潮時・・・。）

Herokuは基本無料で使えるサービスとして長年利用されてきたサービスですが、2022年に有料化しました。私はというと、すっかり移行するタイミングを逃してしまい、ズルズルと課金する流れになってしまいました。

そういった背景もあって、今回はHerokuに替わって基本無料で使用できるrenderを使用してみることにしました。

リリースまでの流れ

80％ぐらいChatGPTにお任せしました。

サービス名をChatGPTに相談
Flaskのプロジェクト構築手順をChatGPTに質問
index.html / style.css / script.jsの全てをChatGPTに依頼
ローカル環境でテストしながら、あれやこれや修正点をChatGPTに依頼
renderの会員登録
GitHubにPush
renderとGitHubを連携してデプロイ
β版リリース！

基本的に私はコピペマシーンで、あれやこれや仕様に口出しする係です。

ChatGPTは以下の記事を参考にChromeの拡張機能を使用しています。

サービス名をChatGPTに相談

ブレインストーミングの相手として優秀で、根気強く対応してくれるChatGPT。
「20個考えて」とか、「日本語で」とか、そういう要求にも快く応えてくれます。すごい。

今回作成するアプリケーションは、大きく2つの目的があります。
・タスクをツイートすることでモチベーション維持する
・タスクを完了したツイートをすることでフォロワーに褒めてもらう
これを踏まえて、アプリケーション名と、取得するドメインの候補を20個ほど考えてください

アプリケーション名の候補：

TweetBoost
TaskMotivator
TaskTweet
（中略）

取得するドメインの候補：

tasktweet.com
tweetboost.app
taskmotivator.net
（中略）

サービス名は日本語がよいです。考え直してください

承知しました。日本語で考えたサービス名の候補を以下に示します。

やるきドット
やる気アップ
やるっきゃない！
一日一踏破（いちにちいっぽう）
積み上げノート
（中略）

Flaskのプロジェクト構築手順をChatGPTに質問

何もわからないド素人なので全部丸投げ。ディレクトリ構成を丁寧に教えてくれました。

VS Codeのターミナルで済ませられると嬉しいなーと思ったので、「PowerShellでできることはコマンドで！」と言ってみました。いい感じです。

Webブラウザで「http://localhost:5000/」にアクセスすると、「Hello, Flask!」と表示されます。

ということで、Hello world的な設定が完了しました。

index.html / style.css / script.jsの全てをChatGPTに依頼

まずは手始めに、タスクリストの実装を依頼しました。

DBを使うとrenderの課金が発生するらしい。
そもそも内部でデータを管理するのは面倒くさい。
Twitter APIの仕様変更でユーザ認証のあれやこれやが面倒くさそう。

ということで、URLのパラメーターからタスクリストと完了タスクを取得するようにお願いしました。

チェックボックスの状態と、タスクリストの内容をURLエンコードして、ツイートURLとしたいです。
また、そのURLをクリックした際に、チェック状態とタスクリストがWebアプリ上で表示されるようにしたいです。
どのように実装すればよいでしょうか

あっという間に回答してくれるので、本当にすごい。

ローカル環境でテストしながら、あれやこれや修正点をChatGPTに依頼

それっぽくなってきたところで、さらにあれやこれや要求します。

タスクリストが存在するだけ以下のように整形します。
taskText変数に格納し、index.htmlで表示するためのjsを書いてください。
taskText変数は常にindex.html内のテキストボックスに表示するようにします。

{チェック状態} = チェック無しなら空欄、チェックありなら🙆
とします

テキストボックスに表示するのは以下の内容です

[{チェック状態}] {タスクの入力内容}
[{チェック状態}] {タスクの入力内容}
[{チェック状態}] {タスクの入力内容}
[{チェック状態}] {タスクの入力内容}

現在のscript.jsは以下です。
ボタンをクリックすると、URLエンコードが消えてしまい、/?tasks=となります。
どこが間違っているか指摘してください

(以下、script.jsをコピペ)

あっという間に変数が2箇所で使われていることを見抜き、修正提案をしてくれる。すごい。（でもそのコード書いたのもChatGPTです。）

Webデザインにも手を加えてもらいます。
要求はざっくり「おしゃれ」「レスポンシブ」「マテリアルデザイン」というのを繰り返し伝えました。
我ながら面倒なクライアントですが、ChatGPTはめげずに頑張ってくれます。えらい。

命令:
あなたは優秀なWebデザイナーで、レスポンシブデザインを得意としています。

まず、現在のindex.htmlを見てください
（以下、index.htmlのコピペ）

style.cssはこちらです。
ツイートボタンの形は変更しないでください。fontサイズの変更は構いません。
レスポンシブデザインにするにあたって、必要な要素を追加してください

(以下、style.cssのコピペ)

最後に利用規約についてもちょっとだけ考えてもらいました。

利用規約に以下の内容を盛り込み、簡潔に箇条書きしたいです。
利用規約の掲載案を出してください。
- 個人開発のため、バグが含まれる可能性があること
- データの収集は行っていないが、個人情報を入力しないこと
- 誹謗中傷や公序良俗に反する内容を記載しないこと
- 事前に予告なくサービスを終了する可能性があること
その他に考慮したほうが良い項目があれば、盛り込んでください