opus-ihttps://opus-i.comフリー素材とWeb技術メディアThu, 19 Jun 2025 15:57:32 +0000jahourly1https://opus-i.com/wp-content/uploads/2024/08/cropped-opus-i-favicon-32x32.pngopus-ihttps://opus-i.com3232 Amazon Q CLIで作る、神経衰弱×Gハンターゲームhttps://opus-i.com/amazon-q-cli-campaign/Fri, 13 Jun 2025 14:19:52 +0000https://opus-i.com/?p=516

突然ですが、このたび「Amazon Q CLI でゲームを作ろう Tシャツキャンペーン」に参加させていただき、｢Gハンターゲーム」を開発しました。このゲームは神経衰弱をベースにしたブラウザゲームで、家の中の隠れ場所から人 ... ]]>

突然ですが、このたび「Amazon Q CLI でゲームを作ろう Tシャツキャンペーン」に参加させていただき、｢Gハンターゲーム」を開発しました。このゲームは神経衰弱をベースにしたブラウザゲームで、家の中の隠れ場所から人類の敵、黒い悪魔＝Gを見つけて退治するという設定です。

実は最近家のお引越しをしたのですが、ありとあらゆるところに隙間のある中古物件で、引越し当初からGが出てしまい本当に大変でした・・・。せめてこの苦しみと悲しみをゲームに昇華させようと思い、キャンペーンに参加することにしました。

ゲームはこちら↓（ゲームオーバーで大変なことになるので、Gが苦手な方は要注意！）
https://opus-i.com/g_hunter_game.html

ブラウザゲームを作るのは人生で初めてでしたが、Amazon Q CLI のおかげで、わずか3時間ほどでゲームを完成させることができました。そしてリアルでもゲームをヒントに隙間を塞ぎまくったおかげでGも見なくなり、一石二鳥！という感じで本当に良かったです。

この記事ではざっくりですが、ゲームを作った過程とポイントをご紹介していきたいと思います。

目次

ゲーム概要

今回のゲームは、クリックするだけでOKのシンプルな神経衰弱と、G退治を組み合わせたブラウザゲームです。

ゲームルール

  • ジャンル: 神経衰弱
  • 目標: 10ペア（20枚）のカードをすべてマッチさせてGを退治
  • 制限: 40クリック以内でクリアする必要がある

ゲーム設定

プレイヤーは家の住人となり、冷蔵庫の後ろ、シンクの下、ベッドの下など、Gが潜んでいそうな10箇所の隠れ場所からGを見つけ出します。各場所には特徴的なアイコン（🧊🚿🛏など）が付いており、同じ場所のペアを見つけることでGを退治できます。

開発環境とツール

今回のブラウザゲームでは仕様策定から開発、動作検証までAmazon Q CLIとClaude Sonnet 4を利用しました。自然言語で説明するだけなので、私のようにプログラム知識がほとんどなくてもゲームが作成できると思います。

なお、細かいCSSアニメーションについてはニュアンスだけだと伝わりづらいことが多かったので、例えば「めくったカードの透過度は必ず100％、つまり透過なしにしてください。カードの絵柄を見えやすくするためです。」と目的と具体的な指示を伝えることでスムーズに進めることができました。

使用技術

  • フロントエンド: HTML5 + CSS3 + JavaScript
  • グラフィック: p5.js（キャンバス描画）
  • 開発支援: Amazon Q CLI + Claude Sonnet 4

開発の流れ

  1. Amazon Q CLIでプロジェクト初期化
  2. Claude Sonnet 4にゲーム仕様を相談
  3. 段階的な機能実装とテスト
  4. ビジュアル演出の追加
  5. ゲームバランス調整

Claude Sonnet 4について

従来モデルとの違い

当初、Amazon Q CLIのデフォルトモデルであるClaude Sonnet 3.7を使っていましたが、途中からSonnet 4に変更したおかげで、開発効率がかなりアップしました。

  • コード生成精度: 一発で動作するコードの生成率が大幅向上
  • 複雑な要求理解: 「神経衰弱でGを退治」という曖昧な要求も的確に理解
  • 最適化提案: パフォーマンス改善や可読性向上の提案が秀逸
  • デバッグ支援: エラーの原因特定と修正が迅速

実際の開発例

例えばAmazon Q CLIから「煙突から煙が立ち上るアニメーションが欲しい」と自然言語で依頼するだけで、以下のようなアニメーションを自動で実装してくれました。

JavaScript
// 煙のアニメション
function createSmokeParticle() { let smokeX = width/2 + 165; // 煙突の中央 let smokeY = 55; // 煙突の上部 smokeParticles.push({ x: smokeX + random(-5, 5), y: smokeY, vx: random(-0.5, 0.5), vy: random(-0.5, -1), size: random(8, 15), life: random(120, 180), opacity: random(150, 200), expansion: random(0.02, 0.05) });
}

風の影響・透明度の変化・サイズの拡大など、複数のアニメーションを組み合わせ、より自然な煙の動きになるようにしてくれています。

ゲームの技術的特徴

神経衰弱の実装

ゲームのコアとなる神経衰弱の実装も、Amazon Q CLIから作成しています。

JavaScript
function checkMatch() { let card1 = game.flippedCards[0]; let card2 = game.flippedCards[1]; if (card1.type === card2.type) { // マッチ成功の処理 card1.matched = true; card2.matched = true; game.matchedPairs++; game.cockroachCount++; // エフェクト生成 createParticles(card1.x + card1.width/2, card1.y + card1.height/2, '🎉'); }
}

ゲームバランス

当初は60クリック制限でしたが、テストプレイの結果、ちょっと簡単すぎることが判明。Amazon Q CLIでゲームバランスについて相談し、40クリックに変更することで、簡単すぎず難しすぎない適度なバランス調整ができました。

  • 40クリック制限: 適度な緊張感を演出
  • 幸福度システム: プレイヤーの進捗を視覚的に表現
  • 段階的難易度: 10ペアという適度なボリューム

視覚的演出

ゲームクリア時の紙吹雪エフェクトは最初、すぐにアニメーションが終わってしまう寂しいエフェクトだったのですが、Amazon Q CLIで変更を依頼し、ゲームクリアに相応しい華やかなエフェクトに改善することができました。

  • 背景: 空と雲が流れる家のイラスト
  • 煙突: リアルタイムで煙が立ち上る
  • パーティクル: マッチ成功時のエフェクト
  • 紙吹雪: ゲームクリア時の盛大な祝福を演出
  • Gの襲来: ゲームオーバー時の恐怖を演出

パフォーマンスの最適化

煙突から出てくる煙の動きが不自然、または煙が多すぎたり早すぎたりで、ブラウザが重くなる問題が発生。Amazon Q CLIを使って調整し、スムーズな動作を実現しました。

Amazon Q CLIの便利さ

開発のしやすさ

Amazon Q CLIを使うことで、その場で思いついたアイディアをすぐにコードに落とし込んで検証できました。｢こんなアニメーションはどうかな？」「こんな機能もつけたらよいかも？」と思いついたら、自然言語でAmazon Q CLIに相談するだけで実装できるため、とても便利です。不要になった機能を削除するのも簡単でした。

コード品質の向上

単なるコード生成ツールではなく、的確なコメント付きでパフォーマンスへの影響も含めて提案してくれるため、見やすく保守性の高いコードになっていると思います。

まとめ

開発環境: Amazon Q CLI + Claude Sonnet 4
開発時間: 約3時間
技術スタック: HTML5, CSS3, JavaScript, p5.js

Amazon Q CLIを使うことで、初めてのブラウザゲームでもすんなり作ることができました。
アイデアを形にするハードルがかなり低くなったので、ゲーム制作だけでなくお仕事でもたくさん活用していきたいです。

ゲームはこちら↓（Gが苦手な方は要注意！）
https://opus-i.com/g_hunter_game.html

]]>フリーBGM素材｢opus 006｣試聴＆ダウンロードhttps://opus-i.com/free-bgm-opus006/https://opus-i.com/free-bgm-opus006/#commentsSun, 25 Aug 2024 06:17:48 +0000https://opus-i.com/?p=480

無料で使える音楽素材「opus 006」のMP3 / WAVE / OGG / MIDI形式ファイルをまとめてダウンロードいただけます。 フリーBGM素材「opus 006」概要]]>

無料で使える音楽素材「opus 006」のMP3 / WAVE / OGG / MIDI形式ファイルをまとめてダウンロードいただけます。

フリーBGM素材「opus 006」概要

  • 素材種別： BGM（ループ）
  • 再生時間： 1:07
  • BPM： 132
  • 制作年月日： 2001/08/21
  • ファイル形式： MP3 / WAVE / OGG / MIDI
]]>https://opus-i.com/free-bgm-opus006/feed/2フリーBGM素材｢opus 002｣試聴＆ダウンロードhttps://opus-i.com/free-bgm-opus002/https://opus-i.com/free-bgm-opus002/#respondSat, 24 Aug 2024 15:11:49 +0000https://opus-i.com/?p=468

無料で使える音楽素材「opus 002」のMP3 / WAVE / OGG / MIDI形式ファイルをまとめてダウンロードいただけます。 フリーBGM素材「opus 002」概要]]>

無料で使える音楽素材「opus 002」のMP3 / WAVE / OGG / MIDI形式ファイルをまとめてダウンロードいただけます。

フリーBGM素材「opus 002」概要

  • 素材種別： BGM（ループ）
  • 再生時間： 0:19
  • BPM： 96
  • 制作年月日： 1999/08/24
  • ファイル形式： MP3 / WAVE / OGG / MIDI
]]>https://opus-i.com/free-bgm-opus002/feed/0フリーBGM素材｢opus 003｣試聴＆ダウンロードhttps://opus-i.com/free-bgm-opus003/https://opus-i.com/free-bgm-opus003/#respondWed, 21 Aug 2024 16:44:47 +0000https://opus-i.com/?p=445

無料で使える音楽素材「opus 003」のMP3 / WAVE / OGG / MIDI形式ファイルをまとめてダウンロードいただけます。 フリーBGM素材「opus 003」概要]]>

無料で使える音楽素材「opus 003」のMP3 / WAVE / OGG / MIDI形式ファイルをまとめてダウンロードいただけます。

フリーBGM素材「opus 003」概要

  • 素材種別： BGM（ループ）
  • 再生時間： 0:48
  • BPM： 80
  • 制作年月日： 1999/10/17
  • ファイル形式： MP3 / WAVE / OGG / MIDI
]]>https://opus-i.com/free-bgm-opus003/feed/0フリーBGM素材｢opus 004｣試聴＆ダウンロードhttps://opus-i.com/free-bgm-opus004/https://opus-i.com/free-bgm-opus004/#respondTue, 20 Aug 2024 16:10:15 +0000https://opus-i.com/?p=432

無料で使える音楽素材「opus 004」のMP3 / WAVE / OGG / MIDI形式ファイルをまとめてダウンロードいただけます。 フリーBGM素材「opus 004」概要]]>

無料で使える音楽素材「opus 004」のMP3 / WAVE / OGG / MIDI形式ファイルをまとめてダウンロードいただけます。

フリーBGM素材「opus 004」概要

  • 素材種別： BGM（ループ）
  • 再生時間： 1:14
  • BPM： 84
  • 制作年月日： 2001/03/23
  • ファイル形式： MP3 / WAVE / OGG / MIDI
]]>https://opus-i.com/free-bgm-opus004/feed/0フリーBGM素材｢opus 005｣試聴＆ダウンロードhttps://opus-i.com/free-bgm-opus005/https://opus-i.com/free-bgm-opus005/#respondMon, 19 Aug 2024 13:46:55 +0000https://opus-i.com/?p=415

無料で使える音楽素材「opus 005」のMP3 / WAVE / OGG / MIDI形式ファイルをまとめてダウンロードいただけます。 フリーBGM素材「opus 005」概要]]>

無料で使える音楽素材「opus 005」のMP3 / WAVE / OGG / MIDI形式ファイルをまとめてダウンロードいただけます。

フリーBGM素材「opus 005」概要

  • 素材種別： BGM（ループ）
  • 再生時間： 0:53
  • BPM： 108
  • 制作年月日： 2001/04/12
  • ファイル形式： MP3 / WAVE / OGG / MIDI
]]>https://opus-i.com/free-bgm-opus005/feed/0Noto Sans JPで、font-feature-settings: “palt”が効くようになっていたhttps://opus-i.com/noto-sans-jp-palt-support/https://opus-i.com/noto-sans-jp-palt-support/#respondSun, 18 Aug 2024 15:14:19 +0000https://opus-i.com/?p=131

Noto Sans JPは、Googleが開発した日本語フォントの一つで、多くのウェブサイトやアプリケーションで使用されています。 記事のタイトルそのままですが、最近このNoto Sans JPでfont-feature ... ]]>

Noto Sans JPは、Googleが開発した日本語フォントの一つで、多くのウェブサイトやアプリケーションで使用されています。

記事のタイトルそのままですが、最近このNoto Sans JPでfont-feature-settingsプロパティが問題なく機能するようになり、font-feature-settings: “palt”なども効くようになったことがわかりました。

目次

font-feature-settingsとは？

font-feature-settingsは、OpenTypeフォントの高度な機能を制御するためのCSSプロパティです。このプロパティを使用することで、約物半角、プロポーショナルメトリクス、リガチャ、スモールキャップ、旧字体など、フォントに組み込まれた様々な機能をカスタマイズできます。

Noto Sans JPでの変更点

従来、Noto Sans JPではfont-feature-settingsの多くの機能が利用できませんでした。
私の環境でも、フォントがリリースされてからしばらくはfont-feature-settings：”palt”が効いていた → しかし、あるときを境に効かなくなった → 最近再びfont-feature-settings：”palt”が効くようになった、といった形です。

おそらく、Noto Sans JPを採用するサイトが増えたためにトラフィックを減らす等の理由で、フォントファイルからfont-feature-settingsを含むフォント情報を削除したのかなと推測しています。

とにかく、最新のアップデートによってfont-feature-settings：”palt”が効くようになったのは嬉しいニュースです。Webデザインでの日本語フォントの文字組みで、より細かな調整が可能となりました。

主な機能と使用

約物半角とプロポーショナルメトリクス

  • 例：font-feature-settings: "palt";
  • 効果：記号や括弧類などの約物を半角するなど、全体の文字間のレイアウトを整える

プロポーショナル数字

  • 例：font-feature-settings: "pnum";
  • 効果：文章中の数字の幅が均一でなくなり、より自然な印象に

スモールキャップ（アルファベット）

  • 例：font-feature-settings: "smcp";
  • 効果：小文字を小さな大文字に変換

実装方法

たとえばfont-feature-settings: “palt”の場合、HTMLとCSSで以下のように指定します。

HTML
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">
CSS
.custom-text { font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt";
}

注意点

  • ブラウザやデバイスによってサポート状況が異なる場合があります。
  • パフォーマンスへの影響を考慮し、必要な箇所でのみ使用することをお勧めします。

まとめ

Noto Sans JPでfont-feature-settingsが効くようになったことで、より簡単に日本語テキストレイアウトの調整が可能となりました。

Googleの仕様変更により再度変更となる可能性もありますが、font-feature-settings: “palt”は効かなくなった場合でも特に不具合等は発生せず影響がほとんどないCSSプロパティのため、今まで諦めていた方はぜひお試しいただけると幸いです。

参考リンク

]]>https://opus-i.com/noto-sans-jp-palt-support/feed/0フリーBGM素材｢opus 007｣試聴＆ダウンロードhttps://opus-i.com/free-bgm-opus007/https://opus-i.com/free-bgm-opus007/#respondMon, 12 Aug 2024 14:47:48 +0000https://opus-i.com/?p=323

無料で使える音楽素材「opus 007」のMP3 / WAVE / OGG / MIDI形式ファイルをまとめてダウンロードいただけます。 フリーBGM素材「opus 007」概要]]>

無料で使える音楽素材「opus 007」のMP3 / WAVE / OGG / MIDI形式ファイルをまとめてダウンロードいただけます。

フリーBGM素材「opus 007」概要

  • 素材種別： BGM（ループ）
  • 再生時間： 1:06
  • BPM： 116
  • 制作年月日： 2001/12/09
  • ファイル形式： MP3 / WAVE / OGG / MIDI
]]>https://opus-i.com/free-bgm-opus007/feed/0フリーBGM素材｢opus 001｣試聴＆ダウンロードhttps://opus-i.com/free-bgm-opus001/https://opus-i.com/free-bgm-opus001/#respondMon, 12 Aug 2024 12:35:39 +0000https://opus-i.com/?p=272

無料で使える音楽素材「opus 001」のMP3 / WAVE / OGG / MIDI形式ファイルをまとめてダウンロードいただけます。 フリーBGM素材「opus 001」概要]]>

無料で使える音楽素材「opus 001」のMP3 / WAVE / OGG / MIDI形式ファイルをまとめてダウンロードいただけます。

フリーBGM素材「opus 001」概要

  • 素材種別： BGM（ループ）
  • 再生時間： 0:55
  • BPM： 130
  • 制作年月日： 1999/02/17
  • ファイル形式： MP3 / WAVE / OGG / MIDI
]]>https://opus-i.com/free-bgm-opus001/feed/0フリーMIDI素材「opus 001」～「opus 015」試聴＆ダウンロードhttps://opus-i.com/free-midi-assets-list/https://opus-i.com/free-midi-assets-list/#respondSun, 11 Aug 2024 15:08:55 +0000https://opus-i.com/?p=209

※試聴用BGM：「opus 001」 過去に配布していたMIDIファイル形式のフリーBGM素材一覧です。｢opus 001」から「opus 015」までのMIDIファイルをまとめてダウンロードいただけます。]]>

※試聴用BGM：「opus 001」

過去に配布していたMIDIファイル形式のフリーBGM素材一覧です。
｢opus 001」から「opus 015」までのMIDIファイルをまとめてダウンロードいただけます。

]]>https://opus-i.com/free-midi-assets-list/feed/0