このエントリーをはてなブックマークに追加
Pocket

こんにちは。ishibashiです。
今回はAngularJS上でfamo.usを簡単に扱えるpluginである「Famo.us/Angular」を試して見たいと思います。

AngularJSとは

JavaScriptフレームワークで、Googleとコミュニティより開発されています。
テンプレート機能がAngularJSの大きな特徴のMVWフレームワークです。
ここではAngularJSについて詳しく記述しないので、興味のある方はGoogleなどで一度検索してみてください。

Famo.usとは

プラグインを必要とせず，ブラウザ上でネイティブアプリのパフォーマンスを実現するためのJavaScriptフレームワークです。
このページ などを参照してもらえるとそのポテンシャルを感じとれるかと思います。

早速試してみる！

まずは ここ と ここ から必要なファイル（famous.js, famous-angular.js/css）をダウンロードします。
そのあと下記の２ファイルを作成し、サーバーに配置します。

  • index.html
<html lang="ja" ng-app="myApp">
  <head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="famous-angular.css" />
  </head>
  <body>
    // 必要なjsを読み込み
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    <script type="text/javascript" src="famous.js"></script>
    <script type="text/javascript" src="famous-angular.js"></script>
    <script type="text/javascript" src="main.js"></script>

    // fa-appタグでmain.jsで使うためにコントローラー名の指定
    // ※今回頭に"fa-"が付いているタグがfamo.usの機能を利用している部分です。
    <fa-app ng-controller="FlipperCtrl">
      <fa-flipper>
        // 最初に表示されるオブジェクト
        // オブジェクトのサイズを指定
        <fa-modifier fa-size="[200, 100]">
          // オブジェクトに表示する文字や色を設定
          <fa-surface fa-background-color="'#32CD32'" fa-click="flipIt()"><strong>Click me to see me flip !</strong></fa-surface>
        </fa-modifier> 
        // クリックしたあとに表示されるオブジェクト
        // こちらでは傾きも設定
        <fa-modifier fa-size="[200, 200]" fa-transform="[1, .3, 0, 0, -.3, 1, 0, 0, 0, 0, 1, 0, 20, 110, 0, 1]">
          // オブジェクトに表示される文字
          <fa-surface fa-background-color="'#7FFFD4'" fa-click="flipIt()"><strong>Thank you for Click!!</strong></fa-surface>
        </fa-modifier> 
      </fa-flipper>
    </fa-app>

  </body>
</html>
  • main.js
// イベントの設定
angular.module('myApp', ['famous.angular'])
  .controller('FlipperCtrl', ['$scope', '$famous', function($scope, $famous) {
    $scope.flipIt = function() {
       $famous.find('fa-flipper')[0].flip();
    };
}]);

今回のsampleページ

これだけのコードで簡単にアニメーションが出来ました。

Famo.usフレームワークでは他にも様々な動作がサポートされています。
こちらのページ を参照しながら独自性あるリッチなWEBページを作成してみてください。

ではでは。