はじめに
アーケードコントローラーとは？
通称：アケコンと呼ばれています。主に格闘ゲームで使用されるコントローラーのことです。
パッと頭に思い浮かぶのはレバーが付いているコントローラーかなと思いますが、アーケードコントローラには以下2種類のタイプがあります。
| レバータイプ | ボタンタイプ（レバーレス） |
|---|---|
 |
 |
ボタンタイプ（以降レバーレス）はレバーの代わりに4つのボタンで操作を行います。（参考画像の赤いボタン）
今回はレバーレスの基板生成サービスを開発した話になります。
作ろうと思ったきっかけ
以下の順でお話しさせていただければと思います。
- レバーレスを自作しようと思ったきっかけ
- 基板生成サービスを開発しようと思ったきっかけ
レバーレスを自作しようと思ったきっかけ
市販でも数多くのレバーレスが販売されていますが、自作することで以下のメリットがあります。
- ボタン配置を自由に決められる
- 好きな素材で作れる
- 面白い
一番大きなメリットは1のボタン配置を自由に決められるだと思います。
手のサイズや動かしやすい指は千差万別なので自分に合った理想のボタン配置にできることが一番のきっかけになります。
基板生成サービスを開発しようと思ったきっかけ
レバーレスの自作方法は調べればいくつか記事があり、それらを参考に自作してみました。
自作してみて思ったことが基板設計の方法・基板設計ソフトの使い方を紹介してくれる記事は少なく、ボタン配置を変更するだけでも大変ということでした。
また、基板設計をしてみて自動化できる工程や固定の設計で事足りるものがあり、基板設計の面倒な工程はおおよそ自動化できそうだなと思いました。
基板設計の流れとしては以下になります。
- 回路図設計
- 基板デザイン設計
- 配線
回路図設計について
固定の設計でよく、静的ファイルとして保持すればよさそう
基板デザイン設計
KiCAD（基板設計ソフト）でPythonスクリプトを実行できるのでボタン配置の座標だけ渡せれば自動化可能
配線
OSSのFreeroutingを使用すれば自動で配線を行ってくれる
開発したサービスの紹介
今回開発したサービスは「Modern Design」というサービスです。
サーバーの性能を落としたため一回で生成できないことがあります。お試しいただく場合、複数回生成ボタンを押していただけると幸いです
- Webサイトでボタンを直感的に配置することができます
- 詳細な配置やボタンサイズは右側のボタンリストから設定することが可能です
- 理想のボタン配置が完成したら「基板データを生成」ボタンをクリックすることで基板設計データが出力されます
こだわりポイント
実物大でボタン配置できる
大きいディスプレイであれば現物と同じ寸法でボタン配置のエディターが表示できます。
ディスプレイの上に手を置いてボタン配置することで精度高くイメージ通りの配置を実現できます。
基盤のハウジングデータ（天板などの加工データ）も一緒に出力できる
レバーレスの作成には天板や底板といったガワも作成する必要があります。
ガワの素材としてはアクリル板が主に利用されます。
ボタン配置を元にガワの加工データも出力することで、アクリル板の加工サービスに加工データをそのままアップロードするだけでより簡単にレバーレスを制作できます。
ドキュメント完備
本サービスの使い方からレバーレスの作成手順をドキュメントにまとめました。
基板生成後の手順まで手厚くサポートしています。
開発について
使用技術
フロントエンド
- Next.JS
バックエンド
- FastAPI
- Docker環境構築
インフラ
- AWS Lightsail
フロントエンドからボタンの座標をバックエンドに送信。
バックエンドではKiCADのCLIを使用して座標通りに基板デザインを生成。
FreeroutingのCLIで配線
開発スタイル
Cursorを使用したバイブコーディングで開発を進めました。
バイブコーディングのメリット・デメリットを以下にまとめました。
メリット
- 頭に思い描いた機能がすぐに実現できる
- UIもモダンなデザインで作成してくれる
- 開発スピードが爆速（バイブコーディングに限った話ではないですが）
デメリット
- どの処理がどこに記述されているか把握できない
- コードが冗長、適切に共通化されていない（命令次第かも）
- コードレビューが大変
開発を始めてから僅か1週間ひどで大体の機能を作成することができました。AI使わなかったら1ヶ月程かかる想定だったので爆速です。
デメリットに関しては適切にコーディングルールを記述することと、一気に機能を作らせるのではなく細分化してコーディングしてもらうことでレビューも行いやすくなるかと思いました。
まとめ
自分が求めていた思い通りのサービスを開発することができました。
AIエディタ（Cursor）を使うことで開発体験がガラッと変わったなと実感できる良い経験になりました。
AIについて
漫画「葬送のフリーレン」で「イメージできないものは魔法では実現できない」と言う言葉があります、逆を言うと「イメージできるものは実現できる」と言うことです。
AIを使うことで「解決方法をイメージできれば実現できる」そんな世の中になりつつあるのかなと感じました。
今後について
サービスはデプロイしたものの、まだGoogle検索にヒットしないのでSEOの強化を進めていく予定です。
まずは誰かにサービスを使ってもらい、ゆくゆくは広告などで収益化できることを目標にしています。
最後に実際にこのサービスを使って作成したレバーレスコントローラーの画像を添付します。
動作確認してみましたが、遅延もなく満足のいくプレイが可能でした！
興味がありましたら是非作ってみてください！
