8
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【個人開発】ミニゲームwebアプリ「KANIDIAN POKER」を作りました【Ruby on Rails】

Last updated at Posted at 2025-08-19

はじめに

初めましてこんにちは、ほげがめのてー(@sss__727)と申します。
現在、完全未経験からWebエンジニアを目指してオンラインプログラミングスクールRUNTEQにてRuby on Railsを学習しています。

この度、7月30日にミニゲームwebアプリ「KANIDIAN POKER」(以下、カニポカ)をリリースいたしました。
このアプリに対する思いを綴った開発秘話は下記にございます。
よろしければご一読くださいませ。

今回はカニポカの紹介、技術、感想などについてまとめさせていただきます。
どうぞよろしくお願いいたします。

目次

1. 作成経緯
2. Webアプリの紹介
3. 技術スタック
4. こだわり
5. 反省点
6. 感想
7. 今後の展望

1.作成経緯

私の通うスクールではカリキュラムの中盤に「中間試験」があり、それを終えると今まで学んだ知識をさらに深めるためのアウトプット=アプリ開発がセオリーとなっています(この流れはあくまで非公式)。
私も例に漏れず、このセオリーを踏みたいと思い、カニポカを制作しました。
上記の開発秘話でも綴りましたが、これはコミュニティ内の交流をより活性化させるべく作られたアプリです。
そのため匿名の誰かとのバトルはあまり想定しておらず、共に学ぶ同期たちにシンプルな勝った、負けたで「楽しい!」を届けたい一心で作り上げました。

開発期間は7月22〜30日の9日間です。

2.Webアプリの紹介

登録されているユーザーを指名してインディアンポーカーで勝負するミニアプリです。

logo.001.png

サービスURL

GitHub

ゲストユーザー情報

【金髪の校長】
二つ名:金髪
ニックネーム:校長
パスワード:1234

実績

どこまでも初学者レベルでありコミュニティ内での告知のみですが、リリースから約3週間で
アクティブユーザー数は106、イベント件数も1.3万件に。
個人的には20人ほどに楽しんでもらえればと思っていたので、ありがたいばっかりです。

アプリの着想

1対1のバトルゲームを作る際に、自分の戦績は①自ら勝負を仕掛けた場合、②相手から勝負を仕掛けられた場合の両方で計上されるように設計することをマストでどんなゲームにするのかを考えました。
最初はあれこれ複雑な設定を思い浮かべましたが、初学者故、技術が至らない点からシンプルに決着のつくインディアンポーカーを模したものに。
事の本質は「同期に楽しんでもらうミニゲーム」だったので、内容はなんでもよかったのです。

機能紹介

ログイン

Adobe Express - Adobe Express - login.gif

二つ名、ニックネーム、パスワードでユーザー登録・ログイン認証を行います。
後のこだわりにも書きますが、「気軽に楽しんでほしい vs ユーザー同士の勝負(=ユーザー登録必須)」がせめぎ合った結果、あくまでアウトプットのためのミニミニアプリということでセキュリティガバガバなのは重々承知の上、このような仕様にしました。
二つ名をつけたことでユーザーによるゲームのキャラクターみが増し、ゲームに華が添えられた点は棚からぼたもちでした。
二つ名、ニックネームに関してはマイページで編集できます。

対戦

Adobe Express - 対戦.gif

すでに登録されているユーザーから一人指名し、勝負を申し込みます。
インディアンポーカーのルールに則り、自分の手札は見えず相手の手札のみ表示されます。
カードの数が大きい方の勝利です。ただし、KはAに負けます。
引き分けは3回まで自動で勝負が行われ、それ以降はランダムで勝敗が決まります。
勝てると思ったら「勝負」→対戦結果ページへ
勝てないと思ったら「降りる」→対戦相手一覧ページへ
結果ページでは同じ相手と「もう一戦」、もしくは「対戦相手一覧」に戻り別の相手を探しに行けるよう設定しました。

ランキング

Adobe Express - Adobe Express - 画面収録 2025-08-25 8.53.31.gif

MVPにはありませんでしたが、追加実装の部分で一番力を注いだのがこのランキングページです。
ありがたいことにリリースしてから100戦以上遊んでくれるヘビーユーザーが現れたので、「エキスパート」部門も設置しました。
常に対戦を申し込まれる側でもあるため、自分の戦績(勝率)をリアルタイムで確認していないとランキングが落ちている可能性もあるこのランキングは、メインの勝負とはまた別で楽しめる要素になったと自負しています。
また、ビギナーからヘビーユーザーまで全ての方がダレずに楽しめるよう「週間ランキング(通常/エキスパート)」も実装しました。

3.技術スタック

使用技術

カテゴリ 技術
開発環境  Mac, Docker 
フロントエンド Rails 8.2.0, tailwind CSS 3.4.0
バックエンド Rails 8.2.0
デプロイ   Render 
AI  RUNTEQ専用AI講師, copilot, Claude

選定理由

Ruby on Railsのカリキュラムをこなしていった末の開発なので、復習する意味でもRailsが良いと思い利用しました。
一方で、カリキュラムにおいてCRUD機能を学んだときの例が掲示板であることから、「Railsは掲示板やタスク管理系アプリしか作れないのか?」という疑問から、活用方法を変えればCRUD機能でむしろ開発できるのではないかと思い、逆転の発想からRailsオンリーにこだわった部分はあります。

また、AIを複数使用した理由は、一つのAIだけだと信憑性がないこと、エラーが解消しきれなかったことが挙げられます。それぞれアプローチ方法が違うため、長いこと解決できなかったエラーを読み解く上でうまく利用できたと思います。

ER図

スクリーンショット 2025-08-18 15.22.08.png

4.こだわり

1 .手軽なユーザー登録

先にも述べましたが、手軽にユーザー登録できる点が最大のこだわりです。
二つ名、ニックネーム、パスワードのみで構成されており、
①守るべき個人情報が含まれていない(メールアドレスや生年月日、住所、氏名など)
②楽しんで登録できる
以上2点が強みとなっています。
但し、セキュリティはガバガバなので(何も考えていない)、普段から使っているパスワードは使わないようにしてもらう必要があります。
これに関する技術(と苦悩)については下記記事をご参照ください。

2 .平成レトロゲームコンセプト

内部機能は完成しても、フロントデザインが詰まっていない状況下で足を運んだライブ演出に感化され、最近流行りの「平成レトロ」をコンセプトに作り上げました。
また、メインキャラのカニ🦀は同期内で流行っているという理由だけで採用しています。
平成レトロと言えば、パックマンなどのドット絵ということでKeynoteで■を塗りつぶしコピー&ペーストでカニを作成しました。
また、全体のフォントはGoogle フォントのDotGothic16を使用しています。

3 .追加実装

MVPリリース当時、「ユーザー登録/対戦/戦績の可視化/Twitter(現X)へのシェア」という最低限の機能しかありませんでした。(MVPなのだからそれはそう)
もちろん自らでもいろいろ考えていましたが、同期や講師、先輩に後輩とたくさんの方からフィードバックをいただき、「ユーザー一覧のページネーション/マイページの名前編集・ユーザー削除機能/ランキング/週間ランキング/エキスパートソート設置」を追加で実装しました。
これによりシンプルな対戦ゲームから、ユーザー同士の「負けられない戦い」の種類が増え、より一層楽しめるアプリになったと思います。

4 .おまけ

リリースから一週間ほど経ったとき、予想外のユーザー数と対戦数により初期のコードでは膨大なメモリ数がかかってしまい、コードは重たいしRenderの無料枠(512GB)は超えるしでゲーム自体がパンクしてしまいました。
これはランキング機能を実装したからこその弊害でもあります。
RubyのIncludeで書いていたコードをSQLで呼び出す仕様に変更するとサクサク動くようになり、ユーザーからも「神アプデ」とのお声をいただきました。感謝。

5.反省点

実装できてない構想・機能が多々ある

現在、実装されている機能の他に「ページをジャンプした際に元いた位置を記憶する機能/合戦モード/勝率が固定されているキャラクターモード(強い敵がいる)/どのカードにも勝てるJOKER/フレンド機能/アニメーション/煽りセリフの表示」など様々な機能を実装する構想がありましが実装できていません。
これはスクール卒業と就活を見据えた時にあまりこちらのアプリに時間をかけられないと判断したからです。
そのため、このアプリはまだ完全完成!とまでは言えません。
就活などが落ち着いて、まだ同期内に需要があれば最後までやり遂げたいと思います。

AIを信頼しすぎた

今回のコーディングにおいてAIの力を大いに頼ったことは紛れもない事実です。
これにより、開発のスピードが初学者にしては早く進みました。
しかしAIに頼りすぎたからこそ、予期せぬエラーに道を阻まれたりしました。
AIはあくまで伴走者であり共同開発者になり得ないことを肝に銘じます。

6.感想

今回初めて個人開発を行いました。
その上で一番の感想は「楽しかった」です。
技術を学びアウトプットする、いわば学習の一部でしかないこのサイクルが何にも変え難い楽しい時間でした。
また、同期を始め多くの方にアプリを触っていただき、とっても嬉しかったです。
フィードバックを反映させるうちに、「こういう機能があったらいいな」を考える時間もまた有意義なもので、エラーに引っかかったりロジックを考えたりする少し面倒な作業も苦にならないまま乗り越えられた一因だと言えるでしょう。

例えば絵が描けるわけでも工作ができるわけでもなく、何かの才能が特出するわけでもない自分が、知識を持って思い描いたものを具現化するプログラミング、ひいては誰かを笑顔にするエンジニアリングこそ、自分が惚れ込み学んでいきたいと思ったスキルであることを再確認しました。

これから卒業制作でまたアプリを開発する予定ですが、これもまた誰かの笑顔を増やす一助となるよう進めていきたいと思います。
ご一読いただきありがとうございました!

Twitterはこちら。


とてもとても参考にさせていただきました!

Special Thanks...

とぴ先輩

熊沢講師

8
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?