プ会 0x40

enchant.js プロジェクトの プログラミング教育への取り組み

株式会社ユビキタスエンターテインメント 秋葉原リサーチセンター

伏見遼平

このスライドは以下のサイトからアクセスできます

自己紹介

•  伏見 遼平 (Fushimi Ryohei)

•  東京大学工学部電子情報工学科 •  東京大学大学院情報学環 教育部研究生

–  学部2年生

•  株式会社ユビキタスエンターテインメント 秋葉原リサーチセンター (UEI/ARC) –  2010年から勤務・3年目 –  9leap プロジェクトリーダ –  enchant.js 開発チームリーダ

秋葉原リサーチセンター UEI の研究開発機関

何をしている会社なの?

•  株式会社ユビキタスエンターテインメント –  CMS 開発・販売 –  モバイル向けコンテンツ –  スマートフォンアプリ開発 (独自 & 受託) –  研究開発・調査・コンサルティング

•  新しい技術が大好き

–  社内にはロボットやガジェットがたくさん

どんな仕事をしているの?

•  ライブラリ「enchant.js」の開発・普及活動 •  Webサービス「9leap」の開発・運営 •  Webサービス「code.9leap」の開発

enchant.js とは…

•  ゲームやアプリを簡単に開発できるライブラリ •  プログラミングにおける「LEGO」

enchant.js とは…

•  2010年4月に開発・公開 •  オープンソースで公開、無償で利用できる

•  UEI/ARC の開発チームとコミュニティによって維持されている –  cf. Scratch … MIT, Viscuit … NTT 基礎研

•  田中がα版を開発 •  伏見が開発チームリーダを引き継ぎ •  ARC, UEI 全体として普及・広報活動

enchant.js とは…

•  MSX, FAMILY BASIC にインスパイア •  「とにかく簡単にゲームが作れる」ことを目指して開発

enchant.js とは…

•  「enchant.js で初めてプログラミングを始めました」 という人が意外とたくさんいた

•  プログラミングを普及させる手段になるのでは?

enchant.js は…

•  クラスベース OOP •  描画メソッドを隠蔽 •  マルチプラットフォーム •  プラグインによる拡張性

ブラウザの中で動く!!

enchant.js は…

教室のPCすべてにソフトを インストールする必要がない (但し、ブラウザは必要…)

enchant.js は…

What is HTML5 ?

What is HTML ? •  Hyper Text Markup Language

What is HTML ? •  Hyper Text Markup Language

–  HTML1.0 … 1993年 –  HTML4.0 … 1997年 –  HTML5 … 2012年現在策定中

World Wide Web Consortium (W3C) WWWに関する技術の標準化団体

Webブラウザが満たすべき仕様をまとめる

ブラウザベンダが実装

What is HTML5 ?

•  ストレージ –  App Cache –  Web Storage –  Indexed DB API –  File API

•  デバイスコントロール –  位置情報 API –  マイク・カメラ –  アドレス帳やカレンダー

•  新しいプロトコル –  WebSocket –  Server-Sent Events

•  マルチメディア –  Audio, Video 要素

•  グラフィクス –  エフェクト –  SVG –  Canvas要素 –  WebGL –  CSS3 3D

＊W3C HTML5 Logo に含まれている仕様

What is HTML5 ?

•  ストレージ –  App Cache –  Web Storage –  Indexed DB API –  File API

•  デバイスコントロール –  位置情報 API –  マイク・カメラ –  アドレス帳やカレンダー

•  新しいプロトコル –  WebSocket –  Server-Sent Events

•  マルチメディア –  Audio, Video 要素

•  グラフィクス –  エフェクト –  SVG –  Canvas要素 –  WebGL –  CSS3 3D

＊W3C HTML5 Logo に含まれている仕様

要するに…

より高度なアプリが 作れるようになる

enchant.js •  経済産業省「Innovative Technology」採択 •  モバイルITアワード Asia 審査員特別賞 •  CEDEC Award 2012 ネットワーク部門最優秀賞

–  プロジェクト・普及活動に対して受賞

enchant.js とは…

•  ゲームやアプリを簡単に開発できるライブラリ •  プログラミングにおける「LEGO」 •  「プログラミング教育」の普及に役立つかも…?

実は…

我々の野望

一億総プログラマー国家

我々の野望

六十億総プログラマー惑星

そもそも我々の会社は

•  公用語はプログラミング言語 •  日本語や英語を書く/話すのが面倒 ex. 会議室にお茶を持って来るロボット

みんなプログラマーになれば 無用なコミュニケーションも減るはず!!

一億総プログラマー国家万歳!!

というのは半分冗談です でも…

プログラムを仕事にしない人でも プログラムを学ぶ意味はあるはず…

プログラミングができると…

その1 新しい言葉・新しい世界を理解できる

その2 アイデアをカタチにして伝えやすい

その3 システムの仕組みや成り立ちがわかる

みんなもっと「プログラミング」を学ぶべき

•  ここでいう「プログラミング能力」は… –  現実のモノ / 作りたいモノをモデリングすることができる力 –  トライアンドエラーを繰り返し作りたいものに近づける力

•  プログラミング教育 != 「情報教育」一般 –  もちろん「情報教育」の充実が前提 –  いまはまだ前提が整ったところにしか採用してもらえていない

職能としてのプログラミング ある程度を超えると、どうしても…

?

がんばってここまで高めたい!

文化 趣味 教養 } としてのプログラミング

そういう意味もこめて…

一億総プログラマー国家

ゲームを遊ぶのは面白い

単純なルールでも面白い

自分のゲームを作るのは…面白い?

ゲームを作るのはもっと面白い!

昔は…?

実際の課題に戻って…

•  便利なプログラミング言語ができた! •  簡単にゲームが作れるようになった!

→ みんなが使ってくれるとは限らない…

実際の課題

•  なぜか? –  ゲームをつくっても自慢できる場所がない

•  プログラミングのコミュニティが身近にない

–  ゲームをつくっても褒められない •  「またパソコンばっかりして!」と怒られる •  パソコン = ゲーム, Youtube, SNS, 遊びの場所?

実際の課題

•  「たまり場」を作ろう –  ゲームプログラミング・コミュニティ –  ニコニコ動画 (動画) –  pixiv (イラスト) –  などなど

•  周りのオトナにも認めてもらえるように… –  コンテストを開催しよう –  優秀な学生はちゃんと表彰しよう

ゲームプログラミングコンテスト

ゲームプログラミングコンテスト 9leap

•  25歳以下の学生を対象に開催 •  受賞者にはアメリカのトップカンファレンス視察ツアー

ゲームプログラミングコンテスト 9leap

•  大人も投稿できる –  比率は 1:1 程度 –  大人が頭を捻って考えたゲームより面白いものも作れる –  「面白さ」というフィールドの上では平等 –  むしろ先入観がない方がゲームは作りやすい

「パソコン部」は難しい らしい

•  パソコン部には目標がない ? –  書道部, 吹奏楽部 … コンクール –  卓球部, 陸上部 … インターハイ

•  近年になっていくつか登場してきた –  パソコン甲子園 –  情報オリンピック

生徒・先生主導で 「9leap」を目標にゲームプログラミングを始める

「プログラミング部」「パソコン部」が登場

全国高校総文祭

•  文化部のインターハイ –  書道部, 吹奏楽部, 文学部, 放送部, ...

•  「プログラミング部門」を作ろう –  2014 年度の高校総文祭から、公式競技 としてenchant.js を

採択していただけることになりました –  思惑通り…?

プログラミングワークショップ

•  ロサンゼルスで、現地の日本人家族対象に開催 •  60人程度の参加 (座学 + 実践)

•  enchant.js Game Development Workship in California https://www.facebook.com/events/297907776970845/

enchant.js の限界

•  通常の enchant.jsは、 まだまだプログラミングっぽすぎる!! 小学生には無理!!

enchant.js を 子どもたちが遊べる

ホビーにするためには、 どうすればいいか…

その道のプロを呼ぼう!

前田靖幸氏

•  元タミヤ •  ミニ四駆のコンセプトデザイン 「タミヤの前ちゃん」 「初代ミニ四駆ファイター」

できた!

ブロックベースプログラミング言語

前田ブロック

ブロックベースのプログラミング言語

•  「パペット」をいくつか作る •  「パペット」に「うごき」を追加する

•  前田ブロックで作った「バナナひろいゲーム」

•  前田ブロックで作った「シューティングゲーム」

配布資料を用意

•  「おてほん」のブロックと画像一覧を印刷 •  ブロックの形を覚えてもらう •  やっぱり「サンプルコードを写経する」作業から

観察

•  パペットの数 … 少ない子は 2 ～ 多い子は 5, 6 など –  「自分」のキャラを登場させたい子供が多い (年少) –  遊んだことのあるゲームを作りたい子供が多い (高学年)

•  ゲームの傾向 –  男の子: やっぱり「必殺技」を作りたい

•  「爆発する」うごきを作ったほうがいいかも? –  女の子: キラキラしたものを出したい

•  ゲームにならないことも多い •  その分面白い動きを作れる

できたもの

•  こども –  「攻めてくるスライムを、クマが食べるゲーム」 –  「ぼく (子ども自身) をタップすると必殺技をだしてスライムを倒す」 –  「星を集めるゲーム」 –  「車に乗って走るゲーム」

•  オトナが作ると… –  「障害物を避けて女の子グマを追いかけるゲーム」

まだまだ課題も多い

•  応えられない要望 –  「ブロックそのものを作りたい！」 –  「自分で絵を書きたい！」

•  「プログラミング」との橋渡し –  「前田ブロック」→「enchant.js」まだまだ敷居が高い

?

同種の試み紹介

Otomo ‒ 寺子屋スクラッチ

•  Scratch (MITが開発したブロックベースの言語) •  講座はなく、フリースタイル •  様々なスキルレベルの子供・オトナが集まる 公式サイト http://scratch-ja.org/

(公式サイトより)

墨田区立緑小学校 ‒ 放課後みどりっこ

•  学童保育の施設に Viscuit がおいてある •  子供同士で教えあいながら上達する •  「みどりっこクラブビスケット検定」

公式サイト http://midorikkoclub.wordpress.com/ http://togetter.com/li/193552

プログラミングの弱点…

「テレビ受け」しない!!

プログラミングは分かりにくい

•  ぱっと見て何をやっているのか判りにくいよね •  どこが「すごい」のか理解できないよね •  ハッカーってなんか怖そう

9min. coding battle

•  その名の通り、9分でゲームプログラミングバトル •  モニタにプログラミング風景を写して実況解説

9min. coding battle

•  熟練したプログラマが出演する •  その場でお客さんにテーマを出してもらう

–  「めがね」が出てくるゲーム –  「ハンバーガー」が出てくるゲーム –  「秋葉原」が舞台のゲーム

•  「プログラミングってこういう風に進めるんだ!」というざっくりしたイメージを持ってもらえる

9min. coding battle

•  具体的な技術を見せるよりも、分かりやすさ優先 •  「楽しそう」「すごそう」であれば、そこから先は自分

で突き進んでいける

ex. 背面キャッチ, リフティング

ゲームプログラミングキャンプ

•  1日形式のプログラミングキャンプ •  高校生～大人対象

ライブコーディング

ライブコーディング

•  「ライブコーディング」は重要 –  プログラムが生まれていく過程を、まず見せる –  スポーツも音楽も「すごいライブ」を見てから始めるはず

•  プログラミング教育には欠かせない要素 –  ex. ドットインストール, Khan Academy

発表も大切

•  できたプログラムは前で発表してもらう → 拍手

どうやって学んだら/教えたらいいの?

どうやって学んだらいいの?

•  プログラミング学習環境は整備されつつある –  学校の講義、書籍に比べてインタラクティブなサイトの登場 –  CodeAcademy, ドットインストール

どうやって学んだらいいの?

•  プログラミング学習環境は整備されつつある –  学校の講義、書籍に比べてインタラクティブなサイトの登場 –  CodeAcademy, ドットインストール

enchant.js では…

•  書籍 –  「ゼロから始める enchant.js 入門」ほか2冊 –  出版社と協力し、学校関係者向けに無償配本 –  今日も持ってきてます

•  Webサイト –  インタラクティブに学べるサイト「code.9leap」 –  教える側の負担を減らすことにも繋がる –  (今のところ 高校生以上用)

code.9leap

code.9leap

code.9leap

code.9leap

現在教材は整備中です

•  懇親会でのご意見お待ちしております!

なぜプログラミング教育が大切か?

•  「ものを見た時、どういう仕組みなのかを推測できるか?」が大切 •  「システム」「仕組み」一般へのリテラシーを養う •  ウイルスを作ってみれば、ウイルスの怖さは分かる!?

まとめ

•  enchant.js プロジェクトでは、 教育の現場と連携したプログラミング教育を進めています

•  まずはぜひ "9leap" "前田ブロック" "code9leap" を見てみてください!

以上です。 ご清聴ありがとうございました!