プログルを支える技術みんなのコードmeetup for エンジニア 2018/07/24

1© 2018 特定非営利活動法人みんなのコードinfo@code.or.jp
学校現場におけるテクノロジーの
活用と裏側
〜プログルを支える技術〜
みんなのコードmeetup for エンジニア
2018/07/24

アジェンダ
● 自己紹介
● なにをやっているか
○ みんなのコードにおけるエンジニアの役割
● プログルを支える技術
○ 立ち上げ期→現在
● プログル開発苦労話
○ ここが辛いよBlockly
○ 学校のICT環境
● プログルのこれから

自己紹介

自己紹介
● 田中高明
○ 特定非営利活動法人みんなのコードCTO
● 経歴
○ 1987年生まれ
○ 立教大学経済学部卒業後、都内私立高校で教鞭をとる
○ 2013年エンジニアに転向
○ 2014年習い事サービス「サイタ」の開発に従事
○ 2016年みんなのコード・ファンタラクティブ(株)のダブルワーク
○ 2017年みんなのコードフルタイムjoin！→CTO就任
● 趣味など
○ 音楽(主に日本のロック)が好きです
○ 言語: JS, PHP, Ruby(on Rails), Python, Processing, Go

なにをやっているのか
みんなのコードにおけるエンジニアの役割

全ての子どもが
プログラミングを楽しむ国にする
人のアプローチ
プログラミング教育明日会議
プログラミング指導教員養成塾
学校研修会支援
技術によるアプローチ
技術を社内に向ける
業務支援
運用サポート
技術知識の共有
技術を社外に向ける
プログル

技術を社内に向ける
● 業務支援
○ 主にGoogleAppScriptを使ったアプリケーション
○ Slack連携（AWS Lambda・GASなどを利用）
○ その他プリンタを直したり、ネットワーク環境作ったり、社内SEっぽ
いこともやります
● CMS運用サポート
○ プロカリ
○ コーポレートサイト → 顧客との大事な接点に
● 情報技術知識の共有
○ 主任講師に向けたアドバイス
■ 主任講師と言えど、さすがにエンジニアレベルの知識・経験を
有しているわけではない
○ プログラミング勉強会

技術を社外に向ける
● 学校向けオンライン教材の開発
● プログル
○ 立ち上げから一人で開発
○ Hour of Codeの迷路を参考に、BlocklyGamesのカスタマイズ →
フルスクラッチで教科学習にフォーカス
○ ReactベースのSingle Page Application
○ 現在は小学校算数に対応
■ 公倍数・多角形・平均値各コースをリリース
■ プログラミングとの相性が良いため
● 教科の学習になる＆きちんとプログラミングの学習にな
る単元は結構少ない
○ 利用者10万人突破！
https://proguru.jp/

プログル体験者の声〜プログルアンケートより〜

プログル体験者の声
「算数がすきになれた。とても楽しくてウキウキしました。これからも算数を学びたいと思います。とても楽
しかったです。」
「ディスプレイ上は、綺麗にまとまっていますが、裏側のコードは大変なんだろうなぁと思いました。これか
ら社会で活躍する子供達に必要なリテラシーだと思います。」
「楽しくプログラミングの体験が出来ました。パズルのようにも感じましたが問題を正しく理解して部品の
組み合わせを考えるというようにすると解決できました。」
「楽しかった。機械が、自分の思い通りに動いたからです。」
「1番最後のステージで、正360角形を書いたら円になりました。」
「文字を書かないので、楽に、楽しく計算出来た。」
「本格的なゲームを作りたいと思った」
「プログラムするの好き！！」
「自分で、公倍数をノートに書くより簡単に楽しくできてよかったです。」
「大人は、もっと難しいプログラミングをしているので、プログラムを作ることは大変だと思った」
「想像では、簡単だと、思っていたが、意外と難しかった。」
「コンピュータに計算をさせると早く計算できるから便利」
「マリオのゲームを作ってみたい!と思った。」
「算数が楽しくなってきた」
「さんすうはにがてだけど、プログラミングは、やりたいとおもった。」
「プログラミングはすごい！と思った！」
〜プログルアンケートより〜

プログルを支える技術
立ち上げ期
（公倍数コース開発スタート〜多角形コースリリース）

フロントエンドバックエンド
インフラ
DevOps
JS・CSS ビルド
Google Blockly
p5.js + p5.play.js
Lodash
jQuery
Bootstrap3
Webpack
Babel
npm → yarn
AWS
ELB
EC2(t2.micro)
GitHub Flow
手動デプロイ
自動テストなし
● とにかくアプリケーションコードを書く時間を優先
○ リリース当時、週2稼働 → インフラやDevOpsに時間をかける余裕なかった
● SPA→バックエンドの開発要件がなかった
テスト・Linterなし、デプロイ手動でたまにエラー、AWSとはいえ自前のサーバ管理つらい

現在
（平均値コース開発〜）

GitHub Flow
hook master
merge
test & build
deploy

フロントエンド
バックエンド・インフラ DevOps
JS・CSS ビルド
Blockly
p5.js + p5.play.js
→ CreateJS
Lodash
jQuery
Bootstrap3
Webpack
Babel
yarn
Firebase Hosting GitHub Flow
CircleCI
自動デプロイ
自動テスト
Jest
ESLint
● Firebase移行してサーバ代が格安に！
○ 月1万円弱 → 月500円程度に
● 自動デプロイ楽ちん
Preview環境の運用に困る → Firebase HostingでBasic認証実装しづらい
平均値コースの開発を経て、プロダクトと設計の乖離に気づき始めた

プログル開発苦労話

開発苦労話
● 情報不足・開発コミュニティの小ささ
○ ビジュアルプログラミング関連で、プロダクション利用できそうなラ
イブラリが少ない
■ ほぼGoogle Blockly 1択
● レガシー感。つらい
● Blocklyを補完できるライブラリも少ない（あっても小規模
でプロダクション利用には不安が…）
○ 国内に似たような事例が少ない
■ 参考にできそうな、Blocklyを中心にした設計パターンが見つ
からなかった
■ 試行錯誤しながらの設計

つらい

ここがつらいよBlockly
● Google Blocklyは何をしている？
○ ひとつひとつのBlockにJavaScriptコードを埋め込む
○ 実行ボタン押下→すべてのコードがひとかたまりに→処理系(公式では
eval)に投げる
■ 油断するとBlockの中にロジックをごりごり書いてしまいがち
■ evalあまり使いたくない…
● 代替ライブラリ(JS-Interpreter)も微妙
● npmに公開されているが、モジュール化されていない
○ いまどき window[‘Blockly’] で呼び出す…
● npmリポジトリに登録されているソースコードが若干古い
○ 現在も開発は続いているが… latest update 2 years ago...
○ yarn addしたときに落ちてくるコンパイル済みBlocklyソースコードが、公式
ドキュメントと整合性がとれていない

ここがつらいよBlockly
● JS-Interpreter
○ Google Blockly本家が推奨している、JavaScriptのインタプリタライブラリ
■ Blockごとのステップ実行・中断・再開が可能
■ 実行中のBlockをハイライトすることができるようになる
○ モジュール化されていない
○ JS-Interpreter内部で独自の名前空間を持つため、グローバルオブジェク
トですら参照できない
■ Blockで関数を参照する場合、都度JS-Interpreter内部の名前空間
と関連づけしないといけない
● MS Edgeとの相性問題
○ MS Edgeのバージョンによって、Blocklyの挙動(主にBlockの崩れ)が変わ
る

学校のICT環境
● ブラウザ環境
○ ほぼIE(72%)
■ 意外とバージョン新しい→ほぼIE11(97%)
■ IE9以下のアクセスもあります…が、1%以下
● 時期的な問題？今後レガシーブラウザからのアクセス増
える…？
○ 対応ブラウザはIE11、最新版のEdge・Chrome・Safari（含むiOS）と
しています
■ FireFox、Androidブラウザ→標準的な学校のIT環境を考慮し
てサポートせず
○ iPadからのアクセスが盲点…
■ 標準Safariではなく、フィルタリングアプリからのアクセス
○ サポート外のブラウザには「サポートしてませんよ」と表示

学校のICT環境
● フィルタリング問題
○ Hour of Codeは時々学校内フィルタリングにひっかかった
■ 主な原因
● 「ゲーム」カテゴリに入っているらしい？
● 海外サーバへのアクセスも関係している？
■ 主に市区町村の教育委員会が一元管理しているため、変更
に時間がかかる
○ 初期は東京リージョンのEC2で運用、CDNも使わず
○ Firebase Hosting移行前に検証
■ Googleに問い合わせ→フィルタリングを防ぐ術はないとの回
答
■ 検証用のアプリケーションを立ち上げ、養成塾OB・OGにお願
いしてアクセス可否検証
● 問題なかったので、移行を決定した

プログルのこれから

● 新コースは今後も開発していきます！（絶賛開発中）
● 大規模リファクタリング進行中
○ 設計の見直し
■ 引き続きBlocklyは使うが、極力モダンな開発ができるように
心がける
● Google Blocklyをサポートするライブラリの導入
○ node-blockly
○ npm版 js-interpreter
○ react-blocly-drawer
● React wayにのせる
○ リリース時に比べて、React界隈が成熟してきた
○ create-react-appやreactstrap、MobX等を導入

● 設計の見直し
○ いままで → 技術の関心事を中心
■ Blockly・p5.js(CreateJS)・React.jsをそれぞれ疎にすることが重要だ
と思っていた
■ 各関連クラスの中に、プロダクトの業務要件を押し込む
■ 日に日に、コードの変更が難しくなる…
● 例: 〇〇コースにステージ✗✗を追加したい
○ Aクラスのhogehogeメソッドを変更し、Bクラスにhugahugaプ
ロパティを追加、Cクラスのfoobarを変更し…
○ 今後 → プロダクトの関心事を中心
■ コース・ステージなど、プロダクトに関わる用語を中心に設計
■ 必要に応じてライブラリを合わせていく
● 変更箇所の特定が楽に、副作用の心配も減りそう
● Blocklyのサポートライブラリのおかげでだいぶ作りやすくなった

Block UI
ユーザー入力
Google Blockly
画面UI
React.js
結果描画
p5.js
CreateJS
今までの設計
連携クラス
状態管理

今後
多角形
公倍数
平均値
抽象コース
抽象ステージ
ステージn

まとめ

まとめ
● みんなのコードにおけるエンジニアの役割
○ 技術によるアプローチ → 社外・社内両方の役割
● プログル利用者10万人突破！
● プログルを支える技術
○ Firebase移行でコスト削減、デプロイ自動化で楽に
● プログル開発苦労話
○ Google Blocklyと関連するライブラリが辛い
○ 学校のICT環境
■ 意外とIE新しい
■ フィルタリングは今後もあやしい…
● プログルのこれから
○ リファクタリング進行中
○ 引き続きコース開発しています

ご清聴ありがとうございま
した

プログルを支える技術みんなのコードmeetup for エンジニア 2018/07/24

Recommended

Recommended

More Related Content

Similar to プログルを支える技術みんなのコードmeetup for エンジニア 2018/07/24

Similar to プログルを支える技術みんなのコードmeetup for エンジニア 2018/07/24 (20)