概要

第3回RUNTEQ祭出場を目指して、かんたんなミニアプリを作る。

日程詳細

• 応募期間：10/14(土)0：00〜11/5(日)23：59
• 触ってみようイベント：11/11(土)
• 投票期間：11/11(土)〜11/26(日)
• RUNTEQ祭開催：12/2(土)
  ※応募条件はデプロイ済みであること

ミニアプリのアイデア

アプリ概要

1分間で何回猫のお尻を叩けるか記録を競うゲーム

ルール詳細

• 制限時間は1分
• 猫のお尻を一回クリックするごとに1ずつ回数がカウントアップ
• ただし何回まで連続で叩けるかの上限があり、そこに達するとカウントが０にリセットされる
• 連続で叩ける上限回数はゲーム開始時に毎回ランダムで決定する
• 1分が経過するとゲーム終了となり、最終的なお尻叩き回数が表示される

上記の案について、「開発難易度はどのくらいか？」「Railsベースでの開発は可能か？」とChat-GPTにたずねた結果がこちら。

提案されたゲームのアイデアは面白く、簡単に作成できる可能性があります。Ruby on Railsで開発することも可能ですが、一部の機能にJavaScriptが必要かもしれません。以下に難易度と開発手順の一般的な概要を示します。

開発難易度:

• 猫のお尻をクリックしてカウントを増やすこと自体は比較的簡単です。
• 制限時間のタイマーを設置し、1分間でのカウントダウンも実装できます。
• 連続で叩ける上限回数をランダムで設定する機能も実現可能ですが、少し複雑さが増します。
• リセット機能やゲーム終了後のスコア表示も追加できますが、これらも基本的な操作です。

総じて、このゲームはプログラミング初学者にとって良い練習プロジェクトとなるでしょう。

開発手順:

1. プロジェクトのセットアップ: Railsアプリケーションを作成し、必要なモデル、ビュー、コントローラを生成します。

2. ゲーム画面のデザイン: ユーザーがゲームをプレイするためのシンプルなUIを作成します。HTMLとCSSを使用して猫のお尻の画像を表示します。

3. ゲームロジックの実装:

   • 猫のお尻をクリックしたときにカウントを増やすロジックをJavaScriptで追加します。
   • 制限時間のタイマーを実装します。時間が経過するとゲームが終了し、スコアを表示します。

4. 連続で叩ける上限回数をランダムで設定する機能の実装:

   • Rubyでランダムな数を生成し、それをゲーム開始時に設定します。

5. ゲームのリセット機能の実装:

   • 連続叩き回数が上限に達した場合に、カウントをリセットするロジックを追加します。

6. ゲーム終了後のスコア表示:

   • ゲーム終了時に最終的なスコアを表示するUIを実装します。

以上の手順に従って、Ruby on RailsとJavaScriptを組み合わせてこのゲームを開発できるでしょう。開発中に問題が発生した場合や質問があれば、どうぞご質問ください。

追加で「制限時間タイマーの実装はJavascriptが良いか？」ときいたところ帰ってきた返答がこちら

はい、制限時間のタイマーを実装するのにはJavaScriptが最適です。JavaScriptはブラウザ上でクライアントサイドの操作を行うのに適しており、タイマーのカウントダウンや制御を効率的に行うことができます。

以下は、制限時間のタイマーをJavaScriptで実装する基本的な手順です：

1. HTMLでタイマーの表示領域を設定します。たとえば、 <div> 要素を使って制限時間を表示する場所を確保します。

2. JavaScriptでタイマーのロジックを実装します。以下は簡単な例です：

// 制限時間（秒）
var totalTime = 60;

// タイマーの更新間隔（ミリ秒）
var updateInterval = 1000;

// タイマー表示用の要素を取得
var timerElement = document.getElementById("timer");

// タイマーを開始する関数
function startTimer() {
  var timeLeft = totalTime;
  var timer = setInterval(function() {
    if (timeLeft <= 0) {
      clearInterval(timer); // タイマーを停止
      // タイムアップ時の処理をここに追加
    } else {
      timerElement.innerText = "残り時間: " + timeLeft + "秒";
      timeLeft--;
    }
  }, updateInterval);
}

// タイマーを開始
startTimer();

この例では、totalTime で制限時間を設定し、updateInterval でタイマーの更新間隔を設定しています。startTimer() 関数を呼び出すことでタイマーがスタートし、1秒ごとに残り時間が減少し、時間が0になるとタイマーが停止します。

このように、JavaScriptを使用することで制限時間のタイマーを簡単に実装できます。また、JavaScriptをRailsアプリケーションに統合することもできます。必要に応じてRailsとJavaScriptの連携方法についても質問していただければと思います。

かなり具体的に教えてくれた。助かる〜！

連続上限のルールは一旦なしにして、できそうならあとから追加することにする。
とにかく完成させることを目標にしよう。
開発の手順も本当は正しいステップの踏み方があるんだろうけど、もうあんまり気にせずやれそうなことからやっちゃう。Move Fastだ！

思いついたこと

まずはTurboStream使ってできるところまでやってみて、これはJavascriptじゃないと難しいかなと思ったところだけJSにしたらちょっとハードル下がるかも。

2023.11.5

締め切り今日なんだけど、応募数超少ないらしいのとちょうど中間試験がほぼ終わったところなので、できるところまでやってみることにする。間に合わなければそれはそれで。

Dockerの使い方とか調べてる余裕はないので、普通にローカルで作ってみよう。とりあえず rails new しちゃう！名前は ass_drum_app で。

できた。リモートリポジトリとの接続もOK。早速作っていく。
まずはルーティングかな。

あかんリソース使わないルーティングの書き方全然覚えてない。調べよう。

自信ないけどとりあえず書いた。次はコントローラとビューの生成。

Missing :controller key on routes definition, please check your routes. (ArgumentError) っていうエラーが出てなにかと思ったらrootの指定コードの書き方間違えてた。
root 'コントローラ名#アクション名 だね。

よし！無事ページが表示された。ここから色々作ってくぞ〜。
とりあえず見た目の問題は後回しにしてロジック作りたいので、必要最低限の内容でビューファイルを作る。