Skip to content

enchant.jsで作れるのはゲームだけじゃない!? 絶体絶命のピンチから産まれた新ツールとは?

やあshi3zだ。
世界1.2周の旅も終わり、ようやく日本に帰って来た。
さすがに疲れたーっ

ということでようやく週末を迎えたわけだけど、ひとつ衝撃的な体験をしたのでここに記しておきたい。

つい5日前のこと。
僕はタイの有名な観光地、パタヤビーチでアジア最大の広告祭、Adfestに来ていた。

なぜか「次世代の広告はゲームだ」というテーマで、2000人の観客を前に電通の鏡さんと二人でセッションをすることになった。

事件はこの南国の観光地から始まる。

テーマの主軸はもちろんenchant.jsだ。

実際、最近の広告はどんどんゲーム的になってきており、ゲームと広告の境界線は薄くなっているように思える。カンヌ広告祭でも、ARG(代替現実感ゲーム)を使った広告が賞を多数とるようになっている流れもある。

そういう状況を反映してか、なぜか翌日は3時間にも及ぶワークショップをやることになった。

題して「数学なしのゲーム開発」
幸い、30人の定員はすぐにいっぱいになり、「広告業界も珍しいものが好きだなあ」というくらいにしか思わなかったのだが、午後から行われた打ち合わせで、驚愕の事実を知ることになる。

この説明文、もとは「プログラミング用にノートPCを持参してください。iPhone/Androidなどのスマートフォン端末があると動作確認もできます」と書いてあった。

しかし、実際に書かれていた告知文は「iPhone/Androidなどのスマートフォンをプログラミング用に持って来て下さい」という内容に変わっていた。

おいおい、プログラミングするためにPCやキーボードが必要って、説明しなくてもわかるだろ。常識的に考えて

しかし彼らの常識にはそんなものはなかったのだった。
ここで僕は非常に大きな教訓を学んだ。

Adfest事務局の担当者は、自分が英語を読み書きできると思っていたようだが、実際には正確な英語を理解できていなかったということに(なにしろ告知文の原稿を書いたのはアメリカ人のエリックだ)。

そして念のため聞いてみた

 「まあこれ、誰が読んでも間違いってわかりますよね?プログラミング用にノートPC持ってきますよね?」

すると返って来たのは驚愕の答えだった。

 「持ってくるわけ、ないじゃないですか。クリエイターですよ。彼らは」

Adfestには世界中の広告クリエイターが参加している。
そしてその大半は、PCでメールを打つよりも、紙とペンでアイデアを形にし、紙の手帳にメモをとる人々だった。

ここに大きな文化的ギャップを感じたものの、さてどうしよう、困った、ということになった。

どうも色んな誤解から困ったことになったぞ。
そういえば、電通で同じような社内研修をやったときも、全角と半角の区別が付かない人が居たり、テキストエディタを知らない人が居たりしてけっこう大変だった。

時計を見ると、午後4時を回っていた。ワークショップは翌朝10時から。
あと16時間しかない。

さてどうするか。
とりあえず「ノートPCを持って来て下さい」というメールを参加予定者にすぐ出すことにした。

しかし彼らはそもそもノートPCを持って来ている可能性が低い、という話だ。

途中まで用意していたスライドも、全て無駄になった。
これはテキストエディタを前提とした内容になっていた。

厳密には、iPhoneやAndroid上でも動作するテキストエディタはある。
しかし、それはおよそプログラミング初心者にお勧めできるような代物ではなかった。

これはピンチ。しかも超ド級の大ピンチだ。
そうとも知らず、会場にはノウテンキにも、「数学なしのゲーム開発」ワークショップの宣伝がヘビーローテーションされている。

もともとはアトラスXの英語版を使って講義する予定だった。
けどもうその手は使えない。

かといって、いまさら辞めるわけにも行かない。
どうする?どうする?

傍らのアシスタントHidemyを見ると、彼女はあまりのことに完全に思考が止まっていた。

明日までにレンタルPCを20台手配するか・・・いや、東京ならともかくここでそんな離れ業ができるとは思えない。しかももう午後四時だ。レンタル屋もそろそろ店じまいを始める時間だろう。

幸い僕は本当にピンチが近づくと、どんどん冷静になるという得な性格をしていた。
そして、頭の裏側に微かに浮かんでいたとあるアイデアが、どんどん大きくなってきたことを感じた。

そもそもスマートフォンでプログラミングするのはどのくらい非現実的なのか。
昨年、9leapをスタートするときに、徳間書店でBestgearの編集長をやっているチューヤン長谷部との会話を思い出していた。

 「清水はさ、Macを子供たちにプレゼントしてるよね。それが9leapの目的なんだったら、もうひとつ、スマートフォンだけでゲームが作れるようになったら、そもそもMacなんか配らなくて良くなるんじゃないかな」

僕ははじめ、これを素人の言葉と軽く受け流した。

 「そうだね、そうなるといいけどね」

けれども確かにそれはいいアイデアだった。それが実現すれば、enchant.jsの間口はもっと広げることが出来るだろうし、裕福な家の子供でなくても、誰でもゲーム開発を始めることが出来るかもしれない。

しかし問題は、どのようにして、それを実現するか、ということだった。

その後、チューヤンの発言をもとに、僕は密かにノンバーバルなプログラミング言語という矛盾したアイデアを暖め始めた。

ノンバーバルなプログラミング言語が全く存在しないというわけではない。
例えば「カルネージハート」では、架空のロボットのプログラムを電子ブロックのようにブロックを縦横に並べることで表現する。

これはいかにもゲーム的で、楽しいが実用性にはやや欠けるように思えた。

文部科学省が開発したプログラミンはかなりいい線を行ってる。

プログラミンのように、プログラムの各要素をタイルにしてその組み合わせでプログラムを表現するというのはなかなかいいアイデアだし、こういう形式ならスマートフォンでも無理なく作れそうだ。

ただし、これでゼロからゲームを構築するまでにはひどく時間がかかる。
また、同時に汎用性を切り捨てているようにも見える。

タイル方式でプログラムを構成でき、なおかつ汎用性が高くて、必要に応じて抽象度を変えて行けるような、ムシのいい仕組みを作ることは出来ないだろうか。

ひとつのヒントとして、Lispが浮かんだ。
Lispは見た目が非常に難解な言語として知られている。

例えば、Lispでフィボナッチ数列(1,1,2,3,5,8と続いて行くアレだ。詳しくはダビンチコード参照)を計算するプログラムは以下のようになる

(defun fibo (x)
(if (or (= 0 x) (= 1 x))
1
(+ (fibo (- x 1)) (fibo (- x 2)))))

率直に言って、見慣れない人が見るとこれはすごく気持ち悪いだろう。
その原因は括弧の異常な多さにある。

括弧の対応関係を明確化するために、こんなふうにカラーリングしたら多少はマシになる。
それでも、何をやりたいのか、パッと見ただけではわからないだろう。

実はLispでは、関数を定義するdefunも、条件分岐するifも、条件式に用いるorも、加算に用いる+も、そしてもちろんユーザーが定義した関数であるfiboも、全て等価なものとして扱うことができるのだ。

この性質を利用すると、Lispを使ってLispではない全く別の言語を構築することができる。
Lispが万能言語であると言われるひとつの所以だろう。

Lispがいかに強力か、ということを知りたければポール・グレアムのコラムを読むといい。本なら、まずは「ハッカーと画家」、そして「On Lisp」を読むと良くわかる。

この構造はプログラムとして非常にシンプルである上に、ビジュアル化に適している。

そこで僕は、ノンバーバルなプログラミング言語を作ろうとする時、lispを元にしようと決めた。

仮に名前を「Visual Lisp」と呼ぶことにしようとしたけど、同名の言語が既にAuto CAD用のマクロ言語で存在していたので、僕の好きなフルメタル・パニックというライトノベルから名前を拝借して、「サベージ」と呼ぶことにした。

Lispの括弧に相当する部分をタイルにしてそれを組み合わせればいい。
しかもJavaScriptとLispはそもそも遠い親戚にあたるので、ブラウザ上で動かすのも相性も悪くなさそうだ(実際、Lispの方言のひとつであるschemeなどをブラウザ上で実行する環境は既にいくつかある)。

しかもLispなら命令の抽象度を自由に変えることが出来る。
プログラミング初心者が相手の時はアトラスX並の語彙に抑えることもできるし、上級者が相手ならもっとなんでもできるようにもできる。原理上、Lispは完全な言語なので作れないプログラムはないのだ。

ただ、こういうものがあったらいいな、と思うばかりでなかなか実際に作り上げるところまではいかなかった。

一年前のGDCでUEIの他のプログラマー達が8時間でゲーム10本とかを作っている裏で、僕は「サベージ」のプロトタイプを書いた。けど、どうもうまく動かない。

「サベージ」の場合、肝心なのは明らかにユーザーインターフェースの部分だった。
他は全部跡づけと言える。

ドラッグ&ドロップで順番を入れ替えることができるリストビュー。
iPhone向けのToDoリストアプリでうんざりうるほどのバリエーションがあるこのインターフェースは、しかしHTMLで実装するのはかなり面倒だった。

そのうえ、スマートフォンでは、PCのようにマウスでスクロールしたりはできない。
全ての段階のドラッグを完璧に制御しなければならなかったし、これは一筋縄ではいかなかった。

そのうえブラウザごとに細かな挙動の差があって、僕は結局最後は投げ出してしまった。

ところがそれから一年経って、今手元にはenchant.jsがある。一年前のあのときにはまだenchant.jsは影も形もなかった。

HTMLの便利なウィジェットをenchant.jsからは原則として使えない。
しかしゲームが開発できるということは、ユーザーインターフェースそのものをゼロから構築できることを意味する。しかもクロスプラットフォームで。

ゲームを作るのと同じ要領でタイルのドラッグ&ドロップやスクロールの制御をすれば、あるいは一年前のハードルを乗り越えられるかも知れない。

それがうまくいけば、あとは言語などなんとでもなる。
あと16時間。

これからホテルまで戻って、夕食は電通の幹部と食事会があるから、そこで3時間程度は削られる。睡眠時間をどう確保するかはわからないが、それでも9時間程度の作業時間はある。

その9時間の間に、ドラッグ&ドロップとスクロールをタッチ操作で実現するUIをenchant.jsでゼロから構築し、そうして並べられたタイルから言語を設計し、しかもそうした操作によって実際に機能するゲームを創りだせるようなビジュアル言語を作れるだろうか・・・・。

ちらりと担当者の顔を見ると、なにも知らずにニコニコしている。
この期に及んで、コトの重大性を理解できていないらしい。

スマートフォンでプログラム、書けるんでしょ?という顔だ。

それで火がついた。
書けねえよ。けど、書けるようにしてやるよ。あと16時間でな!

僕は茫然自失とするHidemyに事後処理を任せて、さっさとホテルの自室に戻った。

まずはドラッグ&ドロップの実装だ。
これはenchant.jsを使うと、驚くほど簡単に作ることが出来た。
7年ほど前にHTMLでドラッグ&ドロップを実装して、クロスブラウザで動かすために悪夢のような時間を過ごした経験がある僕としては、これは驚異的だった。

Webブラウザが提供するさまざまなおせっかい・・・・通常、Webページの上でマウスをドラッグすると、それは範囲選択や。スクロールのジェスチャーや、その他もろもろをブラウザがやろうとする。そういうものを全て抑止しながらスクロールをさせなければならない。

しかも、ドラッグしようとしているのか、スクロールしようとしているのか、スマートフォンでその判断を自動的にするのは極めて難しい。しかもブラウザごとに細かく挙動が違う。

HTML5にはもともとドラッグ&ドロップに対応したコンポーネントがあるが、これはスマートフォンではちゃんと機能しない。だからSencha TouchでもjQuery Mobileでもこうした機能を持ったウィジェットはサポートされていないのだ。

iOSのブラウザではドラッグをサポートせず、その代わりにタッチしてスライドさせるとスクロールするようになっている。

タッチスクリーンのWebブラウザにおいて、ドラッグという操作はもともと用意されていないのだ。

しかしenchant.jsは全ての制御をブラウザから奪い、ゼロからの構築を可能にする。こうするとブラウザごとに差がでない。

その結果、とても素直なコードで思い通りの挙動を表現できた。
嬉しいのは、わざわざ色んなブラウザで確認しなおさなくても、自分が普段使っているブラウザひとつだけで動作確認しておけば、どのブラウザでもほぼ同じように動作することが保証される。

さて、ドラッグ&ドロップができたら、次はスクロールだ。
ドラッグ可能な要素を全てstageという名前のGroupに登録することにして、スクロールすべきときには、stage.yを変化させることで全体をスクロールさせることにした。

これは思ったよりもずっと上手く行った。
わかりやすくするため、各タイルの左端にアイコンが必要だと思った。
まずはenchant.jsに付属しているアイコンを表示することにした。

ここまでで2時間が経過。いいペースだ。
一番の難関に思えた部分はクリアしたので、そのまま鏡さんたちとの食事会に出かけた。

食事会はたっぷり3時間。
それからホテルに戻って、寝る前に仕上げだ。

まず言語構造はどうしようか。
本当はLispのようにしたかったが、さすがに今は時間がない。

命令数を極限まで絞って、アイコンをクリックするとサイクル的に変化するようにしよう。
アトラスXと同じものを想定し、さらに命令を絞った。

最低限、必要な命令はなにか。
ラベル(Label)、表示(Say)、選択肢(Choice)だ。

メッセージの表示と選択肢だけでもごく単純なゲームは作れる。
大昔のアドベンチャーゲームブックなんか、ほとんどそんな構造だけで長大な物語をゲーム化していた。

広告業界の人たちはもともとストーリーを考えるのが得意だから、そういうものがいいだろう。

分岐する物語を作れるようにしてあげれば、ひとまずゲームは作れるはずだ。

実際に作ってみた。

これはゲームとまでは呼べないが、最も単純なゲームの持つ最も単純な構造を持っている。

最初、「どうしますか?」というメッセージとともに、「西へ」「東へ」という二つの選択肢が表示される。

「西へ」「東へ」それぞれの選択肢を選ぶと、それぞれ違った場面が再生される。

原理的には、これをどんどん拡張していけば、スマートフォンでもゲームが作れる。
ケータイ小説ができるんだから、ケータイゲームブックも夢じゃない。

ゲームの実行エンジンのベースはアトラスXだ。
実行ボタンを押すと、並べられたタイルをもとに、アトラスX用の命令キューを構築して、処理をそっちに受け渡す。

アトラスX用に新しいウィンドウを開くので、document.pcodeというプロパティにタイルデータを渡して、アトラスX側でdocument.pcodeをもとに命令キューを構築する中間言語形式にした。この方法ではほとんどパフォーマンスの低下がない。もともとパフォーマンスを気にするようなものでもないのでこれでいいだろう。

ただ、これだけではやはりプログラミングとしては物足りない。
ワークショップ的にも三時間持たせるのは難しいだろう。

そこでさらに二つの命令を追加することにした。

代入文(Let)と条件分岐(if)だ。

代入文とは呼んでいるが、実際にはJavaScriptそのものだ。
それをevalする。かなり過激なことができる。

たとえばletの部分に「alert(‘huge’)」と書けば、アラートボックスが出てhugeと表示される。
「window.open」と書けば、新しいウィンドウが開く。

ここはJavaScriptそのものなので、原理的にできないことはひとつもない。

けれども通常は「flag = true」などのように使う。

ifは、そのまま、ifだ。ただし、入れ子構造をサポートするにはさらにUIのプログラムを書かなければならなかったので、諦めてChoiceと同じく条件が一致したら特定のラベルにジャンプさせるようにした。

美しくないが仕方がない。

これで条件分岐も作ることが出来るようになった。
PCを使って作るアトラスXのプログラムとほぼ同等のものがスマートフォンだけで作れるようになった瞬間だ。

たとえばこのまま簡単な占いやおみくじゲームも作ることが出来る。
時間さえあれば。

アイコンがフルーツの画像では意味が分からないので、自分で描くことにした。
enchant.js付属のicon0.gifのサイコロの絵を改造して以下のようなアイコンを作った。

左から、「空欄」「ラベル」「表示」「選択肢」「代入」「条件分岐」に対応している。
一番右の赤い三角形は実行ボタンだ。

最終的に色合いを調整し、もう少し落ち着いたものにした。
ただ、ラベルと分岐は目立たせるために少しオレンジを入れた。

これで完成だ。

時計をみると、もう午前5時を回っていた。
夢中になりすぎるとよくこういうことが起きる。

9時には会場に行って準備をしなければならないから、あと3時間は眠れる。

朝起きて、朝食を食べるためにホテルの一階へ。
Hidemyはまだ青ざめていた。

 「ど、どうでしょう・・・・」

僕は答える替わりにiPadを見せた。

ひとまず完成だ。朝食を軽く済ませてから、プログラミングの途中でブラウザが異常終了して成果が台無しにならないように、ローカルストレージに保存するようにした。

これはJSONがあるから実に簡単。

さあそしていよいよ、ワークショップ開始だ。

僕は「サベージ」を「マドラスX」と呼ぶことにした。
アトラスX用のスクリプトを作る環境だし、ここは東南アジアのリゾート地。
頭の中で美空ひばりが 初恋マドロスを唄っていた。

朝ということもあって始めは人まばら。
けれどもすぐに一杯になった。

実際に蓋を開けてみると、確かにPCを持って来た人はほとんど居なかった。

そして僕が本当に驚いたのは・・・・実際に全くプログラムを書いたことがなかった人たちが、彼ら自身のスマートフォンでゲームを作り上げていたということだ。つい16時間前には、影も形もなかったプログラミング環境で、プログラミングを知らない人がいままさに目の前でプログラムを書いている!!なんと感動的!

僕はマドラスXを使った占いゲームの作り方や、より本格的なゲームの作り方、といったことまで説明した。

しかし予想外のことが起きた。
マドラスXはあまりにも簡単すぎたのだ。

あまりに簡単すぎて、何人かの人は少しプログラムらしきものを作ると、飽きて帰ってしまった。もともと広告業界の人たちだし、プログラミングってどんなもんかな、と思って物見遊山で来た、という事情もあるだろう。

しかし長年プログラムを教えていて、「簡単すぎて飽きられる」という経験がなかった僕はショックだった。

プログラムというのは、「難しくて投げ出す」ことはあっても、「簡単すぎて飽きる」ことはないと思っていた。

しかし、目の前の人たちは明らかに簡単すぎるが故に投げ出していた。
ここには無限の可能性があるのに、その可能性の片鱗を、逆に口当たりが良くあっさりしているが故に、「こんなものか」と思って投げ出してしまったのだ。

もちろんもっと時間があれば、これをベースとしてどんなゲームが作れるのか、もっと具体的な例を出しながら説明することができただろう。

けれども、今回は環境を作るのに手一杯だった。

それでも半数の人は最後まで粘って自分の作品を作ってくれた。
時間も短いので、それほど凝ったものではなかったけれども、それでも彼らのクリエイティビティをこの狭い画面の中で発揮しようとしてくれたことは感動するに値した。

ワークショップが終わった後、参加者の人たちといろいろ話をした。
ひどいピンチだったが、僕にとっては収穫の多いワークショップでもあった。

「マドラスX」は、いまのところ間に合わせのひどい代物だが、そこに秘められた可能性は決して否定されるものではない気がした。

9leapへの投稿機能を付けたり、よりもとの「ビジュアル化されたLisp」というコンセプトに近づけて行ったりして、ブラッシュアップしていけば、アトラスXのような単純な言語だけでなく、enchant.jsそのものを扱うようなプログラムがスマートフォンだけで書けるようになるかもしれない。

その可能性の片鱗が見えただけでも、大きな収穫のように僕には思えた。
五月に電通で再び社員研修があるから、そのときまでにはもっとパワーアップさせておこう。

そんなことを思った。

このエントリーをはてなブックマークに追加
はてなブックマーク - enchant.jsで作れるのはゲームだけじゃない!? 絶体絶命のピンチから産まれた新ツールとは?
Post to Google Buzz
Share on GREE

Related posts:

  1. enchant.jsがCoffeeScriptで記述可能に! enchant.coffee登場!
  2. 「enchant.js怒濤の100Tips」と「enchant.js使い方辞典」が公開! これは必見だ
  3. [9leap]enchant.jsのサウンド機能をすぐ使う
  4. 10/21 enchant.js初のオフィシャルイベントを秋葉原で開催!発表者も募集中!
  5. enchant.jsで型安全かつ高速なネイティブアプリを開発するhaXeハック!?

Facebook comments:

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*