CodexでiPhoneアプリのトレーニングタイマーを作った。

毎食後に30分エアロバイクを回している。シャカリキに回すのではなく、iPhoneでニュースを見たりゲームをしたりしながらのんびりと回している。その後に以前はスロースクワットをなるべく腰を痛めないようにやっていたのだけれど、やっぱり腰が痛くなって、今は立位で交互に20秒間足を曲げて胸の近くまで持ち上げる筋トレをやっている。
その筋トレに使っているタイマーアプリは今のトレーニングに合っているのだけれど、音楽を流しながらだと音楽が小さくなってしまうのがちょっとした悩みだった。

自分専用のタイマーアプリを作るのだ

そこでまたまたCodexの出番。iPhone用タイマーアプリを作るのが今回のミッション。
App Storeで配信するつもりもなく自分専用のアプリを使いたいだけなので、PWA(Progressive Web Apps)で作ることにした。PWAというのはWebサイトやWebアプリをスマホやパソコンの専用アプリのように使える技術のこと。
これならiOSアプリの実機テスト制限(無料アカウントで1週間の有効期間)またはApple Developer Program有料登録は不要になり、ずっと使えるのだ。

Codexへの指示はこれ

MacOS上でローカルで動くWebアプリ(タイマー)を作成しiPhoneに転送して、ホーム画面に追加してアプリのように使いたい。
  • タイマー画面(初期表示)
    • 円形プログレスバー(実行と休憩でバーの色分け)
      実行は暖色系、休憩は寒色系にする
    • 秒数(実行と休息の秒数/円形プログレスバー内に配置)(カウントダウンする)
    • セット回数(カウントダウンする)
    • 繰り返し回数(カウントダウンする)
    • 開始ボタン → 
      押したらキャンセルボタンと一時停止ボタン表示
      一時停止ボタンを押したら進捗を停止し、再開ボタンになる
      再開ボタンを押したら一時停止ボタンになり進捗を進める
      キャンセルボタン押したらリセットされ初期表示に戻る
    • サウンド ON/OFF
  • 上部に常に表示
    • タイマーボタン → タイマー画面へ
    • 設定ボタン → 設定画面へ
    • 登録ボタン → 登録画面へ
  • 設定画面(秒数や回数を選択できる。()内はデフォルト
    • タイトル (20秒足上げ)
    • 開始・終了までの時間 (5)秒 ※タイマー画面でカウントダウンの音を鳴らす ピッ、ピッ…など
    • 実行 (20)秒 ※タイマー画面でスタート音を鳴らす ピー
    • 休憩 (0)秒 ※タイマー画面で音を鳴らす ピコン、ピコン…など
    • 繰り返し回数 (16)回 ※タイマー画面で最後の回の終了時に音を鳴らす ジャランなど
    • セット数 (1)セット
    • セット間のインターバル (0)秒 ※タイマー画面で音を鳴らす チッ、チッ…など
    • 登録ボタン → 設定を登録
  • 登録メニュー画面
    • 画面内容 (下記内容を一つのフレームに入れて、登録が増えていけば、積み重なっていく、並べ替え可能 フレームをタップするとタイマー画面に登録内容がセットされる) アクティブフレームと他のフレームで区別できるように色分けする
      • 新規登録ボタン
      • 削除ボタン
      • 編集ボタン → 設定画面へ 
      • タイトル
        (実行20)秒×(繰り返し回数1)回×(セット回数1)回
        休息(0)秒 インターバル(0)秒

15分ほどで最初のプロトタイプができた

何か今回はご丁寧に、モックアップやiPhoneホーム画面への追加手順書md(マークダウン書類)も作ってくれた。
ローカルでHTTPS通信するにはローカル証明書(自動生成してくれた)が必要ということが分かった。

iPhoneホーム画面追加手順
  1. Macで run_app.command を実行します。(注:起動スクリプト)
  2. もし以前の http://… 版をホーム画面に追加している場合は、そのアイコンを先に削除します。
  3. Macの local-https/interval-timer-rootCA.cer を iPhone へ AirDrop します。
  4. iPhoneで証明書をインストールします。
    設定一般VPNとデバイス管理でダウンロード済みプロファイルをインストールします。
  5. 設定一般情報証明書信頼設定 を開き、Interval Timer Local Root CA をオンにします。
  6. iPhoneのSafariで、run_app.command に表示された https://…:4173/ を開きます。
  7. 表示できたら 共有ホーム画面に追加 を押します。

うまくいかない時

  • HTTP URLに対するリクエストだったため、ナビゲーションできませんでした。
    古い http://… 版アイコンを起動している可能性があります。ホーム画面の古いアイコンを削除して、https://…:4173/ から追加し直してください。
  • Safariで警告が出る
    証明書のインストールか、証明書信頼設定 のオンがまだです。
  • つながらない
    Mac と iPhone が同じ Wi-Fi に接続されているか確認してください。

ちょっとサウンドON/OFFボタンがでかいけど、実利優先で気にしない。
効果音もこちらで用意しようかと思ったが、それも作ってくれてありがたい。またアプリアイコンも作ってくれた。まあイマイチだけど。。。
これも一発で出来たのではなく、あれこれ音が小さい、円形プログレスバーが小さい、これは要らない、起動に時間がかかるなどなどわがままいっぱいに指示を出した。

アプリアイコン

MacとiPhoneでスムースなデータのやり取り

また開発にあたってユニバーサルクリップボード(Appleデバイス間でコピペ)を使ってURLのコピペ やiPhoneミラーリングでスクショでの指示、エアドロップでローカル証明書を送るなど、MacとiPhone間のデータ渡しがスムースに出来たのでつまづくことがなかった。

これで、広告なし、課金なしで自分の思い通りのアプリができたのであった。デザイン的にはもうちょっと洗練させられるのだが、配信するわけでもない自分専用なのでそこに労力を割く必要もないかと。

既存アプリに不満やこうなってくれたら良いのに、という思いがあったら自分で思う通りのアプリが作れる時代です。

20260621 追記

タイマー作動中に他のアプリに切り替えるとサウンドが止まってしまった。これはWebアプリの制約出そうだ。これを解決するには他アプリに切り替えないで使用するか、iOSネイティブアプリにするしかないようだ。う〜ん。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次