バーピージャンプを取り入れたタバタ式トレーニングで使うために、ChatGPTで専用タイマーを制作しました。
| バーピージャンプとは |
|---|
| 立った姿勢からしゃがみ、床に手をついて両脚を後ろへ伸ばし、再び脚を戻して立ち上がりながらジャンプする全身運動です。腕立て伏せを加えるなど、いくつかのバリエーションがあります。 |
| タバタ式トレーニングとは |
|---|
| 高強度の運動20秒と休憩10秒を繰り返し、最大8セット行うインターバルトレーニングです。単に20秒・10秒で区切るだけでなく、運動強度も関係します。今回のタイマーは途中に60秒休憩を入れた独自のメニューで、研究上のタバタ式と同じ条件ではありません。参考：立命館大学 |
制作のきっかけは、iPhoneの無料タイマーアプリでした。数回利用すると有料プランへの切り替えが必要になり、タイマーが使えなくなってしまったのです。
そこで考えたのが、「必要な機能だけ備えたタイマーを作れないか」という方法でした。
制作前のプログラミング知識は、HTMLとJavaScriptの初歩を学んだ程度です。（結果的には、人がHTMLやJavaScriptのコードを直接書く作業は行わず、ChatGPTが生成したファイルを使って制作・修正を進めました。）
途中では、音が鳴らない、リセットできない、オフライン対応後にページを開き直せない、といった問題も発生しました。
それでも修正を重ね、iPhoneで通信なしでも画面と音が使え、トレーニング実績も記録できるところまで確認できました。
完成したタイマーはこちらです。
この記事では、制作のきっかけから、不具合の修正、Cloudflare Pagesでの公開、実機での動作確認までを紹介します。
※無料アプリでの課金案内は、今回利用したアプリでの体験です。すべての無料タイマーアプリが同じ仕組みという意味ではありません。
最初に決めたのは、機能よりも「使い方」
最初の相談は、「トレーニング用タイマーアプリを自作することは可能ですか？」という質問でした。
そこからChatGPTが確認したのは、運動中にiPhoneの画面を見られるかどうかです。
今回は見られる場所にiPhoneを置くため、Safariで開き、画面を表示したまま使うWebアプリとして作ることにしました。
必要なのは、大きな残り時間と、運動・休憩の切り替えが分かる表示。そして、画面を見続けなくても進行が分かる音です。
最初からさまざまなトレーニングに対応させるより、実際に行っているメニュー専用にすることで、必要な機能を具体的に整理できました。
メニューを整理すると、合計は4分45秒だった
今回タイマーに設定したのは、次の流れです。
| 区間 | 内容 | 時間 |
|---|---|---|
| 準備 | 開始前のカウントダウン | 5秒 |
| 前半 | 20秒運動を4回、間に10秒休憩を3回 | 110秒 |
| 中間休憩 | 前半終了後に休む | 60秒 |
| 後半 | 20秒運動を4回、間に10秒休憩を3回 | 110秒 |
| 合計 | 運動は全8セット | 285秒＝4分45秒 |
ここで確認が必要だったのが、中間休憩の数え方でした。
前半4セット目の運動後は、「10秒休憩に60秒を追加」するのではなく、10秒休憩を60秒休憩に置き換えます。
また、最後の運動後には休憩を付けず、そのまま終了します。
実は、途中でChatGPTから「合計5分5秒」という説明がありました。しかし、実装時の検証で計算ミスが判明。正しくは4分45秒でした。
AIと作る場合でも、設定したメニューと計算が合っているかは確認が必要です。
なお、この記事はトレーニングタイマーの制作記です。この運動メニューの効果を検証したものではありません。
「いつ、何回できたか」を自動で記録する
タイマーの相談を進めるなかで、トレーニング実績を記録する機能も追加しました。
体調や感想を毎回入力する機能ではなく、必要なのはいつ、何回できたかという記録です。
そこで、前半4セットと後半4セットを最後まで終えたら、「トレーニング1回」と数えることにしました。バーピージャンプそのものの反復回数を数える機能ではありません。
主な機能は、次のとおりです。
| 機能 | 内容 |
|---|---|
| タイマー | 決めたメニューを自動で進行 |
| 一時停止・再開 | 途中で止めて、続きから再開 |
| リセット | 準備5秒の状態へ戻る |
| 自動記録 | 最後まで完了した日時を保存 |
| 回数表示 | 今月と、これまでの合計回数を表示 |
| バックアップ | 記録の書き出し・読み込み |
途中でリセットした場合は、完了回数には含めません。完了済みの記録は、タイマーをリセットしても残ります。
記録は端末のブラウザ内に保存する仕組みです。記録のためのアカウント登録は不要ですが、ブラウザのデータ削除や端末変更に備え、バックアップ機能も付けました。
最初の版では、音もリセットも思いどおりに動かなかった
最初に作成したタイマーを試したところ、音が出ず、リセットもできませんでした。
画面ができたからといって、実際のiPhoneでそのまま使えるとは限らなかったのです。
音については再生方式を変更し、開始前に確認できる「音を試す」ボタンを追加。リセットは、確認ダイアログを使わず、押すと準備5秒に戻るように修正しました。
その後、音の鳴り方も調整しています。
最初は2回続けて鳴る音でしたが、切り替わりでは1回に変更。さらに、すべての区間の終了3秒前からカウントダウン音を加え、最終的には時報風の音にしました。
「ピッ、ピッ、ピッ、ポーン」
残り3秒・2秒・1秒に短い音が鳴り、次の区間へ切り替わるときに長い音が鳴ります。最後の運動が終わるときも、同じように知らせます。
「音を付ける」だけでなく、「いつ、何回、どんな音を鳴らすか」まで具体的に伝えることで、使いたいタイマーに近づいていきました。
オフラインで使うために、PWAへ
次に確認したのは、スマホがオフラインでも使えるかどうかです。
Webアプリは、公開しただけでオフライン対応になるわけではありません。
そこで、画面・プログラム・音声を端末に保存する処理を追加しました。PWAの仕組みを利用し、最初にオンラインで必要なファイルを保存してから、通信なしでも開けるようにする方法です。
ただし、今回は画面を表示したまま使う設計です。画面を閉じたり、別のアプリに移ったりすると一時停止します。
画面をロックしたまま、音だけでトレーニングを進める用途にはしていません。
公開先にはCloudflare Pagesを選択
公開先としては、GitHub PagesとCloudflare Pagesを比較しました。
今回はGitHub連携を使わず、ファイルを直接アップロードして公開できるCloudflare Pagesを選びました。
今回のようなHTML・CSS・JavaScript・音声で動く構成なら、静的ファイルの配信に無料枠を利用できます。有料のサーバー処理や独自ドメインは追加していません。サービスの条件は変更される可能性があるため、利用時には公式案内の確認が必要です。参考：Cloudflare Pagesの料金
公開作業は、iPhoneのSafariで進めました。
- Cloudflareに登録する
- 「Workers & Pages」を開く
- Pagesの直接アップロードへ進む
- プロジェクト名を決める
- ChatGPTが用意したZIPファイルをアップロードする
- デプロイして、公開URLを開く
Cloudflare Pagesは、フォルダやZIPファイルの直接アップロードに対応しています。参考：Cloudflare PagesのDirect Upload
実際にはログインやメニュー選びでも迷い、画面のスクリーンショットをChatGPTに見せながら進めました。コードの作成だけでなく、公開するまでの操作にも確認が必要でした。
「1回目は開けたのに、2回目は開けない」問題が発生
公開後には、別の問題も起きました。
1回目はタイマーが表示されたのに、2回目に開くと次のエラーが出たのです。
Response served by service worker has redirections
原因は、オフライン用に保存したページの転送情報を、そのまま返してしまう処理にありました。
ChatGPT側で保存処理を修正し、修正版のZIPを同じCloudflare Pagesのプロジェクトへ再アップロードしました。
その後、オンラインで保存済みの版を更新して開き直すと、表示できるようになりました。
さらに、iPhoneを機内モードにしてWi-Fiも切り、ページを開き直して確認しました。
画面が開くことと、時報風の音が鳴ることの両方を確認できました。
トレーニングを最後まで進めると、完了の実績も記録されました。コード上の確認だけでなく、実際のiPhoneでも必要な機能を確認できたことになります。
運動中に見やすいデザインへ調整
機能が動いても、使い勝手には改善できるところがありました。
最初のデザインでは上部の見出しが大きく、タイマーの下側が画面から見切れていました。
そこで、「今日の5分を、積み重ねる」を1行にし、文字サイズを半分に変更。「小さな一歩を、今日も。」の行も削除しました。残り時間の数字の大きさは、そのままにしています。
背景も、進み具合を把握しやすい形に変えました。
コップの水が減るように、青色の水位が下がっていく表示です。
- 残り8セットでは、青色が満杯
- 運動を1セット終えるごとに、水位が8分の1ずつ下がる
- 残り4セットでは半分
- すべて終えると、背景全体が白色になる
数字だけでなく、背景からも残りの量が分かるようにしました。
修正版の確認を終え、このデザインを継続して使用することにしました。
完成したタイマーの使い方と注意点
利用する場合は、まずオンラインで専用ページを開きます。
「オフライン用の保存が完了しました」と表示されたら、「音を試す」で音量や出力先を確認します。
iPhoneでは、Safariの共有メニューから「ホーム画面に追加」しておくと開きやすくなります。ホーム画面への追加自体が、オフライン保存の完了を意味するわけではない点には注意が必要です。
利用時に覚えておきたいのは、次の点です。
- 初回の読み込みや更新には、インターネット接続が必要
- トレーニング中は画面を表示したまま使う
- 実績は利用した端末・ブラウザ内に保存される
- 端末変更やデータ削除に備え、ときどき記録を書き出す
今回動作を確認したのは、制作時に使用したiPhoneです。すべての端末やブラウザで同じように動くことまでは確認していません。
身近な不便を、必要な道具に変える
今回の出発点は、無料で使い始めたタイマーが途中から使えなくなったことでした。
そこからChatGPTに相談して、メニューを整理し、実績記録を加え、音やデザインを調整し、オフラインで使えるところまで進みました。
一度で完成したわけではありません。時間の計算ミスもあれば、音やリセットの不具合もあり、公開後に開けなくなる問題もありました。
それでも、実際に使って困った点や変更したい点を伝えることで、必要な道具に近づけていけました。
HTMLとJavaScriptの初歩を学んだ段階でも、AIの支援を受けながら、要件を決め、動作を確かめ、修正を重ねる制作は進められます。
コードを生成するだけでなく、実際に使い、確かめながら直していくことが、今回のタイマー制作で大切な工程でした。
でわっ！！
コメント