子ども向けプログラミング学習サービスQUREOの技術的アプローチ

bitvalley2018で発表したスライドになります。

Transcript

1. 子供向けプログラミング学習サービス の技術的アプローチ
2. 自己紹介 鈴木 康弘（すずき やすひろ）@yasuiro ・Web制作会社を経て2014年サイバーエージェントグループに入社 ・2016年よりアプリボットにてQUREOの立ち上げに携わる ・元Flashエンジニア。現在はFrontend界隈を中心に活動しています。 ・最近の興味はFacebook の Instant Gamesとか
3. 本日お話すること ・QUREOとは ・QUREO立ち上げの背景 ・システム構成 ・正誤判定と成績 ・画像同士における衝突判定 ・まとめ フロントエンド寄りのお話が多いです。
4. とは
5. https://youtu.be/zOk9o1fB0e4
7. https://qureo.jp ・子供向けオンラインプログラミング学習サービス ・ゲームを作りながら、プログラミングの基礎を学んでもらう ・ビジュアルプログラミングによる学習方法を採用 「実力がしっかり身につく、新しいプログラミング教材」
8. プログラミング環境とカリキュラムが一体化している が特徴的な点 ・現時点で300レッスン程あり、最終500レッスン位になる予定
9. 立ち上げの背景
11. プログラミング教育必修化
13. 2013年設立 プログラミング教育
14. 「プログラミング教育」の課題点 ステージ0 特に取り組みをしていない ステージ1 担当を決めて検討中 ステージ2 研究会や研修を行っている ステージ3 授業を実施している その他 地域間の格差が生まれている ※画像：文部科学省「教育委員会等における小学校プログラミング教育に関する取組状況等」より
16. 教育ノウハウ ゲーム制作で培った開発力
17. システム構成
18. システム構成図
19. システム構成図 フロントエンドの領域 サーバーサイドの領域
21. 正誤判定と成績
23. 合っている？ 間違っている？
24. 子どもの書いたコードの正誤判断 その場で講師が判断できる 講師がいないため判断できない 塾の場合 オンラインの場合
25. 課題 オンライン上でどのように判断するか？
26. レッスン数が300近くあり、 一つ一つ答えの定義をプログラミングしていくのは非現実的 どれだけ似ているかというアプローチ
27. コサイン類似度と呼ばれる、 文書などの類似度判定に使われるアルゴリズムを使用 使用しているブロックの種類をベクトルの軸に変換し 正解かどうかが判定可能に！ 2つのベクトルの内積の値が1〜-1になる性質を利用した方法です。 ベクトルが「同じ方向を向いていれば1」「反対方向を向いていれば-1」 になり、1に近ければ同じ方向を向いているということになり 似ていると判断ができるアルゴリズムになります。 コサイン類似度とは
28. 例1 正解ブロック 実装したブロック
29. 例1 正解ブロック 実装したブロック ( 1 , 1 , 1 ) スタート 待つ 右回転 ( 1 , 1 , 1 ) スタート 待つ 右回転
30. 例1 正解ブロック 実装したブロック ( 1 , 1 , 1 ) スタート 待つ 右回転 ( 1 , 1 , 1 ) スタート 待つ 右回転 類似度計算 1.00
31. 例1 正解ブロック 実装したブロック ( 1 , 1 , 1 ) スタート 待つ 右回転 ( 1 , 1 , 1 ) スタート 待つ 右回転 類似度計算 1.00 同じ
32. 例2 正解ブロック 実装したブロック
33. 例2 正解ブロック 実装したブロック ( 1 , 1 , 1 , 0 ) スタート 待つ 右回転 ( 1 , 1 , 0 , 1 ) スタート 待つ 右回転 大きさ 大きさ
34. 例2 正解ブロック 実装したブロック ( 1 , 1 , 1 , 0 ) スタート 待つ 右回転 ( 1 , 1 , 0 , 1 ) スタート 待つ 右回転 類似度計算 0.66 大きさ 大きさ
35. 例2 正解ブロック 実装したブロック ( 1 , 1 , 1 , 0 ) スタート 待つ 右回転 ( 1 , 1 , 0 , 1 ) スタート 待つ 右回転 類似度計算 0.66 比較的似てはいる 大きさ 大きさ
36. 正誤の判定が可能になった 成績
37. どのように成績を付けているか？
38. 概念の洗い出し 順次実行 30概念位を定義してあります 繰り返し 条件分岐 などなど …
39. 概念をチャプターに紐付けて概念別に成績を付与 順次実行 S 繰り返し 条件分岐 … チャプター1 A B チャプター2 チャプター3
40. 結果 順次実行 条件分岐 よし先に進もう チャプター3を もう一度やろう S B
41. 結果 順次実行 条件分岐 よし先に進もう チャプター3を もう一度やろう 今後の学習の進め方がわかりやすくなる S B
43. 画像同士における衝突判定
45. ・透過部分は衝突させたくない ・今後専用のお絵かきエディタを実装する予定があり、 　ユーザーが自由に素材を作成できる機能が入る ・画像は縦横比を保ったまま拡大縮小される 要件
46. ブロードフェーズとナローフェーズに分離
47. ブロードフェーズは矩形での判定
48. ブロードフェーズは矩形での判定 当たった！
49. 当たった！ 矩形同士の判定であればすごくシンプル
50. 透過部分が重なっている場合でも判定されてしまう
51. ブロードフェーズで重なったと判定できたあと、 ナローフェーズでの工夫が必要
52. ナローフェーズにおける判定
53. 案1 事前に判定領域をパス情報として用意する
54. 判定領域用のパスを保持するようにしようと思いましたが “ユーザーが自由に素材を作成できる機能が入る” という要件があったため厳しそう
55. 判定領域用のパスを保持するようにしようと思いましたが “ユーザーが自由に素材を作成できる機能が入る” という要件があったため厳しそう
56. 判定領域用のパスを保持するようにしようと思いましたが “ユーザーが自由に素材を作成できる機能が入る” という要件があったため厳しそう
57. 案2 ピクセルレベルでの判定
58. 重なった領域のみピクセル単位で判定
59. 重なった領域のみピクセル単位で判定 処理が重い
60. 重なった領域のみピクセル単位で判定 処理が重い
61. 案3 前処理&判定エリアの簡略化
62. リアルタイムピクセル判定は厳しい 一度だけ前処理をすることで リアルタイム判定を軽くできないか？
63. 画像をロードしたタイミングで正方領域に分割し 領域内の透過ピクセル数の比率で、領域を衝突判定領域とするかを決定する この時、分割最大数を決めることで 画像のサイズに応じて分割数が多くならないようにしています。
64. 画像をロードしたタイミングで正方領域に分割し 領域内の透過ピクセル数の比率で、領域を衝突判定領域とするかを決定する この時、分割最大数を決めることで 画像のサイズに応じて分割数が多くならないようにしています。 判定領域としない 判定領域とする
65. 判定領域を算出
66. 計算しやすいように判定領域を矩形ではなく円にする
67. 隙間を埋める
68. 円同士の衝突判定をする 距離関数（三角関数）で判定できるため、計算量が少なくなります
69. 判定領域を円にすることで 拡大縮小や回転への計算も対応しやすくなる 行列を使用することで容易に対応できる
70. こういった場合は衝突とみなさなくなった
71. この場合は衝突とみなすようになった
72. この場合は衝突とみなすようになった 良い感じの判定
73. ・パフォーマンスと判定のバランスが良い ・精度的には落ちる部分はあるが問題ないレベル
74. まとめ
75. ・Tech Kids Schoolのノウハウが詰まったカリキュラム ・正誤判定にはコサイン類似度を利用 ・成績から得意不得意がわかり、学習計画が立てやすくなる ・透過PNG同士の当たり判定は領域の簡略化を画像ロード後　　　 　前処理として行うことで予め決められた判定情報を持たず　 　に対応可能に
76. 告知
78. ご静聴ありがとうございました