カワリモノ息子の技術メモ的な~

カワリモノ息子とその母の技術メモ的な〜

学校が苦手な息子くんの作品とその母の作品、はたまた日常などいろいろを在宅エンジニア母が綴る

14歳息子くんタイピング練習サイトを小文字対応させた話

学校配布のChromebook

 自治体により異なると思いますが、うちの地区での小中学校配布PCは Chromebook です。
 
 息子くんは学校に行ってませんが、在籍は地元の中学校でして時々家庭訪問に来てくださる担任の先生から自分の分の Chromebook を預かっています。
 リモート授業もやってるから覗いてみてねと言われてますが、学校に極度の恐怖心を抱いており1度も出られてません…。
 しかしながら在籍中学校の担任の先生は生徒からとても人気があり、生徒目線で考えてくださるとても良い先生です。
 
 また、N中ネットコースにも中学1年生からずっと在籍していて大変お世話になっていますがぶっちゃけこちらもあまり出席できていません。。(N中等部はフリースクール扱いなので地元の学校への在籍したうえでの参加となります)

 話がそれましたが、今回はChromebookのお話です。

 ツイートした通り、画像を見ていただくとわかるのですが一般的なキーボードの刻印は大文字なのに対し、Chromebookのキーボードは刻印が小文字なんです。

 また文中の知り合いの先生は担任の先生とは異なる別の先生です。

背景

 Chromebookが小文字である理由を説明された方がいらっしゃいました。

 ネットで調べても同様の理由が散見され、そういう理由のようです。なるほどです。

解決策を考える

 私はキーボードにシールを貼ってはどうかと提案しました。「A」「B」「C」のシールを貼って、小文字でなく大文字にする。
 調べてみると実際にそういう用途のシールが売っていました。

 ただこれだとひらがなが消えてしまいます。今回ご相談された先生はそこがひっかかるとのことでした。

 これからPCを使っていく子供にとっては、多分ローマ字入力じゃないひらがなキーで入力することは無さそうですけどね。

息子くん依頼を受けて開発

 結局、タイピングサイト側の対応ができるならしてほしいという依頼を受け、息子くんが引き受けました。

 本当は息子くんに話がくるまえに別の学生さん(とても感じの良いお兄さん)に話が行ってて実装されようとしていたんですが、勉強が忙しいのでバトンタッチということで息子くんが引き受けました。
 プログラミング得意なお兄さんだったので途中で奪われて残念だったと思います。ごめんなさい。

 ちなみにそのお兄さんのマニアックぶりが垣間見れるブログはコチラ▼
www.chickensblog.com

Chrome拡張機能による実装

 対象とするサイトはコチラ。こちらのサイト上の表記を大文字から小文字に差し替えます。
インターネットでタイピング練習 イータイピング | e-typing ローマ字タイピング

 このサイトなら以前何度も改造して遊んだことがあったので割と簡単だったそうです。

 ▼ 以前息子くんが作った、このサイトを自動でタイピングしてくれるプログラム
protopedia.net

 Chrome拡張機能で実装するということでプログラムを作って初めての拡張機能の公開申請を行っていました。

 初申請だったので不備による差戻があることを覚悟していたそうなのですが、申請してから約2日で許可が下りていました。現在公開されているので誰でも試すことが出来ます。

Chrome拡張機能の使い方

chrome.google.com

 上記リンクを開くとこんな画面です。「Chromeに追加」をクリックします。

f:id:toriko0413:20220402223932p:plain

 「拡張機能を追加」 
 
f:id:toriko0413:20220402224053p:plain

 拡張機能の一覧に追加されるので、「e-typing 小文字変換」をクリックします。

f:id:toriko0413:20220402224938p:plain

 「e-typeサイトの小文字キーボードを有効にする」のチェックボックスをチェック状態にすると機能がONの状態になります。

f:id:toriko0413:20220402225033p:plain

 その状態で前述のタイピング練習サイトにアクセスするとこんな感じになります。


 Twitterの説明、右と左間違ってますね…。左がオリジナルで右が拡張機能有効にしたものです。

ソースコード

 息子くんの書いた拡張機能のソースコードはこちらに公開しているとのこと。
github.com

拡張機能なしでの実装

 学校のChromebookには拡張機能が新規で入れられないという問題に直面しました。
 そこで、別の実装を考えた息子くん。

 自分でホストを立ててそこからオリジナルサイトを表示させ、中身を大文字から小文字にすり替えるようなことをしていました。
 お恥ずかしながらWebシステム屋さんの私ですが「へぇそんなことできるんだ…」って感じです。プロトコルとかはあのぅそのちょっと苦手で…(汗)

 ▼ 息子くんが公開したサイト
https://e-typing-lowercase.herokuapp.com/

 ここにアクセスすると、Chrome拡張機能なくても普通に小文字で表示されます!すごい!!

ソースコード

 息子くんが書いたソースコードは、こちらに公開しているとのこと。
github.com
github.com
 上記の2つで構成されているそうです。
 親バカですが、HTTP/HTTPS通信に対する理解が深くソースコードもきれいに書けてます。感心します。

小文字対応した既存のタイピング練習サイトは?

 最後になりましたが、そもそも小文字対応されたタイピング練習サイトが無いかも最初に色々調べていました。

 ▼の「こどもタイピング」とか問題文は小文字なのですが画面上に出るキーボード配列は大文字なんですよね。
こどもタイピング | タイピング練習の「マイタイピング」
 画面上のキーボードを非表示にするという手もあるのですが、PCに慣れてない子のためにやっぱり表示されていたいとのこと。


 こちらのサイト見てみたのですが、基本的に説明が英語です。大文字と小文字がわからないほど英語に慣れていない子たちが対象なので…ちょっと難しいかもしれないですね。でもとても楽しい練習サイトだなと思いました!サイトのご紹介、ありがとうございました。

さいごに

 以上、タイピング練習サイトを小文字対応させた話でした。

 拡張機能はちょっと一瞬大文字表示された後に小文字にすり替わるので若干ちらつきます。サイトを作って対応したほうはちらつきはありません。

 それにしても、別の方の作成されたサイトを改造するのはあまりよろしくない感じはします。
 小文字対応できるオリジナルのタイピングサイトを一から作るのが良いと思いますがそれは開発ボリュームが大きくなってしまうので、既存タイピングサイトの開発者の方が対応されるのが一番いいですね。その時はこのプログラムもお役御免です。
 
 ここまで読んでいただきありがとうございました。

f:id:toriko0413:20220403004147j:plain
 今日だけでなく、いつでものんびりしたいです。