【自作】「集中タイマー」に課金したくないので、AIと一緒に10分で作ってみた(コード知識ゼロでOK)

AI活用術

前回の記事で、集中力を保つための「ポモドーロ・テクニック(25分集中+5分休憩)」を紹介しました。

しかし、スマホのアプリストアでタイマーを探すと、こんなものばかりで嫌になりませんか?

  • 「広告が邪魔で集中できない」
  • 「高機能すぎて使い方が分からない」
  • 「月額課金を要求される」

「ただ25分を測ってくれる、シンプルな道具が欲しいだけなのに…」

そう思った私は、ふと気づきました。 「ないなら、自分で作ればいいじゃん」と。

今回は、プログラミング初心者の私が、ChatGPT(AI)を使って「自分だけの最強集中タイマー」を爆速で作った過程をシェアします。

黒い画面(ターミナル)も、難しい環境構築も一切ナシ。 メモ帳とブラウザだけでできる、「DIY(日曜大工)」としてのWeb開発へようこそ。

なぜ「自作」が最強なのか?

既存のアプリを使うのと、自分で作るのとでは、決定的な違いがあります。

それは自分のわがままを100%詰め込めることです。

私が今回、AIにオーダーしたのはこんな「わがまま」です。

  • 広告は一切表示しない(集中したいから)
  • 「25分」と「5分」のボタンだけ置く(余計な機能はいらない)
  • 色は「深呼吸したくなるような青」にする
  • 終了音は「カフェの呼び出しベル」のような優しい音で

市販のアプリなら「設定」を探し回ってもできないことが、自作なら「そう作って」とAIに言うだけで実現します。

これが、Web開発の最大の醍醐味です。

開発の裏側:AIへの指示は「日本語」だけ

実際に私がChatGPTに投げた「発注書(プロンプト)」を公開します。

コードは1行も書いていません。書いたのはこの日本語だけです。

あなたは優秀なWebエンジニアです。以下の機能を持つ「ポモドーロタイマー」を作ってください。

  1. 画面中央に大きく時間を表示(分:秒)
  2. その下に「Focus(25分)」「Rest(5分)」の2つのボタンを配置
  3. スタートボタンを押すとカウントダウン開始
  4. 0になったら画面の色を赤くして知らせる
  5. デザインはミニマリスト風に、余白を多くとってく

たったこれだけです。

するとAIは、

HTML(骨組み)、CSS(デザイン)、JavaScript(動き)

がすべてセットになったコードを吐き出してくれます。

完成品のクオリティ(実用レベル)

出来上がったコードをメモ帳に貼り付け、「timer.html」という名前で保存。 それをダブルクリックした瞬間、私のブラウザ上に「理想のタイマー」が現れました。

広告ゼロ。余計なボタンもゼロ。

あるのは、私が集中するためだけに必要な機能だけ。

「自分のために作られた道具」を使うと、愛着が湧いて、不思議とやる気も出るんです!

私が作った「ポモドーロタイマー」

私が作った「ポモドーロタイマー」については、以下の記事で詳しく公開しています。 エンジニア志望の方はもちろん、「ただシンプルなタイマーが欲しい」という方も、ぜひ覗いてみてください。

結論:プログラミングは「現代の魔法」だ

私はこれまで、プログラミングを「難しい勉強」だと思っていました。

でも、AIがいる今は違います。

「こんな道具が欲しい」というアイデアさえあれば、誰でも魔法使いになれるのです。

今回はタイマーでしたが、他にもアイデア次第で何でも作れます。

例えば
  • 絶対に忘れない「持ち物チェックリスト」
  • 自分好みの色だけの「カラーパレット」
  • 割り勘を一瞬で計算する「飲み会電卓」

アプリを探す時間」があるなら、その時間で「作って」みませんか?

アリエスラボでは、これからも「文系でもできるWeb開発」の実験を続けていきます。

コメント

タイトルとURLをコピーしました