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.

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

22,993 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. ご清聴 ありがとうございました!

×