オフラインで”待ちなし” 500倍を超えるアクセスパフォーマンス！

B1 HTML5テクニカルセッション オフラインで 待 ちなし, 500 倍 を 超 えるアクセスパフォーマンス! ( 有 )サイバースペース 代 表 清 野 克 行

アジェンダ [I] クラウド 概 要 PaaSクラウドについて [II] HTML5で 高 速 アクセス [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 Front End App Master Applications 最 近 の 追 加 機 能 Data Storage Networking Cloud SQL Data Pending Request Queue App Server Services PaaS IaaS 6 Middleware + Runtime OS Servers + Storage

App Engineと 関 連 追 加 機 能 &アプリケーション システム 機 能 アプリケーション Chrome 拡 張 機 能 Google Apps との 連 携 ビッグデータ 処 理 解 析 Cloud SQL データ 翻 訳 文 書 翻 訳 Internationalization ( 国 際 化 ) Full Text Search FTS 機 械 学 習 アルゴリズムに 基 づく 予 測 7

Cloud + Web Service Google App Engine Detastore (bigtables) memcache gaedirect blobstote Channel Cloud Storage CRUD 処 理 の Memcache 適 用 security Existing Web Service Google Maps Google Charts etc Channel Service Detastore 書 込 指 定 durationminutes 指 定 セキュリティ OAuth2.0, SSL ネットワーク 速 度 Http2.0(SPDY) Web Storage IndexedDB App Engine API JavaScript XHR/DOM jquery jquery Mobile Mashup Rich Client Web SQL HTML5 Google Maps API etc Geolocation Web Worker Drag & Drop 8

[PaaSクラウドを 使 用 するメリット] 1. 高 いスケーラビリティ =>スケールアウト 2. 高 可 用 性 => 自 動 レプリケーション 3. 運 用 管 理 の 容 易 さ => 自 動 化 & 管 理 者 画 面 4. 公 開 までの 大 幅 時 間 短 縮 => 開 発 環 境 は 用 意 されている 5.コストメリット => 使 用 した 分 だけのチャージ 9

[PaaSクラウドを 使 用 するデメリット] 1. 使 用 できる 言 語 の 種 類 が 制 限 される 2. 使 用 できるデータベースの 種 類 が 制 限 される 3.オン プレミスシステム からの 移 行 4. 実 行 時 間 の 制 限 5.レスポンスパフォーマンス 今 回 の 主 題 10

[II] HTML5で 高 速 アクセス 11

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

開 発 実 行 環 境 App Engine jdk1.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 アクセス [ 結 果 ] 1.App Engineサーバ(Java Beans)で 計 測 した アクセス 速 度 では Memcacheが 圧 倒 的 に 速 いが 2.Webクライアントで 計 測 したレスポンスタイムでは それほどの 差 はない 15

[1] Cloud SQL, Memcacheを 使 用 して 仕 訳 データ 入 力 [サンプルサイト] Cloud SQL Memcache http://journal.bizcloudsql.appspot.com/addjournal1.htm http://journal memcache.bizcloudsql.appspot.com/addjournal1.htm 16 16

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

(1)ストレージアクセス 速 度 App EngineのJava Beansから 下 記 アクセスでデータ 取 得 に 要 する 時 間 MySQLに 書 き 込 まれた 勘 定 マスタをCloud SQLでアクセス Memcacheに 書 き 込 まれた 勘 定 マスタをMemcache APIでアクセス =>サーバ 側 計 測 ではMemcacheアクセスが 圧 倒 的 に 速 い! 第 1 回 第 2 回 第 3 回 第 4 回 第 5 回 Cloud SQL ストレージアクセス 428 72 53 53 52 memcache ストレージアクセス 3 2 2 3 3 単 位 ミリ 秒 ミリ 秒 18

(2)クライアントレスポンス 速 度 WebクライアントのJavaScriptから 下 記 アクセスでデータ 取 得 に 要 する 時 間 MySQLに 書 き 込 まれた 勘 定 マスタをブラウザからアクセス Memcacheに 書 き 込 まれた 勘 定 マスタをブラウザからアクセス => ブラウザアクセスでは 差 は 縮 まる 第 1 回 第 2 回 第 3 回 第 4 回 第 5 回 Cloud SQL クライアントアクセス 4781 594 385 507 482 memcache クライアントアクセス 4182 281 284 275 427 単 位 ミリ 秒 19

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

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

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

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の 速 度 ガラスの 屈 折 率 が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 でオフライン 仕 訳 入 力 27 [サンプルサイト] http://journal pushtask.bizcloudsql.appspot.com/

[パフォーマンス 測 定 ] 仕 訳 データの 登 録 Cloud SQL vs HTML5 Web Storage => オフライン 入 力 可 能 でも 圧 倒 的 な 高 速 レスポンス 第 1 回 第 2 回 第 3 回 第 4 回 第 5 回 Cloud SQL クライアントアクセス 560 843 438 542 611 Web Storage クライアントアクセス 11 9 22 11 10 単 位 ミリ 秒 28

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

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