famo.us study

1. famo.usはもう試した
かい？
@lion_man44

2. 自己紹介
名前： ライオン(@lion_man44)
職業： フロントエンドっぽい/バックエンドっぽい
好き： JavaScript, Node.js, Ruby
本業： 味噌汁エンジニア
副業： ソーシャルゲームエンジニア

3. 今回話す事
• Famo.usを勉強してみたという話
今回話さない事
• サーバサイドの話
• 現状重いサイトがあり、それを改善したいという類いの話
• パフォーマンス的な話

4. よくある風景
サイト重いので高速化してくださ
具体的には？ い。
A
PM

5. よくある風景2
（要約すると）どうにかしてくださ
…はい。い。
A
PM

6. こうなると、辛い

7. チューニングの話は確かにいっぱいあ
る
SQL文見直すとか、index見直すとか、サーバロジック見直してDBアクセス自体を減らすとか、
サーバでやってる処理を一部クライアントに移行させるとか、クライアントでキャッシュさせると
か、アニメーション駆使して逆にユーザ体感上げるとか、スプライト画像にするとか、リクエスト
数減らすとか、そもそも画像を限定するとか…etc

8. だが、その前に最初（設計）の段階か
ら何か出来ないのだろうか？

9. そういえばHTML5を高速に綺麗に表
示するというのが一瞬流行ったような
…

10. 何だっけ…エモ…じゃないし、
ハモ…ヒモ…そうだfamo.usだ！

11. Famo.usの概要
• 高速で綺麗なHTML5アプリケーションを表示する
• WebGL/Canvasを使って高度な表現を可能にする

12. とりあえず良く分からないので試す
。

13. 早速TOP画面へ

14. チュートリアルへ

15. Hello World

16. 結構（コードが）長いのでローカルで見
る方法が無いかggr

17. あった

18. さっそく試す

19. 何かいろいろ入る

20. 動かす

21. 表示される

22. png画像がグルグル回っている

23. FireFoxでも表示させてみる
FireFox Chrome

24. 問題なく、各ブラウザ間でちゃんと差
異を埋めてくれている(ブラウザはこの
世で二つだけ）

25. ## Surfaceを読む##
とりあえず分かったので画像変える

27. 自分の画像に変更

28. 画像変わった！jpgでもグルグル回る！

29. Imgタグ作ってそれをグルグル回しているのが分か
る

31. このimageSurfaceというのはそれだけ
じゃなくて他にもありそう

32. あった

33. README.mdを読む

34. それぞれのHTML5のタグによってsurfaceがファイル
毎に分けられている感じなのが何となく分かる

35. とりあえずどれだけ面倒臭い事をやっ
てくれているのか自力でやってみる

36. 出来た

37. 大分汚いし、famo.usの方はrotateYで
はなく、matrix3dを使っているのだけ
れど、似たような挙動をするものは一
旦出来る

40. うん、当たり前だけどフレームワーク
通した方が分かりやすいね

41. ## Coreを読む##
そもそもcore/Engine何者

42. famous-containerのdivを作ってOptionsManagerオ
ブジェクトから返ってくる変更点を監視し、FPSに制限
をかけるかそのまま現在のFPSのまま処理を続行す
るかを実行しているっぽい

43. ## Modifierを読む##
ではModifierは？

44. Surfaceに持たせたいstyleの一部をここで定義出来
るといった感じ

45. ## Transformを読む##
最後にTransform

46. まぁstyleにtransformなど設定する所
がModifierならTransformはMathライ
ブラリ的な何かだよね

47. 実際にtransformする際に必要な値を生成してくれて
る

48. ざっと見てみた感想
• Core/Engineは必ずいるし、Modifier|Transform|Surfaceはcoreを呼ば
なかったとしても、必要なそれ系統のものは必ず呼ぶ
• つまり4つのモジュールを駆使して基本は書いて行く
• で、famous_container毎どかっとHTMLにぶっ込むような感じ

49. まとめです

50. まとめ
• 現状使う必要はぶっちゃけ無い。興味ある人だけが使えば良い感じ。
ただ、データがまだまだ少ないので生け贄が必要
• 書きやすいかどうかで言えば、”まだ”書きやすいというだけでそこま
で書きやすいものではない
• モジュール自体はちゃんと分けられていて、その中身自体も”早さを求
める為に読みづらいコード” は少ないように見える

51. もう一回言います

52. 現状使う必要は無い
ただ、自分は次の案件で提案してみる予定

53. 参考/引用資料
• 高速で綺麗なHTML5アプリケーションのためのフレームワーク
Famo.usが完全無料に
• Famo.us – WebGL/Canvasを使って高度な表現を可能にする
JavaScriptフレームワーク
• GitHub - Famous/generator-famous
• GitHub - Famous/famous
• Famo.usでオブジェクトを配置

54. ご清聴ありがとうございました。