カップ麺ができるまでの時間を測りたい。ついでに、0から時間を数える機能も欲しい。
今回の出発点は、それだけです。
細かい仕様書は作らず、欲しいものを短い言葉でCodexに伝えてみました。できあがったのは、ブラウザで動くキッチンタイマー。さらに、PCに保存したHTMLをGitHub Pagesで公開するところまで進めました。
今回の作業は、先に紹介した「スターターセット」を準備済みの状態から始めています。
まず完成品を見たい方は、こちらからどうぞ。
最初のお願いは、たったこれだけ
実際に渡した指示はこちらです。
0から始まるカウントアップと、カップ麺が食べられるまでの時間を測るカウントダウンの両方が使えるキッチンタイマーを作成してください。
ブラウザ上で動作するものにしてください。
ボタンの配置も、色も、時間の設定方法も指定していません。「HTML、CSS、JavaScriptを使って」とも書きませんでした。何を使ってどう作るかも含めて、まずはAIに任せてみます。
作業の途中で、Codexからは「できたものをどういう形で使うか」を一度だけ聞かれました。まずはHTMLファイルで動作確認をして、最終的にはURLから使える形にしたい、と答えています。
いつもなら企画の段階で仕様を詰めたくなるところですが、今回は「こういうものが欲しい」から始める実験です。
なお、同じ指示でも、利用しているプランやモデル、実行した時期、作業環境などによって、できあがるものは異なります。この記事とまったく同じ結果にならなくても問題ありません。
3分だけでなく、4分も5分も用意された
Codexは、最初のお願いを受けて次のような構成で作り始めました。
- 0から数えるカウントアップ
- 残り時間を数えるカウントダウン
- 3分・4分・5分のプリセット
- 分と秒を入力する自由設定
- 一時停止・再開・リセット
- カウントダウン終了時のお知らせ音
「カップ麺が食べられるまで」と伝えただけで、3分以外の待ち時間も選べる形になりました。一時停止やリセットも、こちらから個別に頼んだものではありません。
画面には「できあがりを、待とう。」という見出し。クリーム色の背景に深い緑のボタンが並び、中央には大きな時間表示があります。機能だけでなく、キッチンで使う道具らしい見た目も補ってきました。
自由設定の範囲は0分01秒から99分59秒まで。0秒などの不正な設定にはエラーが出ます。終了時には「できあがり！ おいしく召し上がれ。」と表示され、数字の色も変わります。音のオン・オフと、事前に音を確認するボタンも付いていました。
短いお願いから、思っていた以上に道具としての形が整いました。
できあがったのは、ひとつのHTMLファイル
成果物は index.html です。このファイルをブラウザで開けば、タイマーの画面が表示されます。
中身を確認すると、画面の骨組みを作るHTML、見た目を整えるCSS、タイマーを動かすJavaScriptが、ひとつのファイルに入っていました。別の画像ファイルや音声ファイルをそろえる必要もありません。終了音もプログラムで作っています。
この段階では、PCに保存されたファイルを直接開いています。アドレスの先頭は file:// です。
制作中の動作確認で、Codexは0からの計測、一時停止と再開、5分への設定変更、短いカウントダウンの終了、0秒設定時のエラー表示まで確認しました。
自分で作る場合も、最初から3分待つ必要はありません。数秒に設定して終了まで進めれば、基本の動きを確かめやすくなります。
ここでは、ローカルのファイルをブラウザで開いて使うものを、便宜上「ブラウザアプリ」と呼ぶことにします。
次は、URLから開けるようにしたい
PCにHTMLファイルができたので、ひとまず使えるようになりました。
でも、別の端末からも開きたい。誰かに見せるときにも、ファイルを渡すよりURLを伝える方が手軽です。
最初に答えたとおり、今度はWeb上に置きます。
このWebアプリをGitHub Pagesで公開したいです。
この一言で公開を頼みました。
GitHub Pagesに置いたら、URLができた
GitHub Pagesは、GitHub上に置いたHTML、CSS、JavaScriptなどをWebサイトとして公開できるサービスです。GitHub Freeでも公開リポジトリで利用でき、独自ドメインを買わずに github.io のURLを使えます（参考：GitHub公式の説明）。
リポジトリは、ここでは公開するファイルの置き場だと思っておけば十分です。今回のタイマー用には、KitchenTimer という公開リポジトリが作られました。
そしてできたのが、冒頭のURLです。
PCのブラウザで開くと、こう表示されます。アドレスバーのURLが github.io になりました。
制作記録には、公開ページが正常に応答し、配信されたHTMLが検証済みのHTMLと一致したことも残っています。
ソースを見たい場合は、GitHubの公開リポジトリから確認できます。
なお、上の指示だけで公開まで進められるかは、使っている環境やGitHubとの接続状況によって変わります。GitHubのアカウントを持っていなければ登録が必要ですし、すでに持っていてもログインや連携の設定を求められることがあります。
途中で迷ったら、その画面のスクリーンショットを撮って、AIに「この画面では次に何をすればいい？」と質問してみてください。
変わったのは、タイマーの置き場所と開き方
ここで、ローカルで使う場合とWebに置いた場合を並べてみます。
| 使い方 | ファイルの置き場所 | 開き方 |
|---|---|---|
| ブラウザアプリ | 自分のPC | 保存したHTMLを file:// で開く |
| Webアプリ | Web上の公開先 | https:// のURLを開く |
この呼び分けは、本記事で流れを分かりやすくするためのものです。ファイルがひとつか複数かで区切っているわけではありません。
今回のポイントは、ブラウザで動くタイマーをWebに置くために、タイマー本体を別の仕組みに作り直す必要がなかったことです。
ローカルでは、PCにあるHTMLをブラウザが読み込みます。公開後は、URLの先からHTMLを読み込み、ブラウザの中でタイマーが動きます。
スマートフォンから開く場合も、公開したURLを使います。あらかじめHTMLファイルを自分でスマートフォンへコピーしておく必要はありません。
ただし、同じURLを開いても、PCとスマートフォンの残り時間が同期するわけではありません。計測は、それぞれのブラウザで行われます。
スマホで開いてみたら、画面に収まりきらなかった
Codexは作り始めるときに「スマートフォンでも使える画面にします」と言い、公開後も「スマートフォンからも利用できます」と報告していました。そこで、手持ちのスマートフォンでも実際に開いてみました。PCでは何の問題もありませんでしたが、スマートフォンではページ全体が縦に収まらず、上下を確認するにはスクロールが必要でした。
AIが「使える」と報告していても、PCで問題なく見えていても、実際に使う端末で開いてみると、こうした使い勝手の問題が見つかります。
気になるところがあれば、このスクリーンショットと一緒に「スマートフォンでは上下にスクロールしないと全体が見えません。余白や文字の大きさを調整してください」と追加で伝え、修正してもらうこともできます。
ただし、今回はこの表示について追加の修正依頼はしていません。スマートフォンではスクロールが必要な状態のまま、今回の制作を終えています。
カップ麺を待つときの使い方
カウントダウンを選び、パッケージに書かれた待ち時間に合わせて3分・4分・5分のボタンを押します。それ以外の時間なら、分と秒を直接入力してスタートします。
経過時間を測りたいときは、カウントアップに切り替えてスタート。途中で止めたいときは一時停止し、そのまま再開できます。
終了音を使う場合は、先に「音を確認」を押し、端末の音量も確かめておくと安心です。計測中はページを開いたままにして、端末のスリープを避けてください。これは完成したアプリの画面にも書かれている注意点です。
欲しいものを伝えるところから始められた
今回は、カウントアップとカウントダウンができるキッチンタイマーをお願いしました。細かい仕様を決めずに始めても、プリセットや一時停止、終了のお知らせまで備えたHTMLができました。
タイマーの中身はそのままで、置き場所を変えただけでURLが付きました。
自分でも試すなら、最初のお願いはこの記事の二文くらいで十分です。途中でAIから質問されたら、そのつど答えれば大丈夫です。出てきたものを動かして、「このボタンが欲しい」「文字をもう少し大きくしたい」と、気になったところを追加で伝えていけばよいと思います。
今回のタイマーは、計測の処理がブラウザの中で完結しています。では、次にデータをみんなで共有したくなったら？
その先は、また別の題材で試してみます。
コメント