- micro:bit のリポジトリを fork
- makecode→プログルらしいデザインへの移行
- チュートリアルの追加
- まずは Firebase Hosting ではじめてみた
- リリース直前に襲いかかるIEの魔の手
- Cloud Run に移行
- 無事にリリース
- ファイルサイズ大きいので学校で使うには...
- リリースを振り返って
- We Are Hiring!
みんなのコードエンジニアの きょんしー です🐧
2月3日、プログル理科電気コースをリリースしました。
プログル理科電気コースは、チュートリアルに沿って回路の組み方、プログラムの作り方や考え方までを授業の中で学ぶことができる、micro:bitのプログラミング環境です。プログルボードと組み合わせて使うことを想定しています。
2019年の9月くらいから取り掛かり始め、週に1, 2時間ほどの時間を取りつつ実装してきました。
無事にリリースし、リリース後の細かい修正の対応も終えたので、
- プログル理科電気コースの開発がどのように進んでいったのか
- どのような技術を使っているのか
について書かせていただきます。
micro:bit のリポジトリを fork
2019年の5月に『プログル6年理科電気キット』の提供を開始しました。
Makecode(https://makecode.microbit.org/) の機能として提供されているプロジェクトの共有機能を用いて、6年生の単元「電気の利用」で使用するブロックを使えるようにしていました。
Makecode には、カスタムブロックを読み込む機能やプロジェクトを共有する機能など様々な機能があるのですが、実際にどのくらいのユーザが使用してくれているのかの正確な値を知ることができませんでした。
また、プログルの開発において意識している点は
- プログラミング教育の必修化を受け、初めて児童に教える先生でも使える教材
です。 そのため、チュートリアルを用意することで先生にとって使いやすく、児童にとって理解しやすくすることを意識しました。
まずは Microsoft の Github で提供しているリポジトリを fork するところから始めます。
- https://github.com/microsoft/pxt
- https://github.com/microsoft/pxt-common-packages
- https://github.com/microsoft/pxt-microbit
これらの3つのリポジトリを fork してきました。 環境構築に関しては https://github.com/microsoft/pxt-microbit#readme に示されているので参考にしていただけたらと思います。
makecode→プログルらしいデザインへの移行
fork が終わった後は、プログルのデザインに合わせるため、CSSファイルを探っていました。
pxt-microbit/theme/site/globals/site.variables に primaryColor など、色の定義がされていたのでプログルらしい色に変えました。
@primaryColor: @green; /* Proguru Color */ @blue: #439ef9; @green: #30bf55; @white: #ffffff;
メインビジュアルの画像やヘッダーの画像・リンクを変更し、トップページのデザインが完成しました。
レスポンシブデザインなのですが、メインビジュアルの画像が画面の横幅によって押しつぶされることがあったので、修正する作業が地味に大変でした。
チュートリアルの追加
Makecode にも初めて使う人向けに簡単なチュートリアルが用意されています。
チュートリアルの追加は、先ほどのデザインの変更とは違って TypeScript を書けそうな臭いがしたので、ワクワクしていました。
しかし、現実はそう甘くありませんでした。 こちら がMakecodeの「点滅するハート」のチュートリアルです。
なんとmarkdown でした。
規則に沿って同じようにファイルを作ることでチュートリアルが作れます。 実際にプログル理科電気コースの最初のチュートリアルは以下のような内容が書かれています。
# スイッチを作ろう ## Introduction @fullscreen プログルボードとmicro:bitを接続し、電池や豆電球をつないだ回路を作ろう！最初にプログルボードを使う準備をしよう！  ## Step 1 @fullscreen micro:bitとプログルボードをつなごう！  ## Step 2
まずは Firebase Hosting ではじめてみた
低コストかつ運用の手軽さから、インフラ環境は Firebase Hosting に決めました。
ローカルの環境ではMakeCode共通パッケージの pxt を使った pxt serve コマンドでサーバが立ち上がるのですが、ビルドするには pxt staticpkg コマンドを叩く必要があります。
どちらでも同じ結果になると思いきや画像ファイルのディレクトリが異なるため、実際にホスティングする際にはリダイレクトを適用する必要があります。
firebase.json はこのような感じです。
{
"hosting": {
"public": "built/packaged",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"redirects": [
{
"source": "/static/:path*",
"destination": "/docs/static/:path*",
"type": 301
}
]
}
}
リリース直前に襲いかかるIEの魔の手
リリース前に、都内の小学校で実際に使ってもらう機会をいただき、みんなのコードのメンバーも数名授業を拝見しに伺っていました。
授業では Google Chrome を使用していたため大丈夫だったのですが、 実は当日朝、IE11で動作させたら組んだブロックのコンパイルができないことが発覚していました。
授業中は動かなかったりしないか、バグが出てくるのではないかとヒヤヒヤしていました。幸いにも授業はスムーズに進行しました。この時点だとIE11で動作していませんが....
Cloud Run に移行
その後、複数環境での動作検証を行い、どうやらFirebase Hosting環境下のみ起こる現象であることがわかりました。
そこで、Firebaseの代替となる環境として、Google Cloud Platform が提供している Cloud Run を使うことにしました。
Cloud Run は2019年4月ごろに発表された、Docker コンテナをサーバレス環境で実行するというモダン(大事!)なサービスです。
Dockerコンテナを使うことで自由な環境を用意できる点と、サーバーレスなのでインフラを意識しなくて良くなる点から、今回導入することにしました。
Cloud Run を用いると、以下の手順を実行するだけでアプリケーションをデプロイすることができます。
- アプリケーションコードを含んだ Dockerfile を定義
- Cloud Build を用いてイメージをビルドし、Container Registry に保存
- 保存したイメージを Cloud Run にデプロイ
このように手軽にデプロイできるのも大きなメリットだなと感じました。
無事にリリース
2月3日、無事にリリースしました。 リリース後も色んな方々から使ってみての感想をいただきました。
みんなのコードのメンバーや活動に熱心に関わってくださる先生方には、年末年始で落ち着きたい時期にも関わらずレビューしていただきたりしました。 この場を借りて感謝申し上げます。
ファイルサイズ大きいので学校で使うには...
小学校で使ってもらおうと思った時に、このままだとファイルサイズが大きくて待ち時間が発生するという問い合わせがありました。
15.4 MB × 20人 = 308 MB 確かに大きいですね。
SPAということもあるのでファイルを取得完了してからの時間も加えるともう少し時間がかかりそうです。 gzip圧縮やチュートリアルで表示されるGIFファイルの圧縮、キャッシュする期間の調整などをして3分の1くらいになりました。
リリースを振り返って
他の開発と並行してプログル理科電気コースの開発を進めていたため、がっつりと時間を割くことは出来なかったですが、使わない機能を省いて必要な機能だけを提供できるように心がけました。
IEでのバグが出たときのリリース判定会議では学校で一番使われているブラウザに対応できないとダメだよなぁということで落ち込んでいましたが、無事にリリースでき、まずは一安心です。
We Are Hiring!
特定非営利活動法人みんなのコードでは一緒に働く仲間を募集しています
最後に、みんなのコードでは、一緒にプログラミング教材「プログル」を開発してくれる方を募集しています。この記事を読んで興味を持っていただいた方、ぜひお気軽にご応募ください🙂（カジュアルにランチ🍴からでもOKです！）
