土曜日にLL DiverでDartについて話します

登壇するセッションのタイトルは「mozaic.fm出張版: TypeScript and Dart」ですが、分かりやすく言えば私とわかめさんJxck先生「これから皆さんに殺し合いをしてもらいます」って言われるというセッションです。もしかしたら私は早々に殺られて死んだ目で「ヘーソウナンダー」ってつぶやくだけの1時間になるかもしれません。コワイヨー。

まだチケットはあるようなので、そんな残酷絵巻に興味あればみなさんでお誘い合わせの上ぜひお台場までお越しください。

HTML5 Japan Cupで優秀賞を頂きました

どうせなら賞状は吉川さんじゃなくて池澤さんから受け取りたかったです・・・。

受賞作は先日のエントリでも書いたEnraged Fowls、要するにAngry Birds 3D。作り始めたの5月半くらいで時間ないし、基本的なところができたらあとは細かいところを詰めるよりもタイトル画面とかクリア画面とかの必須要素をひと通り作って全体的な完成度を上げておこうという方針で進めましたが、講評を見る限り正解だった模様。

http://blog.5jcup.org/2014/07/html5-japan-cup-2014_27.html
3Dの表現力とアプリケーションとしての完成度が極めて高い作品である。正直、若干こなれていない操作性や現在用意されているシナリオの単純さなどから、ゲームとしてはこの作品で遊び続けたいと思わせる域にまで達していないが、スマートフォンと連動させるアイデアなど将来性を感じさせるものがある。ソースをオープンソースとして公開するだけでなく、アプリケーション開発中に必要になり作成したライブラリも公開するなど、技術面で多くの人に大変参考になる作品であり、その点からも大いに評価したい。

ちなみにこの講評はGoogleの及川さんに頂きました。光栄です。

HTML5 Japan Cupはまず事前に最優秀賞候補として4作品が選ばれ、HTML5 Japan Cup 2014 The Finalでそれぞれ5分のプレゼンをして会場内の投票で最優秀賞を決め、残りが優秀賞になるという方式でした。と言っても私の応募作は細かいつめが足りないのは分かってるし、最優秀を取ることはそれほど期待せず、大画面でゲームをプレイするのとやりたいことを宣伝するのを目標でした。そのプレゼンが以下。

https://docs.google.com/presentation/d/10l6TNr4xW5t4dGRdcFriayiIeLDmeWgwaYUt9MDPIng/present#slide=id.p

残念ながら何故か壇上でウェブカムが動かなくて大画面でゲームするという野望は果たせず。後で席に戻ってブラウザ再起動したら動いただけにほんと無念。やっぱ5分でデモ込みでプレゼンするというのは短すぎてトラブルが起きたら全く対応できなくてキツい・・・。まぁこんなこともあろうかとスライドに動画を埋め込んでおいたのは不幸中の幸いでしたが。

これ、大画面でやったらおもしろいと思ったんだけどなぁ。

結局最優秀はfokaさんのコトバツナギ。これかJS Racingが最優秀だろうと思ってたので納得感あります。どちらも完成度むっちゃ高かったし。この作者さんたちとは懇親会で話をしてみたいと思ってたんだけど娘が来てて動きづらかったのと、あんまり顔を覚えられない質なので結局見つけられませんでした。ちょっと残念。

そういえばtwitterでチラチラ5jcupの賞状の画像を見ますが、優秀賞・最優秀賞については当日まで誰が賞をとるか決まらない関係でその場ではなにももらえませんでした。郵送されるらしいので、もらったらこの辺に画像貼ります。

[Reserved]

最後に短い期間に数多くのハッカソンなどのイベントを開催し、300近くもの作品を審査したスタッフの皆さんに。お陰さまで開発から応募、結果発表、最終プレゼンと2ヶ月近くもの間とても楽しく充実した時間を過ごすことができました。ありがとうございました。来年も再来年も、末永く開催されることを期待しています。

あとおまけ。会場で眠るうちの娘さん。うちに帰ってから「とーやん、がんばったがんばった」って何度も言われたので、たぶん人生的な意味合いで総合的に見て今回のコンテストの優勝者は私といっていいんじゃないでしょうか。

AngryBirdsの3D版を作りました

3D物理エンジンを使って作りたいものがあったので練習がてらにとAngryBirdsの3D版的なものを作ってたら「そんなら5jCupに出しましょうよ」と言われて、じゃあ出すかと思ってそれなりに真面目に作りこんでみました。

結果それなりにいい感じになった気がします。ポイントはスマホを使ったお手製コントローラー。百均で買い集めたもので頑張った。と言っても、もちろんPCだけでも遊べるので、よろしければお試しください。

http://technohippy.github.io/enragedfowls/

ソースコードも公開してます。

https://github.com/technohippy/threejs-toys/tree/master/angry-birds

WebGLはもちろんthree.js経由で、物理エンジンとしてはcannon.jsを利用。JS版物理エンジンはいくつかあるけどcannon.jsが一番軽量っぽかったので、ソースコード読みながら作れば勉強になるかなということで選択。ただ、実際に使ってみるとジッタ起こしたり貫通したり爆発したりといろいろ不安定で、ammo.jsとかの重た目のを使ったほうがよかったかなと思ったり思わなかったり。

コンテストの作品ページはこちら。

https://5jcup.org/works/53a25c7120a279d145003005

5jCupのサイトには私の応募作品以外にも(たぶん)200件以上応募されてて、興味深いものもたくさんあるので時間のある時に見てみるといいんじゃないでしょうか。

https://5jcup.org/works/all

ちなみに技術的に難しいことやってるとかそういうの抜きにすると応募作の中で一番面白いのは多分これ。なんとMatt Cuttsにも刺さってるという...。いやホントよくできてる。

http://shimage.net/one-tap-quest/

キャプチャは私のハイスコア。まぁそれはそれとして、せっかく応募したので自分のもなんか賞が取れるといいなぁ。

天下一altJS武闘会でAmberについて話しました

パートナーの調子が悪くて2歳児の面倒を見ないといけなくなったんだけど、せっかく資料(というかツール)作ったしなーということで無理やり連れて行きました。特にスタッフのかたや席が近かったみなさんにはご迷惑をお掛けしたかと思います。どうもすいませんでした&ありがとうございました。

イベントの内容については期待通りの多彩さで、真面目に言語を紹介しているものから、ネタに走っているもの、ちょっと何言ってるか分からないものまで、いずれも非常に楽しめました。とりあえずClosure Compilerがただのminifyツールじゃないと分かったのが個人的には一番の収穫です。

私のLTはAmberという要するにブラウザ上で動くSmalltalkについてで、資料はGithubにあります。

https://github.com/technohippy/amber-slide

勉強を兼ねて発表資料自体をAmberで作ったので資料を読むにはAmberのインストールが必要になります。がんばってください。なお、使い方はこんな感じになります。見どころはスライドから直接Smalltalkの式をDoIt、BrowseItできるところですね。

  • Enter: 次のページヘ
  • n: 次のページヘ
  • p: 前のページヘ
  • Ctrl+d: 選択部分をSmalltalkとして評価して結果をダイアログに表示
  • Ctrl+b: 選択部分をクラス名と見なしてクラスブラウザで表示
  • Ctrl+Space: Helios(IDE)を表示





Amberはとてもおもしろいのでみんな黙ってインストールすればいいと思いますが、どうしても入れたくないという人はこの辺を見ればなんとなく内容が分かるかもしれません。

Amber歴1週間くらいでしかも前半3日くらいはamber initの不具合だかなんだかよくわからないことに悩まされてるだけだったのに、最終的に動くものができたわけで、やっぱりSmalltalkの生産性はなかなかのものだなと再確認しました。JSとの連携も簡単なので、よく分からないところはJSを使えば済みますし、Amberなかなかいいですよ。

Project Ara Conference報告会

昨日「Project Ara Conference報告会」というのに参加したんですが、かなり面白かったです。Project Araはモジュールを組み合わせて好みの携帯を作成できるということから、マニア向けの尖ったガジェットを目指しているものだと思っていましたが、実はそういうことではないらしく。むしろその反対に、作ってる人たちはケータイのモジュール化を推し進めることで低価格化や耐故障性(壊れた部分だけを交換)を実現して60億人にモバイルデバイスを届けることを最終目標にしてるそうです。

さらに、その実現手段として彼らが考えているのが、ソフトウェア開発がコモディティ化したことで進化が加速したのと同様の状況をデバイス開発にも持ち込むこと、つまりデバイス開発のコモディティ化です。実際Project Araにはモジュールのインターフェース仕様だけではなくて、物理シミュレーションを使用したデバイスレスの設計ツールから3Dプリンタを使用した製造機器の仕様まであらゆるものが含まれていて、デバイス製造に関する新しい生態圏をゼロから構築しようとしています。

ハードウェアと聞くと門外漢過ぎて正直腰が引けそうになりますが、目標がコモディティ化となると少し早めに手を付けておいた方がいろいろと嬉しい気もしてきました。数カ月後には一部の開発者に開発機を配り、一年後には実売くらいのスピード感で進めているようなので、せめて少しずつでもこの辺の動画を見て心の準備だけでも進めておこうと思います。

three.js入門中

2年くらい前にもWebGLがんばろうと思ってthree.jsをちょっと触ってたんだけどなんやかやで時間が取れなくて中断してました。幸い最近ちょっと時間が取れる感じになってきたので再入門。

http://goo.gl/SJshg8

とりあえず木。

ホントはここにあるようなかっこいい木になることを期待してたんだけどなかなか思い通りにはいかない・・・。修行あるのみすね。

AngularDartすごい!マジすごい!

1. Googleの本気がすごい!

AngularDart去年の6月くらいに開発中であることが公になり、11月にわりとよさ気な感じになってきたかもということでリリース間近を感じさせるバージョン番号0.9.0が振られました。そしてその3ヶ月後に世界各地で行われた初めてのDart言語の大規模イベント「Dart Flight School」にはすでにイベントタイトルにwith AngularDartと振られています。Googleのスピード感とAngularDartにかける本気度が感じられます。

個人的にもAngularDartとDartRailsRubyみたいな関係になれるかもと思える程度にはAngularDartいい出来だと感じているので、Googleのこの扱いはわりと納得。

しかしですよ。

2. 開発者のアジャイル精神がすごい!

「変化ヲ抱擁セヨ」

2月一杯かけて行われたDart Flight Schoolで初心者を大量にDart界に呼び込んだ(はず)にも関わらず、4月半ばに入った修正がこれ。

https://github.com/angular/angular.dart/commit/f055ab6f7c4fadfdbb6a46d8bc547b304586d95c

fix: More consistent type naming
Closes #902

BREAKING CHANGE:
  - Concepts:
    - Filter                        -> Formatter

  - import:
    - angular/directive/ng_a.dart   -> angular/directive/a_href.dart
    - angular/filter/currency.dart  -> angular/formatter/currency.dart
    - angular/filter/date.dart      -> angular/formatter/date.dart
    - angular/filter/filter.dart    -> angular/formatter/filter.dart
    - angular/filter/json.dart      -> angular/formatter/json.dart
    - angular/filter/limit_to.dart  -> angular/formatter/limit_to.dart
    - angular/filter/lowercase.dart -> angular/formatter/lowercase.dart
    - angular/filter/module.dart    -> angular/formatter/module.dart
    - angular/filter/number.dart    -> angular/formatter/number.dart
    - angular/filter/order_by.dart  -> angular/formatter/order_by.dart
    - angular/filter/stringify.dart -> angular/formatter/stringify.dart
    - angular/filter/uppercase.dart -> angular/formatter/uppercase.dart

  - Types:
    - NgA                           -> AHref
    - NgAttachAware                 -> AttachAware
    - NgDetachAware                 -> DetachAware
    - NgShadowRootAware             -> ShadowRootAware
    - NgFilter                      -> Formatter
    - NgInjectableService           -> Injectable
    - AbstractNgAnnotation          -> Directive
    - AbstractNgFieldAnnotation     -> DirectiveAnnotation
    - NgComponent                   -> Component
    - NgController                  -> Controller
    - NgDirective                   -> Decorator
    - NgAnimate                     -> Animate
    - NgZone                        -> VmTurnZone
    - NgAnimationModule             -> AnimationModule
    - NgCoreModule                  -> CoreModule
    - NgCoreDomModule               -> CoreDomModule
    - NgAnimationDirective          -> NgAnimation
    - NgAnimationChildrenDirective  -> NgAnimationChildren
    - FilterMap                     -> FormatterMap
    - NgAttrMustacheDirective       -> AttrMustache
    - NgTextMustacheDirective       -> TextMustache

  - Constants
    - NgDirective.LOCAL_VISIBILITY           -> Directive.LOCAL_VISIBILITY
    - NgDirective.CHILDREN_VISIBILITY        -> Directive.CHILDREN_VISIBILITY
    - NgDirective.DIRECT_CHILDREN_VISIBILITY -> Directive.DIRECT_CHILDREN_VISIBILITY


クラス名の大規模改名

まぁ修正としては冗長なプレフィクスとかサフィックスとかが除かれたということですっきりしてよかったとは思うものの、とりあえずこれ以前に作られた資料は全部ゴミになりました。Dart Flight Schoolに伴って世界中でボランティアが頑張って資料作ってただろうに・・・。

対策についてもNgプレフィクスなくすだけなら一括置換で何とかなりそうな気配もあるけど

- AbstractNgAnnotation          -> Directive
- NgDirective                   -> Decorator

これとか結構な罠。あと

- NgAnimationDirective          -> NgAnimation
- NgAnimationChildrenDirective  -> NgAnimationChildren

全てのNgプレフィクスが消えてるわけじゃないのもレベル高い(罠として)。

ついでにいつのまにかアプリケーションの開始方法も変わってたり。

ngBootstrap(module: myModule);   -> applicationFactory().addModule(myModule).run();

なんだろ、C言語で言えば「これからはmain関数ではなくてstart関数をエントリポイントにします」って言われた感じ?単純に置き換えればいい話とはいえそこ変えんの?みたいな。すごい!

3. バージョニングがすごい!

で、誰が見ても分かる通りこれはいろいろ変わりすぎだろうということでバージョンは0.9.10から0.10.0に・・・え?いいのそれ?

0.9.9の次に0.9.10が出た時「これ0.9.99まで行っちゃうんじゃないの?」って思ったのを覚えてるけど、0.10.0ってそれもう0.99.99まで視野に入っちゃう・・・すごい!

4. 地獄はこれからだ感がすごい!

いまmasterに入ってる変更。

使ってない人にはピンと来ないかもしれないけど、DIに使うメソッド総とっかえ。いや、まぁ、新しいのも悪くないとは思うけども。むしろよくなってると思うけども。でもこれAngularDartの全ユーザーに間違いなく影響あるよね?

これから入りそうな変更

@Controllerアノテーションなくすて!今このタイミングで!すごい!

5. そんなコミッタ陣にBreaking Changeを指摘されるオレすごい!

まぁ指摘したのはバシバシBreaking Change入れてる人とは違う人なんだけど。

https://github.com/angular/angular.dart/commit/3ee8740204d635c4d046fc1afdacdf18685e2d8b#commitcomment-6177893

でもこれFilterをFormatterにするっていう方針の追従漏れをちまちま直しただけのパッチだし、私に言われましても・・・。まぁそれはそれとしてAngularDartにBreaking Changeぶっこむオレすごい!

使おう!AngularDart!

色々書いたけど、変化が激しいのは開発が活発な証拠。むしろポジティブに捉えましょう。AngularDartはこのユーザーお構いなしなアグレッシブさも含めて、これまでなかった可能性を感じられるいいフレームワークだと思いますし、この不安定さダイナミックさは今しか味わえないものです。みなさんもこの機会にぜひ試してみませんか?