はじめに
こんにちは、wai-doiです。
アジャイル事業部は RubyKaigi 2023 で 「Rubyメソッドかるた」を配布しました。 Rubyメソッドかるたの詳細については下記エントリを参照してください。
今回は、このRubyメソッドかるたをブラウザで1人で遊べるゲームを作ったことについて書きます。
Rubyメソッドかるたのゲームについて
下記のリンクからゲームを遊べます。
基本の操作は、「読み札を読み上げる」のボタンを押すとメソッドの説明が読まれるので、答えのメソッドの札を画面上から探してクリックしていくのを繰り返していきます。
下記のリンクはゲームのソースコードです。 github.com
ちなみに、このゲームは業務で作ったものではなく、個人的に趣味で作ったものです。
作ろうと思ったきかっけ
本家のRubyメソッドかるたを遊ぶためには、取り手と読み手の人が必要なので複数人で遊ぶ必要があります。 そこで、1人で遊べるようにすれば練習として使えるため、個人的に欲しいなと思い作りました。
使った技術
以下はゲームの開発に使った主な技術です。
- React
- TypeScript
- Tailwind CSS
ReactとTypeScriptは個人的に勉強してみたかったため使用しました。 ゲームを作る前にReactのチュートリアルでReactを勉強しました。お題が三目並べのゲームを作るものなので、わかりやすくて良かったです。
CSSライブラリには、最近名前をよく耳にしていたTailwind CSSを使いました。 Tailwind CSS はコンポーネントを提供しておらず、より自由なデザインにできるのがよいと思ったので使ってみました。
ゲームの工夫について
以下はゲームの工夫をした点です。
- 読み上げをしてくれるようにした
- お手つきの回数とタイムを計測できるようにした
- ゲーム終了までの枚数をプレイヤーが決められるようにした
- 読み上げの速度を自由に変えることができるようにした
- 読み上げのテキストは表示することができるようにした
- 取り札が正解か不正解かを音を出すようにした
- かるたの雰囲気に合うように和室っぽい畳の背景にした
- 取り札を本物っぽいデザインにした
ここでは読み上げ機能について詳しく書いていきます。
読み上げ機能について
ゲームを作る前提として、1人だけで遊べるようにしたかったため、ゲームが読み上げをしてくれるようにしました。
JavaScriptで日本語のテキストの読み上げができないかを調べると Web Speech API というものがあることがわかりました。
ライブラリなどは不要ですぐに使うことができました。以下はサンプルコードです。
const utterance = new SpeechSynthesisUtterance() utterance.text = "Rubyメソッドかるたは楽しい。" utterance.lang = "ja-JP" window.speechSynthesis.speak(utterance)
まずSpeechSynthesisUtterance オブジェクトのインスタンスを生成します。
次にオブジェクトに設定を渡します。 .textは読ませるテキストを、lang は言語を指定しています。
最後に speechSynthesis.speak() の引数に先ほどのオブジェクトを渡すことで読み上げが開始します。
この機能が最初のハードルだと思っていたのですが、簡単に実現できてありがたかったです。
ゲームの公開方法について
ゲームの公開にGitHubだけで完結できると楽なので、GitHub Pages を使いました。
公開するために、npmパッケージの gh-pages を使いました。
使い方はまず gh-pages をインストールします。
npm install gh-pages --save-dev`
次に、package.json を開いて設定を書きます。
"scripts": { "deploy": "npm run build && gh-pages -d build" }, "homepage": "https://wai-doi.github.io/ruby-method-karuta"
"scripts" にデプロイ用のコマンドを書き、 "homepage" にGitHubのリポジトリのURLを書きます。
そして npm run deploy を実行すれば、 gh-pages ブランチが作られてリポジトリに push されます。
最後にリポジトリの Settings -> Pages を開いて、公開するブランチを指定する箇所に gh-pages ブランチを設定したら終わりです。
おわりに
今回、Rubyメソッドかるたのゲームを作りました。開発してみて、フロントエンドのあまり触ったことがなかった技術の勉強になったのでとてもよかったです。
手軽に遊べるので、Rubyメソッドかるたを持っている方も持っていない方もぜひ遊んでみて下さい。
永和システムマネジメントでは、Ruby とアジャイルソフトウェア開発を通じてコミュニティと成長したいエンジニアを絶賛募集しています。
