Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

DeNAのプログラミング教育の取り組み #denatechcon

898 views

Published on

DeNA TechCon 2017の登壇資料です。

Published in: Technology
  • Be the first to comment

DeNAのプログラミング教育の取り組み #denatechcon

  1. 1. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. DeNAの プログラミング教育の取り組み 末広 章介
  2. 2. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. 自己紹介:末広章介 ソフトウェアエンジニア 兼プログラミング教育講師 2012年4月DeNA中途入社 内製ゲームエンジンngCore 小学生向け通信教育サービス「アプリゼミ」 子ども向けプログラミング教育
  3. 3. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. 今日の話 • なぜ子ども向けプログラミング教育なのか – 実証研究の事例も紹介 • 実際に使用しているアプリのアーキテクチャ – ロボットを使った学習事例も紹介 • 成果と課題
  4. 4. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. なぜ子ども向け プログラミング教育なのか
  5. 5. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. 新しいうねりをつくり出せるリーダー? • 1つの正解を言い当てるのではなく、今までに ないアイディア・付加価値を創造する力 • 感情や情熱(passion)を伝える力 • 文化的な背景の異なる人たちと協業する力 (コラボレーション)
  6. 6. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. リーダーでなくても食べていければ… • 47%の仕事がなくなる? Type1 Type2 Type3 コンピュータに コマンドを出す人材 コンピュータと 競争する人材 コンピュータに 使われる人材
  7. 7. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. デジタルデバイド? 使えない VS 使える つくれる使える VS
  8. 8. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. 子ども向けプログラミング教育 • みんながプログラミングの素養をもつ社会 – 低学年のうちから原体験として • 様々な分野で、ITと連携したイノベーションを 起こせるように育ってほしい – プログラマーを増やすことが目的ではない
  9. 9. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. 各国の動向 • 文科省の諸外国調査レポート – http://jouhouka.mext.go.jp/school/pdf/programm ing_syogaikoku_houkokusyo.pdf – イギリス、ハンガリー、ロシア等では、初等義務教 育でプログラミングが必修 • 日本も2020年から小学校でプログラミングが 必修に – プログラミング的思考(Computational Thinking)
  10. 10. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. 子どもたちに身につけてほしいこと • アプリやゲームは自分たちでつくれるものだ と自然に考えられるようになること • プログラミングを知ることで、より豊かな創造 力を働かせられるようになること • それらを楽しいと感じ、もっと学びたいと思え ること
  11. 11. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. 公立小学校3校で実証研究 • 佐賀県武雄市(小学1〜3年生・2校)、横浜市 (小学1〜2年生・1校)の公立小学校で、DeNA が講師を派遣し、通年授業を実施 • 小学校低学年専用に開発したアプリを使用 – 「自分で描いた絵」をカメラでとりこみ、ビジュアル プログラミングで動かす – 個人・グループで自由制作し、発表
  12. 12. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. 初めての学習の様子
  13. 13. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. デモ
  14. 14. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. 実際に使用しているアプリの アーキテクチャ ロボットを使った学習事例も紹介
  15. 15. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. 子ども向けプログラミング言語の状況 • Scratch http://scratch.mid.edu – ブロックを使って動かすビジュアルプログラミング – 影響を受けた多数のサービス、プロダクト • Code.org, Blockly, Tynker, Tickle, Hopscotch, Box Island, LEGO Mindstorm, MOONBlock, GLICODE, プログラミン… • Viscuit http://www.viscuit.com – 絵を組み合わせて動かすビジュアルプログラミング
  16. 16. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. 武雄市のタブレットのスペック • KEIAN製M716S-PS – DualCore 1.2GHz – Android 4.2.2 – Flashは動かない – HTML5は重すぎる
  17. 17. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. なぜアプリを内製したのか • 進度にあわせて、必要なものを見せたい – 創作、学習、ゲーム要素のバランス • 授業のフィードバックを、すぐに反映したい – 2週間サイクルのイテレーション • 試行錯誤しながら進めるので、柔軟にアプリ の改修を行えることが重要
  18. 18. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. Cocos2d-xを採用 • パフォーマンス重視 – 武雄市のタブレットで30fps以上 • マルチプラットフォーム – iOS、Android、WindowsRT – 不足機能は、プラットフォーム毎に追加開発 • カメラキャプチャ、ファイルピッカー、録音、音編集、 バーコードスキャン、動画再生、ロボット連動、、、
  19. 19. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. どうやってブロックを描画するのか • 形が変化 • ブロックを動かす度に、パーツごとにサイズと 位置を計算して着色 メッセージハンド ラ・関数定義 戻値のない関数 ループ・条件の先頭 ループ・条件のインデント Else節 ループ・条件の最後 永久ループの最後 変数・値・戻値のある関数
  20. 20. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. どうやってブロックを組みたてて プログラムにするのか • ブロックのUIが、そのまま構文木解析済みの 木構造 • ブロック木構造をjson形式で 保存・読出 program ├── onTap └── loop ├── hideN └── showN { "program": [ { "call": "~onTap", "callArgs": [] }, { "call": "~loop", "callArgs": [], "children": [ { "call": "hideN", "callArgs": ["1"] }, { "call": "showN", "callArgs": ["1"] } ] } ] }
  21. 21. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. どうやってブロックで組みたてた プログラムを動かすのか • 毎フレームごとにブロックの木構造を処理 開始 次ブロック取得 新スコープ? 引数OK? 条件、ループ、関数実行 スコープ作成 戻り値? 戻り値設定 スコープ破棄 終了 次ブロック? Cocos2dxからのイベントや 衝突イベント等をキュー処理 Y N Y YN N Y N スコープ終了? Y N
  22. 22. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. 型の扱い: 動的な型 • ユーザは、プログラム作成時に型を指定しない • 内部では、実行時に型を決定して処理 – bool, double, string, array, std::map – 子どもは大きな数字が好き • 1000000000000000 – 1 = ?
  23. 23. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. メモリ管理 • インタプリタのスタックフレーム、スコープ、変 数、値は、malloc-freeが頻発 • そこでCocos2d-xとは別の参照カウンティング – 再利用するオブジェクトのメモリをプール • あまり体感差なかった – Cocos2d-xと分離してメモリリーク検出できるのは 便利
  24. 24. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. • Unityのような、衝突開始、衝突中、衝突終了 イベントがほしい • 毎フレームごとに、スプライトの組合せを矩形 衝突判定し、スプライトごとに衝突対象を保持 衝突判定 衝突リスト衝突リスト 衝突リスト
  25. 25. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. キャラクターの画像編集 • 魔法の消しゴムと鉛筆 ゴシゴシして 近似色ピクセルを削除
  26. 26. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. 録音、音編集 • プラットフォームごとに追加開発 – iOS • AudioToolBox + AVFoundation – Android • android.media.{MediaRecorder, MediaCodec} • com.googlecode.mp4parser – Windows10 • Windows::Media::{MediaCapture, MediaTranscoder} • MediaFoundation
  27. 27. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. 音の波形表示 • 音をデコードし、 • 平均画素法で幅1pxにnサンプルを畳み込む 100 例: n = 4 150 200 100 100*0.25+150*0.25+200*0.25+100*0.25 = 137.5 137.5 幅1px高137.5px で描画
  28. 28. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. ロボットを使った学習 • はなれた場所にあるブロックをつかみ、元の 場所にもどるプログラムをつくろう! – アーテック社の「ArTec® Robo」を使用 • http://www.artec-kk.co.jp/artecrobo 2.つかむ 3.もとの場所にもどる1.ブロックのところまですすむ
  29. 29. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. ロボットを使った学習の様子
  30. 30. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. ロボットを使ったシステム全体図 インターネット (1) プログラムのjsonを サーバにアップロード (3) Hex形式のバイナリを ダウンロード (4) USBでバイナリを ロボットのマイコンに転送 (2) c++に変換し、Hex形式のバイナリにビルド
  31. 31. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. Studuino® mini • AVR系のロボット制御マイコン
  32. 32. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. サーバでのビルド • Arduino Software をサーバにインストール – 1.6.xでないと、Studuino® mini の FlashROM にお さまりきらない場合がある • Railsで、プログラムのjsonを解析し、c++に変 換、avrgccでビルド、hex化 – リンクするライブラリは事前にビルドして静的リン クするので、待ち時間は非常に短い
  33. 33. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. USBのHIDクラスで転送 • 転送用androidアプリをGithubで公開中 – https://github.com/dena-csr/bootloadHID- android
  34. 34. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. 子どもたちの作品紹介 2年生の自由制作
  35. 35. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. メロメロにさせよう 女の子をタッチするとハートが飛び、 それがお父さんに当たるとカウント アップ。 10個当てるとお父さんがどいてケーキ が食べられる。
  36. 36. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. 登場するキャラ 女の子 お父さん ハート ハートを受け とった回数
  37. 37. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. 女の子のプログラム
  38. 38. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. お父さんのプログラム 2年生から変数を使用
  39. 39. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. ハートのプログラム
  40. 40. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. ピアノ 鍵盤をタッチすると ピアノ演奏がスタート 自身で収録した音を アニメーションに合わせて再生
  41. 41. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. 登場するキャラ 鍵盤を弾くクレヨン 音のデータが含まれた 鍵盤
  42. 42. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. 鍵盤のプログラム 1音階ごとにバラバラに データを保存し 楽曲になる順番にプログ ラムを組んでいる
  43. 43. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. クレヨンのプログラム 音にあわせて大きさが 変わったり光ったりする 「演出」のプログラム
  44. 44. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. 成果と課題
  45. 45. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. 児童の反応 • 「もっとプログラミングをやってみたい」 100% 0% したい したくない 出典:2015年2月 武雄立山内西小学校1年生40名に実施したアンケート 「プログラミングをもっとしてみたいですか?」の質問への回答
  46. 46. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. 児童の反応 • プログラミングだけでなく、試行錯誤できるこ とや発表することも人気 0 5 10 15 20 25 30 35 出典:2015年2月 武雄市立山内西小学校1年生40名に実施したアンケート 「プログラミングの授業で楽しかったところを教えて下さい」への回答(複数回答可)
  47. 47. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. 教諭の反応 • (放課後の時間の実施ということを受けて)普段給食 後は寝てしまうような子でも夢中になって取り組んで いた姿が印象的だった。 • 作品発表後の表彰で自分の作品が選ばれなかった 子どもが涙を流して悔しがっていた。それだけ制作に 打ち込んで、自分の作品に自信があったという証。普 段は見えない意外な一面が見えた。 • 自分でも教えられるのではという手応えがあった。転 勤先の学校でも自分の手で教えたい。 (現在実践中)
  48. 48. Copyright (C) 2017 DeNA Co.,Ltd. All Rights Reserved. 今後の課題 • 教材 – タイピング – グループワーク – 他校・他国との連携作業 – モノを動かすプログラム • 公教育 – 教育委員会や先生の理解 – サポートする人 – ICT環境の整備

×