タグ「famo.us」が付けられているもの

Famo.us/AngularのサンプルアプリをGitHubに置きました

  • 投稿日:
  • by dai-shi

夏ごろに「暑さをみんなでふっとばせ！」というアプリを作りました。

1bitで使い捨てで匿名のコミュニケーションツールを作ってみた

に経緯が書いてあります。

当時は、Famo.usやF/Aのライブラリに手を入れないといけなかったのですが、その後バージョンアップして不具合が解消されました。 新しいバージョンでは読み込み速度なども改善しています。

せっかくなので、GitHubにソースをアップロードしました。 Famo.us/Angularとsocket.ioの組み合わせでこんなことができるというサンプルによいかと思います。

ついでに、「暑」を「寒」に変更する機能もつけました。タイトルはそのままですが。

GitHubのページはこちらです。

https://github.com/dai-shi/atsufut

実際に動作しているアプリのページはこちらです。

http://atsufut.axlight.com/#?color=blue&label=%E5%AF%92

1bitで使い捨てで匿名のコミュニケーションツールを作ってみた

  • 投稿日:
  • by dai-shi

自分が興味あるものの一つにコミュニケーションツールがあります。 と言っても普通のコミュニケーションではないです。 例えば、見知らぬ人と一時的なつながりを感じられるようなそんなツールがいいと思います。言語も使わず、世界のどこかの誰かと。

FacebookのPokeはよかったです。1bitで行うコミュニケーションとでも呼びましょうか。日本では「あいさつ」となり、意味が分からなくなりました。 ちなみに、Pokeは一度機能が隠れてしまったのですが、また復活しました。 最近は、Yoが流行っているらしいです。これも1bitコミュニケーションだと思います。どこまで流行るのか、気になるところです。

流行っているついでに、Snapchatについても気になるところです。 実は使ったことありませんが、これは使い捨てコミュニケーションだと思っています。 使い捨てコミュニケーションができたら面白いだろうなぁとは思っていましたが、 まさかそんなものが流行るとは想像していませんでした。 写真だからうまくいったのでしょうか。

あとは、匿名コミュニケーションにも興味あります。 最近は実名指向で、あまり匿名を重視したコミュニケーションツールは登場していないのでしょうか。

と言うわけで、前置きが長くなりましたが、1bitで使い捨てで匿名のコミュニケーションツールを作ってみようと思いました。 1bitで伝えたいことはなんだろう、と考えたその日が暑い日だったので、「暑い」にしました。 「暑い」を伝え合うだけでは、どんどん暑苦しくなるだけですので、 ストレス発散をできるような「吹き飛ばし」機能をつけることにしました。

atsufut_title.png

これがタイトル画面です。

atsufut_main.png

これがメイン画面です。これだけです。 画面の上半分をクリック（タップ）すると、丸が落ちてきます。 何度も押すと、丸がたまってきます。 次に画面の下半分をクリックすると、丸を吹き飛ばします。 それだけです。

それでは、やってみましょう。

http://atsufut.axlight.com/

このURLをスマホで開きましょう。PCでも大丈夫です。モダンブラウザ必須です。

一人でやると、すぐに飽きます。 複数人で同時にやるとまあまあ面白いとは思います。 しかし、たまたま同時に開いている人がいることは稀です。 ここをどうするかが悩みどころです。

今回、開発に利用したライブラリは、 node.js, socket.io, angular.js, famo.us あたりです。

Famo.us Physicsで3Dの簡単なサンプル

  • 投稿日:
  • by dai-shi

もうちょっとすばやくサンプルを作ってみるつもりがのんびりしてしまいました。

前回に引き続き、famo.us Physicsを使ったサンプルです。

3次元の物理演算もできるはずなので、Z軸も使った簡単なサンプルが作れないかと思ってやってみました。

こちら

当初、普通に回したらsurfaceの裏は真っ白で、180度回ると何も見えなくなってしまいました。そこで、仕方なく、各円を反対方向に回すことで表示しました。もっといい方法があればいいのですが。

また、遠くのsurfaceを縮小表示する方法が分かりませんでした。これができればだいぶ立体感がでると思うのですが。physicsとtransformを混ぜて使ってはいけないのかもしれません。

Famo.us Universityのphysicsコースは未だcoming soonのままです。

今回のサンプルのソースコードはこちらです。

Famo.usとAngularはいい組み合わせ、サンプル書いてみた

  • 投稿日:
  • by dai-shi

famo.usは描画エンジンです。 先日紹介したときに言及したデモは下記にありました。

こちら

このfamo.usをAngularと統合した人たちがいます。

http://famo.us/integrations/angular/

これがなかなかいいのです。famo.usはJavaScriptですべて書くのですが、ちょっと手続き的な感じになります。それをAngularのdirectiveに書けるようにするのです。ちゃんと、bindingも動くので、更新系がなんとも簡単なのです。Angularの経験があれば普通なので、特に驚きもないと言えばそれまでなのですが、これに慣れると、生のfamo.usを書くのは面倒くさく感じるようになるかもしれません。

というわけで、サンプルを作ってみました。 1つのHTMLにすべて詰め込みたかったので、single fileのfamous-angularを使いました。通常は、bowerでインストールする方法が紹介されています。

single fileのものはcdnにないので、http://rawgit.com/を使いました。ところで、rawgitはcdn版(beta)もあってすばらしいです。これは続いて欲しいものです。

さて、出来上がったサンプルは

こちら

です。ソースコードはgistにありますが、下記にも貼り付けます。

<html ng-app="MyApp">
<head>
  <title>famo.us angular sample</title>
  <link type="text/css" href="//code.famo.us/famous/0.2/famous.css" rel="stylesheet" />
  <link type="text/css" href="//cdn.rawgit.com/Famous/famous-angular/fee2b717a53ad762c9e3157580ce255901f4ccad/dist/famous-angular.min.css" rel="stylesheet" />
  <script type="text/javascript" src="//code.famo.us/lib/require.js"></script>
  <script type="text/javascript" src="//code.famo.us/famous/0.2/famous.js"></script>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
  <script type="text/javascript" src="//cdn.rawgit.com/Famous/famous-angular/fee2b717a53ad762c9e3157580ce255901f4ccad/dist/famous-angular.min.js"></script>
  <script type="text/javascript">
angular.module('MyApp', ['famous.angular'])
.controller('MyController', ['$scope', function($scope) {
  $scope.items = [];
  for (var y = 0; y < 1; y += 0.1) {
    for (var x = 0; x < 1; x += 0.1) {
      $scope.items.push({x: x, y: y, color: 'yellow'});
    }
  }
}]);
  </script>
</head>
<body ng-controller="MyController">
  <fa-app>
    <fa-modifier ng-repeat="item in items" fa-origin="[item.x, item.y]">
      <fa-surface fa-size="[30, 20]" fa-click="item.color = 'red'" fa-background-color="item.color" fa-properties="{textAlign: 'center', lineHeight: '20px'}">{{$index}}</fa-surface>
    </fa-modifier>
  </fa-app>
</body>
</html>

Famo.us/Angularはまだ発展途上ですべての機能がdirective化されていませんが、今後に期待しています。

Famo.us Physicsの簡単なサンプル

  • 投稿日:
  • by dai-shi

最近注目しているライブラリfamo.us、なにがいいってURLがいいです。

http://famo.us/

今年になってオープンソース化されたのですが、以前プレビュー版のデモを見たときは3次元でぐりぐり動くものだったのですが、正式リリースではモバイルのリッチアプリのデモになっていて、ある意味おとなしくなっていました。実用的ではあります。

famo.usは技術的にもDOMの階層を使わずに自力でレイアウトして、fpsを保証するという面白いものになっています。

もっと感心したのは、Famo.us Universityです。ステップを追ってfamo.usの使い方を学習できます。ACEエディタでその場でいじって動作を確認できるのもすばらしい。

さて、3次元のぐりぐりですが、どうやらfamo.us Physicsというサブライブラリを使うといろいろできるようです。Famo.us Universityのコースではcoming soonとなっています。が、待ちきれずに試してみました。

とにかく簡単に面白いものができないかと思って、作ってみました。 まずはご覧ください。

こちら

どうですか？水色の玉をクリックしてみましたか？まだの人はもう一度。

なんと、これは1つのHTMLファイルに書いています。もちろん中身はほとんどJavaScriptのコードですが。63行なのでブログに貼り付けてもいいのですが、 gistにアップしてあるのでそちらをご参照ください。

ソースはこちら

他にもconstraintのモジュールがあるので、いろいろできそうです。 ただ、ドキュメントはまだ少ないので、現状ではソースを読まざるを得ないことがありました。

しばらく楽しめそうです。