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.

20140529 JS Ojisan #2 LT あの「note」はAngular.js

1,985 views

Published on

20140529 JS Ojisan #2 LT あの「note」はAngular.js

Published in: Technology
  • Be the first to comment

20140529 JS Ojisan #2 LT あの「note」はAngular.js

  1. 1. JSオジサン #2 LT! あの「note」はAngular.js Shoei Takamaru (@takamario)
  2. 2. 自己紹介
  3. 3. Copyright © Piece of Cake, Inc. All Rights Reserved. Who are you? • 高丸 翔英 (たかまる しょうえい, @takamario)! • エンジニア (フロントエンドサイド寄り?)! • 2014年1月 ピースオブケイク入社 3
  4. 4. サービス紹介
  5. 5. Copyright © Piece of Cake, Inc. All Rights Reserved. Our Services • デジタルコンテンツ配信プラットフォーム
 Cakes (ケイクス) 2012年9月リリース
 https://cakes.mu/! ! • クリエイターと読者をつなげるサイト! ! • 週額150円 / 月額500円で全記事読み放題 5
  6. 6. Copyright © Piece of Cake, Inc. All Rights Reserved. Our Services • note (ノート) 2014年4月リリース
 https://note.mu/! • 個人でコンテンツが販売可能に 6
  7. 7. Copyright © Piece of Cake, Inc. All Rights Reserved. Got a lot of feedback • いろいろなメディアで取り上げていただきました • 1ヶ月で2,000万PV、100万UU 達成 • 売れる人の中には、月10万円ほど稼いでいる人も 7
  8. 8. Copyright © Piece of Cake, Inc. All Rights Reserved. Got a lot of feedback • リリース時に発生していたXSSが
 twitterで話題に (即日対応) • DM等で、ご連絡いただいた方、体 を張って試していただいた方、あり がとうございました • 「Angular 適切に使ってXSS発生す るの?」
 → しません、僕が適切に使ってま せんでした。。 8
  9. 9. Copyright © Piece of Cake, Inc. All Rights Reserved. Got a lot of feedback • 芸能人アカウントも続々 9 伊集院光さん ロンブー田村淳さんくるりさん GLAY HISASHIさん
  10. 10. noteの開発体制と システム構成
  11. 11. Copyright © Piece of Cake, Inc. All Rights Reserved. Our Dev Team and System • CTO (SGP) x 1 • エンジニア (JPN) x 3 (自分含む) • デザイナー (JPN) x 2 • iPhone App エンジニア (SGP) x 1 • and ディレクター (JPN) • Ruby on Rails + Angular.js + MySQL + Redis • AWS (Staging環境では Heroku も) • Github + HipChat + Jenkins 11
  12. 12. noteが起こした
 革新的アクション
  13. 13. その1
  14. 14. Copyright © Piece of Cake, Inc. All Rights Reserved. Used Angular.js Lavishly! • Rails (API) + Angular.js! • まずは、ソース開いてみてください (笑) • Batarang でデバッグ可能です
 https://chrome.google.com/webstore/detail/angularjs- batarang/ighdmehidhipcmcojjgiloacoafjmpfk 14 Angular.jsをふんだんに使った!
  15. 15. その2
  16. 16. Copyright © Piece of Cake, Inc. All Rights Reserved. IPv6 Only! (Mis-configuration…) • リリース後、会員登録 確認メールが届かない 事象が発生 • SPF レコードの設定が 間違ってました。。 • IPv6 だけで送ろうとし てました。。 16
  17. 17. その3
  18. 18. Copyright © Piece of Cake, Inc. All Rights Reserved. (3) Abandon IE! • だって、IEって危険ですもんね。 18 • もちろん、今後は対応予定です IEを斬った!
  19. 19. Angular Tips
  20. 20. Copyright © Piece of Cake, Inc. All Rights Reserved. OGP • Phantom JS で Angular を
 レンダリングする荒技 • が、OGP bot ごとに対応が必要 • 2段階で来るbotも。。 • サーバサイドで返すように修正 しました 20 Phantom JS (w/ cache)
  21. 21. Copyright © Piece of Cake, Inc. All Rights Reserved. Angular Tips - Scope • Scope を制するものは、Angular を制す (と思ってる) • qiita: Angular JS で複数のコントローラ間でモデル(状 態や値)を共有する方法 3 種類
 http://qiita.com/sunny4381/items/aeae1e154346b5cf6009 21 Scope
  22. 22. Copyright © Piece of Cake, Inc. All Rights Reserved. Share data between the scopes 22 Upper Controller Lower Controller Main Controller Event 遠く離れたスコープでも共有 可能、上書きの危険性もない ! JSっぽい ! 双方向のコードを書く必要が あるので、Angular ではあま り使わない方が良い http://plnkr.co/edit/ 7sD1JvA6TtKbkDBlZWLq?p=preview
  23. 23. Copyright © Piece of Cake, Inc. All Rights Reserved. Share data between the scopes 23 Upper Controller Lower Controller Main Controller Service 部品と部品をつなぐ ! DI するだけで使用可能 ! 結局グローバル変数と
 変わらない (上書き注意) http://plnkr.co/edit/ ajKnEz3jfMtpEG7aZ5kO?p=preview Service
  24. 24. Copyright © Piece of Cake, Inc. All Rights Reserved. Share data between the scopes 24 Upper Controller Lower Controller Main Controller Angular の機構を そのまま利用 ! Angular 推奨 ! 子は、親のスコープが見える ! http://plnkr.co/edit/ znYpEq4ibzUFIBSOwK2Y?p=preview ! http://plnkr.co/edit/ AxCPK6YrmTKsjhQtT8f1?p=preview Parent / Child Scope
  25. 25. Copyright © Piece of Cake, Inc. All Rights Reserved. Angular Tips - Reusability • いかに、再利用性を高めるか
 Controller だけだとつらい • コメント、Like、フォロー等々、いつどこに置くかもし れないものは Directive に • ただ、基本的な設計は、function の設計と変わらない
 (インターフェースが汎用的かどうか) 25 Directive / Service
  26. 26. Copyright © Piece of Cake, Inc. All Rights Reserved. Angular Tips - Libraries • angular-ui/bootstrap
 https://github.com/angular-ui/bootstrap • angular-ui/ui-router
 https://github.com/angular-ui/ui-router • danialfarid/angular-file-upload
 https://github.com/danialfarid/angular-file-upload 26
  27. 27. Copyright © Piece of Cake, Inc. All Rights Reserved. Angular Tips - Books • ng-book
 https://www.ng-book.com/ ! • AngularJSアプリケーション開発ガイド
 http://www.amazon.co.jp/dp/4873116678 27
  28. 28. Angular.jsを使って! 良かったこと/悪かったこと! まとめ
  29. 29. Copyright © Piece of Cake, Inc. All Rights Reserved. Pros/Cons of Angular.js • HTMLに命令を記載するので、デザイン変更があっても
 すぐに対応可能、デザイナーもHTMLの属性を移すだけ • Directive を使いこなせるようになれば、
 再利用性がよくなって、無敵、感動 • 学習コストはかなり高い、まだしっくりこない感じ • あんまり動作軽くない (特にスマホで見る場合は顕著) • 今後は、Web Components の時代なので、
 その前に一度 Angular.js をお試ししておくと良さそう 29
  30. 30. 最後に
  31. 31. Copyright © Piece of Cake, Inc. All Rights Reserved. In closing • ピースオブケイクではエンジニアを募集しています! • cakesとnoteを開発したいJavaScriptエンジニアさん大 募集!
 https://www.wantedly.com/projects/7198 • noteのiOS/Androidアプリをつくりたいエンジニアさん 大募集!
 https://www.wantedly.com/projects/7199 31
  32. 32. Thank you for listening!

×