dai-shi夏ごろに「暑さをみんなでふっとばせ!」というアプリを作りました。1bitで使い捨てで匿名のコミュニケーションツールを作ってみたに経緯が書いてあります。当時は、Famo.usやF/Aのライブラリに手を入れないといけなかったのですが、その後バージョンアップして不具合が解消されました。新しいバージョンでは読み込み速度なども改善しています。GitHubにソースをアップロードしました。Famo.us/Angularとsocket.ioの組み合わせでこんなことができるというサンプルによいかと思います。ついでに、「暑」を「寒」に変更する機能もつけました。タイトルはそのままですが。GitHubのページはこちらです。https://github.com/dai-shi/atsufut実際に動作しているアプリのページはこちらです。dai-shi自分が興味あるものの一つにコミュニケーションツールがあります。言っても普通のコミュニケーションではないです。見知らぬ人と一時的なつながりを感じられるようなそんなツールがいいと思います。言語も使わず、世界のどこかの誰かと。FacebookのPokeはよかったです。1bitで行うコミュニケーションとでも呼びましょうか。日本では「あいさつ」となり、意味が分からなくなりました。ちなみに、Pokeは一度機能が隠れてしまったのですが、また復活しました。最近は、Yoが流行っているらしいです。これも1bitコミュニケーションだと思います。どこまで流行るのか、気になるところです。流行っているついでに、Snapchatについても気になるところです。実は使ったことありませんが、これは使い捨てコミュニケーションだと思っています。そんなものが流行るとは想像していませんでした。写真だからうまくいったのでしょうか。あとは、匿名コミュニケーションにも興味あります。最近は実名指向で、あまり匿名を重視したコミュニケーションツールは登場していないのでしょうか。言うわけで、前置きが長くなりましたが、1bitで使い捨てで匿名のコミュニケーションツールを作ってみようと思いました。1bitで伝えたいことはなんだろう、と考えたその日が暑い日だったので、「暑い」にしました。ストレス発散をできるような「吹き飛ばし」機能をつけることにしました。これがタイトル画面です。これがメイン画面です。画面の上半分をクリック(タップ)すると、丸が落ちてきます。何度も押すと、丸がたまってきます。次に画面の下半分をクリックすると、丸を吹き飛ばします。それでは、やってみましょう。http://atsufut.axlight.com/このURLをスマホで開きましょう。モダンブラウザ必須です。一人でやると、すぐに飽きます。複数人で同時にやるとまあまあ面白いとは思います。同時に開いている人がいることは稀です。ここをどうするかが悩みどころです。dai-shiもうちょっとすばやくサンプルを作ってみるつもりがのんびりしてしまいました。Physicsを使ったサンプルです。3次元の物理演算もできるはずなので、Z軸も使った簡単なサンプルが作れないかと思ってやってみました。こちら当初、普通に回したらsurfaceの裏は真っ白で、180度回ると何も見えなくなってしまいました。そこで、仕方なく、各円を反対方向に回すことで表示しました。いい方法があればいいのですが。遠くのsurfaceを縮小表示する方法が分かりませんでした。これができればだいぶ立体感がでると思うのですが。physicsとtransformを混ぜて使ってはいけないのかもしれません。今回のサンプルのソースコードはこちらです。dai-shifamo.usは描画エンジンです。先日紹介したときに言及したデモは下記にありました。こちらこのfamo.usをAngularと統合した人たちがいます。http://famo.us/integrations/angular/これがなかなかいいのです。famo.usはJavaScriptですべて書くのですが、ちょっと手続き的な感じになります。それをAngularのdirectiveに書けるようにするのです。bindingも動くので、更新系がなんとも簡単なのです。Angularの経験があれば普通なので、特に驚きもないと言えばそれまでなのですが、これに慣れると、生のfamo.usを書くのは面倒くさく感じるようになるかもしれません。いうわけで、サンプルを作ってみました。fileのfamous-angularを使いました。通常は、bowerでインストールする方法が紹介されています。fileのものはcdnにないので、http://rawgit.com/を使いました。ところで、rawgitはcdn版(beta)もあってすばらしいです。これは続いて欲しいものです。出来上がったサンプルはこちらです。ソースコードはgistにありますが、下記にも貼り付けます。</fa-app></body></html>Famo.us/Angularはまだ発展途上ですべての機能がdirective化されていませんが、今後に期待しています。dai-shi最近注目しているライブラリfamo.us、なにがいいってURLがいいです。http://famo.us/今年になってオープンソース化されたのですが、以前プレビュー版のデモを見たときは3次元でぐりぐり動くものだったのですが、正式リリースではモバイルのリッチアプリのデモになっていて、ある意味おとなしくなっていました。famo.usは技術的にもDOMの階層を使わずに自力でレイアウトして、fpsを保証するという面白いものになっています。Universityです。ステップを追ってfamo.usの使い方を学習できます。ACEエディタでその場でいじって動作を確認できるのもすばらしい。Physicsというサブライブラリを使うといろいろできるようです。soonとなっています。待ちきれずに試してみました。簡単に面白いものができないかと思って、作ってみました。こちらどうですか?水色の玉をクリックしてみましたか?まだの人はもう一度。なんと、これは1つのHTMLファイルに書いています。中身はほとんどJavaScriptのコードですが。gistにアップしてあるのでそちらをご参照ください。ソースはこちら他にもconstraintのモジュールがあるので、いろいろできそうです。ドキュメントはまだ少ないので、現状ではソースを読まざるを得ないことがありました。