ずっと君のターン

2014-07-01 晴れてるけど大雨の可能性もあるとか

AngryBirdsの3D版を作りました

| 14:17 |  AngryBirdsの3D版を作りましたを含むブックマーク

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

D

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

http://enragedfowls.azurewebsites.net/

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

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/

f:id:technohippy:20140701210312p:image:medium

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

2014-06-08 澪と雨を待つ女 愛と裏切りのLT!

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

| 01:39 |  天下一altJS武闘会でAmberについて話しましたを含むブックマーク

f:id:technohippy:20140608135045j:image

パートナーの調子が悪くて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)を表示

f:id:technohippy:20140609020256p:image:medium:left

f:id:technohippy:20140609020259p:image:medium:left

f:id:technohippy:20140609020254p:image:medium:left


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

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

2014-05-15 寒暖が激しすぎやしないか

Project Ara Conference報告会

01:31 | Project Ara Conference報告会を含むブックマーク

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

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

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

2014-05-09 春の嵐

three.js入門中

| 23:14 |  three.js入門中を含むブックマーク

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

http://goo.gl/SJshg8

f:id:technohippy:20140509231206p:image

とりあえず木。

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

2014-05-02 驚きと食欲とAngularDartと

AngularDartすごい!マジすごい!

| 13:31 | AngularDartすごい!マジすごい!を含むブックマーク

1. Googleの本気がすごい!

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

個人的にもAngularDartとDartはRailsとRubyみたいな関係になれるかもと思える程度には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はこのユーザーお構いなしなアグレッシブさも含めて、これまでなかった可能性を感じられるいいフレームワークだと思いますし、この不安定さダイナミックさは今しか味わえないものです。みなさんもこの機会にぜひ試してみませんか?

f:id:technohippy:20140502131052j:image