Angular.jsのngAnimateについての簡単なデモと1.2.0

angular.js

Angular.jsの1.2.0がリリースされましたね！
stableのバージョンも1.0.8から一気に1.2.0になってかなり大きなアップデートという感じです。



1.2.0や今後についてはこのビデオを見るといいかもしれません。（1時間ちょっとあるので長いですが...）

1.2.0

  • 例えばngRepeatにはいくつか機能拡張されていて、要素を超えて繰り返し出来るようになったりしています。
<div ng-repeat-start="element in list">{{element}}</div>
<div>{{element}}</div>
<div ng-repeat-end>{{element}}
  • 他にも$http、$resource周りの拡張や、"Controller as xxx"でcontrollerのインスタンスをtemplateから参照できたり、ng-ifでのtemplateの出し分け、expressionで三項演算子(a ? b : c)が使えるようになったり(地味に嬉しい)、CSPへの対応などのセキュリティ周り、エラーメッセージの改善やドキュメントの改善など、機会があれば色々試して紹介したいと思います。
  • あと、モバイル対応として、ngTouchをモジュールを使うことでon-clickがスマートフォン端末でもtouchイベントで動くようになっているのも嬉しいところです。(ngSwipeも)
  • また、ngRouteがコアから外れていたり今後はAngular.jsのコアをどんどん小さくして外に出していくみたいですね。
  • 1.0.X系から1.2.0に移行する場合はここを見て対応するといいみたいです。

ngAnimate

ざっくり
  • http://docs.angularjs.org/api/ngAnimate
  • ngAnimateは1.14から入った機能でどんなものか簡単に言うと、Angular.jsでの状態の変化に対応するCSSを定義するだけでアニメーションさせることが出来るというものです。
    • ngView、ngRepeat、ngClass、ngShow、ngHide、ngInclude、ngSwitch、ngIfでの状態の変化に指定することが出来ます。
  • Angular.jsはngAnimateが入る前から、DOMのclassをngClassなどで変更することでアニメーションさせるように作られていたのかなと思うのですが、それがさらに簡単に出来るようになった感じです。
  • Angular.jsのサイトも明らかにngAnimate使ってページ遷移時にアニメーションつけたりしてますね。
簡単なサンプル

ngViewによる画面遷移時にアニメーション (Move to Page)
  • ngViewを指定しているDOM(.view)にng-enterとng-enter-activeを定義しておくことで、ng-enter、ng-enter-activeとCSSのクラスが変化して、この場合画面遷移時に透過が0から1に変化するようになります。
/* scss */
.view {
  &.ng-enter {
    @include transition-duration(1s);
    @include transition-timing-function(linear);
    opacity: 0;
  }
  &.ng-enter-active {
    opacity: 1;
  }
}
ngRepeatの追加、削除時にアニメーション (Add, Delete)
  • ngRepeatを指定しているDOM(.view)にng-enterとng-enter-active、ng-leave、ng-leave-activeを定義しておくことでngRepeatの要素に追加、削除されたときにアニメーションさせることが出来ます。
/* scss */
.list-group-item {
  position: relative;
  &.ng-enter {
    @include transition-duration(0.5s);
    @include transition-timing-function(linear);
    top: -100px;
    opacity: 0;
  }
  &.ng-enter-active {
    top: 0px;
    opacity: 1;
  }
  &.ng-leave {
    @include transition-duration(0.5s);
    @include transition-timing-function(linear);
    top: 0px;
    opacity: 1;
  }
  &.ng-leave-active {
    top: -100px;
    opacity: 0.5;
  }
}
  • タイムラインで新しいのが追加される時のアニメーションなんかはこれだけでできそうです。
アニメーションを遅延 (Multi Add)
  • ng-xxxx-staggerを指定することでアニメーションを遅延させることが出来ます。
  &.ng-enter-stagger {
    @include transition-delay(0.5s);
    @include transition-duration(0);
  }
JavaScriptで指定
  • CSSのクラスでなくて、コードでアニメーションを書くことも出来ます。
@myapp.animation '.view', ->
  return {
    enter: (element, done) ->
      console.log "enter"
      done()
    leave: (element, done) ->
      console.log "leave"
      done()
  }

ngAnimateを使うことで、簡単なアニメーションならcssを書くだけで作れるので便利そうですね！

参考

おまけ

  • 昔書いた資料で1.0.7の時なので今だと古い内容も多いですが、実際にアプリ作ってみたときの話が書いてあるのでよければ見てみてください。


最近は、Angular.jsの情報が日本語でも得られるようになってきて嬉しいです

捗るかもしれないフロントエンド開発環境という話をした

JavaScript grunt

フロントエンドの開発で試してみたかったことをやってみた話の資料です。 (@社内勉強会)

デモしながらだったので資料だけだと伝わりにくいかもしれませんがドヤ顔でLiveReloadのデモしたりしました。
頑張って環境整えるとコード書くだけでブラウザが再読み込みされてテストも実行されてとかなり便利になりますね。


https://speakerdeck.com/koba04/bu-rukamosirenaihurontoendokai-fa-huan-jing

ざっくりとこんなことが書いてあります

  • LiveReload
  • connect + proxy + easymock
  • testem
  • mocha + expect + sinon
  • assemble、foreman....

もっといい方法とかあれば教えてもらえると嬉しいです

蛇足

「JavaScript Ninjaの極意」を読んだ

JavaScript 書評

日本語版が出る前から話題になっていたのを見ていて、英語だけど買おうかなーと思っていたら翻訳されて発売されたので買いました。


かなり話題になるかなと思っていたら、意外とそうでもなく、でも読んで見るとやっぱり面白かったので紹介します。
というか、jQuery作者のJohn Regigによる本ということで読むしかない！


入門書ではないものの、最初はかなり簡単な内容から始まって、assert関数を作ってそれを実際に使いながら動作を説明していく流れになっています。
基本的にはコードを示してそれについての説明をしていくスタイルになっていて、コードにもコメントが丁寧に付けられていてわかりやすいです。
また、何か実装を示すときに、使う側のコードから見せて、その実装を後で示すのも興味をそそられていいです。

関数

  • 最初が関数についての説明になっていて、コンストラクタについての説明やapply, call、無名関数の使い方や、プロパティを使ったメモ化、argumentsの使い方などなど色々な使い方を知ることが出来ます。
    • 個人的には、function.lengthとaruguments.lengthを使ったオーバーロードの実装がなるほどなぁと思い面白かったです。
    • 特に同じ引数を持つメソッドを探索していくコードが。

クロージャ

  • クロージャについても知らない人向けに丁寧に説明されていてわかりやすいです。
    • クロージャを使うことによってイベント駆動なコードを書きやすくなっていることや、bindやcurry化、メモ化などこの辺りから少しずつ考えて読むコードが増えてきます。
  • 即時関数を使って長いプロパティを省略するのはそんなに意識していなかったのですが、確かに便利だなと思いました。
(function(v) {
  v.value ...
})(element.someLongAttribute);

プロトタイプ

  • ここも丁寧に説明されていてわかりやすいですが、obj.constructor.prototypeとなっているからprototypeに追加したメソッドを探せるとあるけどそこはアレッ？と思いました。obj.__proto_みたいな内部プロパティにprototypeがセットされて、そこから探せるようになってるんだと思っていたので。
    • 確認してみた（実装によるのかもしれませんが..）

  • Ninja.prototype = Person.prototypeでなくて、Ninja.prototype = new Person()にした方が理由なんかもしっかり書かれているのもいいなと思いました。
  • クラスぽいのをつくるsubClass関数の実装はだいぶ手強い感じでした。実装は1ページ分くらいですが、その実装についての説明は5ページくらいあってかなり勉強になります。
    • 全部理解出来ていませんが...

正規表現

  • 忍び袋に入れておくべき武器として紹介されていて、html文字列の正規表現による操作を中心に比較的基本的な使い方が紹介されています。//リテラルではなくて、new Regex()を使うべき場面など、いい頭の体操になって読んでいて面白かったです。

スレッドとタイマ

  • メインの処理と、マウスイベント、setTimeout、setIntervalが起こった時に、遅延しながらどのように実行されていくかの図が最初に紹介されるのですが、それがとてもわかりやすいです。
  • setTimeoutを繰り返し実行した時とsetIntervalとの違いについても書かれていてなるほどなぁと思いました。
  • また重い処理でUIを止めないために、setTimeout使うなど、シングルスレッドならでは注意点についてもしっかり書かれています。
  • とてもいい章だと思います。

実行時のコードの評価

  • ここではevalについてや、Function.toString()を使った引数名の取り方などが紹介されています。
  • またテンプレートエンジンの実装などで使われてるwithについても一章使って取り上げられており、改めてその動作について知ることが出来ます。
    • 実際は使わないと思いますが...

クロスブラウザ

  • ここからはjQueryでの開発の経験をもとに、クロスブラウザ対応についてかなり詳しく書かれていて、紹介されるコードの内容も高度になってきます。
    • 理解出来なかったところも結構あります。
    • これを見たらjQueryに足を向けて寝れないなと思いました。
    • どのブラウザでも動くようにするだけでなく、パフォーマンスや様々なことを考慮していることがわかり、とても読み応えがありました。

ちなみに洋書の方は、「それはサムライでは？」という表紙でしたが、日本語版ではちゃんと忍者なかっこいい感じになってます

YAPC::ASIA 2013で「個人で出来るWebサービスの作り方」というお話をさせて頂きました #yapcasia

WebService perl YAPC

YAPC::ASIA 2013で「個人で出来るWebサービスの作り方」というタイトルでTalkをさせて頂きました。


http://yapcasia.org/2013/talk/show/5f3d4e94-c7ac-11e2-be2e-7ec06aeab6a4


トーク概要に書いたものを全部含めたらかなり駆け足な感じになってしまい伝わったか不安ですが、PerlでのWebアプリケーションの作り方の話は他の方がされていたので、それ以外のミドルウェアやフロントエンドなどはどうすればいいのかといった話をさせてもらいました。


個人的にはこのTalkをするために、Carton化やRedis試したり、Vagrant + Chef (knife solo) + serverspec を試したりと色々出来たのでとてもよかったです。
また、その流れで試したProcletがとても便利でもっと早く試しておけばよかったなぁと思いました。


あともうひとつこのTalkと迷ったのが、「Amon2 + Teng + Angular.jsで作るJSONベースWebアプリケーション」というものなのですが、それはどこか話す機会を頂ければ発表したいなと思います。


他の方のTalkだとkazeburoさんの話が、自分が普段意識してない部分の話でわからない部分もありましたがとても面白かったし、勉強したいなぁと思いました。


YAPC::ASIAは毎年毎年新しい試みがあったりで楽しませてもらってます。楽しくて快適な空間をありがとうございます。明日も楽しみたいと思います！

というわけで楽しんだ感想（追記）

トーク
  • 2日目は比較的しっかりとトークを聞いていたのですが、技術的に勉強になる部分はもちろん、onishiさんのトークではチームでの開発の仕方について考えさせられたりと色々と今の現状を考えさせられることが多かったです。
  • IkebeさんのKeynoteでは、自分がこれからどういうキャリアを進んでいくか考える上でのヒントのようなものをたくさんもらいましたし、サイリウムを振られる執行役員って愛されていてとっても素敵だなと思いました。
座談会
  • 座談会はとても面白くてあっという間でした。卜部さんの話が特に丁寧でわかりやすかったのがとても印象に残ってます。
  • プログラミング言語は一要素でありPerlがというより一つに言語に固執することがリスクっていうのはその通りだなと思いました。とはいえ一つの言語を深くやれば他の言語もすぐ出来るだろうし、色んな言語のHello Worldばっかりやってもなんの意味もないし、、、自分で枠を作ってしまうのがよくないんだろうなと思いました。
    • Rubyはちょいちょい見たり書いたりする機会があるし、パーフェクトRubyも買ったのでちゃんと勉強して何か作りたいなぁと思ってます。Railsの考え方も知りたいのでRailsで。
思ったこと

ありがとうございました！

  • 941さん、牧さんによるYAPCは今回が最後ということで、2010年から参加させてもらっているので本当にお疲れ様でしたと言いたいです。毎年楽しいのに、毎回、前回よりたくさんの試みがあってより楽しくなっていて本当に素晴らしいなぁと思いました。
  • 関係者の皆様、本当にありがとうございました！とっても快適で楽しかったです！
  • 後夜祭も楽しかったです！ありがとうございました！ bayashi++

gradleのコンパイルエラーになるのはJDKが古いからでした

gradleでコンパイルすると文字コードうまく認識出来てない風なエラーになって、なんでかなーと思っていたらMacのJDKが1.6だからでした。1.7にすると無事にコンパイル出来ました。
ちょっとハマったのでメモ。

YAPC::Asia Tokyo 2013 にて「個人で出来る！PerlによるWebアプリケーションの作り方」というはなしをします #yapcasia

Perl

YAPC::Asia Tokyo 2013 にて「個人で出来る！PerlによるWebアプリケーションの作り方」というタイトルで20分のTalkをさせて頂きます。

内容は

Perlで何か作りたいと考えた時、Webアプリケーションを作ろうと考える人は少なくないと思います。
しかしながらWebアプリケーションを作り公開するには、Perlでアプリケーションの実装をする以外にも様々な知識や作業が必要になります。
そこで本トークでは、個人で作成したPerlによるWebアプリケーションの事例を交えながら

・PerlでのWebアプリケーションの構成
・ディレクトリ構成
・WAF
・ORM
・Cache
・フロントエンド(HTML/JavaScript/CSS)の構成
・JavaScript(Backbone.js、Angular.js、CoffeeScript)
・CSS (Compass)
・Grunt.js
・開発環境、本番環境の構築
・開発の流れ
・Web、Application、DB、Cacheなどのサーバー構成や設定、プロセス管理
・本番反映などの作業

といったWebアプリケーションの公開に必要な要素について、実際のコードを交えながらインフラからフロント側まで具体的にお話させて頂きたいと思います。
http://koba04.com/slide/perl-casual-5/
（上記で話した中から技術的な部分に焦点を当てた内容になる予定です）

という感じで、
Webアプリケーションを作るときに必要になること全般について、個人でどういう感じでやっているのかという話をさせて頂ければと思っています。
YAPCまでに色々試してよさそうなものがあればその話をしたいと思っているので一部変更することがあります。


今回もPerlに限らず面白そうな話がいっぱいあるので楽しみですね。
チケットの販売は8/11で締め切りです！！

RubyやNode.jsでのライブラリのドキュメントの探し方？？

programming

普段Perlのモジュールのドキュメント見たりするときはmanみたいな感じでperldoc XXXしたり、ソース見るときはperldoc -m XXXしたりしているのですが、RubyとかNode.jsでモジュールのドキュメントを調べたりするのはどういう方法が使われているのかなぁと疑問に思ったので書いてみました。

Perl

  • インストールされてるモジュールのドキュメント
perldoc XXX
  • ソース見たいとき
perldoc -m XXX
  • 組み込み関数のドキュメント
perldoc -f substr
  • インストールされていないモジュールのドキュメント(便利！)
# 入ってなければ
cpanm  Pod::Cpandoc

cpandoc XXX

Ruby

  • ri XXXで組み込みライブラリのドキュメントは見ることが出来るということはわかったのですが、gemで入れたライブラリのドキュメントは各ライブラリのWebページにいってドキュメント見る感じ？

Node.js

  • npm docs XXXってやるとブラウザでそのドキュメントページが開くのでブラウザで見ろということ？


他にいい方法があったら教えてもらえると嬉しいです！