エムスリー エンジニアの岩本です。
4月から小学生1年生になる子供を育てています。
最近子供と図鑑を見ていました。そのとき目次をから目的のページが250ページにあるということがわかったようです。 しかし、一度開いた150ページあたりから250に向かうのではなく、100ページの方に戻っていってしまいました。 それを見て「あれ？もしかして数字の概念が全くわかってない？」と心配になってしまいました。 とはいえ、数字は1〜100まで数えられるし、一桁の足し算引き算は指などを使ってできます。
数字の概念がわかっていないのはまずいので確認しようと考えました。 そこでどうせなら最近業務で触り始めたFlutterを使って理解度を確認するアプリを作ってみることにしました。
作ったもの
単純に0〜49までの数字をランダムで押してもらうというだけのアプリです。 ただし、数字の概念の理解と繋がりやすいように、数字のボタンは横スクロールで実現しています。 注意：ボタンを押すと音が出ます。
子供に触ってもらったのですが、一度も目的の数字と逆に進むことがありませんでした。 なので、100以上の数字が理解できていないだけなのかもしれません。未就学だしそれなればとりあえず一安心。
使った技術
Flutterで作りましたが、上のリンクはスマホアプリで動いていたものをFlutter Webで出力したものです。操作感がアプリと全く変わらない点に驚いています。不要なスクロールも発生していないし、数字の横スクロールも自然。Flutterが各デバイスの機能に頼らずに、ピクセル単位で管理しているから同じ動作をさせることができるんですね。素晴らしい。
またサウンドのプラグインはWeb対応もしている下記のものを使いました。
悩んだ点
どうもFlutter webで出力するとSPAとして出力されるようです。デフォルトではドメイン直下にindex.htmlが置かれることを想定しているようです。 この動作を変えたいときには、HTML中にあるbaseタグを書き換える必要があります。index.htmlにある下記の部分が該当します。詳細はここを参照してください
<base href="/">
最初はcloud storageに置いて公開するつもりでした。
しかし/にアクセスされたときindex.htmlを返すには独自ドメインが必要だったりとめんどくさかったので、firebase hostingで公開してあります。
まとめ
とりあえず子供が数字の概念をわかっていることが確認できて安心しました。
FlutterはiOS, Android, Webまとめて対応できるので、デバイス固有の処理がないのであればおすすめです。
We're hiring!
エムスリーでは技術を一緒に楽しめるエンジニアを募集しています。 社員とカジュアルにお話もできますので、興味を持たれた方は下記よりお問い合わせください。
