米国のスマートフォンサイトの設計・テスト・運用監視手法

米国のスマートフォンサイトの設計・テスト・運用監視手法

©2012 Keynote Systems, Inc.

April 11, 2023

Keynote Systems, Inc.Technical Business Representative竹洞陽一郎[email protected]

自己紹介

最近の経歴 2004 ～ 2006 VMware … Professional Service Organization 、

日本人初の VCP トレーナー 2006 ～ 2009 Akamai…Professional Service 、

Technical Project Manager 2009 ～ 2010 Verizon Business…Global Service 、

Principal Consultant 2011 ～ Keynote Systems…Technical Business Representative

やってきた事 Lotus Notes → Windows のシステム構築 → Unix/Linux のシステム構築

→ メール → Web システム → システム開発見積り・ IT 不良資産 → 仮想マシン → CDN 、 Web 高速化、ストリーミング、 RMT 問題 → Web コンサルティング

April 11, 2023 2©2012 Keynote Systems, Inc.

Keynote Systems について

• アメリカ合衆国カリフォルニア州サンマテオに本社を置く

• 1995 年創業、 1999 年 NASDAQ 上場

• Web 、モバイル、ストリーミングのパフォーマンス計測のサービスを主とする

• 計測の分野におけるマーケットリーダー

• 顧客数 4,000 社以上• 計測拠点 275 ヵ所• 計測用コンピュータ 4000 台以上


4

New MediaAutomotive

Retail

Financial Services

Technology & Telecom TravelPortals/Media

Business-to-Business

Keynote をご採用頂いているお客様

©2012 Keynote Systems, Inc. April 11, 2023

http://www.hondacars.com/

http://www.autotrader.com/?ac_afflt=none

http://www.ford.com/en/links/General/www_fordvehicles_com/

http://www.hasbro.com/

http://www.vitalstream.com/

今日、お話する事

米国のスマートフォンサイトの設計・テスト・運用監視手法 Evidence-based development スマートフォンサイトの設計スマートフォンサイトのテスト手法スマートフォンサイトの運用監視手法

Keynote の製品説明が多いですが、アメリカ・ヨーロッパではデファクトスタンダードなので許してください。


EVIDENCE-BASED DEVELOPMENT

データに基づいて開発する

April 11, 2023 6©2012 Keynote Systems, Inc..

今の日本の IT 業界に足りないモノ

Evidence-based development（証拠に基づいた開発、データに基づいた IT 投資）


日本のスマートフォンサイトのパフォーマンスの現状を知る


Softbank 2011/10/19 ～ 2012/4/15

日本のスマートフォンサイトのパフォーマンスの現状を知る


NTT Docomo 2011/10/19 ～ 2012/4/15

Keynote Mobile Commerce Index – April 8th, 2012


http://keynote.com/keynote_competitive_research/performance_indices/mobile/retail/index.html

Keynote Performance Index: Mobile Retail – WorldApril 8th, 2012


http://keynote.com/keynote_competitive_research/performance_indices/mobile/retail-world/index.html

このパフォーマンス（表示速度）の差は、何が原因なのか？



Amazon Japan

DHC約 13倍

約 17倍


Amazon Japan

EC Current約 1.5倍

約 2.6倍

Amazon Japan の場合


EC Current の場合


DHC の場合


Top ページのファイル数の違い

　 Amazon Japan

EC Current DHC

Redirect 1 4 4

HTML 1 2 3

CSS 1 3 6

JavaScript 1 10 18

画像 10 10 56

Beacon 0 1 2

XML 0 0 1

合計 14 30 90


マーケティングデータ～スマートフォンの興隆 2010 年のガートナーの調査、 2011 年の Google の内部データ、 2011 年の Cisco の調

査 2013 年までに、より多くの人々が PC よりモバイルでのオンラインアクセスを使うようになる 2010 年以降、モバイルによる検索エンジンの利用が 4 倍の量で増えている 2015 年までに、全世界の人々が 1 人 1 台のモバイル端末を持つようになる

“Canalys: Smartphone shipments surpassed PCs in 2011” 2011 年、スマートフォンの出荷台数が PC のそれを超えた

スマートフォン 4 億 8800 万台 PC 4 億 1500 万台


マーケティングデータ～ユーザの声

“What Users Want from Mobile” （ Compuware 2011 ） 60% のユーザがモバイルサイトの表示速度が 3 秒以内であること

を望んでいる 71% のユーザが PC サイトより早く表示されることを望んでいる 78% のユーザがサイトにアクセスしても表示されない場合には、再

読み込みを試すのは 2 回以下 57% のユーザが、使い勝手の悪いモバイルサイトについて薦めない 40% のユーザが、使い勝手の悪いモバイルサイトにアクセスした

後、競合他社のサイトへ行く 23% の成人が、モバイルサイトが動かないと悪態をついたことがあ

る


マーケティングデータ～ユーザの行動

“The Mobile Movement: Understanding Smartphone Users” （ Google, 2011 ） 95% のスマートフォンユーザは地域に関する情報を検索したことがある 61% のユーザは検索の後にそこにビジネスの電話をして、 59% が実際に

そこを訪問したそれらの行動を起こした 90% の人々は 24 時間以内に、その行動（電話し

て訪問）をした

“Adobe Mobile Experience Survey 2011” （ Adobe, 2011) 価格を調べるのに、 81% のユーザがネイティブアプリよりモバイルサイト

の方を使いたいと答えた商品情報を調べるのに、 79% のユーザがモバイルサイトを使いたいと答え

た商品を買うのに、 63% のユーザがモバイルサイトを使いたいと答えた


ユーザーはスマートフォンで何をする？

行動パーセンテージ地図・住所録の利用 81%

ソーシャルメディアのアクセス 76%

地域情報を探す（イベント、天気、評判、地図など）

73%

ニュースを読む 68%

銀行口座の確認 67%

音楽を聴く 63%

ショッピング・購買 62%

ゲームを 1 日 1 回以上遊ぶ 61%


(Keynote Systems, Inc. 2010)

マーケティングデータ～ユーザの行動 2

"The Mobile Movement: Understanding Smartphone Users“(Google, 2011) 70% のモバイルユーザが携帯電話で価格比較を行った 65% のユーザが携帯電話で商品情報を見た 50% のユーザが購入に際してモバイルで検索した


彼を知り己を知れば百戦危うからず（孫子の兵法）

↓データを持っていない

↓競合についても、自社についても、知らなさ過ぎる

↓負けるに決まってる


スマートフォンサイトの設計Lean and Mean


スマートフォンサイト設計で考慮すべき様々なデータ

スマートフォンユーザーは急速に増加しているそして、 PC よりスマートフォンで Web ブラウジングする

ようになっているスマートフォンでのブラウジングは 3 秒以下であることが

望まれている 3G 回線でのコンテンツ配信は遅い。コンテンツの量に比例

して、表示時間は遅くなる。ユーザーはネイティブアプリより、 Web を希望している


ネイティブアプリの良い点・悪い点良い点悪い点ユーザエクスペリエンスをコントロールするのに最良。デバイスマーケット毎に細分化されてしまう。各プ

ラットフォーム毎にビルドしなければいけない。時間とリソースの点で集約が必要。

デバイスの全ての機能を活用できる。ロケーション、カメラ、電話等。

全てのプラットフォームをカバーしないと、大きなマーケットセグメントを失うことになる。

一般的に、現状のモバイル Web より読込と実行が速い。

モバイル Web サイトで同じような機能を実装した場合に比べて、メンテナンスコストが高くつく。各プラットフォームのアプリ毎に更新が必要になる。

キャッシュが効き、ブランドに箔がつく。プラットフォーム依存のコードや制約に精通することが求められる。

プッシュ配信を有効活用できる。検索エンジンで見つけてもらうという事が出来なくなる。

ローカルコンテンツストレージを使える。インターネットの接続なしに稼働できる。

デバイス依存のプログラミングスキルが求められる。

マネタイズの潜在性。アプリ＋アプリ内の購入。

購入と精算の手続きが合理化できる。April 11, 2023 27©2012 Keynote Systems, Inc.

モバイル Web サイトの良い点・悪い点良い点悪い点

消費者へのリーチが最大。殆どの機器に一度のコーディングで対応できる。

アプリに比べて、機能性が制限される。

Flash や HTML5 を使った拡張機能であれば、全ての機器に亘って一度の更新で済む。

HTML5標準はまだ完全に開発・実装されておらず、 Flash は全てのスマートフォンでサポートされているわけではない。

位置情報 /GPS 情報を活用できる。プッシュ配信ができない。

開発者が使い慣れたHTML 、 CSS 、 JavaScript を使える。

利用に際してはインターネット接続が必要。

検索エンジンで見つけてもらえる。


ネイティブアプリよりスマートフォンサイトで始めるスマートフォンサイトで始めた方が戦略上、理に適ってい

る広範囲にユーザにリーチする収益の最大化を図るリリースとメンテナンスの効率化を図る検索エンジンに引っかかるようにするユーザーは急いでいるときに、アプリをインストールしない

予算とリソースを割くことが可能になったら、主要な携帯プラットフォーム毎にアプリを開発して提供することで、ユーザに更なる付加価値を提供し、ブランド力を高める


第三の方法” Wapplication”


第三の方法” Wapplication”


スマートフォンサイトを作るなら…


スマートフォンサイトの設計方針

削れ！Lean and Meaｎ


何を削って、何を残すのか ?

コンテンツを減らす～ユーザーの行動を分析し、モバイルでよく参照されるページ、機能に特化する

画像は極力減らす～ページの「美しさ」のための画像は削る

Simple is best ～機能をたくさんつけても使わない。本当に必要とされるものだけを実装する。「できる」からといって、実装しない

美しさより速さ～「 1 分ルール」を満たす


1 分ルールとは？スマートフォンでのブラウジングは、 PC と異なる

PC は、机の前に座ってブラウジングするスマートフォンは、 1 日の細切れ時間の中でブラウジングする

朝起きてベッドの中で朝食を食べながら通勤時間中トイレの中お昼ご飯タバコを吸いながら仕事、仕事のちょっとした合間移動中ちょっとした待ち時間

5 分未満の細切れ時間にアクセスしてくるユーザーはコンバージョンレートが高い

1 分以内に「目的を達する」ことができるようにサイトを作る


Performance Best Practice

JavaScript を HTML の最後に記述する CSS を HTML の最初に記述する Keep alive を使う。 Keep alive の対象数からはみ出るコ

ンテンツがないようにする HTML ファイル以外はキャッシュを効かせる MIME が” text/*” か” *javascript*” のものについては圧縮配信する

CSS を 1枚にまとめる JavaScript を 1枚にまとめる


W3C Web Mobile Best Practicehttp://www.w3.org/TR/mobile-bp/ Auto refresh を使わないレイアウトのために Table を使わないキャッシュを使うフレームを使わないテキストフリーにしない（ input type=“text”) 画像のサイズを明示する（ height, width ）画像の ALT を明示するポップアップを使わないページタイトルを明示する Table の中に Table を定義しない


http://www.w3.org/TR/mobile-bp/

スマートフォンサイトのテスト手法

Functionality, Usability, Load Test


スマートフォンサイトのテスト

機能テストユーザビリティテスト負荷テスト


機能テスト


MITE （ Mobile Internet Testing Environment ） 2.3http://mite.keynote.com – 無料です

© 2012 Keynote Systems, Inc. 04/11/2023 41

http://mite.keynote.com/

http://mite.keynote.com/

Automate testing by running a

matrix test across multiple

devices

Mobile Internet Testing Environment 2.3 18,000 の機種プロファイルを登録。複数の機種を対象に同時にテストが可能


デモ


ユーザビリティテスト


April 11, 2023 45

Keynote WebEffective™: How it Works

We get hundreds of people to go to your website, carry out tasks and as they do so, we capture their behaviors and ask them about their experience.

47

48

49

April 11, 2023 51

April 11, 2023

Keynote WebEffective™: Mobile Research

Search 20%

Home Lighting 20%

Philips Mobile Homepage

N=25

Household products 75%

N=17

Espresso 82%

Coffee6%

Home 6%

Irons 6%

Household Products

N=14

Gaggia Brera photo

50%

Bean-to-cup 42%

Gaggia Classic Photo

8%

Espresso Webpage

©2012 Keynote Systems, Inc. 52

負荷テスト



Test Perspective Work Flow

Create one or more scripts using the Keynote recorder

Create a Load Test: Duration Arrival Rate or Number of Concurrent Users Scripts to use Sampling locations (17 Worldwide) User access speeds (modem, DSL, Cable, 2.5G, 3G, T1, Datacenter)

Schedule the Load Test Start immediately or schedule time

View Results in Real Time Response times, successful page loads, etc.


Keynote’s Easy-to-Use Script Recorder

Modify page context and vary form input

Vary pause times between actions

Configure cookies

Set up username & password combinations

Validate the existence of specific text on Web page


Keynote’s Convenient Testing Portal

Unlimited user accounts

3 different user roles: Admin, Power User, and Viewer

3 configurable email reports

April 11, 2023 57

Visualize line speed distribution



Valuable Load Test Reports

Quickly see how well your system performed relative to the load that was applied

Determine whether your page response times met your performance requirements


価値ある負荷テストレポート

テスト中、システムの帯域ストレスを判定。接続要求に対して、新規に TCP/IPの接続を与えれば効率が良いかを判定。


0

1,000

2,000

3,000

4,000

5,000

6,000

7,000

8,000

9,000

10,000

0 5 10 15 20 25 30 35 40 45 50 55 60

Minutes

0

100

200

300

400

500

600

700

Concurrent Users Sessions per Hour Response Time

Realistic Testing Yields Realistic ResultsConcurrent Users is the result of Many Factors

Users Abandon

Legacy CU Model

Arrival Rate Model

Measured CU

Concurrent Users Sessions per Hour Response Time

Minutes

Sec

on

dsResponse Up


Arrival Rate Methodology

同時ユーザ数は、トラフィックの完全な指標とはなり得ないどれだけのユーザに配信できるかは、ユーザのトランザクションがどれ

だけ早く終えられるかにかかっているインターネットとサイトのパフォーマンスは時間経過で変わる

Simulated Load

0100200300400500600700800900

1000

Time 0 1 2 3 4 5 6 7 8

Minute

"Co

ncu

rren

t U

sers

"

Simulated Load

Real Internet Traffic

0100200300400500600700800900

1000

Time 0 1 2 3 4 5 6 7 8

Minute

"Co

ncu

rren

t U

sers

"

Simulated Load Real Internet Traffic

スマートフォンサイトの運用監視手法Quantitative and Qualitative measurement


H

63

Solutions for Enterprises The mobile ecosystem today can be boiled down to two

approaches: mobile Web sites or mobile applications downloaded to the

device.Mobile Sites Mobile Apps

Challenges presented by each path

Speed & reliability are determined by site design and construction similar to a Web page

Gathering information on load times for page elements as well as availability of the entire page

is crucial for Operations to manage the mobile Web site

Data collected from as close to the customer as possible is critical and requires a broad geographic

monitoring foot print

Speed & reliability are impacted by device hardware characteristics, network speeds and geographic locations

Applications are developed for the specifications of a single device; growing application market requires rigorous testing

across multiple devices

On demand access to 50 global locations

35 operator networks Database of over 1,700 device profiles

Smart Alerts

Real devices connected to live operator networks capturing performance experienced by end users

Solution capable of supporting complex actions performed on the latest smartphones

Smart Alerts Ability to conduct real-time troubleshooting for quick issue

resolution Pixel-perfect view of smartphone LCD

Keynote mobile monitoring solutions

MWP MDP


MyKeynote

RF

Mobile Web Perspective 5.0MWP monitors the availability of infrastructure delivering a mobile website without the impact of the network operator.

MWP-Air accurately monitors the response time and availability of the mobile website as experienced by the end user.

MWP-Air(35 Networks)

IP Backbone

Corporate Firewall

MWP(50 Global Locations)

Mobile Web Content Servers


HKeynote Mobile Solutions Monitoring and Interactive Testing

MITE

Virtual device interactive testing

MDPReal device automated monitoring

MWPVirtual device automated monitoring

MyKeynote

MyKeynote


デモ


04/11/2023 67

Q&A
