サーバー通信と描画の最適化による性能改善

島澤：サーバーの通信の最適化と描画の最適化、両方のアプローチから、今回の性能問題の改善に取り組みました。こうした比較的単純な描画でも、けっこう有意な差がでますね。FlashとHTML5で、Flashのほうを先にクリックしたとしても、HTML5のほうが表示までは速い。

大畠：では、もう1つ見てもらいましょう。今度はリアルタイムです。先ほど、IoTのお話をしました。MotionBoardは、リアルタイムで画面に表示するため、いろんなところでお使いいただいているんですが、これがHTML5になると、どのようなかたちに変わっていくのか。

こちらも、右側がFlash、左側がHTML5です。

島澤：裏側で何が起こっているかというと、（スライドを指して）上に青い波形がありますよね。これを学習データとして……下でずっと緑色の波形が流れてると思いますが、ずっと裏側でRを叩いて、各波形に差異がないということを計算し続けています。それをリアルタイムにやり続けています。

FlashとHTML5を、今、同じ定義で開いてます。この緑色の……少しHTML5のほうが間延びしちゃいましたね。FlashとHTML5で、まったく同じ定義なんですね。でも、画面のリフレッシュレートにけっこう差があると思います。HTML5のほうが明らかに速いというところで、同じ定義を持ってきても、基本的には（HTML5が）速く動きます。せっかくなので、何かノイズを発生させてもらうといいですかね。

大畠：わかりました。では、パルスいきます。

島澤：もう少しパルスがあっても……もう1回、押しましょうか。

大畠：もう少しですね。

島澤：こんな感じですね。これは、ランダムにノイズを入れているんですけど……リセットされちゃいましたね（笑）。今、ランダムにノイズを入れることによって……もう1回押せますか？

大畠：はい。

島澤：この波形は、学習データに対して差異があるということで、それを検出してアラートとして描画する。そういったことを、100ミリ秒ごとに行っています。HTML5は、だいたいFlashの2.5倍くらいの描画スピードを持っています。では、次（の話題）にいきましょうか。

（デモ終了）

1 2 3 4