こどものためにスマホ・タブレットで使える「ホワイトボード」を作った話

いつものように成果物は下記です。

• 大人用(画像を保存できる)

• こども(画像を保存できないシンプル版)

Android、iOS共に「ホームに追加」でなんちゃってアプリ(PWA)として使えます。（アプリの固定、アクセスガイドを併用すれば他のアプリを使われることもなくなりますのでオススメです。記事の下の方にやり方を記述しています。）

きっかけ

夏休み祖母の初盆、一歳半の娘が一度も実家に帰ってないことなどを踏まえ検査をし帰省している時でした。
飛行機の中で3歳の息子が「お絵かきしたい、数字書きたい」と言いはじめました。（息子は数字を書くのにハマってます）

「雲が下にある！」ので興奮する

キタキタ！息子よITパパをなめるな！

『クレヨンと自由帳が使えない機内、そのためにiPadとApple Pencil、シンプルなお絵かきアプリをダウンロードしていたのだよ！』

と、万全の状態でいたものの罠がありました。

「広告表示のある」ものだったのです。（有料のはもっと高機能なレイヤーとかあるものでそれだと息子・娘には高機能なのです）

必殺技炸裂！

息子「ここ(広告領域)書けないね？」
モヒカン「そうだね、お金ないからね」
息子「大きく書けないね？」
モヒカン「そうだね、お金ないからね」
息子「大きく書けるといいね？」
モヒカン「そうだね…（この流れはヤバいやつだ）」

「公共乗り物における親の悪夢-序」より

途中で娘も参戦します。

娘「コレ、コレ（これ私もやりたい）」
息子「これ、ボクの！パパのこっち(iPhone)でやりなさい」
モヒカン「こっちはお仕事のだし、できないんだ」(アプリ入れてない)
息子「ふーん」（妹無視して数字を書き出す）
娘「コレ、コレ…」
息子「嫌だ、貸さない」

「公共乗り物における親の悪夢-破」より

これは別の意味でヤバいぞ…

息子「こっち(サブ機のAndroid)は？」
モヒカン「こっちにも入ってないんだよねぇ」
息子「そっか、（妹が）かわいそうだから、パパが作ろうね」
モヒカン「…そうだね…」（貸さないのね）

「アラフォー紫モヒカンIT父ちゃん宿題日記」より

結局、息子の必殺技「パパが作ろうね拳」が炸裂し、夏休みの宿題ができました。（そうじゃなくても幼稚園の課題とかあるのに…）

今時の幼稚園では「朝顔の観察」他多数の宿題が…

AndroidとiPadで動くものを超早で作りたい(できればオフラインで、Fireタブレットでも動くもの)

FlutterだのReactNativeだのが頭に浮かんだあなた！
「おめでとうございます重度のIT病です！！！」

こどもなんてのは、GoogleやAppleの審査時間build時間なんて関係ないんです、待ってくれません。
マジで 『ほしい』って言ったらスグないとダメ なんです、ASAP！！！！

『よし、もうWebしかない(JS苦手だけど)、まして前に作ったコレもあるし、流用すればなんとかいけるっしょ！』

ということで、15分ぐらいで息子や娘がある程度遊べるものはできました。(ブラウザ上 だけ ならな)

AndroidでもiPhoneでもiPadでもFire Tabletでも…

ここからが地味に面倒でした、元が飛行機の中で起きたことなのでオフラインで起動させたいわけです。
そうなると、PWAにするのが一番なのですが、AndroidやiPad、Apple Pencilでも動くものを作るとなると色々苦労しました。 (いつもの通り、この辺の技術的なところはQiitaに乗っけてます。)

むしろ技術的なところはさておき、一番面倒予測できなかったのは、やっぱり対象（ペルソナ）が2、3歳児ということです。

元々、画像保存機能をつけてたのですが、この保存ボタンを押すたびにアプリが保存画面に行ってしまって『お絵かき画面がなくなってしまい娘が発狂』します。

というか、無制限にどうでもいい落書きを端末に保存しやがります。

自分のお絵かきアプリがができたら「飽きた」1歳児

そして「こども用」に機能を削る

『ほら、前にこんな絵描いたねー』とかいう状況があるだろうなぁと思って画像保存機能付けていたのですが、そんなもんどこ吹く風！

ぶっちゃけ画像の保存機能がアプリ化したことで動かなくなったことで、自分で実装することになり『ちょっと面倒だった』部分なんですが、それを思い切って削りました。

大体、娘が一番喜んでいるのは、メニュー自体を表示非表示にするところで お絵かき関係なーし！

と、いうことで世界中の子育てしている方に公開します！

もうね、親の目線ですけど、ネイティブとか非ネイティブとかコードが汚いとか関係ないんです。

広告がなくて、ある程度のことができる
いつ飽きるか分からない物のために100円出すのは惜しい！
タブレットでもスマホで『ポイっ！』って書けること！
5分でも10分でも、静音な空間が生まれること

「IT父ちゃん平穏に暮らしたい第1話」より

まぁ、大人版の方はウチのようなフルリモートの会社で勉強会とかするにあたって使える機能(ツール)なので、そちら用としても開発しました。

いずれ、ペンの太さとかレイヤー機能とか、テキスト入力機能とか入れられなくはないので、気分が上がれば実装しまーす。

設定の仕方

ここまでITのカタカナが良くわからないまま、苦労して読んでくれた保護者の皆さんありがとうございます。で、肝心の設定方法を伝えます。（バグや不具合あっても仕方ないと思って使ってくださいね。）

iPhoneの場合

1. safariで大人版かこども版にアクセスします。

2. 画面最下部の共有ボタンをタップします。

3.以下のような画面が出るので下にスライドして「ホーム画面に追加」

4.右上の「追加」を押すと無事にホームからアプリのように使えます。

尚、こどもに渡す時は「アクセスガイド機能」を使うと楽です！

Androidの場合

1. Chromeで大人版かこども版にアクセスします。

2. 画面右上の「…」をタップします。

3.「ホーム画面に追加」を押すと、通常のアプリと同じように使えます。

尚、こどもに渡す際には「画面の固定」を使うと楽です。

最後に

9/12息子が以下のようになりました。

息子が案の定コロナ陽性になったわけで。
The beginning of hell.

— kurokky（黒木シンタロー） (@black_tree) September 12, 2022

これから地獄の始まりです。

このアプリが少しでも役にたった方「イイネ！」押してもらえるとありがたいです！