穴埋め計算の練習をするためのWebアプリを公開しました

友達から、このようなお願いが来たので作ってみました

こんなのもあると助かる。穴あきのたしざん引き算がランダムに出てくるやつ。
f:id:knj4484:20200628163913j:plain:w360

x+5=8, 3+x=9
x-6=9, 8-x=2
みたいな

明後日に作ってみるよ

穴あき足し算と引き算の数字の範囲は?

うーん
x±y
として
まずは
x=1-20
y=1-10
ぐらいまでかなあ

穴あきの引き算は、答えがマイナスのやつなしだよね?

うん

だよね

穴あき計算作った

あーありがとう!

アプリ紹介

こうして出来上がったアプリがこちらです。

穴埋め計算の練習をするためのWebアプリ | ドーナッツ
f:id:knj4484:20200628164041p:plain:w360

リクエスト募集

Twitterで作って欲しいアプリのリクエストを募集中です。

短期記憶を鍛えるためのWebアプリを公開しました

友人が子供の短期記憶力を高めたいというようなことを言っていたので、自分のアイデアでWebアプリのゲームを作って公開してみました。

元ネタはこちらの動画です。

Chimp showing off skills
imgur.com

アプリ紹介

短期記憶を鍛えるためのWebアプリ | チンパンジー

使い方

基本的にスマホの縦画面で使う想定です。

ゲーム画面

1からある数(デフォルトで6)までの数字がランダムな位置に表示されます。

  • どの数字がどの位置にあるか覚えて下さい
  • 一定の時間(デフォルト3秒)が経過すると数字が消えます
  • 1のあった枠から順にタップして下さい
  • 間違っているとタップした枠が赤くなります
  • 正しくタップすると数字がもう一度表示され、枠が緑色になります
  • 全て正しくタップすると、全体が緑色になり完了です
  • 「もういちど」をタップすると、新たに数字がランダムな位置に表示されます
  • 「設定」をタップすると、設定画面が表示されます
設定画面

以下の項目が設定出来ます。

  • 当てる数字の個数
  • 数字が消えるまでの秒数
  • マス目の行数
  • マス目の列数

リクエスト募集

Twitterで作って欲しいアプリのリクエストを募集中です。

助詞の使い方を子供と練習するための学習Webアプリを公開しました

友達から「子供が助詞の使い方を練習するためのアプリを作って欲しい」旨頼まれたので作ってみました。


こんなの頼む
f:id:knj4484:20200519082730j:plain:w360

アプリ紹介

助詞の使い方を子供と練習 | ピーチ

使い方

問題画面

助詞の部分が穴埋めになった例文がランダムに表示されます

f:id:knj4484:20200519083608p:plain:w360

  • 穴埋めに何が入るか子供に答えてもらいます
  • 当たっていたら「正解」ボタンを押します
    • 正解数がカウントアップされます
  • 間違っていたら「ミス」ボタンを押します
    • ミス数がカウントアップされます
  • 「つぎへ」ボタンを押すと、例文がランダムに更新されます
  • 設定ボタンを押すと設定画面になります
設定画面

f:id:knj4484:20200519083625p:plain:w360
以下のフォーマットで例文を入力します。

  • 1行に1文
  • 穴埋めにしたい部分を半角の[]で囲む
  • 文節の区切りに半角スラッシュを入れる

入力例:

いえ[に]/かえる
おなか[が]/すいた[ので]/ごはん[を]/たべる

設定は保存されないので、ブラウザのタブがリロードされると最初のデータに戻ります。
独自データは他のアプリに保存しておくことをお勧めします。

Tips

自分で問題を設定することによって、縦書きの穴埋め問題なら助詞の練習以外にも使えます。

例えば、ことわざや慣用句を覚えたり、四字熟語を覚えたりするのにも使えると思います。

ものの数え方を子供と練習するための学習Webアプリを公開しました

友達から「子供がものの数え方を練習するためのアプリを作って欲しい」と頼まれたので作ってみました。

アプリ紹介

ものの数え方を子供と練習 | アップル

使い方

1~20の中からランダムな個数のリンゴが表示されます

f:id:knj4484:20200515083839p:plain:w360

  • 子供に何個か答えてもらいます
  • 当たっていたら「正解」ボタンを押します
    • 正解数がカウントアップされます
  • 間違っていたら「ミス」ボタンを押します
    • ミス数がカウントアップされます
  • 「つぎへ」ボタンを押すと、リンゴの個数がランダムに更新されます
Tips

スマホを横向きにすると、10個単位で並ぶようになります。

f:id:knj4484:20200515083826p:plain

さくらんぼ計算を子供と練習するための学習用Webアプリを公開しました

さくらんぼ計算とは

繰り上がりのある足し算をするための方法の一つです。

詳しくはこちらのサイトを参考にして下さい。

要するに、10以下の数を2つの数に分解するのがポイントなので、その練習をするためのアプリを作りました。

さくらんぼ計算を子供と練習するための学習用Webアプリ | チェリー

使い方

スマホの縦長画面で使うことを想定しています。

問題画面

f:id:knj4484:20200511134019p:plain

初期状態では、分解される上の数字は10に固定され、左側の数字がランダムに出題されるようになっています(設定で変えられます)。

  • 右側のさくらんぼが空欄になっているので、上の緑の丸の数と左の赤の丸の数に合うように、子供に数字を当ててもらいます
  • 当たっていたら「正解」ボタンを押します。
    • 正解数がカウントアップされます
    • 正解が表示されます
  • 間違っていたら「ミス」ボタンを押します
    • ミス数がカウントアップされます
    • 正解は表示されませんので、もう一度考えてもらいましょう
  • さくらんぼの領域をタップすると、次の問題に進みます
  • 「設定」ボタンを押すと、設定が開きます
設定画面
  • 「上の数を選んだ1つに固定」または「上の数を選んだものでランダムに切り替える」を選びます
  • 「上の数を選んだ1つに固定」を選んだ場合、数字の選択肢から目的の数字を1つ選びます
  • 「上の数を選んだものでランダムに切り替える」を選んだ場合、数字の選択肢から目的の数字を2つ以上選びます

Tips

  • まずは「上の数を選んだ1つに固定」で3や4など小さい数字から習得するのが良いと思います
  • 10の分解は毎回するかつ一番重要なので、考えなくてもできるまで徹底的にやりましょう
  • 大体できるようになったら、「上の数を選んだものでランダムに切り替える」で総復習するのがいいと思います

姉妹アプリ

自宅で学習 小学生の計算ドリル10000問

自宅で学習 小学生の計算ドリル10000問


アナログ時計の読み方を子供と練習するための学習Webアプリを公開しました

友達の奥さんから「時計の読み方を練習するアプリ」をお願いされたので作ってみました。


使い方

スマホの縦長画面で使うことを想定しています。

f:id:knj4484:20200511161245p:plain:w360

時刻をランダムにしてアナログ時間が表示されます

  • 子供に何時何分か答えてもらいます
  • 当たっていたら「正解」ボタンを押します
    • 正解数がカウントアップされます
  • 間違っていたら「ミス」ボタンを押します
    • ミス数がカウントアップされます
  • 「つぎへ」ボタンを押すと、時刻がランダムに更新されます

かな・漢字の読みを子供に教えるためのWebアプリを公開しました

友達の子供が今年は小学校に入学する歳で、コロナのために学校に行けないので、家で漢字の読みの教えていると聞きました。
最近、ReactやVueというWebアプリケーションを作るフレームワークの勉強を始めたので、その友達のお手伝いとしてWebアプリを開発しました。

友達からは「(子供が)すごい勢いで漢字を覚えている」「とても便利」と好評をいただいたので、公開することにしました。

Webアプリ紹介

親子でかな・漢字の読み学習 | バンブー

読みを分かっている方が付き添って教えてあげるためものです。

使い方

スマホの縦長画面で使うことを想定しています。

設定画面

f:id:knj4484:20200501073834p:plain:w300

  • ひらがな/カタカナ、1〜6年生の漢字の中から教えたいリストを選んだり、自分でリストを入力します
    • 複数選ぶと連結されます
  • リストから全文字を使うか、ランダムに5文字抜き出すか選択します
  • 出題方式を選びます
  • 「設定完了」ボタンを押すと問題画面に移ります
問題画面

f:id:knj4484:20200501074020p:plain:w300

  • 子供に読み方を当ててもらいます
  • 正解だったら「正解」ボタンを押します(花丸が表示されます)
  • 間違っていたら「ミス」ボタンを押します(バツが表示されます)
  • 問題の文字/花丸/バツの領域をタップすると次の問題に切り替わります

Tips


  • 「ランダムで無限に繰り返す」を選んだ場合、以下のような計算に基づいて出現頻度が変化します
    • 最初は、全ての文字が重み4で、均一な出現頻度
    • 正解するたびに、重みは半減する(ただし、1が下限)
    • ミスするたびに、重みは倍増する
  • 「ランダムで無限に繰り返す」を選んだ場合、以下の内容の棒グラフが表示される
    • 得意(緑): 上の説明の重みが1である文字の数
    • 苦手(赤): 上の説明の重みが4より大きい文字の数
  • 「ランダムで無限に繰り返す」を選んだ場合、右上の「継続用データ」ボタンから得意、苦手、どちらでもないの文字一覧を表示できます
    • 苦手な文字をコピーしておいて、次やる時に設定画面で独自リストとして入力すると、苦手の克服になります
  • 出題方式「シャッフルして周回する」を選んだ場合、右上の「継続用データ」ボタンから間違えた文字一覧を表示できます
    • 間違えた文字をコピーしておいて、次やる時に設定画面で独自リストとして入力すると、間違えた問題の復習になります
  • 「N年生の漢字」「シャッフルして周回する」を選ぶと、「どれだけ習得できたか」のような確認が出来ます

公開までの道のり

登場人物

  • 私: 右側の緑の吹き出しの人
  • 友達 神田一郎(仮名): 左側の吹き出しの人
  • 友達の娘 カナ(仮名) 4歳
  • 友達の息子 翔(仮名) 6歳

0日目 4/15 (木)

20:45

友達とFacebook messengerで、なんか作って欲しいものあるかという話をしていると、こんな答えが返ってきた。

小2で習う漢字が画面一杯に、タップ毎にランダムで出てくるのもいいなあ。あってるだの間違ってるだのは俺がやるから。小1の漢字はほぼクリアしたので大丈

f:id:knj4484:20200426165051j:plain:w360
この漢のところをタップするとランダムに漢字が出てくる
子供が言えたら親が正解ボタンを押す→正解音と花丸が大きく出てくる
間違えたら親がミスボタンを押す→大きなバツマークとミスの音が出てくる

f:id:knj4484:20200427092654j:plain:w360
最初に学ばせたい漢字を親が5文字登録する
→写真の画面にうつる
みたいなの。

正解した場合。
f:id:knj4484:20200427093005j:plain:w360
こんなの。
f:id:knj4484:20200427093118j:plain:w360

大体理解した。

いまは紙に手書きで書いてやってる。正解したらたまごボーロを1つもらえて間違えたら奪われるということをやってきたらこれは効果抜群で小1の漢字80文字中いま70字ぐらい頭に入ってる。多すぎると覚えきらないので5文字ぐらいでよい。これなら外食中でもできる

「いや、食事中にスマホいじっててはダメだろ」と思いつつ

なるほど

この日の会話はここで終わり、就寝した。在宅勤務でも早寝早起きの習慣は保つようにしたい。

1日目 4/17 金

翌々日、朝6時に起きて作り始め、会社の業務開始の前に、なんとか使える形にまでは開発できた。
やはり、朝の爽やかな時間、リフレッシュされた心と体は、自分にとって価値のある事に使うのが良い。

13:07

昼休憩時間にWebサイトにアップロードし、友達に報告

音以外は出来た。音は、いい感じのファイル見つけてくれれば入れられると思う

素晴らしい!早速やってみたが効果あり!

そうか。よかった

ようたかつくったんだ。すごいね。byカナ

友達の子供からはヨーダと呼ばれております。「ようた」と言われると電影少女を思い出す…あの漫画どうやって終わるんだっけ

f:id:knj4484:20200427093334j:plain:w360
こんな感じでうつる。もう少し文字が大きくてもいいかも

スマホの画面も色々あるから、画面いっぱいというのは多少難しい。夜にチャレンジしてみるよ

難しいというか、画面作りは初心者なのでやり方分かってませんでした

なるほど。それなら今のままでも大丈夫。
また、下のスペースが余っているので、そこに正解数と間違えた数が表されるといいかも。

f:id:knj4484:20200427093518j:plain:w360
みたいな

5題しかない状況で、それ表示してそんなに嬉しいのかな

○のかずのところは😊
✖️のかずのところは😢
とかでもいいかも。
たまごボーロのやり取りに対応している。
ランダムにでてきて30回ぐらいやるし、繰り返すから嬉しいと思う。

夜に作ってみるわ

どちらにしろ現状で素晴らしい出来だ。ウチの子にぴったりだ

一度に覚えさせる量は3文字ぐらいが適切かも。

それは先回りして出来るようになっているのだ、ふふふ

二文字以上なら何文字でもできるように作ってあるよ

漢字ごとに連続正解を取っておいて、三連続正解したやつは出現確率を下げるとかの方が作る側としては面白い

あ、それ凄くいい!連続正解したら出現する確率凄く下げてほしい。

あと、
トップ画面に
「小2で習う常用漢字からランダムに三文字選ぶ」
「小2で習う常用漢字からランダムに全文字選ぶ」
というボタンがあってもいいなあ。いちいち打ち込むのがそのうち面倒になりそう。
「小1で習う常用漢字全文字テスト」ボタンがあって、それを押すとランダムだが重ならないように80字全文字調べられて、正解数が出たらいま何文字まで覚えたか簡単かるなあ
f:id:knj4484:20200427093641j:plain:w360
こんなの求む。3文字の3は、2とか、4とか変更できると尚嬉しい

「そのUIはどうかな」と思いつつ

大体理解した

了解。小1常用漢字はネットで調べたら出てくるよ。小2も

はいはい

2020/04/17 19:07

文字の大きさは、お前の画面縦長に合わせるだけならある意味簡単なんだが、iPhone Xでいいのか?

俺のはアイフォン6かなんか

おっけー

文字の大きさ調整とボーロ数追加してみた。リロードして確認よろしく

f:id:knj4484:20200427094012j:plain:w360
これだと下の正解が出ない。

なるほど

もう少し上に。

いや、スクロールしてもダメ?

文字は見やすい
スクロールは面倒
文字もずれるし

「面倒?」と思いつつ…

直した

いい感じ!
f:id:knj4484:20200427094211j:plain:w360
こんな、感じ

まあ、これでよしとしよう。レイアウトは完璧を目指すとやはり手間がかかる

技術力が低いためかなり消耗してしまった。やはり基礎からちゃんと勉強するべきである。

f:id:knj4484:20200427094937j:plain:w360
強いて言えば、
もう一文字分だけ、正解、ミスの行を下にして欲しいぐらいだ。
まあこれでも充分

「Wordじゃねーんだから、一文字下げるとかできねーわ」と思いつつ

色々修正中

サンクス。このアプリのおかげで漢字学習がよりスムーズになりそうだ。俺はこれから風呂。

次の問題に進むためのタップ領域が「問題設定へ」ボタンに重なってしまっていることに気づいたが、早寝早起きは崩したくないので「まあ明日の朝直せばいいかな」と安直に考えて就寝

2日目 4/18 土

この日もしっかり早起きしてレイアウト問題に取り組んでいると…

9:23

問題設定へ
ボタンが押しづらくなった。

ヤバい。バレてしまった

問の字しか押せない

もうちょい大きくしてくれたらいいかも。正解と同じサイズぐらい希望
あーなるほど

大きさの問題じゃない

逆ギレする低脳とは私のことです

カナがいま凄い勢いで漢字覚えている。

画面作りは技術力が低いのでレイアウトが難しい。

問題設定へのボタンの押すスペースが小さすぎて。ランダムに文字がかわるになっちゃう

大変なんだね

スクロール許容なら楽なんだが

そもそも問題設定へのリンク必要?リロードすれば同じな気もするけど

うんまあそうだよね
問題設定へ戻ったときに前に設定しておいた漢字が残っていれば、追加できるので楽

ふーむ、そういう流れでやるのね

問題設定に戻ると、ボーロ数は0にリセットしてるけど、それはいいの?

ボーロ数って正解数のこと?
それはまあ良い

そうか

まず紙で全問チェックしたところ80字中66字正解。その後間違えた14問をアプリでやらせた結果
f:id:knj4484:20200427095222j:plain:w360

どう解釈すればいいの?

間違えた問題だけをやらせて最終的に正解がおおくなっている。素晴らしい。

レイアウト直した

f:id:knj4484:20200427102920j:plain:w360
カナはまず80問中67問正解。その後間違えた13問をいまやったところ。

たまごボーロは100個あげるわけ?
69か

f:id:knj4484:20200427103104j:plain:w360

ダメだこりゃ

字をもう少し右上で、正解、ミスの表をもう少し下かな。

むずいな。こっちのシミュレーターだとまともなんだ

この時はMacのChromeのDeveloper Toolsでやっていて、Safariで確認した方がより正確ということに気付いていない愚かな私

笑顔マークを100個とることのゲーム感があるのでたまごボーロなしでやれる。

それiPhone 5な気がする

自分の知識不足を棚に上げて…

まあ今のままでも見れることは見れる。
笑顔が100まで到達したり、
5連続、10連続正解したら
花丸の横に😄が溢れるといったご褒美感がほしい。

アイフォン6か6s

もう一回レイアウト直した

f:id:knj4484:20200427103204j:plain:w360

いまだかつてない出来栄え

うん。強いて言うなら字をほんの少し右

むり

心折れました。

ならこれok

たぶんレイアウトではなくフォントの特性による

自分の技術力の低さを棚に上げてフォントのせいにするダメなエンジニアです。

ふおう

11:45

漢字それぞれ重み4の均一な確率から始まって、正解すると重み半減(下限1)、ミスると重み倍増という確率分布で出現するようにしてみた
これで100回やったときの成長度合がかなり変わると期待

13:35

素晴らしい

19:27 (土)

今日は合計で7-8時間ぐらい勉強させたが、今日はカタカナがらまだまだだと気づいたところ。
そこで吉橋のアプリでこれからカタカナのワークは両面15枚ぐらいやった。カタカナをやろうかというところ。
そこで次は吉橋のアプリでカタカナをやろうというところ。

一文字のクイズなら何でもいけるわな

カタカナをメモで全部一旦残した。今後はこれをコピペすれば良いだけだ。
そう思うと小2の漢字も行けそうだ

ギリシャ文字でもいけるぞ、たぶん

確かに。

3日目 4/19 日

12:47 (日)

選択した文字からN文字抜き出すを押すと、選択したリストの全文字を使うが押されたままになってそのございましたどうなるかわからない
漢字リストの方はまだ漢字が出てこないな

おっとー、開発途中の画面をアップロードしてしまっていた…

あー、ごめん。漢字リストはまだ出来てないや
画面は作ったが選んでも何も起こらない

17:59 (日)

学年別漢字リストも選べるようにしたよ

あれ、バグってるわ

ヤバい

直した

独り相撲取りすぎ…。ちゃんとテストしてから本番反映しよう

3日目 4/19 月

8:44 (月)

シャッフルして周回する出題方式も作ったので、漢字の方は一通り完成した気がする

4日目 4/20 火

9:22 (火)

いい感じ!

ミスした漢字がどこかに表示されたら(たとえば100%の青線の下に並ぶようになったら)嬉しいかも。

それは明日作る予定

さんくす

カナ

2回とも同じ順番だったように思う。できればランダムで1巡してほしい。

直した。設定画面に戻って、出題方式を選び直すと再シャッフルされる

サンキュー

そもそもさっきまでシャッフル効いてなかったな

なんという確認漏れ…

そうなのか

子供達の感想を動画撮影して送ってくれ

「すごいべんきょうになってる。ヨーダのドリル、たのしかった」とのコメントがもらえた

楽しく勉強出来てるようで良かった。まあ、親子で時間過ごせるのがいいんだろうな

20:01 (火)

夜は翔は小2の漢字をやった。よい出来
f:id:knj4484:20200427103551j:plain:w360

結構出来るね

最初に丸つけせず何回も教えた後にやらさた。漢字は昔から得意。

6日目 4/22 木

14:39 (木)

漢字をシャッフル周回モードでやった時に、右上のボタンから正解・ミスした漢字リストが出るようにした

7日目 4/23 金

サンクス。

8日目 4/24 土

9:25 (土)

ひらがなとカタカナのリストも追加した

9日目 4/25 日

習熟度の分布グラフを入れた。グラフが全部緑になるまで頑張ってくれ

そしてこのブログを書き始めた。久しぶりにプライベートで達成感を味わった

まとめ

  • だいたい1週間で人の役に立つものが作れた
  • 画面を綺麗に作るのは難しい
  • 日々の努力が大切である