【Python】Kivyライブラリを駆使したタイピング練習ツール完成版
こんにちは。
自立に向けてとにかく手を動かしたいとっとです。
先日、はじめてのKivyということで、独学中のPythonによるプログラミングの練習として手をだした、わが子用のタイピング練習ツール制作についてご紹介させていただきました。
その後、実際につかってみた長男から、要望をもらったのでそれをとりこみ、（フリーズしちゃう問題があるのですが）ひとまず完成！ということにしましたので、改めてまとめたいとおもいます。
※こちらは完成版であそぶ長男と長女。
完成版の機能紹介
完成版としてアップデートをかけるきっかけになったのが、長男からもらったこんなコメントです。
ほかに問題の種類を増やしてよ。
虫の名前とか、掛け算とか割り算、あと足し算のひっ算とか！
すぐにはできなさそうだったので、ひとまずひっさんは勘弁してもらい、虫の名前やかけ算・わり算の問題も出題するように機能追加しました。
最終的には、こんな機能を搭載しましたのでご紹介します。
起動画面です。
左側に出題選択ボタンを配置し、下部にキーボード配置を表現してみました。起動するとBGMがながれ、出題ボタンごとに曲が変わります。
BGMは、左下のBGMをとめるボタンで停めることができます。このボタンは、クリックするとBGMをながすボタンに変わり、再開することもできます。
出題は、やさい、どうぶつ、むし、四字熟語、かけ算、わり算、から選べます。タイピング練習ツールなので、計算問題はもはや主旨からずれていますｗ
やさいの出題画面です。
やさいボタンを選択すると、こんなふうにランダムにやさいの名前が表示され、それをタイピングしていきます。次に打つべきキーがハイライトされるようにしました。
やさいの名前は、予めcsvファイルに辞書として作成しておき、それをツール起動時に読み込むようにしていますので、辞書さえ変えればいろんな出題ができます。
どうぶつの出題画面です。
どうぶつボタンだとこんな感じ。文字を打ち込むと、打ち込んだ文字が表示されていき、常に次に打つべき文字をハイライトしてくれます。
むしの出題画面です。
こちらが長男の要望だったむしの問題です。長男は難読漢字が好きなので、難しい虫の名前だけを辞書に登録して出題するようにしています。
難しい漢字のむしって、気持ち悪いむしが多いんですね・・・。
さいごまで打ち終わるとenterキーの場所がハイライトされ、enterキーを押すと、次の問題が勝手に出題される仕組みです。
四字熟語の出題画面です。
次は四字熟語の出題です。この例は小1の長男には少しむずかしいかもしれませんが、このように四字熟語がランダムに出題されます。
四字熟語の出題を開始すると、右上に意味はこちらボタンが表示されます。意味を知りたいとおもったらクリックしてみます。
すると、こんな感じで説明がポップアップされます。
少しでも理解しやすいように、イラストと一緒に四字熟語の説明を表示させたいとおもいました。イラストはまだほとんどの四字熟語に対して用意できておらず、我が家のキャラクタであるバッチグーぶたで急場をしのいでいます。
こちらの熟語説明イラストは、noteクリエイターの牛歩のゆうほ様が公開されている記事から使用許可をいただき、ツールに組み込ませていただきました。ありがとうございます。この場を借りて改めて感謝いたします。
もし他にも、四字熟語の説明をイラスト化されていて、つかってもいいよ！という優しい方いらしたら、ぜひコメントいただければとおもいます。息子に絵で学んでほしいので。
一石二鳥くらいなら、わたしでも描けるかな・・・。
かけ算です。
ここからは計算問題です。もはやタイピングの練習は関係ありません。左側のメニューからかけ算ボタンを押すと、右側のサブメニューにレベル選択ボタンが表示されます。
ここで表示されているのはレベル2の問題例です。
2つの数値のかけ算で、どの部分（掛けられる数か、掛ける数か、積の値か）を答えるべきかがランダムに変わります。ちなみにレベル1は普通の九九がランダムに出題されるのですが、長男には簡単だったので、レベル2を設けました。
これも簡単にクリアできるようになったら、レベル3を考えないと・・。
わり算です。
こちらはわり算です。かけ算と同じですが、レベル2で既にちょっとムズい・・。
以上が完成版の機能説明となります！
学んだプログラミングスキルと課題
独学中のPythonプログラミングの一環で、今回わが子用にタイピングツールを作ってみた結果、以下のことを学びました。
・Kivyライブラリの基本的な使い方
・オブジェクト指向プログラミングのさわりのほう
・キーボード入力判定の仕方
・ランダム関数の使い方（random.randint）
・フォントファイルの使い方
・Kivy込みのPythonプログラムのexe化の仕方
一方で、重大（？）な課題があります。
しばらく遊んでいると、フリーズしちゃうんです。（笑）
わり算のレベル2あたりが頻度高い気がするのですが、正しく動作はしていて、特にコンソールにエラーメッセージも見受けられないため、原因がわかりません。
こちらは引き続き調査してみたいとおもいますが、とりあえずわが子用なので、家庭内リリースしました。
また、すこし技術的な余談情報となりますが、今回キーボード配置を表現するのに、Kivyのヴァーチャルキーボード（kivy.uix.vkeyboard）というライブラリを使えないかな？とおもって、ずっと調べていました。
ライブラリ名だけは分かり、Kivyの公式サイトなどもみるのですが、素人には実装方法がわからずにいました。キーボードの表示すらできません。。
結果、日本語の参考サイトはほとんどなく、たまたま見つけたサンプル掲載サイトがあったので参考までにのせておきます。
このサイトのサンプルコードをコピペすることでバーチャルキーボードを表示させることができました。動かしてみてわかったのは、バーチャルキーボードではキーボードレイアウトを簡単に表示できるのですが、キーボードの入力インタフェースになるものでした。
今回は、次に打ち込むべきキーをハイライト表示させるため、どちらかというとディスプレイ（出力インタフェース）として使いたかったので、その用途にはつかえませんでした。そのため、自力でKivyのLabelで一文字ずつキーボードレイアウトを表現してみました。まだまだ知らないことが多いので、なにかうまいやり方があるのかもしれません。
スペシャルサンクス
今回ツール制作にあたって使わせていただいた素材の提供元をご紹介します。
■四字熟語イラスト
牛歩のゆうほさん
noteで四字熟語の記事を散策している中でたまたま拝見し、こちらからお声かけしたところ、快くイラスト使用のご了解をいただきました！まことにありがとうございました。ひきつづき新しいイラストができましたら、ぜひ使わせてください！
■BGM
BGMはこちらの素材を使わせていただきました。
■フォント
フォントはGoogleのフリーライセンスのものを使わせていただきました。
ちなみに今回使っているのはRocknRollOne-Regular.ttfです。
さいごに
完成版の動作を録画してみましたので、よろしければ。
注）動画を再生するとBGMが流れます。
素人コーディングですが、ソースコードもよろしければ。
Python勉強されている方で、なにかの参考になれば幸いです！
また、なんちゃってオブジェクト指向なので、ソースコードへのダメ出しなどもいただけるとホントにありがたいです。
最後まで読んでいただき、ありがとうございました！