Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Famo.usはもう試したかい?

4,765 views

Published on

famo.us study

Published in: Engineering
  • Hello dear friend,

    My name is miss mary Desmond i saw your profile please kindly contact me here with my private email address(mary.love4u2014@hotmail.com) let me send you my pictures for us to know each other.

    mary.love4u2014@hotmail.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Famo.usはもう試したかい?

  1. 1. famo.usはもう試した かい? @lion_man44
  2. 2. 自己紹介 名前: ライオン(@lion_man44) 職業: フロントエンドっぽい/バックエンドっぽい 好き: JavaScript, Node.js, Ruby 本業: 味噌汁エンジニア 副業: ソーシャルゲームエンジニア
  3. 3. 今回話す事 • Famo.usを勉強してみたという話 今回話さない事 • サーバサイドの話 • 現状重いサイトがあり、それを改善したいという類いの話 • パフォーマンス的な話
  4. 4. よくある風景 サイト重いので高速化してくださ 具体的には? い。 A PM
  5. 5. よくある風景2 (要約すると)どうにかしてくださ …はい。い。 A PM
  6. 6. こうなると、辛い
  7. 7. チューニングの話は確かにいっぱいあ る SQL文見直すとか、index見直すとか、サーバロジック見直してDBアクセス自体を減らすとか、 サーバでやってる処理を一部クライアントに移行させるとか、クライアントでキャッシュさせると か、アニメーション駆使して逆にユーザ体感上げるとか、スプライト画像にするとか、リクエスト 数減らすとか、そもそも画像を限定するとか…etc
  8. 8. だが、その前に最初(設計)の段階か ら何か出来ないのだろうか?
  9. 9. そういえばHTML5を高速に綺麗に表 示するというのが一瞬流行ったような …
  10. 10. 何だっけ…エモ…じゃないし、 ハモ…ヒモ…そうだfamo.usだ!
  11. 11. Famo.usの概要 • 高速で綺麗なHTML5アプリケーションを表示する • WebGL/Canvasを使って高度な表現を可能にする
  12. 12. とりあえず良く分からないので試す 。
  13. 13. 早速TOP画面へ
  14. 14. チュートリアルへ
  15. 15. Hello World
  16. 16. 結構(コードが)長いのでローカルで見 る方法が無いかggr
  17. 17. あった
  18. 18. さっそく試す
  19. 19. 何かいろいろ入る
  20. 20. 動かす
  21. 21. 表示される
  22. 22. png画像がグルグル回っている
  23. 23. FireFoxでも表示させてみる FireFox Chrome
  24. 24. 問題なく、各ブラウザ間でちゃんと差 異を埋めてくれている(ブラウザはこの 世で二つだけ)
  25. 25. ## Surfaceを読む## とりあえず分かったので画像変える
  26. 26. 自分の画像に変更
  27. 27. 画像変わった!jpgでもグルグル回る!
  28. 28. Imgタグ作ってそれをグルグル回しているのが分か る
  29. 29. このimageSurfaceというのはそれだけ じゃなくて他にもありそう
  30. 30. あった
  31. 31. README.mdを読む
  32. 32. それぞれのHTML5のタグによってsurfaceがファイル 毎に分けられている感じなのが何となく分かる
  33. 33. とりあえずどれだけ面倒臭い事をやっ てくれているのか自力でやってみる
  34. 34. 出来た
  35. 35. 大分汚いし、famo.usの方はrotateYで はなく、matrix3dを使っているのだけ れど、似たような挙動をするものは一 旦出来る
  36. 36. うん、当たり前だけどフレームワーク 通した方が分かりやすいね
  37. 37. ## Coreを読む## そもそもcore/Engine何者
  38. 38. famous-containerのdivを作ってOptionsManagerオ ブジェクトから返ってくる変更点を監視し、FPSに制限 をかけるかそのまま現在のFPSのまま処理を続行す るかを実行しているっぽい
  39. 39. ## Modifierを読む## ではModifierは?
  40. 40. Surfaceに持たせたいstyleの一部をここで定義出来 るといった感じ
  41. 41. ## Transformを読む## 最後にTransform
  42. 42. まぁstyleにtransformなど設定する所 がModifierならTransformはMathライ ブラリ的な何かだよね
  43. 43. 実際にtransformする際に必要な値を生成してくれて る
  44. 44. ざっと見てみた感想 • Core/Engineは必ずいるし、Modifier|Transform|Surfaceはcoreを呼ば なかったとしても、必要なそれ系統のものは必ず呼ぶ • つまり4つのモジュールを駆使して基本は書いて行く • で、famous_container毎どかっとHTMLにぶっ込むような感じ
  45. 45. まとめです
  46. 46. まとめ • 現状使う必要はぶっちゃけ無い。興味ある人だけが使えば良い感じ。 ただ、データがまだまだ少ないので生け贄が必要 • 書きやすいかどうかで言えば、”まだ”書きやすいというだけでそこま で書きやすいものではない • モジュール自体はちゃんと分けられていて、その中身自体も”早さを求 める為に読みづらいコード” は少ないように見える
  47. 47. もう一回言います
  48. 48. 現状使う必要は無い ただ、自分は次の案件で提案してみる予定
  49. 49. 参考/引用資料 • 高速で綺麗なHTML5アプリケーションのためのフレームワーク Famo.usが完全無料に • Famo.us – WebGL/Canvasを使って高度な表現を可能にする JavaScriptフレームワーク • GitHub - Famous/generator-famous • GitHub - Famous/famous • Famo.usでオブジェクトを配置
  50. 50. ご清聴ありがとうございました。

×