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のコピペ)
最後に利用規約についてもちょっとだけ考えてもらいました。
利用規約に以下の内容を盛り込み、簡潔に箇条書きしたいです。
利用規約の掲載案を出してください。
- 個人開発のため、バグが含まれる可能性があること
- データの収集は行っていないが、個人情報を入力しないこと
- 誹謗中傷や公序良俗に反する内容を記載しないこと
- 事前に予告なくサービスを終了する可能性があること
その他に考慮したほうが良い項目があれば、盛り込んでください
renderの会員登録
Render Dashboard
https://dashboard.render.com/
[Sign up]で新規アカウントを作成します。
GitHubでもGoogleでもメールアドレスで新規登録でもお好きにどうぞといった感じ。
私はメールアドレスで新規登録しました。
「Activate your Render account」という件名のメールが届いて、メールアドレス認証を終えたら会員登録完了です。あっさり。
無料の範囲で使うつもりなので、決済情報等は一切入力していません。
GitHubにPush
GitHubを利用するときのいつもの手順ですので割愛。
renderとGitHubを連携してデプロイ
こちらの記事を参考にさせていただきました。
β版リリース！
Twitterアカウントを用意して、さっそく自分でも使ってみました。
一応、リリース的なツイートもしておいて、固定ツイートに。
終わりに
一方的にChatGPTに要求を投げて、リリースまで漕ぎつけました。ペアプログラミングというよりも、序盤からただの厄介なクライアントに成り下がっていた気がします。
私のようなよわよわエンジニアの要求に、文句ひとつ言わずに応えてくれる素直なChatGPT。
「おしゃれ」「レスポンシブ」「マテリアルデザイン」なんて、聞いたことがある言葉でふんわり要求しても問題ありません。本当にすごい時代になってしまいました。
「β版リリースしたよー」と告知したら、フォロワーから「この動作がおかしい」とか「ツイートできない」とか言われて、ChatGPTに色々聞きながら修正していますが・・・
とりあえず、動くのでヨシッ！
ご興味を持たれた方は使ってみてください。
褒めったー（β版）｜ノルマを共有してモチベUP！
https://hometter.onrender.com/