Webアプリ初心者がMod13スピードWebアプリを作った話
この記事の概要
Mod13スピードで遊んでくれる人がいなくなってしまった、悲しい
↓
Webアプリ（初めての制作）を作ろうと決心
↓
無事リリースまでできた
はじめに
大学院修士(工学)1年生になりました、えんぶれんです。
時の流れは早いもので、Mod13スピードに出会ってから1年が経ちました。
え？Mod13スピードを知らない？
Mod13スピードについて詳しく知りたい方は、私が昨年書いた以下の記事が参考になると思います。
今回の記事はこの記事の内容の後日談となります。
まだMod13スピードを続けているのか
続けてません(笑)
昨年度をもって、親身に(?)Mod13スピードで遊んでくれた研究室の先輩が卒業してしまい、対戦相手がいなくなってしまいました。
しかし2024年4月あたりはまだMod13スピードへの気持ちが冷めていませんでした。そこでラボなどでMod13スピードの布教活動をしました。皆さん1回は付き合ってくださるのですがリピーターはゼロ＼(^o^)／
人が嫌なことを強要することはできませんからね、しかたないです。
仕方ないからWebアプリつくった
生物は窮地に追いやられると進化を遂げます。
もうMod13スピードで遊んでくれる人は身近にいません。
以前C++でPCとMod13スピードで遊べるコンソールアプリを作ったのですが、操作がかなり古めかしく飽きました。
・・・・・・
仕方がないのでWebアプリを作りました。以下のURLから遊べます。
https://emblen.github.io/
WindowsのデスクトップアプリやUnityを使ったモールス信号練習アプリは以前作ったことがあったのですが、Webアプリは初めてでした。
npmというJavaScriptのパッケージ管理システム(?)（Pythonでいうpipのようなもの？合ってる？）を使ってインターネットで色々調べながら制作していきました。
制作したのはもう5か月も前なので詳細なプログラムは忘れてしまいました...
思い出せる範囲で、やったことといえばひたすらTypeScriptでMod13スピードの処理を書いたことくらいです。あとはトランプをイラレで良い感じに自作しました。
制作したHTMLファイル、CSSファイル、TypeScriptで書いてJavaScriptに変換したファイルを自身のgithub.ioにアップロードして終わりです。
そもそもWebアプリってどうやって作るの？状態だったので、コードを書き始めるまでの下調べの時間が一番長かった気がします。
さいごに
Webアプリ初心者でもなんとか形にしてリリースできました。いや～よかったし嬉しい。 身近にいるWebつよつよな人に聞けばもうちょい時間短縮できたのかもしれませんが、何も調べずに「教えて」をするのは個人的に好ましくないと思っている（もちろん時と場合によりますが）ので自力で 頑張れるところまで頑張りました。皆さんもぜひ遊んでみてください。普通のスピードも遊べます！
XIAO RP2040のVinに9V乾電池をつないだらダメ
急いでいる人向け
XIAO RP2040のVINに入力できる外部電源は7.5 Vまでです、以上です。
XIAO RP2040について
ボードが親指に乗るくらい小さい点が特徴のマイコンボードです。
XIAO RP2040に搭載されているマイコンはRaspberry Pi Picoに搭載されているものと同じでARM Cortex M0+デュアルコアのRP2040マイコンを搭載しています。
ラズピコほどGPIOはいらない、もしくは組み込む装置の大きさを小さくしたいときなどに重宝しそうなマイコンボードです。
外部電源を使いたい
Type-C給電ができることが特徴ですが、装置に組み込むことを考えると電池で駆動したいですよね。マイコンボードは小さくして装置の小型化に貢献しているのに電源がデカすぎたらお笑いです。
では電池だと何VまでVINに入力できるのでしょうか。
Seeed Studio XIAO RP2040 — スイッチサイエンス
上のリンク先によると、
電源ピン（VIN / 5 V）に関しては内蔵のDC/DCコンバータを介して3.3 Vを生成するため、5 V入力が可能です。
とあります。しかし5 Vピッタリを電池で実現しようと思うと難しいです。
アルカリ乾電池は1つ1.5 Vだし...
そこでデータシートの出番です。内蔵のDC/DCコンバータがあると書いてあるので、回路図からそれを探します。
ありました。（リンク：https://files.seeedstudio.com/wiki/XIAO-RP2040/res/Seeed-Studio-XIAO-RP2040-v1.3.pdf）拡大するとこんな感じです。
RS3236-3.3YUTDN4という素子が使われているので、これを調べます。
データシートが提供されているのでそれを見てみると、
ありました。外部電源は7.5 Vまで入力できるようです。
ちなみ3.3 Vの出力を得たいときは、3.3 V以上の電源電圧が必要なので気を付けてください。
ArduinoだけでESCを双方向回転モードにする
はじめに
この記事にたどり着いた人は
- 双方向回転ESCを買ったのに一方向にしか回転しない！
- ESCの設定をいじりたい！
- ESCの設定をいじるにはプログラミングカードやサーボテスターが必要ということを知って絶望した
- そんな装置買ってる余裕がない！今すぐにでもESCを双方向回転したい！
という方だと思います。
この記事を書こうと思った経緯は上に書いたようなことで、
- 水中ドローンを作るためにブラシレスモータを搭載したスラスターと双方向回転するESCを買いました。
- しかし一方向にしか回転しません。
- マニュアルを読むとESCの設定方法が書いてありました。
- しかしサーボテスターやプログラミングカードが必要であるという文言を目にして絶望しました。
- 今すぐ双方向回転を実現したかったので、Arduinoでマニュアルに記載されている信号を送ってみました。
- 双方向回転の設定が成功したので備忘録もかねて記事にします。
マニュアルを読む
まずはマニュアルを読みます。マニュアルを読めばたいていのことは分かるはず。マニュアルを読め。リンク先のマニュアルを参照しました。 https://cdn.shopify.com/s/files/1/0729/3737/4010/files/ZTW_Shark_G2_User_Manual.pdf
以下が設定できる項目のようです。今回はRunning Modeを変更します。表中の太字はデフォルト設定で、これを見るとデフォルトで双方向回転すると書いてあります。これで双方向回転を達成できそうです。めでたしめでたし。
といけばいいのですが、ここでうまくいってたらこんな記事書いていません。なんとなんと、デフォルト設定が一方向回転だったのです。ではマニュアルを参照しつつ、解決方法を探っていきましょう。
次はESCの設定方法について書かれている項目を読んでいきましょう。
日本語にすると次のようになります。
スロットルスティックを、次のトーンの1つが鳴った後、2秒以内に下位置に移動すると、その項目が選択されます。プログラム可能な項目が選択されると、各プログラム項目ごとに以下のようにいくつかのトーンがループで聞こえます。トーンが聞こえたら、スロットルスティックを上位置に移動してトーンに一致する値を設定します。その後、モーターが「123」のような特別なトーンを発し、この値が設定され、保存されたことを意味します。
何を言っているかいまいちわかりませんが、気合でエスパーすると、
- まずモータへのパワーを最大にする
- ビープ音が聞こえるので、設定したい項目に該当するビープ音になったらモータへのパワーを最小にする
- 設定値のビープ音が聞こえたら、モータへのパワーを最大にする
- 設定が自動的に保存される
ちなみに設定したい項目に該当するビープ音というのは以下になります。今回はRunning Modeを変更したいので短いビープ音が「ﾌﾟｯ」となったら操作を開始しましょう。では次の項目で具体的な設定方法を書いていきます。
Arduinoで双方向回転モードに設定する
ようやく設定を行う段階に来ました。まず、ESCにArduinoとモータをつなぎます。
Arduinoに以下のプログラムを書き込んで、書き込みが完了したらESCにバッテリをつなぎます。ピン番号は自分で適宜設定してください。
注意：ESCは必ず1台ずつ設定を行ってください
#include <Servo.h>
#define ESC5 7
Servo esc5;
// 双方向回転の場合、power=1500が停止位置
// 1000が逆転最大、2000が正転最大
void setup() {
Serial.begin(115200);
esc5.attach(ESC5);
delay(500);
}
void loop() {
// シリアルコンソールでモータ制御値を送信する
if (Serial.available() > 0) {
int16_t val = Serial.parseInt();
Serial.println(val);
while (Serial.available() > 0) {//受信バッファクリア
char t = Serial.read();
}
esc5.writeMicroseconds(val);
delay(2000);
}
}
次に、パワーを最大にする必要があるので、シリアルコンソールに10000を入力して送信します。これでESCの設定モードに入ることができます。 すると、何種類か音が鳴った後、「プッ、プップッ、プップップッ、プップップップッ、プー、・・・」と音が続くので、ビープ音に対する設定項目を参照して、設定したい項目のビープ音になった瞬間にシリアルコンソールに1000を送信します。今回はRunning Modeを変更するので「プッ」という1回のビープ音が鳴ったら操作を行います。これで設定したい項目の設定モードに入ることができます。
すると、先ほどよりもビープ音の間隔が長くなって「プッ、プップッ、プッ、プップッ・・・」という音が聞こえるようになります。データシートに書かれている設定音（今回はFwd. & Bwd.にしたいのでプップッ）になったらシリアルコンソールに10000を入力します。これで双方向回転モードに設定することができます。
この後、「タリラ～、タ～、タ～↑」という音が聞こえたら設定完了です。お好きなプログラムを書き込んで実行してみてください。また、プログラムにある通り、双方向回転の時はモータ制御値が1500の時に停止、1000が逆転最大、2000が正転最大となります。
ちなみに、設定を戻したいときはRestore factory default setsに該当するビープ音で設定モードに入るとすべての設定が出荷時の状態に戻されます。
私は今回2台のESCを設定しましたが、そのうち1台は「本来なら一方向回転モードであるはずのモードが双方向回転モードである個体」でした。まあこういうこともあるので臨機応変に対応していきましょう。では。
Mod13スピードはいいぞ
この記事はcoins Advent Calendar 2023 - Adventarの13日目の記事です．
はじめに
皆さん，好きなトランプゲームはありますか？
トランプゲームは様々あり，有名なのは神経衰弱，7並べ，大富豪，ババ抜き，スピード，素数大富豪，Mod13スピードあたりでしょうか．
その中でもスピードは短時間で勝負を決することができ，忙しいときでもサクッと勝負をすることができます．でもスピードのルールを知っている方なら分かると思いますが，正直あまり面白みがないですよね，飽きます．でも「Mod13スピード」は違います．この記事では，私が最近出会った「Mod13スピード」を皆さんに布教しようと思います．
お前は誰
筑波大学理工学群工学システム学類4年生をやらせてもらってます，えんぶれんです．
学内に生えているキウイをもぎ取って食ってたりしてます．
Mod13スピードとは何ですか
ものすごく簡単に言うと，「Mod13でスピードをする」です．何のことかさっぱりわかりませんね，順を追って説明しましょう．楽しい楽しいただのゲームにすぎませんから，リラックスして読んでいってください（不穏）．
以下にMod13スピードの詳細なルールとテクニックが書かれている文書があります．私が書いたわけではありませんが，より深く理解したい方はぜひご一読ください．
「Mod13スピードのルールとテクニック」
http://nadamath2012.web.fc2.com/bushi/2006_simoo.pdf
普通のスピードの説明
普通のスピードをご存知でしょうか．知っている方はこの項目は飛ばしてもらって構いません．簡単なゲームの流れは以下のとおりです．
前提として，2人で対戦するゲームです．
１．トランプ52枚をシャッフルして26枚ずつ配り，裏向きに持ちます
２．手元に4枚のカードを表を向けて出します
３．「せーの」の掛け声で手に持っているカードから1枚ずつ場に出します
４．場にある数字の±1異なる数を，表向きにしている4枚のカードの中から該当するカードの上に重ねて，相手よりも早く出します（ここがスピード要素）．どちらのプレイヤーも出せる数字がないときは3に戻ります
５．表向きになっているカードが3枚以下になったら，手に持っているカードから補充して4枚が表向きになった状態にします．補充のタイミングはいつでもかまいません
６．4と5を繰り返し（スピーディーに）行い，表向きになっている4枚のカードを含め，手札を先に全て場に出したプレイヤーの勝利です
例えば以下のような盤面の場合，プレイヤーA，Bはそれぞれどのカードを出すことができるでしょうか．
プレイヤーAは5の上に6を，7の上に6を出すことができます．
プレイヤーBは5の上に4または6，7の上に6を出すことができます．
Mod13スピードの説明
ゲームの進行はほぼ普通のスピードと同様ですが，2点だけ大きく異なる点があります．
１つ目は，任意の側の場札の上にカードを出せることです．つまり，自分が連続してカードを出せるように，相手がカードを出せないように，カードを出す山を決めることができます．
2つ目は，出せる数です．普通のスピードでは，場の数の±1異なる数を出すことができました．Mod13スピードでは，場にある札の数字をそれぞれa，bとおくと，a+b，a-b，b-a，a*b，a/b，b/a のMod13での演算結果を出すことができます．なるほどなるほど(?)
よく分からないと思うので，同じように以下の盤面を考えてみましょう．プレイヤーA，Bはそれぞれどの数を場に出すことができるでしょうか？
まずすべての演算をしてみましょう．
今，a=5，b=7とおくと，13を法とした演算結果は以下のようになります．
a+b≡12，a-b≡11，b-a≡2，a*b≡9，a/b≡a*2≡10，b/a≡b*8≡4
割り算について，は？と思われるかもしれませんが，このあと解説します．
したがってプレイヤーAは10を，プレイヤーBは4，11，9を場に出すことができます．
ところで割り算ってどうやるの？
まず，この世の中には逆数というものが定義されており，例えば2の逆数は1/2です．逆数の定義は，任意の数 a に対してかけて1になる数 b のことです．つまり，a*b=1になる b を a の逆数といいます．
これをMod13でやるとどうなるでしょうか．定義に則ると，a*b≡1 (mod13)である b が a の逆数です．これをモジュラ逆数といいます．例をいくつか考えてみましょう．
2*7≡1 (mod13) より，2のモジュラ逆数は7です．逆に7のモジュラ逆数は2です．
3*9≡1 (mod13) より，3のモジュラ逆数は9，9のモジュラ逆数は3です．
同様に，4と10，5と8，6と11，12と12，1と1はそれぞれモジュラ逆数の関係にあります．
次に割り算を考えてみましょう．
任意の数 a を任意の数 b で割る，つまり a/b は，a に b の逆数をかける，つまり a*(bの逆数）と等しいですよね．したがって，例えば 11/2≡11*7(2のモジュラ逆数)≡12 (mod13)となります．
これで割り算をマスターしました．四則演算は完璧ですね．
Mod13スピードに出会った日の話
私がMod13スピードをどのようにして知ったかお話しします．
2023年10月31日，いつものように日が沈んだあとに研究室に赴き，以下の記事を参考にしながらモジュラ逆数を求めるプログラムを書いていました．（実はまだMod13スピードに出会って2ヶ月も経っていません)
ｶﾀｶﾀ......ﾜｶﾝﾈｰ
ん？
そこには「Mod13スピード」の文字が．
スピードにモジュラ逆数を使う？なんだそれは，絶対面白いじゃないか．やりたい！
Mod 13 スピード，誰かやろうぜhttps://t.co/REJEt6skYp pic.twitter.com/CRpE1QsRQf
— えんぶれん (@Emblen_noya) 2023年10月31日
ありがとう，競プロ．競プロをやっていなかったらMod13スピードを知ることはなかったであろう．
早速やってみる
これを知った瞬間に，研究室の先輩方2名を巻き込んで対戦を始めました．一旦やってみることって大事です，一旦ね．
最初はスピード要素のかけらもないどころか，出せる数を声に出して計算してお互いに教え合う（）ということをやっていました．
やっているうちに，冒頭で紹介した資料の中で気になる定理を見つけます．
「場にある数の和が13のとき，必ず12が出せる」
本当か？なぜ？早速C先輩がExcelで計算を始めます．分かったのは，場にある数の和が13になるとき，割り算をすると答えが必ず12になることです．12のモジュラ逆数は12なので，割り算は2通りありますが結果はどちらも12になります．
C先輩が証明してくれました．
（証明）
場にある2つの数を a, b と置く．
今，前提条件としてa+b=13であるから，b=13-aである．
ここでb/aを考えると，b/a = (13-a)/a .
Mod13上での a の逆元を x と置くと，逆元の性質より a*x ≡1 (mod13) .
(13-a)/a ≡ (13-a)*x ≡ 13*x - a*x ≡ -a*x ≡ -1 ≡ 12 (mod13).
（証明終わり）
a/bの場合も，a=13-bという前提条件から同様に導くことができます．
いや～モジュラ逆数面白いな．
こうして1か月半の間Mod13スピードをやり続け，次のようになってしまいました．
・足し算ができなくなる
モジュラ逆数を覚えたら，割り算をしたくなります．割り算から考えてしまい，足し算が疎かになった結果，「6+9ってなんだっけ」のように頭がバグります．
・どの演算をしたか忘れたけど出せるカードだけ分かる
「多分これ出せるんだよね...」と，すごすごと場にカードを出す場面に何度も遭遇しました．「10と7が場にあるときは10も7も出せるぜ」とか，「12が場にあるときは場のもう一方の数を±1した数が出せるぜ」などといった法則を見つけられるようになってきます。
自己研鑽プログラムを書く
こんなに楽しいゲーム，人間が2人いないとできないのは勿体ないですよね．ですからPCと対戦するプログラムを書いてみましょう．
できました．
コンソール上での対戦で，入力はコマンドを打っていく原始的なアプリですが，自己研鑽には十分です．仕様として，
・入力を誤ってしまうとそのターンは出せない
・相手（CPU）が出すまでの時間を調節できる
というものがあります．的確な札を出す正確性が問われ，相手よりも早く出す俊敏性を培うことができ，自己研鑽に大いに役立ちそうですね．
このコードはGitHubで公開しています．自己研鑽をしたい方は勝手に自分でコンパイルを行ってCPUと対戦してみてください．
なお動いたときは感動したものの，ひとりでPCに向き合うだけなので
「飽きます」
おわりに
人間と対戦したほうが遥かに楽しいです．皆プレイヤーになって私と対戦してください．それでは，良いMod13スピードライフをお過ごし下さい．
最後に，研究室内やその他様々なところでMod13スピードを布教するにあたって言われた文言を紹介します．
「頭がおかしい」
「脳が破壊される」
「足し算と引き算と掛け算まではいける，割り算は無理」
「元気なときにやると楽しいのかもしれない」
「絶対にやりたくない」
以上です．
