Amazon Q で一息つけるタイマーを作成する
2025/6/18 JAWS-UG 茨城 のイベントに参加して来ました。
イベントレポート中心の記事はこちら
結局イベント時間内ではタイマーの完成まで辿り着けなかったので、本記事はイベント後に、最後までタイマーを作成させた記事となります。
主に自分用にAmazonQのチャットも省略を入れつつ、どのようなやり取りを行なったか詳細に記載しています。チャットの区切りがわかり難いので、便宜上 私) AmazonQ)としてどちらからのチャットか記載しています。
完成品
6/22 追記
本記事のLT版をQiitaに公開しました。
Amazon Qのインストール情報
こちらはイベント前に実行していたのですが情報として記載しておきます。
キャンペーンページにもリンクと、既に Amazon Qでゲームを作ってみた記事がたくさんあるのでそれらを参考にインストールを実施しました。Windowsだとちょっと大変らしいですね。
pygameというライブラリを使っている方が多かったので、pygameを使用するためインストールしましたが、こちらの記事のようにQを使用してインストールまでできました。
タイマーの開発を再開する
JAWS-UG 茨城のイベントで未完成だったタイマーの続きを作ります。今回作るのは、PC作業中などに一息つけるようなタイマーで以下のようなグラフィックが時間の経過に連動します。
・トップ画面で3分を指定
・左端からキャラクターが1分かけてベンチに到達
・残り時間1分までベンチに座って休む。
・残り時間1分になるとキャラクターが右に移動
・右端にキャラクターがたどり着くを終わり
で、イベント時の試作版がこちら。
ベンチに犬と座って休憩
残像だ
イベント終了時点では、キャラクターの描画の制御がうまくいかず、残像が残る状態に。
さらにベンチに座らなくなるなど、色々デグレしてしまっていました。
開発の再開は、pythonのスクリプト名を指定して難なく再開できました。
色々機能を盛り込んだ結果バグ、要素を減らしつつ、一つ一つバグを潰していきます。
私)
先日作成した One Dayのアプリの続きを作成したいです。
コードをチェックして無駄な箇所がないか確認して修正してもらえますか。
修正後はエラーなく実行できるかのチェックをお願いします。
AmazonQ)
先日作成したOne Dayアプリのコードを確認して修正いたします。まず、現在のディレクトリにあるファイルを確認させてください。
🛠️ Using tool: fs_read (trusted)
⋮
● Reading directory: /Users/fullen with maximum depth of 0
⋮
● Completed in 0.2s
One Dayアプリのファイルが見つかりました。one_day.pyとrun_one_day.shがあります。まず、メインのPythonファイルを確認しましょう。
(中略)
## 修正完了！
One Dayアプリのコードを確認し、以下の問題を修正しました：
### 🔧 修正した問題点：
1. 重複したメソッド定義の削除
• create_benchメソッドが重複していたため、1つに統合
2. 未完成コードの削除
• 未完成の木描画コードを削除
• 未定義のtrees変数を参照していた部分を修正
3. 未使用コードの削除
• 使用されていないサウンド初期化コード
• 未使用のUI要素（スライダー関連）
• 未使用のテキストサーフェス
4. 実行スクリプトの改善
• より詳細なエラーチェック
• ユーザーフレンドリーなメッセージ
• 絵文字を使った視覚的な改善
### ✅ テスト結果：
• **構文チェック**: ✅ エラーなし
• **インポートテスト**: ✅ 正常
• **初期化テスト**: ✅ 正常
• **メソッドテスト**: ✅ すべて動作
• **Pygame互換性**: ✅ バージョン2.6.1で動作確認
### 🎮 アプリの機能：
• **季節対応**: 春夏秋冬の景色変化
• **時間対応**: 朝・昼・夕・夜の雰囲気変化
• **歩行時間選択**: 3分、5分、10分、25分、45分から選択
• **3段階の歩行**: 歩行→休憩→歩行の構成
• **季節オブジェクト**: 花、蝶、落ち葉、雪など
### 🚀 実行方法：
bash
# 直接実行
./run_one_day.sh
# または
python3 one_day.py
アプリは現在エラーなく実行できる状態になっています。メニューから歩行時間を選択して、季節と時間に応じた美しい景色を楽しめます！
無事、プロジェクトが再開できました。
不具合の対処
バグも解消したようなので動かしてみます。
残像が残る問題は解消したようですが、中央のベンチに座らないバグは継続しています。
想定動作としては、5分で設定した場合、2分〜4分まではベンチに座って欲しいのですが、
ベンチには目もくれず直進し、2分時点で右端に到達しタイマー終了。
もっと明確に機能を指定してバグを解消してもらおうと試みます。
私)
いくつか機能していない箇所があります。
これがなぜ機能しないか考えて下さい
1 キャラクターはベンチまでは1分で辿り着く
2 ベンチにたどり着いた時にキャラクターはベンチに座る
3 残り時間が1分になると、キャラクターは再び歩き始めて1分かけて画面右端まで辿り着く
この結果でバグは解消したとQは言いますが、改善せず、言い方を変えて再度バグの特定を依頼します。
私)
改めて実行しましたが、やはりベンチに座りません。
3分で実行したのですが、ベンチに座らず右に2分で辿り着いてしまいます。
ベンチに座って休むという動作が機能していないためです。
AmazonQ)
ベンチに座る機能が動作していない問題を詳しく調査します。まず、現在のコードの動作を確認しましょう。
🛠️ Using tool: fs_read (trusted)
⋮
● Searching: /Users/fullen/one_day.py for pattern: if self.is_resting:
⋮
✔ Found: 3 matches
⋮
● Completed in 0.0s
問題を特定するために、デバッグ用のテストスクリプトを作成して実際の動作を確認しましょう：
(中略)
● Searching: /Users/fullen/one_day.py for pattern: rest_duration
⋮
✔ Found: 3 matches
⋮
● Completed in 0.0s
問題を発見しました！rest_durationが設定されていないため、休憩時間の表示でエラーが発生している可能性があります。修正しましょう：
(中略)
さらに重要な問題を発見しました。randomモジュールがインポートされていない可能性があります。確認しましょう：
🛠️ Using tool: fs_read (trusted)
⋮
● Reading file: /Users/fullen/one_day.py, from line 1 to 10
⋮
● Completed in 0.0s
randomはインポートされています。次に、デバッグ版を修正して実行してみましょう：
(中略)
⋮
● Completed in 0.0s
さらに重要な問題を発見しました。元のコードを詳しく見直すと、実際の問題は**Phase 3の条件**にあります。現在のロジックでは、elif not self.is_resting and self.elapsed_time > 60という条件が、Phase 1の直
後に実行されてしまう可能性があります。
修正しましょう：
🛠️ Using tool: fs_write (trusted)
⋮
● Path: one_day.py
(中略)
修正前の問題のあるコード:
python
# Phase 3: Walk to end (last minute)
elif not self.is_resting and self.elapsed_time > 60:
この条件では、Phase 1が終わった直後（60秒経過時点）に即座にPhase 3に移行してしまい、**Phase 2（休憩）がスキップ**されていました。
修正後:
python
# 明確なフェーズ管理システムを導入
self.current_phase = 1 # 1: walk to bench, 2: rest, 3: walk to end
# Phase-based movement logic
if self.current_phase == 1: # Walk to bench
elif self.current_phase == 2: # Rest on bench
elif self.current_phase == 3: # Walk to end
### 🔄 修正した動作フロー：
#### **Phase 1 (0-60秒): ベンチまで歩く**
• キャラクターが画面左端からベンチまで移動
• 60秒でベンチに到達するよう速度計算
• ベンチ到達時にcurrent_phase = 2に移行
#### **Phase 2 (60秒-残り60秒): ベンチで休憩**
• is_resting = Trueでキャラクターがベンチに座る
• draw_character_sitting()が呼ばれる
• 時々空を見上げる動作
• 残り60秒になったらcurrent_phase = 3に移行
#### **Phase 3 (最後の60秒): 画面右端まで歩く**
• ベンチから画面右端まで移動
• 60秒で到達するよう速度再計算
### 🐛 追加で修正した問題：
1. rest_durationが未設定: 休憩時間表示でエラーが発生していた
2. リセット時の状態: フェーズとフラグが正しくリセットされていなかった
3. デバッグ情報: より詳細なログでフェーズ移行を確認可能
### 🎮 期待される動作（3分選択時）：
[0-60秒] 🚶 Phase 1: ベンチまで歩く
[60-120秒] 🪑 Phase 2: ベンチで休憩（座っている）
[120-180秒] 🚶 Phase 3: 画面右端まで歩く
これで、キャラクターが確実にベンチに座って休憩するはずです！
問題を特定して、ロジックを更新することができました。
やはり動作上、機能しない点を明確に伝えることが重要ですね。
きちんとベンチに座るように改善されていました。
残り時間1分になると、ベンチから右端へ移動を開始したので、これで不具合は解消です。
更なる心地よさを求めて
ここからは更なる心地よさを求めて機能を追加していきます。
ウィンドウリサイズ機能
横長のウィンドウサイズを指定しており、ウィンドウサイズを変更できませんでした。動作確認をするうちに、気分に合わせて画面を大きくして、空や海の表示面積を広くしたいと思うようになったため、ウィンドウサイズを変更できる機能の追加を行うことにしました。
私)
ウィンドウサイズを自由に変更できる機能を追加したいのですが。
この変更により、歩くスピードを変更しないといけないでしょうか。
変更が必要な箇所を特定して変更/デバッグをお願いします。
私）
設定ボタンが不要です。
トップ画面について、先にサイズ指定をさせてから、時間指定をさせてスタートさせるようにしましょう。
デフォルトのサイズをSmallのサイズ指定にして下さい。
私）
ユーザ体験的に、設定からではなく、ウィンドウ側の操作でサイズを変更できた方がいいです。
スタートの時にウィンドウサイズをチェックして、歩くスピードを調整するようにできませんか
縦のサイズを変更すると、キャラクターが歩く位置が空中に浮いてしまいます。ベンチの高さと同じ高さで描画するようにした方が良いでしょう。
AmazonQ)
素晴らしいプランですね。
(中略)
## 🎉 ネイティブウィンドウリサイズ機能の実装完了！
### 🆕 実装された新機能：
#### **1. 直感的なウィンドウリサイズ**
• **OSネイティブ操作**: ウィンドウの角や辺をドラッグして自由にリサイズ
• **リアルタイム対応**: ドラッグ中も即座に反映
• **最小サイズ制限**: 600x200以下にならないよう制限
#### **2. 動的ゲーム調整システム**
• **歩行速度の自動再計算**: リサイズ後も正確に60秒でベンチに到達
• **キャラクター位置の比例調整**: 新しいウィンドウサイズに合わせて位置を調整
• **フェーズ別速度調整**: Phase 1と3で異なる速度計算ロジック
#### **3. アセット動的再生成**
• **背景要素**: 雲（幅×3）、海（幅×2）、道路（幅×1）を新サイズで再生成
• **季節オブジェクト**: 花、雪などの配置を新しいサイズに調整
• **UI要素**: タイマーやボタンの位置を自動調整
### 🔧 技術的な改善点：
#### **リサイズイベント処理**
python
elif event.type == VIDEORESIZE:
self.handle_window_resize(event.w, event.h)
#### **ゲーム中の動的調整**
python
# Phase 1: 残り時間でベンチまでの速度を再計算
remaining_time = max(60 - self.elapsed_time, 1)
distance_to_bench = self.bench_x - self.character_x
self.walk_speed = distance_to_bench / (remaining_time * self.FPS)
# Phase 3: 残り時間で画面端までの速度を再計算
remaining_time = max(self.walk_duration - self.elapsed_time, 1)
remaining_distance = self.WINDOW_WIDTH - self.character_x
self.walk_speed = remaining_distance / (remaining_time * self.FPS)
#### **比例スケーリング**
python
# キャラクター位置を新しいウィンドウサイズに比例調整
position_ratio = self.character_x / old_width
self.character_x = position_ratio * self.WINDOW_WIDTH
### 🎮 ユーザー体験の向上：
#### **Before（設定メニュー方式）**
1. 設定ボタンをクリック
2. サイズを選択
3. 適用を待つ
#### **After（ネイティブリサイズ）**
1. ウィンドウの角をドラッグ
2. 即座に反映
3. ゲーム中でも調整可能
### ✅ テスト結果：
• **基本リサイズ**: ✅ 正常動作
• **最小サイズ制限**: ✅ 600x200で制限
• **ゲーム中リサイズ**: ✅ 速度が正確に再計算
• **アセット再生成**: ✅ 全要素が新サイズに対応
• **比例スケーリング**: ✅ キャラクター位置が適切に調整
### 🚀 使用方法：
bash
# アプリを起動
./run_one_day.sh
# 使い方：
# 1. ウィンドウの角や辺をドラッグしてリサイズ
# 2. ゲーム中でもリサイズ可能
# 3. 1-5キーでプリセットサイズに即座に変更
# 4. 歩行速度は自動で調整されます
### 🎯 主な利点：
1. 直感的操作: OSの標準的なリサイズ操作
2. リアルタイム調整: ゲーム中でも即座に反映
3. 正確な時間管理: どのサイズでも正確に60秒でベンチ到達
4. 美しい表示: 全てのアセットが新サイズに最適化
これで、ユーザーは自分の画面サイズや好みに合わせて、いつでも自由にウィンドウサイズを調整できるようになりました！ゲーム中でも歩行速度が自動調整されるため、常に最適な散歩体験を楽しめます。
タイマー動作中でもウィンドウサイズの変更で、比例して背景やキャラクターを描画できるようになり、
ウィンドウリサイズ機能の追加も無事完了できました。
ベンチアクションの追加
イベント時に犬を追加したりベンチを追加していましたが、私自身が犬を飼っていることや、リモートワークの際はベンチに座って仕事をしているため、彼らをより近く感じることで、彼らのリラックスが伝播することを期待したものでした。
ベンチを広くして、彼らがよりリラックスした時間を過ごせるようにします。
当然、私のリラックス効果も向上します。
私）
ベンチのサイズを横に3倍にしてください
ベンチに座った時の動作についてたまに空を見上げるという動作を入れていますが、このバリエーションを増やして下さい。
ベンチに座ったら何をするでしょうか。座ったままでできることをいくつか提案して下さい。
AmazonQ)
(中略)
### 🎭 追加された座位活動バリエーション：
#### **8種類の多彩な活動**
1. 🌅 空を見上げる (looking_up)
• 頭を後ろに傾けて空を見上げる
• 持続時間: 3秒
2. 🤸 ストレッチ (stretching)
• 両腕を上に伸ばしてストレッチ
• 持続時間: 2秒
3. 🐕 犬を撫でる (petting_dog)
• 犬の方を向いて撫でる動作
• 犬が近づいて尻尾を振る
• 持続時間: 4秒
4. 📱 スマホチェック (checking_phone)
• 下を向いてスマホを見る
• 手にスマホを表示
• 持続時間: 5秒
5. 💧 水分補給 (drinking_water)
• 水筒を持って水を飲む
• 青い水筒を表示
• 持続時間: 3秒
6. 🫁 深呼吸 (deep_breathing)
• 静かに座って深呼吸
• 持続時間: 4秒
7. 👀 景色を眺める (watching_scenery)
• 遠くを見つめて景色を楽しむ
• 持続時間: 6秒
8. 👕 服装を整える (adjusting_clothes)
• 服装を整える動作
• 持続時間: 2秒
### 🎮 動作システムの特徴：
#### **ランダム活動システム**
python
# 30%の確率で新しい活動を開始
if random.random() < 0.3:
self.start_random_activity(current_time)
else:
# 5-15秒間普通に座る
self.current_activity = "sitting"
#### **視覚的な変化**
• **頭の向き**: 活動に応じて上下左右に変化
• **腕の位置**: ストレッチ、水分補給、犬を撫でる時に変化
• **犬の反応**: 撫でられる時は近づいて尻尾を振る
• **小道具**: スマホ、水筒などが表示される
#### **デバッグ情報**
🎭 Started activity: Petting the dog (for 4s)
🎭 Started activity: Looking up at the sky (for 3s)
🎭 Started activity: Checking phone (for 5s)
### 🌟 ユーザー体験の向上：
#### **Before（単調）**
• たまに空を見上げるだけ
• 同じポーズで座り続ける
#### **After（多彩）**
• 8種類の異なる活動
• 犬との触れ合い
• 現代的な要素（スマホ）
• 健康的な要素（ストレッチ、水分補給）
• 自然な休憩行動
### 🎯 座位活動の提案理由：
1. 🐕 犬を撫でる: ペットとの触れ合いでリラックス
2. 📱 スマホチェック: 現代的で自然な行動
3. 💧 水分補給: 健康的で実用的
4. 🤸 ストレッチ: 座りっぱなしの解消
5. 🫁 深呼吸: マインドフルネス・瞑想的要素
6. 👀 景色を眺める: 自然との一体感
7. 👕 服装を整える: 日常的で自然な動作
8. 🌅 空を見上げる: 開放感と癒し
これで、ベンチでの休憩時間がより豊かで楽しいものになりました！毎回異なる活動が見られるので、何度でも楽しめます。
正直グラフィックが荒いので何をやってるかはわからないですが、きちんと機能してなくたって、この情報だけでリラックス効果があるとまで言えます。
没入感を高める
ここまででイベントの際に実装しようと考えていた機能は実装できたのすが、ここまでの実装の過程でもっと手を加えることができるというか、違和感のあるポイントが出てきてしまいました。
それはこのタイマーの中に私が存在しないという違和感です。
私を追加する
当初、散歩する彼らについて明確にどういう位置付けのキャラクターなのか決めていなかったのですが、彼らを眺めると言う構成にした結果、明確に私ではない存在となりました。
より完全な体験を得るためには、設定として彼らを眺めるのではなく、彼らを眺める私を代替する存在をタイマー内を追加する必要があります。
私とKの視点を同期する
紛らわしいので、ゲーム内の私のキャラクターをKとします。
言うまでもなく私は現実でPCの前に座っており、
このタイマーを起動させるにはキーボードやトラックパッドの操作が必要です。
私とタイマーの中のKの視点をスムーズに同期させるにはどうすればいいか。
先ほど、散歩する彼に犬を与えて、ベンチで犬と一緒に過ごすように手を加えたのは自分と境遇を近くすることを狙ったものでした。
結局、これと近いことを行えば良いと考えられます。
つまり、タイマーのトップ画面をKの視点にして、私とそっくり同じく椅子に座ってPCを操作する状態から開始させることで、私とKの距離を近くして視点を同期させるということです。
私)
トップ画面ですが、 時間指定などの機能はそのままに別な画像にしたいです。
イメージとしては、部屋の中でパソコン作業をしていて、ふと窓の外を見たら、
キャラクターが散歩しているのが見えて、そのままずっと見ていたという形にしたいです。
そのような効果を加えることができるでしょうか。
コードに修正を加える前に、どのようなプランで取り組むかを協議しましょう。
私）
トップ画面の背景は部屋の中にしましょう。シンプルで構いません。
正面にはパソコンの画面があり、そして左側には窓があります。
私）
正面のディスプレイに時間の入力欄とするアイデアは気に入りました。
時間を入力した後、視点が窓にフォーカスしていき、散歩の画面に移る〜という表現に
私）
窓にフォーカスするときに、椅子から立ち上がって窓に近づいていくというように、
視点を上げて、立ち上がらせて、窓に近づくときに上下に揺れを入れましょう。
AmazonQ)
(中略)
⋮
● Completed in 1.33s
## 🎉 部屋から窓への遷移システム実装完了！
### ✅ 実装された新機能：
#### **1. 部屋の背景システム**
• **シンプルな部屋**: 壁、窓、机、CRT画面
• **時間帯対応**: 室内照明が時間に応じて変化
• **窓の空色反映**: 散歩シーンの空色が窓に反映
#### **2. レトロCRT画面**
• **緑色のモニター**: 昔のコンピューター風
• **走査線エフェクト**: CRTらしい表現
• **時間入力UI**: CRT画面上で時間設定
#### **3. 3段階遷移アニメーション**
Phase 1: 立ち上がり (0.0-0.4秒)
python
# カメラが上に移動（視点の高さ変化）
self.camera_y = self.ease_in_out(progress) * -30
Phase 2: 窓への移動 (0.4-0.9秒)
python
# 窓に向かって横移動
self.camera_x = self.ease_in_out(progress) * -200
# 窓が徐々に大きく
self.window_scale = 0.3 + (progress * 0.4)
Phase 3: 窓フォーカス (0.9-1.0秒)
python
# 窓が画面全体に拡大
self.window_scale = 0.7 + (progress * 0.3)
#### **4. スムーズな視覚効果**
• **イージング関数**: 自然な加速・減速
• **CRT画面フェードアウト**: 立ち上がり時に消える
• **窓内散歩シーン**: 遷移中に窓の中で散歩開始
### 🎬 ユーザー体験フロー：
#### **1. 部屋でパソコン作業**
┌─────────────────────────────────────┐
│ [窓-小] [壁] │
│ [空色反映] │
│ │
│ [CRT画面] │
│ [時間入力] │
│ │
│ [机] [キーボード] │
└─────────────────────────────────────┘
#### **2. 立ち上がり**
• 視点が上に移動
• CRT画面がフェードアウト
• 机全体が見えるように
#### **3. 窓への移動**
• カメラが窓に向かってパン
• 窓が徐々に拡大
• 部屋の要素がフレームアウト
#### **4. 散歩シーン開始**
• 窓が画面全体に
• 散歩が自動開始
### 🔧 技術的特徴：
#### **状態管理システム**
python
self.transition_phase = "room" # room -> standing -> walking -> window -> game
#### **カメラシステム**
python
self.camera_x = 0 # 横移動
self.camera_y = 0 # 縦移動（立ち上がり）
self.window_scale = 0.3 # 窓のスケール
#### **時間帯連動**
• 部屋の照明が時間に応じて変化
• 窓の空色が散歩シーンと同期
• CRT画面の明るさも調整
### 🎮 操作方法：
bash
# アプリを起動
./run_one_day.sh
# 使用方法：
# 1. CRT画面で時間を入力
# 2. Enterキーを押す
# 3. 自動的に立ち上がって窓に移動
# 4. 散歩シーンが開始
# 5. 完了後はRキーでリスタート
### 🎯 実装されたコンセプト：
「パソコン作業に疲れて窓の外を眺める」
• ✅ 部屋でのパソコン作業シーン
• ✅ CRT画面での時間設定
• ✅ 椅子から立ち上がる表現
• ✅ 窓に近づく動作
• ✅ 窓の外の散歩を眺める
• ✅ 時間帯に応じた空色の反映
これで、より自然で没入感のある散歩体験アプリが完成しました！部屋から窓への遷移が、実際に作業に疲れて外を眺めるという体験を見事に表現しています。
さらに、細かい修正を重ねて、Kを実装することができました。
完成へ
以上で全ての機能の実装が完了しました。
タイマーはgithubに公開しています。
イベントが2時間で、イベント完了後に2時間くらい色々修正にかかりました。
Amazon Qとゲームを作るという体験自体に非常にゲーム性があり、没頭することができました。
追加するとしたら以下のような要素になるでしょうか。
・サウンドの追加（海の音、タイマー終了時の音など）
・時間帯や季節のオブジェクトを追加
・トップ画面の描写を細かくする
・キャラクターの描画を細かくしてアクションをわかりやすく
・日時データを引数で受け取れるようにしてデバッグしやすく
個人的にはウィンドウのリサイズに応じて、風景の描写を連動させる機能が、広く風景を見ることができて気に入りましたので、最初から盛り込んでも良かったと思います。
最後に画面や機能などまとめて記載いたします。
最後までご覧いただき、ありがとうございました。
タイマーの流れ
Top 時間指定
窓に近づく1
窓に近づく2
左端から1分かけてベンチへ歩く
ベンチで残り1分まで休憩
1分かけて右端へ歩く
タイマー完了
機能
3分〜60分の時間指定
ウィンドウのリサイズ
夕方の風景
夜の風景
Discussion