※ この記事は2019年7月にWantedlyフィードに掲載した記事を加筆修正したものです
小学校のデバイス・ブラウザ事情
みんなのコードエンジニアの きょんしー です🐧
来年の4月から小学校でプログラミング教育が必修化されます。
実際にPCを用いる学校もあれば、PCに比べ手軽に使えるということでタブレットを導入している学校もあり、使うデバイスは実に多種多様となっています。しかし、問題はブラウザに潜んでいます。
プログルのユーザが用いるブラウザの約7割はIE11で、このこと自体が悪いわけではないのですが、エンジニアとしてはリリースの際に注意して検証する項目が増えてしまいます。
また、タブレットといってもiPadを使用する学校もあれば、Windowsタブレットの使用も想定されます。 このように、様々なデバイスやブラウザでの動作検証の大変さをひしひしと感じています。
全国の学校現場のブラウザ事情を考慮するとIE11には対応させなければなりません。 入社してすぐにあった中央値・最頻値コースのリリースで、IE11対応のissueやバグ修正と向き合ってきました。
あれ、バグがあるぞ。
そんなとき、IE11で発生するBlockly本家のバグを発見しました。
ブロックに対応するコードをステップ実行する際に、実行されている箇所のブロックがハイライト表示されるのですが、IE11ではアンハイライトされないことが分かりました。
Blocklyのminifyされたコードから原因を探りました。 バグの原因を特定し修正用のパッチも当てました。
ただ、BlocklyはGoogleが管理しており、オープンソースで世界中(まだまだニッチなBlocklyコミュニティ)の人の手によって機能の追加やバグの修正がされています。
そして、Blocklyを使って開発されているプロダクトも多く存在するため、貢献できたらと思いプルリクを作成しました。
このバグに関するプルリクはこちら。 気合を入れすぎてIE10でもOperaでも検証しました。
プルリクメッセージを書く上で、英語が得意なパートナー担当のメンバーにお願いしました。
自称言語オタクということもあり、特に Reason for Changes に関してはとても素晴らしい文章を書いていただきました。
In Japan many online materials of STEM classes for elementary schools are based on Google Blockly, so the case where children use Goolgle Blockly is not rare. Moreover most of Japanese schools are not equipped with Chrome/ Microsoft Edge nor Safari. They use Internet Explorer, even though IE has not supported. We would like to make it clear to children that which code is to debag.
バグは修正されたが...
結果としてはBlocklyのコントリビュータになれませんでした笑 しかし変更は別の形できちんと反映されたので良かったです。
Googleの方が新たにプルリクを作成して変更を加えてました。diffを見ると自分の出したプルリクと少し変更点が異なっていたのもあったので、レビューが面倒だったのかもしれないです。
形は違えど、Blocklyユーザや開発者に貢献できたので良かったです。 また、Googleの開発者もIEが嫌いということが分かりました。
Blockly開発は楽しい
9月に開催された技術書典7に「楽しいBlockly」という名前で出してきました。PDF版に関してはBOOTHで購入可能です。 ReactとBlocklyを用いたアプリケーション開発について書きました。もちろんテストも書いてます。
前回書いた記事 https://techblog.code.or.jp/entry/2019/11/08/183000 でも触れたのですが、Blocklyが公式にnpm公開しており、VueやAngularでの開発の例も紹介されています。
「楽しいBlockly」ではnode-blockly, react-blockly-drawer というライブラリを使ってるのですが、現在移行中です。
プロダクト開発をする中で「NPOだけど面白いベンチャーだなぁ」と感じてます。 「全ての子どもがプログラミングを楽しむ国にする」 ためにプロダクトを開発しているからでしょうか。
We Are Hiring!
特定非営利活動法人みんなのコードでは一緒に働く仲間を募集しています
最後に、みんなのコードでは、一緒にプログラミング教材「プログル」を開発してくれる方を募集しています。この記事を読んで興味を持っていただいた方、ぜひお気軽にご応募ください🙂（カジュアルにランチ🍴からでもOKです！）
