ヌーラボのサービス開発の裏側公開しちゃいます
- 1. 2013/08/28 BPStudy#72 Tomonari NAKAMURA ヌーラボのサービス開発の 裏側公開しちゃいます
- 3. アジェンダ • ヌーラボのサービスの概要 • ヌーラボのサービス開発を支える技術：インフラ編 • ヌーラボのサービス開発を支える技術：アプリ編 • まとめ
- 6. • • 約93万ユーザ • Google の各種サービス ( Google Apps, Google Drive, Google+ Hangouts ) との連携 自社のサービスに Cacoo の作図機能を組み込める Cacoo SDK エディション も提供！
- 7. ・ヌーラボのサービスと蜜に連携できることを目標に ・まとめ機能 の提供で、あとから容易に参照可能 ・開発者の皆さんにも利用してもらえるよう、API も公開予定 現在 プレビューベータ として、順次招待中！ 興味がある方はぜひ typetalk.in から登録を！！ チームでのチャットはもっと楽しくなれる
- 15. 年表（インフラ編）
- 17. AWS 導入前
- 18. AWS 導入後
- 19. 移行のきっかけ • ：容量増加対応に伴って、ディスク構成を柔軟に管 理できる必要性（EBS バンザイ） • ：商用サービス化に伴う、全世界中からのアクセス に対応（Cloudfront バンザイ） AWS 改善されたこと • インフラ構成を柔軟に変更できるようになった • 世界から利用されるサービスを構築しやすくなった
- 21. 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 タスクの定義 タスクの実行
- 22. Fabric 移行前
- 23. Fabric 移行後
- 24. 導入のきっかけ • ：Google+ Hangouts 対応時、対応期間が短かく 検証用環境を何度も構築する必要有り Fabric 改善されたこと • サーバが増えても、だいぶつらくなくなった • 属人的な作業が少なくなった
- 26. Ansible 導入前
- 27. Ansible 導入後
- 28. 導入のきっかけ • ：手作業でのサーバ構成・管理に限界を感じていた タイミングで、新サービス立ち上げに合わせてサーバ 構成管理ツールを試すことに Ansible 改善されるだろうこと • 同じ構成のサーバをすぐに立ち上げやすくなった • サーバの現状が把握しやすくなった
- 29. serverspec •RSpec風のサーバ構成管理のテストツール •Chef / Puppet / Ansible などの構成管理ツール に依存しない
- 31. 年表（アプリ編）
- 32. Knockout •MVVM を実現する、JavaScriptのライブラリ •リッチなUIを、シンプルなコードで実現 • 詳しくは => 完敗だぜ！Knockoutでノックアウト
- 33. 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
- 34. 導入のきっかけ • ： まとめて操作 機能で、今まで以上にリッチ なUIが求められた Knockout 改善されたこと • JSでリッチなUIを実現できるようになった • JQueryで行っていたDOMの操作が不要となった
- 35. Knockout
- 37. Jasmine / Haxe •Jasmine : JavaScript のテストフレームワーク •Haxe : 静的型付けのオブジェクト指向言語で、 JavaScriptへ変換可能 JavaScript のメンテがつらく なってきた… <- イマココ
- 38. Compass ( Sass ) •Sass : CSS を生成するメタ言語で、変数の定義 やセレクタのネスト・継承ができる •Compass：Sass を強化したフレームワークで、 ベンダープレフィックスなどを簡単に定義できる
- 39. 導入のきっかけ • ： テーマ機能 で、色やデザインなどCSSの効 率的な管理が求められた Compass ( Sass ) 改善されたこと •CSSの効率的な管理ができるようになった （現在：65テーマ！）
- 40. Compass ( Sass )
- 41. 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; ...
- 43. Grunt
- 46. アジェンダ • ヌーラボのサービスの概要 • ヌーラボのサービス開発を支える技術：インフラ編 • ヌーラボのサービス開発を支える技術：アプリ編 •まとめ
- 48. ご清聴 ありがとうございました！