TVゲームがヒントになった学習ゲーム — HTML5KARUTAという活動

一月の末、東京・六本木ヒルズにあるグリーのオフィスを会場に、「2014 企業対抗!!HTML5KARUTA大会」というイベントを開催しました。このイベントはhtml5j、CodeIQ、グリー、日本マイクロソフトを中心とした多くの企業やコミュニティの協力のもと行われました。懸念されていた参加率も95%程度と参加人数100名超の大きなイベントとなり、熱い熱気に包まれました。

会場は多くの参加者でいっぱいとなった

会場は多くの参加者でいっぱいとなった

このイベントは世の中で行われているITやWeb系の勉強会やセミナーとは大きく趣向が異なり、拙作「HTML5KARUTA」を使ったゲームの大会を中心としたミートアップのような、宴会のようなイベントでした。企業同士のトーナメントをお酒を飲みながら観戦したり、談笑したり、用意されたブースで遊ぶこともできるというカジュアルなスペースを作ったつもりです。来場された方も通常のWeb系のイベントとは違う雰囲気に驚かれたかもしれません。

イベントではいくつかのブースを設置していた

イベントではいくつかのブースを設置していた

イベントの様子はhtml5jのYoutubeチャンネルでも録画・配信されています。
HTML5KARUTAイベント問題の正解発表と解説は、CodeIQ MAGAZINEで公開中です。

そもそもなぜ「カルタ」なのか

HTML5KARUTA

HTML5KARUTA

HTML5KARUTAは、HTML5をこれから勉強するデザイナーやディレクター、学生や新卒採用者の学習の入り口として、マークアップエンジニアの再学習のためのツールとして作ったものです。すでにHTML5要素について理解の深い熟練者は読み手として参加し、ゲームをしながら解説を入れる役割を担うことで自分が正確な理解ができているのか再確認をすることもできます。

私がこうしたゲームによるHTML5の学習の手段を作ろうと考えたのは、実は有名な「桃太郎電鉄」というテレビゲームシリーズの影響によるところが大きかったと思っています。

このゲームはすごろく形式で日本各地の物件を買って周り資産を増やすゲームなのですが、勝利することまたは楽しむにはどこになんという名前の駅があるか、どんな産業があるかの理解が必要とされます。学生の頃地理に詳しかった人はこのゲームを遊んでいたのではないかと思いますし、同じようなことは歴史における戦略シュミレーションゲームにも言えると考えます。ゲームに熱中している間に知識が増える、これはとても良い学習の形だと思うのです。

読み札が要素の説明、取り札には各タグが書かれている

読み札が要素の説明、取り札には各タグが書かれている

カルタの読み札は各HTML5の要素の説明となっており、どの要素のことを言っているかわかったら、そのタグが書かれている札を取ります。カルタというゲームの形をとっていますが、これは言ってしまえば単語帳を読んでいるようなものであり、プレイヤーはゲームに参加する上でその全ての説明を聞かされることになります。構造的に、説明が頭に入り、理解しやすいゲーム性になっているのです。

技術者、利用者同士の共通言語となり得るHTML

今回のイベントでは、Google、日本マイクロソフト、アドビ システムズといったWebの中心的企業のほか、クリエイター集団であるカヤックやチームラボに、NHN PlayArt、はてな、グリーのようなサービス運営、そしてLIG、プライム・ストラテジーというWeb制作会社の全10社に参加して頂きました。企業自体もバラエティに富んでいますが、それぞれの企業から名乗りを上げて頂いた方々一人ひとりの職能も、エンジニアであったりコーダーであったり、デザイナー、アプリ開発エンジニアなど様々です。

決勝戦の様子。様々な職域の制作者が一緒に遊んでいる

決勝戦の様子。様々な職域の制作者が一緒に遊んでいる

これら全ての業務領域の違う制作者の皆さんにとっての共通言語となり得るものは、やはりHTMLだと思います。そしてもちろん、今回参加してくれた技術者や開発者のようなプロフェッショナルでなくともHTMLは書きますよね。ブロガーやマーケターのような人でも同じゲームで遊び、ライトに学ぶことができます。

このゲームではHTML5を題材としていますが、もちろんCSSやJavaScriptで同じようなゲームを遊ぶことができるでしょう。

イベントや活動の意義について

HTML5KARUTAは2012年の12月に生まれ、13年の1月には全国のコワーキングスペースでこのカルタで実際に遊ぶイベントを開催しました。その後も各地のイベントの余興として、専門学校のイベントとして、または社内勉強会やレクリーションなどのために使われています。

各地で行われたカルタ大会

各地で行われたカルタ大会

HTML5の仕様は現時点では勧告候補という状態にあります。現時点で販売している最新版のHTML5KARUTAには2013年8月時点で削除されたcommand要素とmenu要素が収録されており、その際追加されたdata要素は未収録です。2014年HTML5は勧告に達する予定ですが、その際にはこのカルタも完璧な形にできるのではないかと考えています。

前述の通り、HTML5KARUTAは「遊べる参考書」です。カルタを遊ぶことで自然と要素の意味が覚えられ、知識が深まり、プレイヤー同士の議論やコミュニケーションを促すことができます。一式遊ぶことで、全ての要素を知ることが可能です。

今回のイベントのように、ときには楽しいイベントとして学習を扱うこともあってよいのではないでしょうか。

ちなみに現在はHTML5KARUTAのオンラインゲームも公開しています。一人で遊ぶことが可能なので、こちらで修行するのもいいと思います。

ゲームで一人で練習してみるのもアリ

ゲームで一人で練習してみるのもアリ

今後も大小様々なイベントを開催していくと思いますし、カルタを購入された方がこれを使ったイベントを行うことも自由です。この活動を皆さんにも応援頂けると嬉しいですね!

Powered byNTT Communications

tag list

アクセシビリティ イベント エンタープライズ デザイン ハイブリッド パフォーマンス ブラウザ プログラミング マークアップ モバイル 海外 高速化 Angular2 AngularJS Chrome Cordova CSS de:code ECMAScript Edge Firefox Google Google I/O 2014 HTML5 Conference 2013 html5j IoT JavaScript Microsoft Mozilla Node.js PhoneGap Polymer React Safari SkyWay TypeScript UI UX W3C W3C仕様 Webアプリ Web Components WebGL WebRTC WebSocket