【B1】HTML5テクニカルセッション「オフラインで“待ちなし, ５００倍を超えるアクセスパフォーマンス！」（有）サイバースペース
代表 清野 克行
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

アジェンダ[I] クラウド概要
PaaSクラウドについて[II] HTML５で高速アクセス[1] HTML5を使用しないパフォーマンスアップ>クラウド側の工夫[2] Memcache vs HTML5 Web Storage>クラウドの工夫 vs クライアントの工夫[3] HTML5 Web Storage + Web Workers>完全待ち時間ゼロのUI処理[4] HTML5 Web SQL Web Workers Push Task
>オフライン操作を可能にする

2

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

自己紹介 清野 克行（セイノ カツユキ）
以前superelmer21@gmail.com

日本HP、日本IBM 製造・装置業担当SE・MKTG、社内業務システム開発
ERPパッケージ、某社統合生産管理システム開発、日本語ユーティリティ
分散システム環境での引合、受注、出荷、原価、プロジェクト収支管理システム

現在

3

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

3

書籍、雑誌・ネット記事、セミナ講師、コード記述

[I] クラウド概要

4

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

クラウド構成 IaaS, PaaS, SaaS

[SaaS]
アプリケーション機能をサービスとして提供[PaaS]
アプリケーションの開発・実行環境をサービスとして提供[IaaS]
サーバ環境やネットワークインフラをサービスとして提供
5

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

PaaSクラウドの例
Google App Engine

App Master

最近の追加機能
Data Storage

Applications

Front EndNetworking

Data
Cloud SQL

Pending
RequestQueueApp Server
Services

PaaS
IaaS

Middleware + Runtime
OS
Servers + Storage
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

6

App Engineと関連追加機能＆アプリケーション
システム機能アプリケーション

Google Appsとの連携
ビッグデータ
処理・解析

Chrome拡張機能
Cloud SQL

Internationalization（国際化）
データ翻訳
文書翻訳

7

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

機械学習
アルゴリズムに基づく予測
Full Text Search
FTS

Cloud + Web Service
Google App Engine

Existing Web Service

Detastore(bigtables)

memcachegaedirect
blobstote
Channel・durationMinutes指定

CRUD処理のMemcache適用

security

Cloud Storage

Channel Service
・Detastore 書込指定

セキュリティOAuth2.0, SSL
ネットワーク速度
Http2.0（SPDY）

Google MapsApp Engine
API JavaScript API etc
XHR/DOMWeb Storage
IndexedDBWeb SQL8Google Maps
Google Chartsetc

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

jQueryｊQuery‐Mobile
MashupGeolocation
Rich Client Web Worker

HTML5

Drag & Drop

［PaaSクラウドを使用するメリット］
１．高いスケーラビリティ=>スケールアウト

３．運用管理の容易さ=>自動化＆管理者画面

２．高可用性=>自動レプリケーション

４．公開までの大幅時間短縮=>開発環境は用意されている

５．コストメリット=>使用した分だけのチャージ
9

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

［PaaSクラウドを使用するデメリット］
１．使用できる言語の種類が制限される

３．オン‐プレミスシステムからの移行

２．使用できるデータベースの種類が制限される

４．実行時間の制限

５．レスポンスパフォーマンス
※ 今回の主題
10

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

[II] HTML５で高速アクセス

11

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

製造業での基幹系モジュール構成とテーブル類
顧客
マスタ

受注管理
（SO）

製品
在庫

製品
マスタ

製造活動

購入品
在庫
購買管理
（PO）

受注
トラン

売掛管理
（AR）

財務諸表

販売
仕訳

貸借対照表
（BS）
部品
マスタ

勘定科目で分類

勘定
マスタ
仕訳
データ

部品
構成表

仕掛品
在庫

購買
トラン

損益計算書
（PL）
総勘定
元帳

従業員
マスタ

営業報告書
仕訳入力
（JournalEntry）

買掛管理
（AP）

その他
付随書類

購買
仕訳

ベンダ
マスタ
12

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

12

開発・実行環境
App Engine・ｊｄｋ1.7.0_15
・GPE1.7.5
・Datastore HRD（Master/Slaveから移行）
・Cloud SQL Size D1

Web Client・Google Chrome 26.0.1410.43 m
・Processor Intel Pentium CPU G620 2.60 GHz
・RAM 4.00 GB
13

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

レスポンス遅延とユーザリアクション遅延
0 ‐ 100ms
100 ‐ 300ms
300 ‐ 1000ms
1s+
10s+

14

ユーザの反応瞬間、即時小さな遅延が認識される
コンピュータは動いている
違う事を考える
後で戻るだろう本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

[1] HTML5を使用しないパフォーマンスアップ[レスポンス速度の計測]
Cloud SQL アクセス vs Memcache アクセス[結果]
１．App Engineサーバ（Java Beans）で計測したアクセス速度では、Memcacheが圧倒的に速いが２．Webクライアントで計測したレスポンスタイムではそれほどの差はない。

15

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

[1] Cloud SQL , Memcacheを使用して仕訳データ入力[サンプルサイト]

Cloud SQL http://journal.bizcloudsql.appspot.com/addJournal1.htm
Memcache http://journal‐memcache.bizcloudsql.appspot.com/addJournal1.htm
16

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

16

仕訳データ入力の処理手順
借方コード入力と勘定科目名表示

貸方コード入力と勘定科目名表示

仕訳データの入力完了とデータベース登録

17

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

（１）ストレージアクセス速度
App EngineのJava Beansから下記アクセスでデータ取得に要する時間
・MySQLに書き込まれた勘定マスタをCloud SQLでアクセス
・Memcacheに書き込まれた勘定マスタをMemcache APIでアクセス=>サーバ側計測ではMemcacheアクセスが圧倒的に速い！
Cloud SQL
memcacheストレージアクセスストレージアクセス

第１回
428
3第2回
722

第3回
53
2

単位ミリ秒ミリ秒

18

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

第4回
533

第5回
523

（２）クライアントレスポンス速度
WebクライアントのJavaScriptから下記アクセスでデータ取得に要する時間
・MySQLに書き込まれた勘定マスタをブラウザからアクセス
・Memcacheに書き込まれた勘定マスタをブラウザからアクセス=> ブラウザアクセスでは差は縮まる
Cloud SQL クライアントアクセス
memcache クライアントアクセス

第１回
4781
4182

第2回
594
281

第3回
385
284

単位ミリ秒

19

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

第4回
507
275

第5回
482
427

[2] Memcache vs HTML5 Web Storage[レスポンス速度の計測]
Cloud SQL , Memcache アクセスｖｓ
HTML5 Web Storage（= Web Client）アクセス[結果]
１．App Engineサーバアクセスでは最速のMemcacheアクセスより、Web Storage(HTML5)アクセスの方が圧倒的に速い。
２．Web Storageアクセスではアクセス速度が１ミリ秒以下の場合も多く、人間の感覚からは全くの同時になる。

20

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

[2] Cloud SQLとWeb Storageによる勘定名超高速表示[サンプルサイト] http://journal‐webstorage.bizcloudsql.appspot.com/
21

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

[パフォーマンス測定]

Memcacheと Web StorageのWebクライアントレスポンス速度=>HTML5の Web Storage使用で圧倒的な高速レスポンス
Memcache クライアントアクセス
Web Storage クライアントアクセス
単位ミリ秒

22

第１回
4182
1

第2回

第3回

第4回

第5回

2840275
142702811

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

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 m/s
ガラス媒体中の高速度 -> 屈折率分の１の速度
ガラスの屈折率が1.5として、ガラス内での光速は200,000km/s

所要時間
従って 日本とUS西海岸での所要最短時間は20,000 [km]/200,000[km/sec] = 0.1sec = 100ms

23

network latency最少でのmemcache Webクライアント最速タイム ≒ 103ms=>理想環境で現実にはあり得ない=>Web Storageアクセスでは 1ms またはそれ以下本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

[3] HTML5 Web Storage + Web Workers
HTML5のWeb Storageの利用でデータエントリは実質待ち時間ゼロ！
HTML5のWeb Workersを使用してApp Engineサーバへのデータ送信をバッククラウンドスレッドで行う

24

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

[3] Cloud SQLとHTML5のWeb Storage,Web Workersにより完全待ち時間なしの仕訳入力

仕訳データ送信をWeb Workersのバックグラウンドスレッドで実行する[サンプルサイト] http://journal‐webworkers.bizcloudsql.appspot.com/

[4] HTML5 Web SQL Web Workers Push Task
でオフライン仕訳入力
Web SQLを使用して入力した仕訳データの登録をローカルストレージに行う。
↓[Offline First]
ネット接続のないオフライン環境でデータエントリか可能26

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

[4] HTML5 Web SQL Web Workers Push Task
でオフライン仕訳入力[サンプルサイト] http://journal‐pushtask.bizcloudsql.appspot.com/
27

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

[パフォーマンス測定]
仕訳データの登録 Cloud SQL vs HTML5 Web Storage=> オフライン入力可能でも圧倒的な高速レスポンス
Cloud SQLWeb Storage

クライアントアクセス
クライアントアクセス

第１回
560
11

第2回
843
9

第3回
438
22

単位ミリ秒

28

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

第4回
542
11

第5回
611
10

Appendix: 受注処理へのHTML5適用[サンプルサイト] http://ord‐chnl‐spec‐pulltask.bizcloudsql.appspot.com/
29

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

まとめ
これからのクラウドはサーバ側とWebクライアントの連携でシステム構築

UX重視

30

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。