1. Cloud Web Service = Smart Cloud
Dig（version3.2の追加機能）
Cloud Web Service
Existing Web Service
基幹系でApp Engineを掘る
Detastore
(bigtables)
memcache
Google Maps
Google Charts
gaedirect CRUD処理の etc
Memcache適用
Channel
blobstote security
gaedirect Google Maps
Channel Service gaedirect独自の
・Detastore 書込指定 マルチレベル
API JavaScript API etc
・durationMinutes指定 セキュリティ XHR/DOM
Googleアカウント jQuery
でサインイン ｊQuery-Mobile
Web Storage Mashup Geolocation
サイバースペース
Rich Client
CyberSpace Co,LTD Web Worker
清野 克行 Web SQL Drag & Drop
http://www.at21.net HTML5
1
superelmer21@gmail.com

2. 製造業での基幹系モジュール構成とテーブル類
顧客
マスタ
受注管理 売掛管理 販売 財務諸表
受注
（SO） トラン （AR） 仕訳
貸借対照表
（BS）
製品 製品
部品
在庫 マスタ 勘定科目
マスタ 勘定
で分類 損益計算書
マスタ
（PL）
部品 仕訳 総勘定
製造活動 データ
構成表 元帳
従業員 営業報告書
マスタ
仕掛品
購入品
在庫 仕訳入力
在庫
（Journal その他
Entry） 付随書類
購買管理 購買 買掛管理 購買
（PO） トラン （AP） 仕訳
ベンダ
マスタ
2

3. Dig No1
Cloud SQLとHTML5の連携を掘る
Cloud ・Cloud SQL
・Memcache
・Push Task
・Gson
--------------------------
Client ・Web Storage(HTML5)
・Web SQL Database(Indexed Database)
・Web Workers(HTML5)
・ｊQuery
・Ajax（Raw code）
3

4. Dig1 Cloud SQL , Memcacheを使用して仕訳データ入力
勘定マスタ 勘定マスタ 勘定マスタ
(Memcache） (Cloud SQL) (Cloud SQL)
[A]勘定マスタ読取り [B] 仕訳データ書込み
（Cloud SQL） (Cloud SQL)
[A]勘定科目名 [B] 仕訳データ送信
の表示 (非同期)
addJournal1.htm 4

5. Dig 1
App Engine上の勘定マスタのキー参照を、
１． MySQLをCloud SQL環境でアクセスする
２．Memcacheに書き込まれたデータをアクセスする
の２種類で行い、レスポンス速度を計測する。
結果
１．App Engineサーバプログラム（Java Beans）で計測した
アクセス速度では、Memcacheが圧倒的に速いが
２．Webクライアントで計測したレスポンスタイムでは
それほどの差はなくなっている。
結局、データアクセスで要する時間より、ネットワーク通信
で要する時間の方が、トータルのレスポンスタイムに影響す
る度合いが大きい。
5

6. 仕訳データ入力の処理手順
借方コード入力と
勘定科目名表示
貸方コード入力と
勘定科目名表示
仕訳データの入力完了と
データベース登録
6

7. （１）ストレージアクセス速度
App EngineのJava Beansから下記アクセスでデータ取得に要する時間
・MySQLに書き込まれた勘定マスタをCloud SQLでアクセス
・Memcacheに書き込まれた勘定マスタをMemcache APIでアクセス
=>Memcacheアクセスが圧倒的に速い！
第１回 第2回 第3回 第4回 第5回
Cloud SQL ストレージアクセス 428 72 53 53 52
memcache ストレージアクセス 3 2 2 3 3
単位ミリ秒
ミリ秒
7

8. （２）クライアントレスポンス速度
WebクライアントのJavaScriptから下記アクセスでデータ取得に要する時間
・MySQLに書き込まれた勘定マスタをCloud SQLでアクセス
・Memcacheに書き込まれた勘定マスタをMemcache APIでアクセス
=> memcacheを使用してもクライアントレスポンスでは差は縮まる
第１回 第2回 第3回 第4回 第5回
Cloud SQL クライアントアクセス 4781 594 385 507 482
memcache クライアントアクセス 4182 281 284 275 427
単位ミリ秒
8

9. http://www.rbbtoday.com/article/img/2013/01/29/102039/258737.html
Googleが改良版UDPとしてQUICというプロトコルを開発中（らしい）
Looks Like Google Is Working On A UDP Replacement Called QUIC
http://techcrunch.com/2013/02/22/looks-like-google-is-working-on-a-udp-replacement-called-quic/
9

10. Dig ２ Offline First！
勘定マスタのキー参照を、
１．Memcacheに書き込まれたデータを参照する
２．Web Storage (HTML5)に書き込まれたデータを参照する
の２種類で行い、レスポンス速度を計測する。この場合は
Webクライアント側での計測のみになる。
結果としては
App Engineサーバアクセスでは最速のMemcacheアクセス
より、Web Storageアクセスの方が圧倒的に速い。
特に、Web Storageアクセスではアクセス速度が１ミリ秒以下
の場合も多く、人間の感覚からは全くの同時になる。
結局、ネットワーク遅延の有るクラウドアクセスより Web
Storageのような、ローカルアクセスが圧倒的に有利である事
が明確になる。
10

11. Dig2 Cloud SQLとWeb Storageによる勘定名超高速表示
勘定マスタ 勘定マスタ
(Cloud SQL) (Cloud SQL)
[A]勘定マスタ読取り [C] 仕訳データ書込み
（Cloud SQL） (Cloud SQL)
[A]勘定マスタ書込み [C] 仕訳データ送信
（Web SQL） (非同期)
acctLocal.htm
[A]勘定科目のローカル
ストレージ書込み
addJournal2.htm
勘定科目マスタ [B]勘定科目名の表示
(Web Storage) 11

12. [パフォーマンス測定]
MemcacheとWeb StorageのWebクライアントレスポンス速度
=> Web Storage使用で圧倒的な高速レスポンス
第１回 第2回 第3回 第4回 第5回
Memcache クライアントアクセス 4182 281 284 275 427
Web Storage クライアントアクセス 1 1 0 1 0
単位ミリ秒
12

13. Examine Network latency
距離
・日本 サンフランシスコ 距離 5131 mi = 8257.3 km
・海底ケーブル
http://trendy.nikkeibp.co.jp/article/column/20091109/1030118/?rt=nocnt
全長9,600km 往復 19,200 km
Overhead 往復 800 km
-------------------------------------------------
合計 20,000 km
速度
光速 299 792.458 km/s
ガラス媒体中の高速度 -> 屈折率分の１の速度
ガラスの屈折率が1.5として、ガラス内での光速は200,000km/s
所要時間
従って 日本とUS西海岸での所要最短時間は
20,000 [km]/200,000[km/sec] = 0.1sec = 100ms
network latency最少でのmemcache Webクライアント最速タイム ≒ 103ms
=>理想環境で現実にはあり得ない
=>Web Storageアクセスでは 1ms またはそれ以下
13

14. Examine Local Storage Access
Intel IA-32 のCPUとL1, L2キャッシュ
14

15. Examine Local Storage Access
筆者のPCではCPUは2.6Ghz（2600000000Hz）で、
これは １クロック当りの所要時間は0.000000385ミリ秒位。
筆者CPU（Intel Pentium® Intel Core i7 3970X
CPU G620） Extreme Edition BOX
クロック周波数 2.60Ghz 3.5Ghz
所要時間/クロック 0.0000003846ミリ秒 0.0000002857ミリ秒
L1キャッシュ（≒２～３クロック） 0.0000011538ミリ秒 0.0000008571ミリ秒
L2キャッシュ（≒２０クロック） 0.000007692ミリ秒 0.000005714ミリ秒
主記憶（≒200～300クロック） 0.00011538ミリ秒 0.00008571ミリ秒
※ギガ １０の９乗（１０臆）
15

16. Dig ３
勘定マスタのキー参照でWeb Storageを使用する事によっ
て仕訳システムのデータエントリは実質待ち時間が全く
なくなります。しかし、
①入力したデータをクラウドサーバに送信し
②クラウド上でのデータ登録（永続化）が完了し
③その結果をWebクライアントで受け取る 迄の間
ユーザは次のインタラクションを待たされることになる。
ここで、HTML5のWeb WorkersはJavaScriptのバッククラウン
ドスレッドで、コンカレントプロセッシングを可能にする。
このWeb Workersを使用してサーバへのデータ送信を
バッククラウンドスレッドで行うようにすれば、並行して次の
データエントリ処理を行うことができるようになり。
結果として
仕訳データ登録の一連の処理を完全に待ち時間なしで行え
るようになる。 16

17. Dig3 Cloud SQLとWeb Storage,Web Workersにより
完全待ち時間なしの仕訳入力
勘定マスタ
勘定マスタ (Cloud SQL)
(Cloud SQL)
[A]勘定マスタ読取り [C] 仕訳データ書込み
（Cloud SQL） (Cloud SQL)
Background sled
[C] 仕訳データ送信
[A]勘定科目の (Web Workers)
Web Storage書込み バックグラウンドスレッド
で非同期送信
addJournal2.htm
勘定科目マスタ [B]勘定科目名の表示
(Web Storage) 17

18. Dig４ Offline First
勘定マスタのキー参照でWeb Storageを使用し、さらに
HTML5の Web SQLを使用して入力した仕訳データの登録
をローカルストレージに行うようにすれば、インターネット
接続のないローカル環境でのデータエントリか可能になる。
また、ローカルストレージへの書き込みである事から
書き込みスピードも、ネットワーク経由を伴うクラウド上での
書き込みに比べて圧倒的に高速で行うことができる。
Web SQLでローカルに書き込まれた複数の仕訳データは
Web Workersを使用して纏めてApp Engineクラウドに送信
される。
送信された仕訳データはApp EngineのPush Taskによって、
MySQLに書き込まれる。
http://www.publickey1.jp/blog/13/2014web.html
http://blog.joelambert.co.uk/2012/11/26/offline-first-a-better-html5-user-experience/
18

19. ネット接続なしのオフライン仕訳入力
仕訳データをWeb SQLで
ローカルストレージ登録
Push Taskで
複数仕訳データサーバ送信
19

20. Dig4 Web SQL Web Workers Push Taskで
仕訳トラン
オフライン仕訳入力 (Cloud SQL)
Task Queue [H]Workerサーブレット
の処理条件 （Task Queues）
勘定マスタ queue.xml acctWorkerServlet.java
(Cloud SQL)
Task Queue
[G]Pushサーブレット
Offline First Gson
TSA（Thin Server Architecture） acctTaskJsonServlet.java
[E]仕訳データ全件を送信
（Web Workers）
Jworker2.js
[D]仕訳データ全件検索
[A]勘定科目のローカ （Web SQL）
ルストレージ書込み
addJournal4.htm
[C]仕訳データ書込み Σ仕分けデータ
勘定科目マスタ [B]勘定科目名の表示
（Web SQL） (Web SQL)
(Web Storage) 20
K.Seino

21. [パフォーマンス測定]
仕訳データの登録 Cloud SQL vs Web Storage
=> オフライン入力で高速データエントリ（Offline First!）
第１回 第2回 第3回 第4回 第5回
Cloud SQL クライアントアクセス 560 843 438 542 611
Web Storage クライアントアクセス 11 9 22 11 10
単位ミリ秒
21

22. Dig No2
App Engineクライアントの連携を掘る
Cloud ・Channel service
・Pull Task
・SQL vs NoSQL（merit & demerit）
・SQL to NoSQL conversion
---------------------------------------
Client・Web Workers
・Web SQL
・jQuery、jqPlot
・Ajax(Raw code)
・DOM
22

23. Dig１ App Engineクラウドで受注情報登録
Cloud SQL と Web SQL、 jQuery UIの連携
[機能]
１ 受注ID自動表示
=>Cloud SQL Auto Increment
2 顧客IDまたは顧客TELから
顧客情報自動表示
=>Web SQL
3 カレンダクリックで日付入力
=>jQuery UI Datepicker
4 商品IDと数量入力で
・商品名自動表示
・単価自動表示
・小計計算と自動表示
・合計額計算と自動表示
=>Cloud SQL参照＆計算 & DOM
5 ALTキー押下で受注登録
=>Cloud SQL登録
23

24. Dig2 Channelサービスで、受注サマリをサーバプッシュ表示
バックグラウンドから ・受信した受注データを
Channelサーバに ビーンズ経由でDB登録
受注データ送信 ・受注データをChannel
を使用してプッシュ送信
Web
view Workers
JavaScript クラウド環境
HTML jQuery
(HTML5) Web Workers
Web SQL
controller model RDB
Web SQL
JavaBeans
Internet
Internet Channel MySQL
サービス Cloud SQL
受信したChannelデータ
から一覧表示とグラフ表示
Java Servlet
Google App Engine
JavaScript
HTML
HTML JavaScript
jQuery
(HTML5)
(HTML5) jQuery Channelサーバからの
プッシュデータ
24
24

25. App EngineのChannelサービスを使用して、
・管理者画面に受注サマリをプッシュ表示（DOMスクリプト）
・サマリ一覧からグラフ表示（jqPlot）
・Cloud SQL Auto Increment
・Web SQL
・jQuery UI Datepicker
・Cloud SQL参照＆計算 & DOM
・Cloud SQL登録
・Channelサービス
・プッシュデータでDOM表示
・jqPlot （グラフ表示）
25

26. Dig3 SQLとNoSQLの使い分けと、Web画面間の連携
Dig4 受注データをPull Taskでバックアップ（SQL>NoSQL）
view
クラウド環境
Web
Web Storage
Workers
Cloud SQL
Cloud SQLアクセス controller model
画面A JavaScript MySQL
HTML jQuery Java Servlet JavaBeans
(HTML5) Web Workers Cloud SQL
Web Storage Internet (Low-level API) データストア
Channel API
値セット 関数 Bigtableアクセス
実行 Bigtable
画面B
HTML JavaScript
(HTML5） jQuery Channel
プッシュデータ
Google App Engine
JavaScript ・画面Bから画面Aの値を設定する
HTML
HTML JavaScript ・画面Bから画面Aの関数を実行する
jQuery
(HTML5)
(HTML5) jQuery
26
26

27. Dig ２ NoSQLの特徴を利用する
27

28. Cloud SQL(SQL) Datastore
cron.xml
ord_hdr taskcontrol (NoSQL)
ord_cal Servlet Datastore spacemas
ord_dtl （NoSQL）
orderaccum spaceBean
（LLAPI）
sqltonosql
channelServlet orderBean Servlet
Channel （LLAPI）
Service BigtQuery
queue.xml Cloud SQL(SQL)
specServlet
Channel orderServlet cust_mas
プッシュデータ
HTML5 XMLHttpRequest HTML5 HTML5
JavaScript JavaScript cust_mas JavaScript
Web Workers jQuery
jQuery,ｊqPlot jQuery
Web SQL
DOM
addOrdDtl.htm
addOrdDtl.htm
showOrdChnl.htm
起動
サーバプッシュ
制御
K.Seino
http://sapman3.swsgaejpgm3.appspot.com/

29. 「商品選択」でサブ画面を表示し、サブ画面から商品スペックを指定して
「セット」ボタンをクリックするとメイン画面に商品情報が表示される。
29

30. 受注品目入力完了後、サブ画面の「登録」ボタンをクリックすれば受注登録が実行
され、左の受注情報表示画面に受注サマリが表示される。
30