好きな画像を設定できる五十音表メーカーを作った

最近、子がひらがなの勉強をしていて、だんだん読み書きできるようになってきているのだけど、「へ」は「へそのへ」、「そ」は「へそのそ」、など、独特の覚え方をしている。
また、友達の名前を語呂合わせで覚えたりしている。
市販の五十音表には、「へ」と「そ」の両方にへそが書いていないし、友達の名前もなく、馴染みのない言葉が書かれていたりする。
子といっしょに一文字ずつ、好きな絵を設定できたら学習に役立つだろうと思って、ブラウザ上で五十音表に好きな画像を設定できるツールをAIと作った。

hitode909.github.io

こんな感じで、「か」に鴨川、「き」にキーマカレー、「お」におにぎり、など、好きな画像を設定できる。

無事、「へ」も「そ」もへその画像がくっついて、友達の顔が印字された五十音表を作ることができた。
印刷してあげたら、気に入って壁に貼ったり、真似して字を書いたりと、楽しんでくれている。
1枚ずつ切り離してカードにする、といった使い方もできる。
こういう教材って愛着を持てずに使ってもらえない、ということがありがちだと思うので、教材をカスタマイズして、本人が関心を持てるようにしてあげる、という手法は有用だと思う。そのときにAIを使えば教材を高速に作れる。

技術的には、ひらがな習得中のお子様の友達の顔写真などをサーバーで預かりたくないので、画像はどこにもアップロードせず、localStorageに保存する形にしているのがポイント。
子どもの学習用だし家庭内利用なので、ということで、たぶん他人に著作権がある画像とか、キャラクターの画像とかを往々にして貼り付けられると思うので、そういった画像をアップロードされたくない。
「いか」って入れて待ってたらイカの絵が設定される、みたいに、絵もAIで作ったら？とも思ったけど、AIで作られた画像を子どもに与え続けるのってなんか気味が悪いなと思ってそれはやめた。友達の顔写真を使った五十音表、というテーマもあるので、手持ちの画像は設定したいと考えた。AIが書いたプログラムを子供の目の前で動かすなら何の抵抗もないので、そこの差は気になる。
あとは、印刷用のCSSを用意して、印刷したら表だけがうまく印刷されるようにしたり、用紙は横向き、と指定していたり、という印刷用おもてなしを設定しているのもおもしろいところ。

@page {
    size: A4 landscape;
    margin: 10mm;
}