「ハックしなければクリアできないRPG」HackforPlay の Web サービス版公開から２年が経ちました。それ以来２年ぶりの、新しいプロダクトです。

ソフトウェアの概要は GitHub のリポジトリ をご覧ください。ここでは開発にまつわるエピソードと、なぜ Feeles を作ったのかをお伝えします

このプロダクトを作るキッカケになったのは、１年前の未踏プロジェクトでした。未踏では https://hackforplay.xyz 上で提供する「ハッカブルな」コンテンツを作っていて、同時に小学生向けのスクールも開校したり（今でも CoderDojo Kanazawa として継続中！）して、様々な形で子供達と関わりながら、プログラミングの楽しさってなんなんだろうな、と考えながら日々悶々としていました。

そんな状況下だったからこそ、僕はずっと HackforPlay をオープンソースにしよう。絶対にそうしよう、と、真剣に考えていました。

生徒に使ってもらうために、プログラミングの教材を自分でつくる。それをオープンソースの力でもっと容易に行えるようにするのです。そうすれば、 HackforPlay よりももっと面白いコンテンツがたくさん出てくるじゃないですか。そんなの、最高です。

しばらくして未踏プロジェクトが終わると、学校にも会社にも勤めていない僕は人生の選択を迫られました。このサービスで飯を食っていくのか？この会社をどうしていくのか？自分自身はどうなりたいのか？色々なことに答えを出そうとしますが、いかにプログラミングを楽しくするかという事以外はまるで感情を失ってしまったかのようにただ悶々とするだけでした。

そこで、少し見方を変えて、他人に対して何をしたいのか、広く言えば社会にとってどういう存在でありたいのか、という風に考えてみると、こんな一枚の絵になりました。

その時書いた、絵の説明がこちらです。

多くの教育者は、胸の内で正しい教育の姿を描いています。
しかし、自分たちで教材を作れる人はそう多くありません。
それを容易に具現化する方法があれば、新しい教育の可能性は無数に広がっていくはずです。

そこで私たちは、今まで行ってきた「HackforPlayライクな教育」を
教育者が利用しやすい形のツールとして仕立て直し、
すべての教育者が自分たちで教材を（教育を）作る手助けをすることで
教育の探求を促進します。

ここで言う「HackforPlay ライクな教育」については、別の絵があります。

HackforPlay をつくることから、 HackforPlay をつくる仕組みをつくるようなポジションにシフトすることで、広くプログラミング教育に貢献する。この絵を描いてから半年間で、僕の目的意識はそういう方向に変化して行きました。

余談ですが、 iCloud の奥底には「クラウドファンディングで HackforPlay を量産して大成功するビジネスモデル」というタイトルの Keynote もあったのですが、恥ずかしいのでここには貼れませんでした。

かくして目的を見つけた僕は、オープンソースプロジェクトの核となるプロダクトの企画を始めました。2016年8月末のことです。一番最初の企画書を書いているときは、興奮で筆が止まりませんでした。

最初のアイデア
埋め込み HackforPlay プレイヤー「ハックフォープレイヤー」

この後の５ヶ月間で４回ほど作り直すことになるのですが、やはり、最初のアイデアがある意味で一番尖っていました。（「埋め込み」って……）

この絵と一緒に作った Trello には、開発をする上で必ず守るべき指針から、実装方法まで書かれています。その後、 UI や実装方法は何度も仕様変更を繰り返しましたが、指針はこの時から全く変化していません。

スタンドアロンで、ブラウザだけで動く
ハックされても著作者の名前が残る
エディタそのものをハックできる

HackforPlay のこだわりポイントを「いかにプログラミングを面白そうに見せるか」とするなら、 Feeles のこだわりポイントは、「プログラミングを面白そうに見せる工夫を、いかに届けるか」ということです。

慣れた開発者にとってはポータブルな開発環境であり、プログラミングを学ぶ人々にとっては興味を惹かれるコンテンツそのもの。そんな風に二つの顔を持つソフトウェアだからこそ、二者を繋げる存在になり得るのでは？
そう考えたのです。

スタンドアロンで動作することは、実際に公立の小学校でワークショップをさせていただいた時に得た教訓でもありました。一方で、データの著作情報を一元管理できなくなるデメリットも踏まえ、貢献した人々の名前がソフトウェア自体に刻まれるということも重要な指針のひとつとしました。

2016年9月からは、ひたすら実装に専念していました。それと同時進行で、実際に生徒に使ってもらうべく、教材も作り始めました。

初期プロトタイプ。 p5.js ライブラリを使って絵を描くという教材
画面左の [Hack] ボタンを押すとエディタが開く仕組み

UI は評価が難しいと言われますが、その点、小学生は正直ですので、つまらなく見えるものは「つまらない」の一言でバッサリ切り捨ててくれます。

UI を一新したバージョン。ひとつの画面に最初から全部入れてみる
コンテンツは Three.js のサンプルより。ちょっとズルいのは否めない

この UI の変更が、以降の設計に影響を与える大きな分岐点になりました。画面を Feeles で占有する代わりに、全体をひとつの HTML ファイルに書き出して PC に保存する機能を搭載したのです。

HTML に書き出せるということは、別のタブで開くこともできるし、アップロードすれば、普通の Web ページと同じように公開ができます。埋め込みたい場合も iframe で解決。

書き出したあとの HTML をただ開くだけで IDE が完全に動作するあたりは、ちょっと魔法めいています。まるで Feeles が自己増殖したかのように見えるので、この機能をクローンと呼ぶことにしました。

テーマカラーや言語などのカスタマイズができるバージョン。
コンテンツの方は、いよいよ HackforPlay が動いた。

ソースコードの依存解決、 Web サーバ (のような働き) 、そして JavaScript の Transpile (Babel) などなど、本来であれば様々なソフトウェアを横断的に利用するところを Feeles だけで実現できるようになりました。

注　あくまでそれらのソフトウェアを模した擬似的な振る舞いであり、ブラウザだけでは出来ないことも多くあります。

さて、満を持して「あたらしい HackforPlay が来たぞ！」とスクールで発表してみました。ところが、生徒からは見向きもされません。HackforPlay が動けばみんなにも使ってもらえるだろうと高を括っていましたが、生徒曰く「ふつうの HackforPlay の方が使いやすいんじゃない？」とのこと。

「でも自由度はこっちの方が高いし、オフラインでも使えるよ」
そう言って移行を勧めてみたものの、「なんとなく前の方がいいから」と。結局、 Feeles を使ってくれる生徒は一人もいませんでした。全員が Web サービスの HackforPlay を選んだのです。

最大の敵は自分だった。

なんて言うとカッコ良さげですが、プログラマーとしては、こんなに悔しい話はないんです。だって、２年前の僕がどれだけクソなコードを書いていたか……そういう話じゃ無いことは分かるのだけれど、とにかく悔しい。

思えば実装方法にばかり気を取られて、コンセプトが曖昧なまま新しい機能を考えてはコーディングに没入する日々でした。積み重ねてきた物も活かさず、これでは新規開発のムードに浸ってるだけのマスターベーションです。

そこで原点回帰。３ヶ月ぶりに HackforPlay の Web サービスを訪れてみると、そこには新鮮な驚きがたくさんありました。魔道書の書き換え、コードの投稿、MODの利用、アセット。昔の自分の Keynote からは、その裏側に一貫した思想を持っていることが伝わってきました。

「こんな機能あったんだ！」
なんて素で驚いて、「お前が作ったんだろw」と激しくツッコまれたりもしました。

HackforPlay 的に言うとこうだよね、普通。という勘のようなものを取り戻せたのかも知れません。余談ですが、 Feeles という名前もこの頃に思いつきました。

現在のバージョン (alpha-45) の Feeles。起動直後はコードが一切ない。
ゲーム側から Feeles に干渉することで、ステージ改造が始まる。

画面左が魔道書の上位互換にあたるもので、 Markdown (GFM) で記述可能な、いわば README です。ここにソースコードを記述しておくと、魔道書のようなインタプリタになります。

README の内容はゲーム側から動的に変更することもできます。つまり、本を拾うと魔道書が出てくるというようなシナリオも再現できるのです。

詳しく話すとネタバレになってしまうので、ぜひ あたらしい HackforPlay on Feeles をプレイしてみて下さい。

他にも、ブラウザ（IndexedDB）にデータを保存できたり…

そして、もちろんアセットもあります。

 JSON ファイルでアセットを記述できるほか、ドラッグ&ドロップで任意の位置に埋め込めるなどの機能改善もあります。

実際の教材制作では、 README の文章と、アセットを用意することが主な作業になります。他にもたくさんありますが、記事が長くなってしまうので紹介はまた今度にします。

これら全ての機能も含めて、すべてをひとつの HTML に書き出せるのが、「ハックを届けるオープンソース IDE」Feeles です。

最後に、いくつか HackforPlay 以外のものを紹介しようと思います。まずは女子向けのキットから。

foollovers.com 様が公開されているホームページテンプレート
HTML と CSS と画像が入っており、文章やデザインをハックできる

続いて、算数や理科が好きな人向けのキットです。

Matter.js　ライブラリのキット。重力や衝突判定が組み込まれており、振り子や吊り橋など豊富なサンプルが理系心をくすぐる

この他にも、今後は 3D ライブラリの GrimoireJS 、2D では Pixi.js を教材にしていく予定です。もし「こういうのがハックできたらいいよね」というものがあれば、ぜひ教えてください 😊

僕らは Feeles でたくさんキットを作ることで、楽しいプログラミング教育の実現に貢献します。またハックフォープレイ株式会社では教材の受託開発もしようと思っています。楽しくハックできる教材をお求めの際はぜひ弊社にご相談ください。

最後まで読んでいただいて、ありがとうございました！

Feeles に関するお問い合わせは i101323＠gmail.com (代表・寺本)まで