ヌーラボのサービス開発の裏側公開しちゃいます

21,543 views
21,367 views

Published on

BPStudy#72
http://connpass.com/event/3113/

Published in: Technology

ヌーラボのサービス開発の裏側公開しちゃいます

  1. 1. 2013/08/28 BPStudy#72 Tomonari NAKAMURA ヌーラボのサービス開発の 裏側公開しちゃいます
  2. 2. 自己紹介 •中村知成 (@ikikko) •株式会社ヌーラボ •日本Jenkinsユーザ会 ・趣味:ピアノ ・推しメン:さっしー
  3. 3. アジェンダ • ヌーラボのサービスの概要 • ヌーラボのサービス開発を支える技術:インフラ編 • ヌーラボのサービス開発を支える技術:アプリ編 • まとめ
  4. 4. •  •  •  約16万ユーザ
  5. 5. •  •  約93万ユーザ • Google の各種サービス ( Google Apps, Google Drive, Google+ Hangouts ) との連携 自社のサービスに Cacoo の作図機能を組み込める Cacoo SDK エディション も提供!
  6. 6. ・ヌーラボのサービスと蜜に連携できることを目標に ・まとめ機能 の提供で、あとから容易に参照可能 ・開発者の皆さんにも利用してもらえるよう、API も公開予定 現在 プレビューベータ として、順次招待中! 興味がある方はぜひ typetalk.in から登録を!! チームでのチャットはもっと楽しくなれる
  7. 7. 開発体制 •各プロダクトごとにアプリ開発者2 4名ぐらい、 インフラ担当は2名 •言語はJavaベース、時々FlexとかScalaとか •裏側は割と自由、Perl / Python が多いかな
  8. 8. プロジェクト管理ツール「Backlog」とドロ ーイングツール「Cacoo」は、ともにヌーラ ボが提供しているWebサービスです。 Backlogは国内を中心に10万人以上、Cacoo は世界中で60万人以上のユーザが利用してい ます。どちらのサービスも、その使い勝手の 良さ、敷居の低さには定評があります。ヌー ラボという福岡に本拠地を置く小さな会社 が、なぜこのような成功を収めることができ ているのか。本特集では、その秘訣を余すと ころなく大公開します。
  9. 9. プロセス的なおはなし http://www.slideshare.net/ikikko/backlogcacoo
  10. 10. 技術要素的なおはなし •今日は割と技術的な要素について話そうかと •ところで、今は色々面白そうな技術とか、便利そ うなツールとか出てきてますね •「これ使ったらどんなにスマートに実装できるん だろう?」「どんなに楽できるんだろう?」と か、夢が膨らみますよね
  11. 11. 思ってるだけじゃ いつまでたってもできないよ
  12. 12. 技術要素的なおはなし •いいものはいいと思ってても、きっかけがないと なかなか踏み出せない •きっかけは何だったのか、どういう使い方をして いるのかについて、ヌーラボの導入事例を紹介
  13. 13. アジェンダ • ヌーラボのサービスの概要 •ヌーラボのサービス開発を支える技術:インフラ編 • ヌーラボのサービス開発を支える技術:アプリ編 • まとめ
  14. 14. 年表(インフラ編)
  15. 15. AWS •まあ、細かい説明は・・・不要ですよね
  16. 16. AWS 導入前
  17. 17. AWS 導入後
  18. 18. 移行のきっかけ •  :容量増加対応に伴って、ディスク構成を柔軟に管 理できる必要性(EBS バンザイ) •  :商用サービス化に伴う、全世界中からのアクセス に対応(Cloudfront バンザイ) AWS 改善されたこと • インフラ構成を柔軟に変更できるようになった • 世界から利用されるサービスを構築しやすくなった
  19. 19. Fabric •Python製のデプロイツール •複数サーバに対して、同時にコマンドを発行可能
  20. 20. Fabric @task @roles(‘app’) def  all_release():        sudo(“service  tomcat  stop”)        put(“new.war”,”/tmp/new.war”)        run(“cp  –p  /tmp/new.war  /webapps/ROOT.war”)        sudo(“service  tomcat  start”) $  fab  app.all_release $  scp  new.war  app:/tmp/new.war $  ssh  app ... $  sudo  service  tomcat  stop $  cp  –p  /tmp/new.war  /webapps/ROOT.war $  sudo  service  tomcat  start タスクの定義 タスクの実行
  21. 21. Fabric 移行前
  22. 22. Fabric 移行後
  23. 23. 導入のきっかけ •  :Google+ Hangouts 対応時、対応期間が短かく 検証用環境を何度も構築する必要有り Fabric 改善されたこと • サーバが増えても、だいぶつらくなくなった • 属人的な作業が少なくなった
  24. 24. Ansible •Python製のサーバ構成管理ツール •何度実行しても結果は同じ(冪等性) •サーバ側はsshdだけで大丈夫
  25. 25. Ansible 導入前
  26. 26. Ansible 導入後
  27. 27. 導入のきっかけ •  :手作業でのサーバ構成・管理に限界を感じていた タイミングで、新サービス立ち上げに合わせてサーバ 構成管理ツールを試すことに Ansible 改善されるだろうこと • 同じ構成のサーバをすぐに立ち上げやすくなった • サーバの現状が把握しやすくなった
  28. 28. serverspec •RSpec風のサーバ構成管理のテストツール •Chef / Puppet / Ansible などの構成管理ツール に依存しない
  29. 29. アジェンダ • ヌーラボのサービスの概要 • ヌーラボのサービス開発を支える技術:インフラ編 •ヌーラボのサービス開発を支える技術:アプリ編 • まとめ
  30. 30. 年表(アプリ編)
  31. 31. Knockout •MVVM を実現する、JavaScriptのライブラリ •リッチなUIを、シンプルなコードで実現 • 詳しくは => 完敗だぜ!Knockoutでノックアウト
  32. 32. Knockout <div  id="issuecard">        <span  class="summary"  data-­‐bind="text:  summary"></span>        <span  class="description"></span> </div> var  vm  =  {        summary:  ko.observable('')        }; ko.applyBindings(vm); vm.summary('newValue'); <div  id="issuecard">        <span  class="summary"></span>        <span  class="description"></span> </div> jQuery('#issuecard  .summary').text('newValue'); Knockout JQuery
  33. 33. 導入のきっかけ • : まとめて操作 機能で、今まで以上にリッチ なUIが求められた Knockout 改善されたこと • JSでリッチなUIを実現できるようになった • JQueryで行っていたDOMの操作が不要となった
  34. 34. Knockout
  35. 35. Knockout ViewとModelを分割できて 見通しがいいコードに
  36. 36. Jasmine / Haxe •Jasmine : JavaScript のテストフレームワーク •Haxe : 静的型付けのオブジェクト指向言語で、 JavaScriptへ変換可能 JavaScript のメンテがつらく なってきた… <- イマココ
  37. 37. Compass ( Sass ) •Sass : CSS を生成するメタ言語で、変数の定義 やセレクタのネスト・継承ができる •Compass:Sass を強化したフレームワークで、 ベンダープレフィックスなどを簡単に定義できる
  38. 38. 導入のきっかけ • : テーマ機能 で、色やデザインなどCSSの効 率的な管理が求められた Compass ( Sass ) 改善されたこと •CSSの効率的な管理ができるようになった   (現在:65テーマ!)
  39. 39. Compass ( Sass )
  40. 40. Compass ( Sass ) //  Dashboard  color //  =============== $sectionBorder:  #4E99F0; $sectionTtlTop:  #4D9EFF; $sectionTtlBtm:  #1392FF; ... @charset  "utf-­‐8"; //  Color  List @import  "colors"; ... //  Dashboard  color //  =============== $sectionBorder:  #923944; $sectionTtlTop:  #333333; $sectionTtlBtm:  #4411FF; ... //  Dashboard  color //  =============== $sectionBorder:  #7DA700; $sectionTtlTop:  #93C400; $sectionTtlBtm:  #7CA600; ...
  41. 41. Grunt •Node.js製のビルドツール •Sassファイルのコンパイルや、Jasmineでのテス トなどを一元化して、ファイル更新と同時に実行
  42. 42. Grunt
  43. 43. 導入のきっかけ • :各種ツールがあちこちに分散し、かつ自動化 されてなかったので、作業漏れが発生していた Grunt 改善されたこと • 作業漏れがなくなった • ひとまず、Gruntfile.jsファイルを見ればよくなった
  44. 44. あまり効果が出てない… •カバレッジ •ブラウザテスト
  45. 45. アジェンダ • ヌーラボのサービスの概要 • ヌーラボのサービス開発を支える技術:インフラ編 • ヌーラボのサービス開発を支える技術:アプリ編 •まとめ
  46. 46. まとめ •ヌーラボが取り組んできたことを、インフラ/アプ リと分けて紹介してきました •技術アンテナは常にはりつつ、けれど、手段が目 的化しないように •いけそうならば、ちょっとずつでも組み込んでみ る
  47. 47. ご清聴 ありがとうございました!

×