藤田泰生(@mettoboshi) TIS株式会社
R&D部門にてフロントエンド技術調査などを実施
JavaScript, Rubyなどに取り組む
HTML5&OSS-DB Festival ~2014 Spring~
日時 2014年04月11日（金）
主催 LPI-Japan
Sier発のOSS公開事例
CloudConductorとは
目的
- システム設計、構築、運用における定型作業の自動化と機械化
- ハイブリッド・クラウド環境における自動プロビジョニング、自動拡張の実現
狙い
- システム設計、構築、運用におけるアジリティ
- ハイブリッド・クラウド活用による柔軟な設計
デザイン志向クラウドオーケストレーションソフトウェア CloudConductor
Webブラウザ上でGUIベースでテンプレートを用いてxmlを生成できる。（Visioなどで図を作成するイメージ）
生成したxmlをGitHubにコミットできる。
生成したxmlはOpenStackに食べさせて20-30分で環境を自動構築できる。
CloudConductor技術要素
クライアントサイド
jQuerym HTML5+CSS3, 各種jsライブラリ, Jasmine, Guard
サーバサイド
Ruby, openStack, Chef, AWS, rspec
その他
git, jenkins
HTML5仕様と周辺技術
W3CとQHAT TWGが本当のHTML5だけど、それだけではやりたいこと全ては実現できない。
→HTML5周辺技術やJavaScriptライブラリなどを組み合わせてWebアプリを作成
CloudConductorのアーキテクチャ
システムレイヤ内の「インフラ/方式設計パターン」、「システムパターン」部分をCloudConductor/makerとしている。
CloudConductor/maker部分のブラウザ上のものをHTML5を利用している。
backbone.js
- 現時点では一番実績のあるJavaScript MVXフレームワーク
- RESTfulなサーバとの連携が間t何
- UX系のライブラリと組み合わせることが多い
- Underscore.js(iodash)を利用
JavaScript Diagraminng Library (Joint.js)
- 図形やグラフを描画するライブラリ
- backbone.Modelを継承したインスタンスを元にSVGタグで図形を描画する。
- backbone.jsを内包
CloudConductor開発で起用した手法
- Guardでソース・テストコードを作成を監視
まとめ
HTML5時代のWebアプリは、周辺技術との組み合わせが重要
- いろいろ組み合わせるとハマったりするので、先行調査、周辺調査が大事！
- 開発の際には積極的に自動テストをしよう
- プロダクトは出来る限りOSS公開し、継続的にプロダクトを成長させよう
githut(@mettoboshi)にLOCAL環境でCloudConductorを作成するdockerfile上げておいたからみんな試してね！！