KnockoutJS Japan User Groupのイベント「第1回 knockoutjsナイトセミナー@東京」の資料です。

1. KnockoutJSを使用した
アプリケーションの構築例
第1回 knockoutjsナイトセミナー@東京
1

2. 自己紹介
名前：瀬川 正和
所属：グレープシティ株式会社
職務：Wijmoプロダクトマネージャ
.NET製品のプロマネ経験あり
2

3. 株式ポートフォリオアプリ
3

4. 開発手法
MVVMパターン（KnockoutJS）
オブジェクト指向プログラミング
4

5. MVVMパターン
View
プレゼンテーションロジック
データの表示、ユーザー入力処理
Model
ビジネスロジック
データの加工、入出力
ViewModel
ViewとModelの橋渡し
データ連結、イベント処理
5

6. MVVMの利点
ユニットテストが容易
ビジネスロジックの再利用
複数デバイスへの対応
デザイナーとプログラマーの分業
.NETとの親和性が高い
MVVMはWPF/Silverlight用に考案
6

7. オブジェクト指向PG
ModelとVMを分離するのに有効
JavaScriptはクラスに非対応
関数を使用して擬似的にクラスなどを定義
7

8. オブジェクト指向PGの例
// Companyクラス
// コンストラクタ
function Company(viewModel, symbol, name) {
// プロパティ
this.viewModel = viewModel;
...
}
// メソッド
Company.prototype.updatePrices = function () {
...
}
// クラスインスタンスを生成
var c = new Company(...);
8

9. TypeScriptの例
// Companyクラス
class Company {
// プロパティ
viewModel: ViewModel;
// コンストラクタ
constructor (viewModel: ViewModel, ...) {
this.viewModel = viewModel;
}
// メソッド
updatePrices() {
...
}
}
// クラスインスタンスを生成
var c = new Company(...);
9

10. ポートフォリオアプリの実装
10

11. 主な機能
株式情報の表示
所有株式の損益の計算
銘柄の追加と削除
株価チャートの表示
データの自動保存
11

12. ポートフォリオアプリの紹介
Demo
12

13. MVVMの構成
Model
VM
View
Webサービス
UIイベント
データ連結 データ連結 データ取得
13
データ処理

14. クラス図
ViewModel
株式一覧
チャートスタイル
チャートの開始日
：
Portfolio
新しい銘柄
銘柄を追加可能か
PortfolioItem
前日の株価
前日比
損益
評価額
：
CompanyChartSeries
X値
Y値
ラベル
銘柄名
銘柄コード
株価
：
14

15. View
15
table
Chart
AutoComplete button

16. 実装コード
16

17. テーブルセル
<td data-bind="text: Globalize.format(gainPercent(), 'p2'),
style: { color: $root.getAmountColor(gainPercent()) }">
</td>
↓
<td style="color: #279972;">31.71 %</td>
...
<td style="color: #D84874;">-7.78 %</td>
17
textとstyleのバインディング

18. テーブル行
<table>
<tbody data-bind="foreach: portfolio.items">
<tr data-bind="style: { backgroundColor: chart() ?
'#fcfcf0' : 'transparent' }">
↓
<table>
<tbody>
<tr style="background-color: #fcfcf0;">...</tr>
<tr style="background-color: #fcfcf0;">...</tr>
<tr style="background-color: transparent;">...</tr>
<tr style="background-color: transparent;">...</tr>
18
foreachバインディングによる配列の連結

19. autocomplete
<script>
$(function() {
$("#autoComplete").autocomplete({
source: ...,
close: ...
});
});
</script>
<input id="autoComplete">
19
jQuery UIの通常の使用方法

20. autocomplete
<input id="autoComplete" data-bind="
value: portfolio.newSymbol,
jqueryui: {
widget: 'autocomplete',
options: {
source: ...,
close: ...
}
}" type="text" />
20
knockout-jquery-ui-widget.jsを使用する方法

21. チャート
<div id="chart" data-bind="
wijlinechart: {
seriesList: chartSeries,
seriesStyles: chartStyles,
seriesHoverStyles: chartHoverStyles,
axis: {
y: { annoFormatString : 'p0' },
x: { annoFormatString : 'dd-MMM-yy' }
}
}">
</div>
21
Viewでウィジェットを設定

22. 削除ボタン
<td><a data-bind="click: $root.portfolio.removeItem">x
</a></td>
Portfolio.prototype.removeItem = function (item) {
var p = item.portfolio;
var index = p.items.indexOf(item);
// 銘柄を削除します。
p.items.splice(index, 1);
}
22
clickバインディングによるイベントハンドラの定義

23. 追加ボタン
<button data-bind="
click: function() {
portfolio.addNewSymbol()
},
enable: portfolio.canAddNewSymbol">
...</button>
Portfolio.prototype.addNewSymbol = function () {
var item = new PortfolioItem(this, this.newSymbol());
// 銘柄を追加します。
this.items.push(item);
// 追加ボタンを無効にします。
this.canAddNewSymbol(false);
}
23
イベントハンドラとenableのバインディング

24. 追加ボタン
function Portfolio(viewModel) {
this.newSymbol = ko.observable("");
// newSymbolが変更されたときの処理を定義します。
this.newSymbol.subscribe(function () {
self.newSymbolChanged()
});
}
Portfolio.prototype.newSymbolChanged = function () {
if (newCompany == null) {
this.canAddNewSymbol(false);
return;
}
...
// 証券コードが有効の場合は、追加ボタンを有効にします。
this.canAddNewSymbol(true);
}
24
Observable変数の変更通知処理

25. ポートフォリオの保存
// 保存するオブジェクトを設定します。
var items = [];
for (var i = 0; i < this.items().length; i++) {
var item = this.items()[i];
var newItem = {
symbol: item.symbol,
chart: item.chart(),
shares: item.shares(),
unitCost: item.unitCost()
};
items.push(newItem);
}
// オブジェクトをJSONに変換して、ローカルストレージに保存します。
localStorage["items"] = JSON.stringify(items);
25
ローカルストレージの保存とJSONデータ変換

26. ポートフォリオの読み込み
// ローカルストレージからJSONデータを読み込みます。
var items = localStorage["items"];
// JSONデータをオブジェクトに変換します。
items = JSON.parse(items);
// ポートフォリオデータを設定します。
for (var i = 0; i < items.length; i++) {
var item = items[i];
this.addItem(item.symbol, item.chart, item.shares,
item.unitCost);
}
26
ローカルストレージの読み込みとJSONデータ変換

27. Webサービスの呼び出し
// Webサービスを呼び出して、TSVデータを解析します。
$.get("StockInfo.ashx", function (result) {
var lines = result.split("r");
for (var i = 0; i < lines.length; i++) {
var items = lines[i].split("t");
if (items.length == 2) {
// 会社情報を追加します。
var c = new Company(self, $.trim(items[0]),
$.trim(items[1]));
self.companies.push(c);
}
}
});
27
TSVデータの読み込みと設定

28. Wijmo（ウィジモ）
http://wijmo.c1.grapecity.com/
40種類以上のウィジェットを収録
SpreadJS：Excelライクな操作性
Input：日本仕様の入力
チャート、HTMLエディタ、etc
KnockoutJSをサポート
ポートフォリオアプリなどのサンプルを公開中
28

29. 参考情報
本セミナーのスライド
本セミナーの詳細なPDF資料
http://wijmo.c1.grapecity.com/
→技術情報
ありがとうございました
29