SlideShare a Scribd company logo
1 of 29
KnockoutJSを使用した
アプリケーションの構築例
第1回 knockoutjsナイトセミナー@東京
1
自己紹介
名前:瀬川 正和
所属:グレープシティ株式会社
職務:Wijmoプロダクトマネージャ
.NET製品のプロマネ経験あり
2
株式ポートフォリオアプリ
3
開発手法
MVVMパターン(KnockoutJS)
オブジェクト指向プログラミング
4
MVVMパターン
View
プレゼンテーションロジック
データの表示、ユーザー入力処理
Model
ビジネスロジック
データの加工、入出力
ViewModel
ViewとModelの橋渡し
データ連結、イベント処理
5
MVVMの利点
ユニットテストが容易
ビジネスロジックの再利用
複数デバイスへの対応
デザイナーとプログラマーの分業
.NETとの親和性が高い
MVVMはWPF/Silverlight用に考案
6
オブジェクト指向PG
ModelとVMを分離するのに有効
JavaScriptはクラスに非対応
関数を使用して擬似的にクラスなどを定義
7
オブジェクト指向PGの例
// Companyクラス
// コンストラクタ
function Company(viewModel, symbol, name) {
// プロパティ
this.viewModel = viewModel;
...
}
// メソッド
Company.prototype.updatePrices = function () {
...
}
// クラスインスタンスを生成
var c = new Company(...);
8
TypeScriptの例
// Companyクラス
class Company {
// プロパティ
viewModel: ViewModel;
// コンストラクタ
constructor (viewModel: ViewModel, ...) {
this.viewModel = viewModel;
}
// メソッド
updatePrices() {
...
}
}
// クラスインスタンスを生成
var c = new Company(...);
9
ポートフォリオアプリの実装
10
主な機能
株式情報の表示
所有株式の損益の計算
銘柄の追加と削除
株価チャートの表示
データの自動保存
11
ポートフォリオアプリの紹介
Demo
12
MVVMの構成
Model
VM
View
Webサービス
UIイベント
データ連結 データ連結 データ取得
13
データ処理
クラス図
ViewModel
株式一覧
チャートスタイル
チャートの開始日
:
Portfolio
新しい銘柄
銘柄を追加可能か
PortfolioItem
前日の株価
前日比
損益
評価額
:
CompanyChartSeries
X値
Y値
ラベル
銘柄名
銘柄コード
株価
:
14
View
15
table
Chart
AutoComplete button
実装コード
16
テーブルセル
<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のバインディング
テーブル行
<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バインディングによる配列の連結
autocomplete
<script>
$(function() {
$("#autoComplete").autocomplete({
source: ...,
close: ...
});
});
</script>
<input id="autoComplete">
19
jQuery UIの通常の使用方法
autocomplete
<input id="autoComplete" data-bind="
value: portfolio.newSymbol,
jqueryui: {
widget: 'autocomplete',
options: {
source: ...,
close: ...
}
}" type="text" />
20
knockout-jquery-ui-widget.jsを使用する方法
チャート
<div id="chart" data-bind="
wijlinechart: {
seriesList: chartSeries,
seriesStyles: chartStyles,
seriesHoverStyles: chartHoverStyles,
axis: {
y: { annoFormatString : 'p0' },
x: { annoFormatString : 'dd-MMM-yy' }
}
}">
</div>
21
Viewでウィジェットを設定
削除ボタン
<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バインディングによるイベントハンドラの定義
追加ボタン
<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のバインディング
追加ボタン
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変数の変更通知処理
ポートフォリオの保存
// 保存するオブジェクトを設定します。
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データ変換
ポートフォリオの読み込み
// ローカルストレージから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データ変換
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データの読み込みと設定
Wijmo(ウィジモ)
http://wijmo.c1.grapecity.com/
40種類以上のウィジェットを収録
SpreadJS:Excelライクな操作性
Input:日本仕様の入力
チャート、HTMLエディタ、etc
KnockoutJSをサポート
ポートフォリオアプリなどのサンプルを公開中
28
参考情報
本セミナーのスライド
本セミナーの詳細なPDF資料
http://wijmo.c1.grapecity.com/
→技術情報
ありがとうございました
29

More Related Content

What's hot

Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Akira Inoue
 
ライオンでも分かるVuejs
ライオンでも分かるVuejsライオンでも分かるVuejs
ライオンでも分かるVuejs
lion-man
 
Flux react現状確認会
Flux react現状確認会Flux react現状確認会
Flux react現状確認会
VOYAGE GROUP
 

What's hot (20)

基礎から見直す ASP.NET MVC の単体テスト自動化方法 ~ Windows Azure 関連もあるかも~
基礎から見直す ASP.NET MVC の単体テスト自動化方法 ~ Windows Azure 関連もあるかも~基礎から見直す ASP.NET MVC の単体テスト自動化方法 ~ Windows Azure 関連もあるかも~
基礎から見直す ASP.NET MVC の単体テスト自動化方法 ~ Windows Azure 関連もあるかも~
 
Moq & Fakes Framework を使った実践的ユニットテスト - BuildInsider
Moq & Fakes Framework を使った実践的ユニットテスト - BuildInsiderMoq & Fakes Framework を使った実践的ユニットテスト - BuildInsider
Moq & Fakes Framework を使った実践的ユニットテスト - BuildInsider
 
~初心者がこれから Web アプリの開発をするために~
~初心者がこれから Web アプリの開発をするために~~初心者がこれから Web アプリの開発をするために~
~初心者がこれから Web アプリの開発をするために~
 
Windows ストアアプリのgrid viewを入門してみた
Windows ストアアプリのgrid viewを入門してみたWindows ストアアプリのgrid viewを入門してみた
Windows ストアアプリのgrid viewを入門してみた
 
簡単AngularJS(関西AngularJS勉強会)
簡単AngularJS(関西AngularJS勉強会)簡単AngularJS(関西AngularJS勉強会)
簡単AngularJS(関西AngularJS勉強会)
 
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
ASP.NET MVC と jQuery で実践する標準志向 Web 開発ASP.NET MVC と jQuery で実践する標準志向 Web 開発
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
 
T35 ASP.NET MVCを使ったTDD入門
T35 ASP.NET MVCを使ったTDD入門T35 ASP.NET MVCを使ったTDD入門
T35 ASP.NET MVCを使ったTDD入門
 
jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発
 
GUI アプリケーションにおける MVC
GUI アプリケーションにおける MVCGUI アプリケーションにおける MVC
GUI アプリケーションにおける MVC
 
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
 
ライオンでも分かるVuejs
ライオンでも分かるVuejsライオンでも分かるVuejs
ライオンでも分かるVuejs
 
【日本語版】Styler: Our Journey to GCP
【日本語版】Styler: Our Journey to GCP【日本語版】Styler: Our Journey to GCP
【日本語版】Styler: Our Journey to GCP
 
Vue.js入門
Vue.js入門Vue.js入門
Vue.js入門
 
Djangoとは
DjangoとはDjangoとは
Djangoとは
 
チュートリアルではじめるVue.js
チュートリアルではじめるVue.jsチュートリアルではじめるVue.js
チュートリアルではじめるVue.js
 
Flux react現状確認会
Flux react現状確認会Flux react現状確認会
Flux react現状確認会
 
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へJavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
 
MvcのFatモデルに立ち向かう
MvcのFatモデルに立ち向かうMvcのFatモデルに立ち向かう
MvcのFatモデルに立ち向かう
 
ASP.NET MVC プログラミング入門の入門
ASP.NET MVC プログラミング入門の入門ASP.NET MVC プログラミング入門の入門
ASP.NET MVC プログラミング入門の入門
 
3分でわかるangular js
3分でわかるangular js3分でわかるangular js
3分でわかるangular js
 

Viewers also liked

Knockout bindings
Knockout bindingsKnockout bindings
Knockout bindings
Go Tanaka
 
とりあえずAngular jsを導入してみませんか
とりあえずAngular jsを導入してみませんかとりあえずAngular jsを導入してみませんか
とりあえずAngular jsを導入してみませんか
Kenji Ono
 
Office365 api dev_20140624
Office365 api dev_20140624Office365 api dev_20140624
Office365 api dev_20140624
Seiji Noro
 
Hosonhao
HosonhaoHosonhao
Hosonhao
A3N8X
 
7Jpros : Conservation partagée en médecine et animation du réseau francilien ...
7Jpros : Conservation partagée en médecine et animation du réseau francilien ...7Jpros : Conservation partagée en médecine et animation du réseau francilien ...
7Jpros : Conservation partagée en médecine et animation du réseau francilien ...
CTLes
 

Viewers also liked (15)

Knockout bindings
Knockout bindingsKnockout bindings
Knockout bindings
 
2014 03-15-kojskansai-2nd-public
2014 03-15-kojskansai-2nd-public2014 03-15-kojskansai-2nd-public
2014 03-15-kojskansai-2nd-public
 
Knockout を用いた大規模 JavaScript 開発
Knockout を用いた大規模 JavaScript 開発Knockout を用いた大規模 JavaScript 開発
Knockout を用いた大規模 JavaScript 開発
 
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
 
とりあえずAngular jsを導入してみませんか
とりあえずAngular jsを導入してみませんかとりあえずAngular jsを導入してみませんか
とりあえずAngular jsを導入してみませんか
 
HTML5 conference 2013
HTML5 conference 2013HTML5 conference 2013
HTML5 conference 2013
 
Office365 api dev_20140624
Office365 api dev_20140624Office365 api dev_20140624
Office365 api dev_20140624
 
JavaScript GIS ライブラリ turf.js 入門
JavaScript GIS ライブラリ turf.js 入門JavaScript GIS ライブラリ turf.js 入門
JavaScript GIS ライブラリ turf.js 入門
 
Leaflet.js超入門
Leaflet.js超入門Leaflet.js超入門
Leaflet.js超入門
 
Cesiumを用いた3次元リアルタイムデータの可視化について
Cesiumを用いた3次元リアルタイムデータの可視化についてCesiumを用いた3次元リアルタイムデータの可視化について
Cesiumを用いた3次元リアルタイムデータの可視化について
 
オープンデータとオープンソースGisを用いたweb上でのインタラクティブ可視化手法について
オープンデータとオープンソースGisを用いたweb上でのインタラクティブ可視化手法についてオープンデータとオープンソースGisを用いたweb上でのインタラクティブ可視化手法について
オープンデータとオープンソースGisを用いたweb上でのインタラクティブ可視化手法について
 
Tarea sesion 3
Tarea sesion 3Tarea sesion 3
Tarea sesion 3
 
Hosonhao
HosonhaoHosonhao
Hosonhao
 
New teanabrochure combine
New teanabrochure combineNew teanabrochure combine
New teanabrochure combine
 
7Jpros : Conservation partagée en médecine et animation du réseau francilien ...
7Jpros : Conservation partagée en médecine et animation du réseau francilien ...7Jpros : Conservation partagée en médecine et animation du réseau francilien ...
7Jpros : Conservation partagée en médecine et animation du réseau francilien ...
 

Similar to KnockoutJSを使用したアプリケーションの構築例

わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
normalian
 
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
Akira Inoue
 

Similar to KnockoutJSを使用したアプリケーションの構築例 (20)

MAF2013 Enterprise Windows 8 – Architecture for rapid development of WinRT apps
MAF2013 Enterprise Windows 8 – Architecture for rapid development of WinRT appsMAF2013 Enterprise Windows 8 – Architecture for rapid development of WinRT apps
MAF2013 Enterprise Windows 8 – Architecture for rapid development of WinRT apps
 
MVVM入門
MVVM入門MVVM入門
MVVM入門
 
サービス開発における工程
サービス開発における工程サービス開発における工程
サービス開発における工程
 
レガシー Web からの脱却 ~ 開発者が次に目指すべき Web アプリの姿とは?
レガシー Web からの脱却 ~ 開発者が次に目指すべき Web アプリの姿とは?レガシー Web からの脱却 ~ 開発者が次に目指すべき Web アプリの姿とは?
レガシー Web からの脱却 ~ 開発者が次に目指すべき Web アプリの姿とは?
 
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイル
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイルVisual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイル
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイル
 
Solution semniar vs2013_multi_device-1209-new
Solution semniar vs2013_multi_device-1209-newSolution semniar vs2013_multi_device-1209-new
Solution semniar vs2013_multi_device-1209-new
 
『これからの.NETアプリケーション開発』セミナー .NET用アプリケーション フレームワーク Open 棟梁 概説
『これからの.NETアプリケーション開発』セミナー .NET用アプリケーション フレームワーク Open 棟梁 概説『これからの.NETアプリケーション開発』セミナー .NET用アプリケーション フレームワーク Open 棟梁 概説
『これからの.NETアプリケーション開発』セミナー .NET用アプリケーション フレームワーク Open 棟梁 概説
 
デスクトップ アプリ開発における Visual Studio の進化
デスクトップ アプリ開発における Visual Studio の進化デスクトップ アプリ開発における Visual Studio の進化
デスクトップ アプリ開発における Visual Studio の進化
 
Open Hybrid Cloudを検討すべき理由.pdf
Open Hybrid Cloudを検討すべき理由.pdfOpen Hybrid Cloudを検討すべき理由.pdf
Open Hybrid Cloudを検討すべき理由.pdf
 
AIビジネスクリエーションワークショップ@東京
AIビジネスクリエーションワークショップ@東京AIビジネスクリエーションワークショップ@東京
AIビジネスクリエーションワークショップ@東京
 
.NET 最新ロードマップと今押さえておきたい技術要素
.NET 最新ロードマップと今押さえておきたい技術要素.NET 最新ロードマップと今押さえておきたい技術要素
.NET 最新ロードマップと今押さえておきたい技術要素
 
[GrapeCity Web TECH FORUM 2018]グレープシティJavaScript製品のご紹介 活用のコツと開発のポイント
[GrapeCity Web TECH FORUM 2018]グレープシティJavaScript製品のご紹介 活用のコツと開発のポイント[GrapeCity Web TECH FORUM 2018]グレープシティJavaScript製品のご紹介 活用のコツと開発のポイント
[GrapeCity Web TECH FORUM 2018]グレープシティJavaScript製品のご紹介 活用のコツと開発のポイント
 
Ignite UI 2012 最新情報 jQuery Mobile 編
Ignite UI 2012 最新情報 jQuery Mobile 編Ignite UI 2012 最新情報 jQuery Mobile 編
Ignite UI 2012 最新情報 jQuery Mobile 編
 
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
 
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
 
Net advantage 2012 volume2 最新情報 xaml プラットフォーム編
Net advantage 2012 volume2 最新情報 xaml プラットフォーム編Net advantage 2012 volume2 最新情報 xaml プラットフォーム編
Net advantage 2012 volume2 最新情報 xaml プラットフォーム編
 
Team Foundation Server ~ 今を生きるエンジニアのための開発基盤とは 【BPStudy #63】
Team Foundation Server ~ 今を生きるエンジニアのための開発基盤とは 【BPStudy #63】 Team Foundation Server ~ 今を生きるエンジニアのための開発基盤とは 【BPStudy #63】
Team Foundation Server ~ 今を生きるエンジニアのための開発基盤とは 【BPStudy #63】
 
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイル
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイルVisual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイル
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイル
 
Ms retail update ra 20191030
Ms retail update ra 20191030Ms retail update ra 20191030
Ms retail update ra 20191030
 
市場動向並びに弊社製品の今後の展望について
市場動向並びに弊社製品の今後の展望について市場動向並びに弊社製品の今後の展望について
市場動向並びに弊社製品の今後の展望について
 

Recently uploaded

Recently uploaded (7)

業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
 
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
 
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
 
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
 

KnockoutJSを使用したアプリケーションの構築例

Editor's Notes

  1. JSON.stringifyを使用して、保存する4つのデータをJSONデータに変換して、ローカルストレージに保存 この処理はwindow.unloadで実行される