エンジニア勉強会_DECIDE

Copyright © 2013 by S-cubism Inc. All rights reserved. 1PageCopyright © 2014 by S-cubism Technology Inc. All rights reserved.
エンジニア勉強会 2014/07/25 Koki Morii
× techs

Copyright © 2014 by S-cubism Technology Inc. All rights reserved. 2Page
今日の内容
DECIDEで使ってるツールの紹介
DECIDEのインフラとサービス
オムニ×DECIDE

DECIDE
以後、省略

 なにこれ？
皆さんご存知、フロントエンド開発を爆速にし
てくれるデザインフレームワークです。
 どう使う？
ひたすらにサンプルを漁る。
標準で大体レスポンシブに対応してくれている
ので、マルチデバイス対応がとても簡単です。
Bootstrap
http://getbootstrap.com/
<div id="page-wrapper">
<div class="row" id="page-main">
<div class="col-lg-9">


<div data-bind="fadeVisible:scenario_view">
<div class="bs-callout bs-callout-info">
<h2>シナリオ概要設定<small>シナリオの名前や説明を入力してください。</small></h2>
</div>
<div class="form-group">
<div data-bind="validationMessage: scenario_title_val" class="alert alert-danger"></div>
<label>シナリオタイトル</label>
<input type="text" class="form-control" maxlength="1024" placeholder="例）商品購入10日後にクーポンプレゼントメール送付" data-bind="value:scenario_title_val">
</div>

Knockout.js
http://knockoutjs.com/
 なにこれ？
フロントサイドのjavascriptフレームワークです。
ユーザの操作や通信によるデータの変化を動的にビュ
ーに反映してくれます。
 どう使う？
------ View ------
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
------ View Model ------
function AppViewModel() {
this.firstName = "Bert";
this.lastName = "Bertington";
}
// Activates knockout.js
ko.applyBindings(new AppViewModel());

font-awesome
http://fortawesome.github.io/Font-Awesome/icons/ なにこれ？
WEBで使えるアイコンのセットです。CSSベー
スなのでHTMLタグで設置します。
 どう使う？
<i class="fa fa-code-fork"></i>

select2
http://ivaynberg.github.io/select2/ なにこれ？
セレクタ系の超絶ユーティリティなツールです
。ドロップダウン、検索、複数選択なんでもござ
れです。jsです。
 どう使う？

Underscore.js
http://underscorejs.org/ なにこれ？
リストとか配列とか文字列とかをいい具合にオ
ペレーションしてくれる王道ツール。Jsです。
underscore = _ （インスタンス）
 どう使う？
_.each([1, 2, 3], function(num){
console.log(num);
});
// 1
// 2
// 3
走査、除外、追加、ソート、ランダム、結合、検索、最大、最小
平均、カウント、サイズ、マージ
ほぼ何でも叶えてくれると思ってOKです。

lo-dash
http://lodash.com/ なにこれ？
リストとか配列とか文字列とかをいい具合にオ
ペレーションしてくれるunderscoreのラッパ
Lo-Dash = _ （インスタンス）
 どう使う？
_.each([1, 2, 3], function(num){
console.log(num);
});
// 1
// 2
// 3
配列操作って作り方ミスるとメモリとか爆発するんですが
、その辺を最適化してくれているみたいです。
よって早いです。（モノによる）

Sugar.js
http://sugarjs.com/
 なにこれ？
スーパー日付ユーティリティです。
他にも文字列操作とかもできますが、日付が強いで
す。
特に、自然言語的に解析してくれる機能が豊富
です。
 どう使う？
Date.create('the beginning of this week')
Date.create('May 1987');
Date.create(1234567899999);
Date.create('25 years from now');
(5).daysBefore('Monday');
Date.create().format(‘{yyyy}-{MM}-{dd}’); // "2014-07-24"
ほぼ何でも叶えてくれると思ってOKです。

Moment.js
http://momentjs.com/
 なにこれ？
日付ユーティリティです。
こっちの方がメジャー？個人的にはSugar.jsが好き
です。
 どう使う？
moment().subtract('days', 10);
moment().startOf(‘day’).fromNow();

daterangepicker
https://github.com/dangrossman/bootstrap-daterangepicker
 なにこれ？
not datepicker,
daterangepicker!!
期間指定に特化したdatepickerです。Jsです。
プリセット決めれるのが良いです。
（最近一か月、先月、とか）
 どう使う？
使い勝手はdatepickerに近いです。
DECIDEでは、レポーティング期間や、
シナリオ実施期間とかで使ってます。

flot
http://www.flotcharts.org/ なにこれ？
グラフ描画ツールです。
折れ線、円、棒、アニメーション
もろもろ対応しています。Jsです。
 どう使う？

jsPlumb
http://jsplumbtoolkit.com/demo/home/dom.html
 なにこれ？
javascriptで制御する、オブジェクトの構造を可視
化するツールです。
階層構造、ツリー構造、有向グラフ、無向グラフ
この辺をいい具合に描画、操作してくれます。
 どう使う？
HTML：オブジェクトの配置（ノード）
js：関係の定義（エッジ）

Heatmap.js
http://www.patrick-wied.at/static/heatmapjs/
 なにこれ？
よくあるヒートマップ描画用ライブラリ。
jsです。
 どう使う？
重みと座標を指定して、あとはしきい値で色の
深さとかを指定して描画。
すいませんまだ使ってないです。
将来的には。。？

インフラとサービス
 mongoDB
– Replica Setによる冗長化
 SSL Accelerator on LB
 ESS（ニフクラメール配信サービス）
 Reverse Proxy (nginx)による案件毎環境の管理

オムニ×DECIDE

エンジニア勉強会_DECIDE

More Related Content

エンジニア勉強会_DECIDE