図 1: 各 ドキュメントの 活 用 方 法 ( )Web プラットフォーム 性 能 ベンチマーク 検 討 会 について ウェブプラットフォームの 発 展 と 産 業 市 場 拡 大 を 目 的 として 2014 年 10 月 より 性 能 テスト 実 施 による 技 術 の 底 上 げ 品 質 向

Transcription

1 プレスリリース 報 道 関 係 者 各 位 2016 年 3 月 28 日 慶 應 義 塾 大 学 SFC 研 究 所 HTML5 サイネージ 端 末 の 性 能 評 価 指 標 を 策 定 ~ 性 能 要 件 性 能 テスト 仕 様 コンテンツ 開 発 ガイドラインを 発 行 ~ 慶 應 義 塾 大 学 SFC 研 究 所 先 端 ウェブアーキテクチャ ラボ( 代 表 : 村 井 純 環 境 情 報 学 部 長 教 授 執 行 代 表 : 中 村 修 環 境 情 報 学 部 教 授 )では このたび HTML5 ベースのデジタルサイネー ジ 端 末 の 表 示 性 能 に 関 する 要 求 条 件 性 能 テスト 仕 様 およびコンテンツ 開 発 ガイドラインを 本 日 発 行 いたします これらのドキュメントは ウェブプラットフォームの 発 展 と 産 業 市 場 拡 大 を 目 的 として 性 能 テストに よるウェブ 技 術 の 底 上 げ 品 質 向 上 を 目 指 し 当 ラボも 主 査 として 参 画 している Web プラット フォーム 性 能 ベンチマーク 検 討 会 ( )が ( 一 社 )デジタルサイネージコンソーシアム( 理 事 長 : 中 村 伊 知 哉 慶 應 義 塾 大 学 大 学 院 メディアデザイン 研 究 科 教 授 )の 協 力 を 得 て 作 成 したものです ドキュメントと 合 わせ 性 能 テスト 仕 様 に 基 づいたテスト 用 HTML5 コンテンツも 作 成 しました 今 後 も 当 ラボでは オープンウェブプラットフォームの 確 立 に 向 け 産 業 界 での HTML5 の 活 用 がより 一 層 拡 大 するための 活 動 を 行 ってまいります 概 要 セットトップボックスなどをはじめとする 組 込 系 のデバイスでは PC と 異 なり CPU やメモリの 制 約 から ウェ ブ 表 示 の 際 の 性 能 が 重 要 な 検 討 項 目 になります この 性 能 に 対 する 要 求 条 件 は デバイスの 利 用 用 途 によ り 異 なるため 分 野 ごとに 定 義 する 必 要 があります そこでこのたび 今 後 普 及 が 予 想 される HTML5 サイネージ(Web-based Signage)を 対 象 として 以 下 を 作 成 しました これらは 主 として 端 末 の HTML5 表 示 性 能 評 価 に 関 するもの(1)(2)(4)と その 性 能 を 活 かすた めの HTML5 コンテンツ 作 成 ノウハウに 関 するもの(3)に 分 けてあります (1) 端 末 性 能 要 件 ( 資 料 1 ) - HTML5 サイネージ 端 末 の 性 能 への 要 求 条 件 定 義 対 象 は 解 像 度 ストレージ 描 画 速 度 など7 項 目 の 表 示 関 連 の 性 能 である 各 項 目 ごとに 性 能 が 定 量 的 に 2~3 クラスに 分 けられている (2) 端 末 性 能 テスト 仕 様 ( 資 料 2 ) - 要 件 に 基 づき HTML5 サイネージ 端 末 を 性 能 テストするための 仕 様 書 (3)コンテンツ 開 発 ガイドライン( 資 料 3 ) - 端 末 の 性 能 を 引 き 出 すための HTML5 コンテンツ 開 発 ガイドライン (4) 性 能 テスト 用 コンテンツ - 端 末 性 能 テスト 仕 様 に 基 づいた HTML5 テストコンテンツ これらは 次 の 図 に 示 すように HTML5 サイネージに 関 係 する 様 々な 事 業 者 の 方 々に 活 用 いただけます 例 えば 端 末 メーカーは 性 能 の 見 える 化 により 自 社 の HTML5 サイネージ 端 末 のラインナップ 化 に 活 用 可 能 です またロケーションオーナーや 広 告 主 は コンテンツに 適 した 端 末 の 選 定 に 役 立 てることができま す 当 ラボでは HTML5 サイネージの 普 及 のため 関 係 者 に 広 くこれらを 活 用 いただけるよう 引 き 続 き 活 動 し てまいります 1 / 2

2 図 1: 各 ドキュメントの 活 用 方 法 ( )Web プラットフォーム 性 能 ベンチマーク 検 討 会 について ウェブプラットフォームの 発 展 と 産 業 市 場 拡 大 を 目 的 として 2014 年 10 月 より 性 能 テスト 実 施 による 技 術 の 底 上 げ 品 質 向 上 の 方 策 を 検 討 メンバーは 次 のとおり(50 音 順 ) ( 株 )ACCESS キャッツ( 株 ) 慶 應 義 塾 大 学 SFC 研 究 所 先 端 ウェブアーキテクチャ ラボ( 主 査 ) ( 株 )シー イーシー ( 株 ) 東 芝 ( 株 )ニューフォリア ご 参 考 添 付 資 料 1: Web-based Signage 端 末 性 能 要 件 第 1 版 添 付 資 料 2: Web-based Signage 端 末 性 能 テスト 仕 様 第 1 版 添 付 資 料 3: Web-based Signage コンテンツ 開 発 ガイドライン 第 1 版 本 発 表 資 料 のお 問 い 合 わせ 先 慶 應 義 塾 大 学 SFC 研 究 所 先 端 ウェブアーキテクチャ ラボ HTML5 サイネージ 端 末 性 能 評 価 担 当 TEL lab-contacts@awa.sfc.keio.ac.jp 慶 應 義 塾 大 学 湘 南 藤 沢 事 務 室 学 術 研 究 支 援 担 当 TEL kri-pr@adst.keio.ac.jp 2 / 2

3 資 料 1 Web-based Signage 端 末 性 能 要 件 第 1 版 2016 年 3 月 作 成 : Web プラットフォーム 性 能 ベンチマーク 検 討 会 発 行 : 慶 應 義 塾 大 学 SFC 研 究 所 先 端 ウェブアーキテクチャ ラボ 1

4 目 次 1 性 能 要 求 条 件 の 概 要 性 能 評 価 の 範 囲 評 価 の 方 針 適 合 要 件 の 分 類 と 性 能 評 価 解 像 度 小 密 度 型 中 密 度 型 高 密 度 型 ストレージ キャッシュ 型 蓄 積 型 大 容 量 蓄 積 型 描 画 速 度 低 速 型 中 速 型 高 速 型 並 行 処 理 シングル 型 マルチ 対 応 型 ビデオ 再 生 少 機 能 型 中 機 能 型 高 機 能 型 オーディオ 再 生 少 機 能 型

5 8.2 高 機 能 型 再 生 開 始 遅 延

6 1 性 能 要 求 条 件 の 概 要 本 文 書 は Web-based Signage(ウェブ/HTML5 技 術 に 基 づくデジタルサイネージ) 普 及 を 目 的 に Web-based Signage に 求 められるプレーヤー 端 末 の 性 能 に 関 して ウェブ/HTML5 技 術 関 連 の 要 求 条 件 を 整 理 したものである 本 文 書 では 3 章 から10 章 に 各 要 求 条 件 が 定 義 されている 各 要 件 ごとの 評 価 テスト 手 順 については Web-based Signage テストスペック 文 書 に 記 されている 1.1 性 能 評 価 の 範 囲 Web-based Signage は コンテンツを 管 理 する CMS(コンテンツ 登 録 やプレイリストなどを 管 理 ) コンテンツを 配 信 する CDN( 配 信 クラウドとネットワーク) そして コンテンツを 再 生 する 端 末 から 構 成 さ れる 本 資 料 は これら Web-based Signage システム 全 体 のうち 端 末 を 評 価 の 対 象 にする 端 末 は 以 下 の 要 素 で 構 成 される ハードウェア 物 理 的 に 端 末 を 構 成 する 構 成 要 素 を 指 す 具 体 的 には パネル SoC(CPU, GPU, メモリなど) 入 出 力 インタ フェース(HDMI, USB, 電 源 など)で 構 成 される オペレーティングシステム Web-based Signage として 端 末 ハードウェアを 利 用 するためにインストールされる 基 本 ソフトを 指 す 具 体 的 には Windows, Android, ios, Linux, FreeBSD, Firefox OS などを 指 す ブラウザーランタイム HTML, CSS, JavaScript などの Web 標 準 技 術 を 動 作 させることができるアプリケーション 基 盤 を 指 す 具 体 的 に はウェブブラウザーを 指 すが 必 ずしも 一 般 的 なウェブブラウザーである 必 要 はない 例 えば Android の WebView など ランタイムとして 用 意 された 環 境 も 含 む JS プレーヤー プレイリストに 基 づいてコンテンツを 再 生 するためのアプリケーションを 指 す Web-based Signage では ブラウザーラ ンタイム 上 で 動 作 するウェブアプリケーションとして 作 られる 具 体 的 には HTML, CSS, JavaScript を 駆 使 して 開 発 される コンテンツ コンテンツは JS プレーヤー 上 で 表 示 または 実 行 され サイネージ 端 末 の 前 にいるユーザーに 見 えるものである コンテ ンツは 単 体 画 像 動 画 または ウェブアプリケーションとして 制 作 される 中 には これらコンテンツを 表 示 しつつ 音 声 を 再 生 するものも 存 在 する 4

7 本 資 料 の 性 能 評 価 の 対 象 である 端 末 とは 上 記 構 成 要 素 のうち ハードウェア オペレーティングシステ ム ブラウザーランタイムまでを 意 味 する また 本 性 能 評 価 は これら 構 成 要 素 を 個 別 に 評 価 するのではなく これらを 組 み 合 わせた 状 態 つま り 実 際 の 端 末 商 品 として 総 合 的 に 評 価 することとする なお ウェブ/HTML5 技 術 を 使 ったサイネージ 端 末 のうち ネットワーク 接 続 を 有 しない または ネット ワーク 接 続 を 有 するもののネットワークを 使 わずにコンテンツを 再 生 するスタンドアローン 型 のサイネージ 端 末 (USB ストレージに 保 存 したコンテンツを 再 生 するタイプの 端 末 )は 評 価 の 対 象 外 とする 本 性 能 要 件 文 書 の 記 載 対 象 は ウェブ/HTML5 の 表 示 関 連 の 性 能 のみに 絞 っている 例 えば 長 期 安 定 性 (ハングアップしないこと)やタスクスケジューラ 関 連 など サイネージ 端 末 に 対 する 一 般 的 な 要 件 については 対 象 としない また 外 部 デバイスとの 連 携 機 能 (デバイス API など)については 現 状 のブラウ ザでの 実 装 状 況 をかんがみ 本 版 では 対 象 としていない 1.2 評 価 の 方 針 Web-based Signage の 用 途 は 多 岐 にわたる 必 ずしも 端 末 が 本 資 料 の 性 能 要 求 条 件 すべてを 満 たす 必 要 はない そのため 本 資 料 では 端 末 を 単 一 的 なレベル 評 価 ではなく 性 能 レベルを 端 末 の 用 途 に 応 じた 適 合 用 途 として 分 類 し それぞれの 適 合 要 件 を 定 義 することとする 5

8 2 適 合 要 件 の 分 類 と 性 能 評 価 端 末 の 本 評 価 要 件 では まず 評 価 分 類 を 定 義 し その 評 価 分 類 ごとに 性 能 を 軸 とした 適 合 分 類 に 端 末 を 分 類 する 分 類 の 概 要 は 下 表 のとおり 分 類 表 評 価 分 類 適 合 分 類 説 明 解 像 度 小 密 度 型 離 れた 場 所 から 見 ることを 前 提 にした 旧 来 型 のサイネージを 指 す 小 さな 文 字 を 表 示 するコンテ ンツには 向 かない 中 密 度 型 至 近 距 離 から 見 られることを 前 提 に 小 さな 文 字 ( 映 画 の 字 幕 より 小 さい 文 字 )でも 明 瞭 に 読 めるレベルのサイネージを 指 す また パネルのサイズが 小 さければ ブランディングを 重 視 したコンテ ンツにも 使 われる 高 密 度 型 ブランディングやリアリティを 重 視 したコンテンツを 表 示 できるレベルのサイネージを 指 す ストレージ キャッシュ 型 コンテンツとなる 画 像 ファイルや 動 画 ファイルを 保 存 する 機 能 を 有 しない 端 末 を 指 す 蓄 積 型 コンテンツとなる 画 像 ファイルや 動 画 ファイルを 保 存 する 機 能 を 有 する 端 末 を 指 すが 保 存 サイズ が 小 さいものを 指 す 大 容 量 蓄 積 型 コンテンツとなる 画 像 ファイルや 動 画 ファイルを 保 存 する 機 能 を 有 する 端 末 を 指 すが 保 存 サイズ が 大 きいものを 指 す 描 画 速 度 低 速 型 ティッカー ウェブコンテンツアニメーション 全 画 面 遷 移 ( 移 動 やフェード)などのレンダリングにお いて 誰 が 見 てもコマ 落 ちしているのが 良 く 分 かるレベル 静 止 画 しか 表 示 しないケースにおいては 低 速 型 で 十 分 対 応 可 能 中 速 型 ティッカー ウェブコンテンツアニメーション 全 画 面 遷 移 ( 移 動 やフェード)などのレンダリングにお いて 違 和 感 がないレベル 高 速 型 ティッカー ウェブコンテンツアニメーション 全 画 面 遷 移 ( 移 動 やフェード)などのレンダリングにお いて 一 般 の 人 がコマ 落 ちに 全 く 気 づけないレベル 並 行 処 理 シングル 型 同 時 並 行 処 理 に 効 果 が 無 い 端 末 を 指 す 静 止 画 を 表 示 するだけのシンプルな 用 途 であればこ れで 十 分 といえる マルチ 対 応 型 同 時 並 行 処 理 をサポートする 端 末 を 指 す 並 行 処 理 が 発 生 しても 動 画 やアニメーションの 再 生 を 妨 げることがないレベル ビデオ 再 生 少 機 能 型 ブラウザーランタイムがサポートする 解 像 度 より 小 さいサイズのビデオであれば 再 生 できるレベル 中 機 能 型 ブラウザーランタイムがサポートする 解 像 度 のビデオを 全 画 面 で 再 生 できるレベル 高 機 能 型 ブラウザーランタイムがサポートする 解 像 度 のビデオを 全 画 面 で 再 生 できるだけでなく 縮 小 または 拡 大 表 示 回 転 表 示 移 動 表 示 したまま 再 生 できるレベル オーディオ 再 生 少 機 能 型 単 にオーティオを 再 生 できるレベル 高 機 能 型 オーディオの 生 成 合 成 再 生 エフェクトなどに 対 応 したレベル 再 生 開 始 遅 延 低 速 型 再 生 開 始 コマンドを 送 ってから 実 際 に 再 生 が 開 始 されるまでの 遅 延 がある 程 度 以 上 存 在 するも の 高 速 型 再 生 開 始 コマンドを 送 ってから 実 際 に 再 生 が 開 始 されるまでの 遅 延 が 小 さいもの 6

9 3 解 像 度 解 像 度 の 分 類 と 評 価 基 準 は 下 表 のとおりとする 性 能 要 件 分 類 小 密 度 型 中 密 度 型 高 密 度 型 評 価 基 準 ブラウザーランタイムのビューポート 解 像 度 が 画 素 数 換 算 で 720P 相 当 ( ピクセル) 以 下 の 解 像 度 のものを 指 す ブラウザーランタイムのビューポート 解 像 度 が 画 素 数 換 算 で 720P 相 当 ( ピクセル)より 大 きく 1080P 相 当 (1920 x 1080 ピクセル) 以 下 のものを 指 す ブラウザーランタイムのビューポート 解 像 度 が 画 素 数 換 算 で 1080P 相 当 (1920 x 1080 ピクセル) を 超 えるものを 指 す ブラウザーランタイムのビューポート 解 像 度 は ブラウザーに 割 り 当 てられるビデオメモリーのサイズに 依 存 す る また 解 像 度 を 高 くするには ブラウザーランタイムが GPU アクセラレーションをサポートしないと 期 待 通 りのパフォーマンスを 上 げることができない 本 項 目 は ブラウザーランタイムのビューポート 解 像 度 の 大 きさによって 分 類 する すべての 端 末 が 本 分 類 のいずれかに 属 する 3.1 小 密 度 型 離 れた 場 所 から 見 ることを 前 提 にした 旧 来 型 のサイネージを 指 す 小 さな 文 字 を 表 示 するコンテンツには 向 かない 具 体 的 には ブラウザーランタイムのビューポート 解 像 度 が 画 素 数 換 算 で 720P 相 当 ( ピクセル) 以 下 の 解 像 度 を 指 す この HD 相 当 の 解 像 度 は 一 般 的 なサイネージの 用 途 として もっとも 普 及 している 解 像 度 であり ほとんどのライトウェイトのデジタルサイネージの 用 途 として 十 分 なサイ ズである 3.2 中 密 度 型 至 近 距 離 から 見 られることを 前 提 に 小 さな 文 字 ( 映 画 の 字 幕 より 小 さい 文 字 )でも 明 瞭 に 読 めるレ ベルのサイネージを 指 す また パネルのサイズが 小 さければ ブランディングを 重 視 したコンテンツにも 使 わ れる 具 体 的 には ブラウザーランタイムのビューポート 解 像 度 が 画 素 数 換 算 で 1280x720 を 超 えて 1080P(フル HD) 相 当 ( ピクセル) 以 下 のものを 指 す 中 密 度 型 は 小 密 度 型 と 比 べて 詳 細 なピクセル 表 現 が 可 能 となり とりわけ 近 い 距 離 なら 小 さな 文 字 でも 明 瞭 に 読 み 取 れる フロア 案 内 などのメッセージボードにも 活 用 が 可 能 である また 42 インチ 程 度 のパネルであれば ブランディングを 重 視 したコンテンツにも 十 二 分 に 活 用 できる 7

10 中 密 度 型 は 直 近 の Web-based Signage では 必 須 の 機 能 となっていくと 考 えられる 3.3 高 密 度 型 ブランディングやリアリティを 重 視 したコンテンツを 表 示 できるレベルのサイネージを 指 す 具 体 的 には ブラ ウザーランタイムのビューポート 解 像 度 が 画 素 数 換 算 でフル HD 相 当 ( ピクセル)を 超 えるものを 指 す 高 密 度 型 は 大 型 パネルを 使 いつつも 粗 が 目 立 たない また パネルのサイズが 小 さければ 本 物 と 見 間 違 うほどのリアリティを 再 現 できる 既 存 のハイエンドのデジタルサイネージシステムと 同 等 の 品 質 を 提 供 する 8

11 4 ストレージ ストレージの 分 類 と 評 価 基 準 は 下 表 のとおりとする 性 能 要 件 分 類 キャッシュ 型 蓄 積 型 大 容 量 蓄 積 型 評 価 基 準 コンテンツとなる 画 像 ファイルや 動 画 ファイルを 保 存 する 機 能 を 有 しない または 保 存 機 能 は 有 するが ブ ラウザーランタイムが W3C で 規 定 された Indexed Database API 1 または File API: Directories and System 2 のいずれをも 実 装 していない 端 末 を 指 す コンテンツとなる 画 像 ファイルや 動 画 ファイルを 保 存 する 機 能 を 有 し かつ ブラウザーランタイムが W3C で 規 定 された Indexed Database API 1 または File API: Directories and System 2 のいずれか を 実 装 している 端 末 を 指 すが そのうち 保 存 サイズが 1024MB 未 満 のものを 指 す コンテンツとなる 画 像 ファイルや 動 画 ファイルを 保 存 する 機 能 を 有 し かつ ブラウザーランタイムが W3C で 規 定 された Indexed Database API 1 または File API: Directories and System 2 のいずれか を 実 装 している 端 末 を 指 すが そのうち 保 存 サイズが 1024MB 以 上 のものを 指 す 端 末 がストレージをサポートするかどうかによって ネットワークトラフィック 端 末 起 動 からコンテンツ 再 生 ま での 時 間 安 定 的 な 長 時 間 運 転 などのパフォーマンスに 影 響 する 本 項 目 は ストレージの 有 無 また 蓄 積 可 能 な 容 量 によって 分 類 する すべての 端 末 が 本 分 類 のい ずれかに 属 する なお 端 末 のストレージに 事 前 蓄 積 してから 再 生 するには HTML5(Javascript 含 む)の 範 囲 外 の 手 法 で 実 現 することもできる 本 要 求 条 件 文 書 では HTML5 ベースの 方 法 を 対 象 としているため この 項 目 もそれを 用 いたものとなっている 4.1 キャッシュ 型 キャッシュ 型 は ストレージを 持 たない または ストレージを 有 するものの ブラウザーランタイムが W3C で 規 定 された Indexed Database API 1 および File API: Directories and System 2 のいず れも 実 装 していない 端 末 を 指 す キャッシュ 型 は 端 末 を 起 動 するたびにコンテンツのダウンロードが 必 要 となり コンテンツ 再 生 までに 時 間 がかかる ただし ブラウザーキャッシュによって 次 回 起 動 時 におけるダウンロードデータ 量 は 抑 えられる 可 能 性 があるが 本 分 類 では ブラウザーキャッシュの 有 無 は 考 慮 しない なお ここで 言 うブラウザーキャッ シュとは Application Cache ではないので 注 意 して 欲 しい また ネットワークの 状 況 によっては 動 画 の 再 生 が 不 安 定 になるなどのデメリットが 想 定 される 一 方 ス トレージが 無 い 分 だけ 端 末 のハードウェアコストが 抑 えられる また コンテンツ 配 信 サーバーと 端 末 との 間 のネットワーク 環 境 が 良 好 であれば(オンプレミス 型 配 信 環 境 など) さほど 問 題 にならない 9

12 4.2 蓄 積 型 蓄 積 型 は ストレージを 持 ち かつ ブラウザーランタイムが W3C で 規 定 された Indexed Database API 1 または File API: Directories and System 2 のいずれかを 実 装 している 端 末 を 指 す 蓄 積 型 は 表 示 するコンテンツをストレージに 蓄 積 し コンテンツ 再 生 時 には 蓄 積 されたコンテンツを 使 うため ネットワーク 環 境 に 依 存 しない 安 定 再 生 が 期 待 できる また コンテンツを 都 度 ダウンロードする 必 要 がないため コンテンツが 更 新 されていない 限 り 端 末 を 起 動 してからコンテンツの 再 生 までの 時 間 が 大 幅 に 短 縮 される 4.3 大 容 量 蓄 積 型 大 容 量 蓄 積 型 は 蓄 積 型 のうち 蓄 積 容 量 が 1024MB 以 上 のものを 指 す 1 W3C Indexed Database API ストレージ 型 においては Indexed Database API だけでなく Blob オブジェクトの 保 存 および File API 仕 様 で 規 定 された Blob URL の 生 成 (createobjecturl()メソッド)もサポートしなければいけない 2 W3C File API: Directories and System 年 3 月 現 在 W3C File API: Directories and System は 廃 止 となり 新 たに File System API が 考 案 されている ただし まだ 公 開 版 草 案 になっておらず ブラウザーの 実 装 もないことから しばらくは File API: Directories and System が 使 われることになる 将 来 的 には File System API に 置 き 換 えられることになる 10

13 5 描 画 速 度 描 画 速 度 の 分 類 と 評 価 基 準 は 下 表 のとおりとする 性 能 要 件 分 類 低 速 型 中 速 型 高 速 型 評 価 基 準 CSS transform / transition を 利 用 して ティッカーテキスト( 画 像 ではなくフォントで 実 現 し 高 さが 画 面 高 の 10%)の 水 平 移 動 をした 場 合 及 び 静 止 画 像 ( 全 画 面 )の 水 平 移 動 を 行 った 場 合 いずれかで 15 秒 間 でのコマ 落 ち(フレーム 落 ち)が 合 計 10 フレームを 超 えるものとする CSS transform / transition を 利 用 して ティッカーテキスト( 画 像 ではなくフォントで 実 現 し 高 さが 画 面 高 の 10%)の 水 平 移 動 をした 場 合 及 び 静 止 画 像 ( 全 画 面 )の 水 平 移 動 を 行 った 場 合 のいずれか で 15 秒 間 でのコマ 落 ち(フレーム 落 ち)の 合 計 が 3 フレームを 超 えて 両 方 の 場 合 で 10 フレーム 以 下 と なるものとする CSS transform / transition を 利 用 して ティッカーテキスト( 画 像 ではなくフォントで 実 現 し 高 さが 画 面 高 の 10%)の 水 平 移 動 をした 場 合 及 び 静 止 画 像 ( 全 画 面 )の 水 平 移 動 を 行 った 場 合 の 両 方 で 15 秒 間 でのコマ 落 ち(フレーム 落 ち)が 合 計 3 フレーム 以 下 となるものとする コンテンツアニメーションにおいてコマ 落 ち(フレーム 落 ち)は パフォーマンスを 測 る 上 で 重 要 な 指 標 となる 本 項 目 は コマ 落 ち(フレーム 落 ち)を 基 準 に 分 類 する すべての 端 末 が 本 分 類 のいずれかに 属 する 本 評 価 は 以 下 の 検 証 を 総 合 的 に 判 断 して 分 類 分 けを 行 うこととする ティッカー ティッカーはシーン 領 域 上 に 用 意 されたティッカー 領 域 (Ticker Box)の 中 を ティッカーテキスト (Ticker Text)が 右 から 左 に 人 が 読 める 速 度 で 移 動 する パネル 横 置 きを 前 提 とし 全 画 面 静 止 画 コンテンツをシーン 領 域 に 表 示 した 状 態 で 高 さが 全 体 の 10%を 占 めるティッカー 領 域 内 で ティッカーテキストが 一 定 の 時 間 をかけて 右 端 から 左 端 に 到 達 する 速 度 で 移 動 するものとする この 状 況 で ティッカーの 動 きを 評 価 する 使 用 するティッカーテキストは 画 像 で はなくフォントで 実 現 することとし また 十 分 な 長 さを 有 することとする 11

14 遷移効果の検証には CSS Transform と CSS Transition を採用する CSS の例 遷移前 transform: translatex(1920px); transition: transform 30s linear 0s; 遷移時 transform: translatex(-3840px); 遷移前の translatex()の引数と transform の duration は画面横幅とテキストの幅を考慮し て調整すること 画面遷移 シーン切り替えに使う遷移効果を検証材料とする 本評価においては ブラウザーランタイムのビューポー ト解像度と同サイズの画像を使い スライドの画面遷移を検証することとする 実際のサイネージコンテン ツでは 1 秒以下の遷移を使うが ここではパフォーマンス評価を目的とするため 計測可能な秒数で評 価する 画面遷移にはスライドの他にフェードインやスケールもある 以下に事例を示す 遷移効果の検証には CSS Transform と CSS Transition を採用する フェードイン CSS の例 遷移前 opacity: 0; transition: opacity 5s linear 0s; 遷移時 opacity: 1; スライド CSS の例 遷移前 transform: translatex(-1920px); transition: transform 5s linear 0s; 遷移時 transform: translatex(0px); 遷移前の translatex()の引数は画面横幅に合わせること 12

15 スケール CSS の 例 遷 移 前 :transform: scale(0); transition: transform 5s linear 0s; 遷 移 時 :transform: scale(1) 5.1 低 速 型 いずれの 評 価 においても 誰 が 見 てもコマ 落 ちが 気 になるレベル ティッカーは 読 みづらい 5.2 中 速 型 いずれの 評 価 においても 実 用 に 支 障 がないレベルだが よく 見 れば 一 般 の 人 でもコマ 落 ちが 認 識 でき るレベル 5.3 高 速 型 いずれの 評 価 においても 期 待 通 りの 表 現 が 再 現 され 一 般 の 人 ではコマ 落 ちを 認 識 することができな いレベル 13

16 6 並 行 処 理 並 行 処 理 の 分 類 と 評 価 基 準 は 下 表 のとおりとする 性 能 要 件 分 類 シングル 型 マルチ 対 応 型 評 価 基 準 同 時 並 行 処 理 に 効 果 が 無 い 端 末 を 指 す 静 止 画 を 表 示 するだけのシンプルな 用 途 であればこれで 十 分 といえる 具 体 的 には ブラウザーランタイムが Web Workers を 実 装 していない または 実 装 していたとし ても ワーカースレッド 2 個 を 使 用 して 分 散 処 理 した 場 合 に 1 個 での 処 理 に 比 べ トータルの 処 理 時 間 が 短 縮 しないものを 指 す 同 時 並 行 処 理 をサポートする 端 末 を 指 す 並 行 処 理 が 発 生 しても 動 画 やアニメーションの 再 生 を 妨 げる ことがないレベル 具 体 的 には ブラウザーランタイムが Web Workers を 実 装 しており ワーカースレッド 2 個 を 使 用 して 分 散 処 理 した 場 合 に 1 個 での 処 理 に 比 べ トータルの 処 理 時 間 が 短 縮 するものを 指 す Web-based Signage 用 JS プレーヤーは プレイリストに 基 づいたメディア 表 示 や 再 生 だけではなく 平 行 してさまざまな 処 理 を 行 う また マルチリージョンに 対 応 した JS プレーヤーでは 複 数 の 画 面 を 分 割 表 示 しつつ それぞれを 独 立 して 再 生 する 必 要 がある この 場 合 レンダリングを 伴 わない 処 理 をバックグラウンドで 実 行 することで メディア 表 示 や 再 生 を 妨 げる ことなく さまざまな 並 行 処 理 が 可 能 となる 本 項 目 は スレッドによる 分 割 処 理 によって トータルの 処 理 時 間 の 短 縮 が 認 められるかどうかで 判 断 す る すべての 端 末 が 本 分 類 のいずれかに 属 する 6.1 シングル 型 シングル 型 は ウェブランタイムが Web Workers を 実 装 していない または 実 装 しているが スレッド 処 理 をしても 効 果 があまり 認 められないレベルを 指 す 一 般 的 に CPU がシングルコアの 場 合 はこれに 相 当 する 6.2 マルチ 対 応 型 マルチ 対 応 型 は ブラウザーランタイムが Web Workers を 実 装 しており 2 つ 以 上 のスレッドを 同 時 に 処 理 することが 可 能 であり トータルの 処 理 速 度 の 短 縮 が 認 められるレベルを 指 す 一 般 的 に CPU がマ ルチコアの 場 合 はこれに 相 当 する マルチ 対 応 型 に 属 するためには 1 つのワーカースレッドでの 処 理 時 間 に 対 して 2 つのワーカースレッドで 分 散 処 理 した 時 にトータルの 処 理 時 間 の 短 縮 が 認 められることを 条 件 とする 14

17 7 ビデオ 再 生 ビデオ 再 生 の 分 類 と 評 価 基 準 は 下 表 のとおりとする 性 能 要 件 分 類 少 機 能 型 評 価 基 準 次 を 満 たすこと (1)mp4(H.264/AAC/MP4)もしくは webm(vp8/vorbis/webm)の 少 なくとも いずれか 一 方 をサポートすること (2)Javascript から video 要 素 のオブジェクトの play()メソッドを 実 行 したら ビデオの 再 生 が 開 始 すること ビデオ 解 像 度 に 関 しては ブラウザーランタイムがサポートする 解 像 度 のビデオを 全 画 面 で 再 生 できなくても よいとする 中 機 能 型 高 機 能 型 上 記 (1)(2)の 条 件 に 加 え ブラウザーランタイムがサポートする 解 像 度 の 30fps 以 上 のフレーム レートのビデオをコマ 落 ちなく 全 画 面 で 再 生 できること 上 記 (1)(2)の 条 件 に 加 え ブラウザーランタイムがサポートする 解 像 度 の 30fps 以 上 のフレーム レートのビデオをコマ 落 ちなく 全 画 面 で 再 生 でき かつ 縮 小 または 拡 大 後 の 再 生 回 転 後 の 再 生 移 動 後 の 再 生 ( 具 体 的 には CSS Transforms を video 要 素 に 適 用 しての 再 生 )ができるレベル ビデオを 再 生 するためには それなりの CPU パワーと GPU パワーを 要 求 する 特 にブラウザーランタイム がサポートする 解 像 度 のビデオを 全 画 面 で 再 生 するためには ブラウザーランタイムがハードウェアデコードお よび GPU アクセラレーションに 対 応 している 必 要 がある この 差 が ビデオ 再 生 のパフォーマンスに 大 きく 影 響 を 及 ぼす ビデオ 再 生 の 分 類 に 属 するためには 以 下 の 要 件 をすべて 満 たす 必 要 がある 1. 以 下 のビデオタイプのうち 最 低 でも 一 つをサポートすること MIME-Type ビデオコーデック オーディオコーデック コンテナ video/mp4 H.264 AAC MP4 video/webm VP8 Vorbis WebM 2. 自 動 再 生 をサポートすること 近 年 のスマートフォンやタブレット 向 け OS のブラウザーでは ユーザーの 操 作 なしに JavaScript から ビデオの 自 動 再 生 を 禁 止 しているものがある 本 分 類 に 属 するためには この 制 限 を 設 けてはいけない 実 際 には JavaScript から video 要 素 のオブジェクトの play()メソッドを 実 行 したら ビデオの 再 生 が 開 始 される 必 要 がある たとえ 端 末 がビデオ 再 生 をサポートしていたとしても 以 上 の 要 件 を 満 たさない 場 合 は ビデオ 再 生 の 分 類 には 属 さない 15

18 7.1 少 機 能 型 少 機 能 型 は 主 に ソフトウェアデコードにしか 対 応 していないブラウザーランタイムが 該 当 する CPU の みでデコード 及 びレンダリングを 行 うため 全 画 面 のなめらかな 再 生 は 期 待 できないが 解 像 度 が 小 さけれ ば 問 題 なく 再 生 できる 少 機 能 型 は HTML5 仕 様 で 規 定 された video 要 素 を 使 うことを 前 提 としている ただし HTML 上 にマークアップされた video 要 素 を 再 生 するのではなく すべて JavaScript から video 要 素 の 生 成 と 再 生 開 始 が 行 えなければいけない 7.2 中 機 能 型 中 機 能 型 は 前 述 の 少 機 能 型 に 加 え サイネージとしては 最 も 一 般 的 な 用 途 を 想 定 し 全 画 面 のビデ オ 再 生 を 必 須 とする 小 さい 解 像 度 を 引 き 伸 ばして 全 画 面 表 示 する 場 合 は 中 機 能 型 に 属 さない 少 なくとも ブラウザーランタイムがサポートする 解 像 度 と 同 じ 解 像 度 のビデオを 拡 大 することなく 全 画 面 で 滑 らかに 再 生 できるレベルを 指 す 30fps でエンコードされたビデオデータを コマ 落 ちすることなく 再 生 できな ければいけない 7.3 高 機 能 型 高 機 能 型 は 中 機 能 型 をサポートするのはもちろんのこと そのビデオを 縮 小 または 拡 大 表 示 回 転 表 示 移 動 表 示 しつつ 滑 らかに 再 生 できるレベルを 指 す 実 際 には CSS Transform を video 要 素 に 適 用 しても 期 待 通 りの 変 形 を 保 ったまま 再 生 できるレベルを 指 す CSS Transform 16

19 8 オーディオ 再 生 オーディオ 再 生 の 分 類 と 評 価 基 準 は 下 表 のとおりとする 性 能 要 件 分 類 少 機 能 型 評 価 基 準 次 を 満 たすこと (1)mp3(MP3/MP3)もしくは mp4(aac/m4a), webm(vorbis/webm), ogg(vorbis/ogg)の 少 なくとも 一 種 類 のオーディオ 再 生 をサポートすること (2)Javascript から audio 要 素 のオブジェクトの play()メソッドを 実 行 したら オーディオの 再 生 が 開 始 すること 高 機 能 型 上 記 の 条 件 に 加 え Web Audio API の 各 種 インターフェースの 利 用 により オーディオの 生 成 合 成 エ フェクトなどに 対 応 したレベル 具 体 的 には 少 なくとも 次 のインターフェースをサポートすること AudioContext, AudioNode, AudioDestinationNode, AudioBuffer, AudioBufferSourceNode, MediaElementAudioSourceNode, AudioParam, GainNode, DelayNode, OscillatorNode オーディオ 再 生 の 分 類 に 属 するためには 以 下 の 要 件 をすべて 満 たす 必 要 がある 1. 以 下 のオーディオタイプのうち 最 低 でも 一 つをサポートすること MIME-Type オーディオコーデック コンテナ audio/mp3 MP3 MP3 audio/mp4 AAC M4A audio/webm Vorbis WebM audio/ogg Vorbis Ogg 2. 自 動 再 生 をサポートすること 近 年 のスマートフォンやタブレット 向 け OS のブラウザーでは ユーザーの 操 作 なしに JavaScript から オーディオの 自 動 再 生 を 禁 止 しているものがある 本 分 類 に 属 するためには この 制 限 を 設 けてはいけ ない 実 際 には JavaScript から audio 要 素 のオブジェクトの play()メソッドを 実 行 したら オーディオの 再 生 が 開 始 される 必 要 がある たとえ 端 末 がオーディオ 再 生 をサポートしていたとしても 以 上 の 要 件 を 満 たさない 場 合 は オーディオ 再 生 の 分 類 には 属 さない 17

20 8.1 少 機 能 型 少 機 能 型 は HTML5 仕 様 で 規 定 された audio 要 素 を 使 うことを 前 提 としている ただし HTML 上 にマークアップされた audio 要 素 を 再 生 するのではなく すべて JavaScript から audio 要 素 の 生 成 と 再 生 開 始 が 行 えなければいけない 8.2 高 機 能 型 高 機 能 型 は HTML5 仕 様 で 規 定 された audio 要 素 を 使 ったオーディオを 再 生 できるだけでなく W3C Web Audio API を 使 ったオーディオの 生 成 合 成 エフェクトなどに 対 応 したレベルを 指 す Web Audio API を 使 うことで 音 源 をスクリプトから 生 成 することでダウンロードデータの 低 減 に 寄 与 す るだけでなく 複 数 の 音 源 を 合 成 することで 多 彩 なオーディオ 表 現 が 可 能 となる Web based Signage では Web Audio API がカバーする 高 度 なオーディオシンセサイジングのすべ てを 必 要 としない 基 本 的 には 以 下 のユースケースをカバーできれば 良 い audio 要 素 にセットされたオーディオを Web Audio API でコントロールする 複 数 の 音 源 を 同 時 に 再 生 する 個 々の 音 源 に 音 量 調 整 と 遅 延 を 適 用 する サイン 波 を 指 定 することで 単 調 な 音 源 をスクリプトから 生 成 する 高 機 能 型 に 分 類 されるためには 上 記 のユースケースを 実 現 する 必 要 がある 少 なくとも 以 下 のインタ フェースをサポートすれば 実 現 可 能 である AudioContext AudioNode AudioDestinationNode AudioBuffer AudioBufferSourceNode MediaElementAudioSourceNode AudioParam GainNode DelayNode OscillatorNode 18

21 9 再 生 開 始 遅 延 ビデオ オーディオ 再 生 時 の 遅 延 に 関 する 性 能 要 件 は 下 表 のとおりとする ビデオ オーディオそれぞれに ついて 評 価 する 性 能 要 件 分 類 低 速 型 評 価 基 準 再 生 開 始 コマンドを 送 ってから 実 際 に 再 生 が 開 始 されるまでの 遅 延 が ビデオ オーディオのいずれか 一 方 もしくは 両 方 において 0.5 秒 以 上 のもの 高 速 型 再 生 開 始 コマンドを 送 ってから 実 際 に 再 生 が 開 始 されるまでの 遅 延 が ビデオ オーディオ 共 に 0.5 秒 未 満 のもの 本 評 価 は 以 下 の 手 順 で 実 施 することとする 下 記 は video について 記 すが audio も 同 様 1. JavaScript から video 要 素 (HTMLVideoElement オブジェクト)を 生 成 する 2. 生 成 した HTMLVideoElement オブジェクトの preload プロパティに"auto"をセットする 3. 生 成 した HTMLVideoElement オブジェクトに timeupdate イベントのリスナーをセットする 4. 生 成 した HTMLVideoElement オブジェクトの src プロパティにビデオファイルの URL をセットする 5. 生 成 した video 要 素 (HTMLVideoElement オブジェクト)をドキュメントに 挿 入 する 6. 数 秒 経 過 後 に HTMLVideoElement オブジェクトの play()メソッドを 実 行 する 7. play()メソッドを 呼 び 出 してから 最 初 に 生 成 した timeupdate イベントが 発 生 するまでの 時 間 を 本 評 価 の 結 果 とする 一 般 的 なブラウザーでは HTML 上 に video 要 素 や audio 要 素 を 生 成 し src 属 性 にビデオ オーディオ ファイルの URL をセットした 時 点 で 再 生 開 始 位 置 から 特 定 の 範 囲 のビデオデータ オーディオデータをダウン ロードしデコード 済 みの 状 態 でスタンバイする これによって いつでもすぐに 再 生 できるようにすることができる ( 意 図 的 に video 要 素 audio 要 素 の preload 属 性 に"none"を 指 定 した 場 合 は 除 く) 近 年 のスマート フォンやタブレット 向 け OS のブラウザーでは プリロードを 禁 止 しているものがあるが こういった 環 境 では 高 速 型 の 要 件 を 満 たすことは 難 しいといえる 多 くのブラウザーでは ビデオが 再 生 されると timeupdate イベントは 250 ミリ 秒 ごとに 発 生 する そのため play()メソッドを 呼 び 出 してから 速 やかにビデオが 再 生 される 環 境 であれば 500 ミリ 秒 (0.5 秒 )の 間 に 少 なくとも 1 回 は timeupdate イベントが 発 生 するはずである play()メソッドを 呼 び 出 すまでに 十 分 なプリロード 分 のメディアデータがロードできるよう 本 評 価 においては 十 分 なネットワーク 帯 域 と サーバーレスポンスを 確 保 すること 19

22 資 料 2 Web-based Signage 端 末 性 能 テスト 仕 様 第 1 版 2016 年 3 月 作 成 : Web プラットフォーム 性 能 ベンチマーク 検 討 会 発 行 : 慶 應 義 塾 大 学 SFC 研 究 所 先 端 ウェブアーキテクチャ ラボ 1

23 目 次 1. 本 文 書 について 性 能 評 価 テストの 範 囲 性 能 評 価 の 考 え 方 本 文 書 の 利 用 シーン Web-based Signage 端 末 テスト 仕 様 解 像 度 試 験 手 順 前 提 条 件 実 装 条 件 / 期 待 値 備 考 ストレージ 試 験 手 順 前 提 条 件 実 装 条 件 / 期 待 値 備 考 描 画 速 度 試 験 手 順 前 提 条 件 実 装 条 件 / 期 待 値 備 考 並 行 処 理 試 験 手 順 前 提 条 件 実 装 条 件 / 期 待 値 備 考

24 2.5. ビデオ 再 生 試 験 手 順 前 提 条 件 実 施 条 件 / 期 待 値 備 考 オーディオ 再 生 試 験 手 順 前 提 条 件 実 施 条 件 / 期 待 値 備 考 再 生 遅 延 時 間 試 験 手 順 前 提 条 件 実 施 条 件 / 期 待 値 備 考 Appendix Web-based Signage 端 末 の 実 装 タイプとテスト 適 合 要 件 静 止 画 スライドショー 型 動 画 型 複 合 型 Web-based Signage 端 末 性 能 テスト 申 請 例 Web-based Signage 端 末 性 能 テスト 結 果 例

25 1. 本 文 書 について 本 文 書 は Web-based Signage 端 末 性 能 要 件 文 書 に 記 載 された ウェブ(HTML5)ベースサイ ネージ 端 末 に 対 する 各 性 能 要 件 について 評 価 試 験 を 実 施 するためのテスト 仕 様 である 性 能 要 件 の 計 7 項 目 ( 解 像 度 ストレージ 描 画 速 度 並 行 処 理 ビデオ 再 生 オーディオ 再 生 再 生 開 始 遅 延 ) それぞれに 対 応 して 2 章 の 各 節 に 試 験 内 容 を 記 載 している 性 能 評 価 試 験 としては 一 般 に 出 来 る 限 り 自 動 化 されることが 望 ましい しかしながら 対 象 が PC で はなく 組 込 系 の 端 末 であるということを 前 提 とすると 目 視 など 手 動 に 頼 らざるを 得 ないケースも 多 いと 考 え られる したがって 現 時 点 では 本 文 書 でもそうした 手 動 による 試 験 手 順 を 記 載 している 項 目 もある 今 後 実 装 ブラウザの 進 化 等 により 試 験 手 順 は 改 訂 されていくことになろう 1.1. 性 能 評 価 テストの 範 囲 性 能 評 価 の 対 象 は 下 記 構 成 要 素 のうち ハードウェア オペレーティングシステム ブラウザーランタイ ムである ただし 本 性 能 評 価 は 構 成 要 素 を 個 別 に 評 価 するのではなく これらを 組 み 合 わせた 状 態 つまり 実 際 の 端 末 として 総 合 的 に 評 価 する 4

26 1.2. 性 能 評 価 の 考 え 方 端 末 の 性 能 の 高 低 を 単 純 に 評 価 するのではなく 評 価 項 目 ごとの 性 能 レベルを 端 末 用 途 に 応 じた 適 合 用 途 として 分 類 し その 評 価 を 実 施 することとする 1.3. 本 文 書 の 利 用 シーン 本 文 書 は 次 のようなテストでの 利 用 を 想 定 している 端 末 メーカーによる 社 内 でのテスト 端 末 メーカーの 依 頼 による 第 三 者 検 証 試 験 ロケーションオーナーもしくはサイネージシステム 構 築 受 託 業 者 による 採 用 候 補 端 末 のテスト( 第 三 者 委 託 も 含 む) その 他 本 文 書 の 試 験 項 目 を 実 施 することで Web-based Signage 端 末 性 能 要 件 文 書 の 規 格 に 準 拠 していることを 確 認 し 本 文 書 で 定 義 する 各 実 装 タイプ(Appendix 参 照 )に 分 類 されることを 認 証 するこ とができる 1 1 ただし プラットフォームとしての H/W とブラウザのすべての 組 合 わせにおいてのパフォーマンスや 動 作 を 約 束 するものではない 5

27 2. Web-based Signage 端 末 テスト 仕 様 2.1. 解 像 度 ブラウザーランタイムのビューポート 解 像 度 の 大 きさによって 3 種 ( 小 密 度 型 中 密 度 型 高 密 度 型 )に 分 類 される 機 器 が 実 装 している 分 類 ( 型 )の 条 件 を 満 たしていることを 確 認 する 試 験 手 順 申 告 値 の 解 像 度 のゾーンプレート 静 止 画 ( 以 下 テストチャートという 下 記 に 例 を 示 すが 解 像 度 が 確 認 可 能 なものであればこれに 限 らない)を 表 示 し 対 応 するブラウザーランタイムのビューポート 解 像 度 を 確 認 する 例 えば 目 視 により 確 認 する 前 提 条 件 当 該 テストチャートが 読 み 込 めること 実 装 条 件 / 期 待 値 当 該 ゾーンプレート 画 の 最 高 周 波 数 部 分 で 白 黒 の 分 離 が 確 認 できれば 申 告 通 りの 解 像 度 となる 最 高 周 波 数 まで 行 かない 場 合 白 黒 分 離 が 確 認 できる 最 大 の 周 波 数 を 読 み 取 る その 結 果 に 基 づき 小 密 度 型 ( ピクセル 以 下 ) 中 密 度 型 (1920 x 1080 ピクセル 以 下 ) 高 密 度 型 (1920 x 1080 ピクセルを 超 えるもの)に 分 類 する 備 考 特 になし 6

28 2.2. ストレージ ストレージの 有 無 また 蓄 積 可 能 な 容 量 によって 3 種 (キャッシュ 型 蓄 積 型 大 容 量 蓄 積 型 )に 分 類 される 機 器 が 実 装 している 分 類 ( 型 )の 条 件 を 満 たしていることを 確 認 する 試 験 手 順 合 計 1024MB となる 画 像 ファイルを 準 備 し Indexed Database API または File API: Directories and System を 利 用 して 端 末 に 保 存 を 試 みる 前 提 条 件 特 になし 実 装 条 件 / 期 待 値 保 存 機 能 が 全 くないもしくは Indexed Database API と File API: Directories and System のい ずれも 実 装 されていない 端 末 はキャッシュ 型 とする 保 存 可 能 なファイルサイズが 1024MB 未 満 の 端 末 を 蓄 積 型 とする 保 存 可 能 なファイルサイズが 1024MB 以 上 の 端 末 を 大 容 量 蓄 積 型 とする 備 考 特 になし 2.3. 描 画 速 度 ティッカーやアニメーションの 描 画 時 の 速 度 性 能 (フレームレート)を 測 定 する 試 験 手 順 ティッカー 様 々な 文 字 を 含 むティッカー( 高 さ: 画 面 高 の 10%)を 準 備 する( 画 像 ではなくフォントで 実 現 する) また ティッカー 画 像 を 水 平 スクロールさせる 際 の 背 景 画 像 としては 細 い 等 間 隔 の 縦 縞 模 様 を 有 するものとする( 例 : 下 図 参 照 ) CSS transform / transition を 利 用 して ティッカーテキストの 水 平 移 動 を 行 う その 速 度 は 1 フレームあたり 文 字 列 が 縞 1 本 分 進 む 速 度 とする 実 際 に 端 末 上 で 画 像 表 示 させ フレームレートを 測 定 する 例 えば 表 示 ディスプレイをビデオカメラで 録 画 しその 変 化 量 から 測 定 する 全 画 面 移 動 等 間 隔 の 縦 縞 模 様 の 重 畳 された 静 止 画 像 ( 全 画 面 )を 準 備 する( 例 : 下 図 参 照 ) CSS transform / transition を 利 用 して この 画 像 の 水 平 移 動 を 行 う その 速 度 は 1 フレームあたり 縞 1 本 分 進 む 速 度 とす る 実 際 に 端 末 上 で 画 像 表 示 させ コマ 落 ちの 程 度 を 測 定 する 例 えば 表 示 ディスプレイをビデオカメラで 録 画 しそのスロー 再 生 の 目 視 から 測 定 する 7

29 前 提 条 件 特 になし 実 装 条 件 / 期 待 値 ティッカー 全 画 面 移 動 のいずれかで 15 秒 間 の 再 生 中 のコマ 落 ち(フレーム 落 ち)が 合 計 10 フレームを 超 え る 時 低 速 型 と 判 定 する ティッカー 全 画 面 移 動 のいずれかで 15 秒 間 の 再 生 中 のコマ 落 ち(フレーム 落 ち)の 合 計 が 3 フレームを 超 えて 両 方 で 10 フレーム 以 下 となる 時 中 速 型 と 判 定 する ティッカー 全 画 面 移 動 の 両 方 で 15 秒 間 の 再 生 中 のコマ 落 ち(フレーム 落 ち)が 合 計 3 フレーム 以 下 の 時 高 速 型 と 判 定 する 備 考 特 になし 2.4. 並 行 処 理 端 末 の 同 時 並 行 処 理 性 能 を 評 価 する 試 験 手 順 ある 計 算 処 理 について Web Workers を 使 用 するコードを 作 成 しておく ワーカースレッドを 2 個 使 用 した 場 合 と 1 個 使 用 した 場 合 の 処 理 時 間 を 比 較 する 前 提 条 件 特 になし 実 装 条 件 / 期 待 値 ワーカースレッドを 2 個 使 用 しても 処 理 時 間 が 短 縮 しない 場 合 シングル 型 と 判 定 する 8

30 ワーカースレッドを 2 個 使 用 した 場 合 に 処 理 時 間 が 短 縮 する 場 合 マルチ 対 応 型 と 判 定 する 備 考 特 になし 2.5. ビデオ 再 生 映 像 の 再 生 性 能 を 評 価 する 試 験 手 順 1 ブラウザーランタイムのビューポート 解 像 度 ( 全 画 面 )のビデオ 映 像 (30fps)を 準 備 しておく 各 フレーム にはフレーム 番 号 をスーパーインポーズしておく これを サポート 申 告 のあったビデオタイプ(mp4 もしく は webm) 及 びビットレートで エンコードしておく 2 JS プレーヤーで 全 画 面 でビデオ 再 生 し コマ 落 ちの 有 無 を 確 認 する 例 えば 表 示 ディスプレイをビデ オカメラで 録 画 し 再 生 することでコマ 落 ちの 有 無 を 目 視 で 調 査 する 3 JS プレーヤーで CSS Transform を video 要 素 に 適 用 し 縮 小 表 示 拡 大 表 示 回 転 表 示 移 動 表 示 を 行 いビデオ 再 生 し コマ 落 ちの 有 無 を 確 認 する 例 えば 表 示 ディスプレイをビデオカメラで 録 画 し 再 生 することで コマ 落 ちの 有 無 を 目 視 で 調 査 する 具 体 的 には CSS Transform にて 次 の 数 値 を 用 い 遷 移 後 の 位 置 大 きさでビデオ 再 生 する 縮 小 :0.5 倍 拡 大 :2 倍 回 転 : 時 計 回 りに 90 度 移 動 : 右 方 向 100 画 素 下 方 向 100 画 素 前 提 条 件 以 下 を 満 たすことが 本 評 価 の 前 提 条 件 である 1. 次 の 2 種 類 のビデオタイプのうち 少 なくともいずれか 一 方 をサポートすること MIME-Type ビデオコーデック オーディオコーデック コンテナ video/mp4 H.264 AAC MP4 video/webm VP8 Vorbis WebM 2. ユーザーの 操 作 なしに 自 動 再 生 をサポートすること 具 体 的 には JavaScript 上 で video 要 素 の play()メソッドが 実 行 されたら ビデオの 再 生 が 開 始 されること 実 施 条 件 / 期 待 値 試 験 手 順 2において 30fps のビデオがコマ 落 ちなく 全 画 面 で 再 生 できる 場 合 中 機 能 型 ( 以 上 )と 判 定 す る この 際 に 再 生 したストリームのビットレートも 記 録 する 試 験 手 順 3においても 30fps のビデオがコマ 落 ちなく 再 生 できる 場 合 高 機 能 型 と 判 定 する 上 記 の 前 提 条 件 は 満 たすものの 中 機 能 型 高 機 能 型 と 判 定 できないものは 少 機 能 型 とする 9

31 備 考 特 になし 2.6. オーディオ 再 生 オーディオ 再 生 性 能 を 評 価 する 試 験 手 順 1 適 当 なオーディオファイルを 準 備 しておく 2 JS プレーヤーで audio 要 素 の play()によりオーディオ 再 生 し 動 作 を 確 認 する 例 えば 実 際 に 聴 いて 確 認 する 3 audio 要 素 にセットされたオーディオに 対 する 下 記 の 処 理 を Web Audio API の 次 のインターフェー スを 用 いてスクリプト 上 に 実 現 する i. 使 用 インターフェース AudioContext AudioNode AudioDestinationNode AudioBuffer AudioBufferSourceNode MediaElementAudioSourceNode AudioParam GainNode DelayNode OscillatorNode ii. 実 現 する 処 理 音 源 に 異 なる 音 量 調 整 と 遅 延 量 調 整 を 行 って 同 時 に 再 生 する スクリプト 上 で 1kHz サイン 波 音 源 を 生 成 し 再 生 する オーディオファイルをサーバーから 取 り 込 み 再 生 する 4 前 項 の 処 理 によるオーディオを JS プレーヤーで 再 生 し 動 作 を 確 認 する 例 えば 実 際 に 聴 いて 確 認 する 前 提 条 件 以 下 を 満 たすことが 本 評 価 の 前 提 条 件 である a) 次 の 4 種 類 のオーディオタイプのうち 少 なくともいずれか 1 種 類 をサポートすること 10

32 MIME-Type オーディオコーデック コンテナ audio/mp3 MP3 MP3 audio/mp4 AAC M4A audio/webm Vorbis WebM audio/ogg Vorbis Ogg b) ユーザーの 操 作 なしに 自 動 再 生 をサポートすること 具 体 的 には JavaScript 上 で audio 要 素 の play()メソッドが 実 行 されたら オーディオの 再 生 が 開 始 されること 実 施 条 件 / 期 待 値 試 験 手 順 に 記 した Web Audio API のインターフェースのすべての 正 常 動 作 が 確 認 できた 場 合 高 機 能 型 と 判 定 する 前 提 条 件 は 満 たすもののいずれかのインターフェースが 動 作 しない 場 合 は 少 機 能 型 と 判 定 する 備 考 特 になし 2.7. 再 生 遅 延 時 間 再 生 開 始 コマンド 後 実 際 にオーディオ ビデオが 再 生 されるまでの 遅 延 時 間 を 評 価 する 試 験 手 順 ビデオの 再 生 遅 延 1 JavaScript から video 要 素 (HTMLVideoElement オブジェクト)を 生 成 する 2 生 成 した HTMLVideoElement オブジェクトの preload プロパティに"auto"をセットする 3 生 成 した HTMLVideoElement オブジェクトに timeupdate イベントのリスナーをセットする 4 生 成 した HTMLVideoElement オブジェクトの src プロパティにビデオファイルの URL をセットする 5 生 成 した video 要 素 (HTMLVideoElement オブジェクト)をドキュメントに 挿 入 する 6 プリロードが 完 了 するのに 十 分 な 時 間 ( 数 秒 )の 経 過 後 に HTMLVideoElement オブジェクトの play()メソッドを 実 行 する 7 play()メソッドを 呼 び 出 してから 最 初 に 生 成 した timeupdate イベントが 発 生 するまでの 時 間 を 測 定 し ビデオの 再 生 遅 延 時 間 とする オーディオの 再 生 遅 延 1 JavaScript から audio 要 素 (HTMLAudioElement オブジェクト)を 生 成 する 11

33 2 生 成 した HTMLAudioElement オブジェクトの preload プロパティに"auto"をセットする 3 生 成 した HTMLAudioElement オブジェクトに timeupdate イベントのリスナーをセットする 4 生 成 した HTMLAudioElement オブジェクトの src プロパティにビデオファイルの URL をセットする 5 生 成 した audio 要 素 (HTMLAudioElement オブジェクト)をドキュメントに 挿 入 する 6 プリロードが 完 了 するのに 十 分 な 時 間 ( 数 秒 )の 経 過 後 に HTMLAudioElement オブジェクトの play()メソッドを 実 行 する 7 play()メソッドを 呼 び 出 してから 最 初 に 生 成 した timeupdate イベントが 発 生 するまでの 時 間 を 測 定 し オーディオの 再 生 遅 延 時 間 とする 前 提 条 件 ビデオ 再 生 またはオーディオ 再 生 の 性 能 が 少 なくとも 中 機 能 型 以 上 に 分 類 されていること 実 施 条 件 / 期 待 値 play()( 再 生 開 始 コマンド) 実 行 後 実 際 に 再 生 開 始 されるまでの 遅 延 が ビデオ オーディオどちらかまたは 両 方 とも 0.5 秒 以 上 の 場 合 低 速 型 と 判 定 する 同 遅 延 がビデオ オーディオ 共 に 0.5 秒 未 満 の 場 合 高 速 型 と 判 定 する 備 考 本 評 価 においては play()を 呼 び 出 す 前 にデータをプリロードする 必 要 があるため 十 分 なネットワーク 帯 域 とサーバーレスポンスを 確 保 することが 望 ましい 12

34 3. Appendix 3.1. Web-based Signage 端 末 の 実 装 タイプとテスト 適 合 要 件 本 性 能 評 価 分 類 及 びその 評 価 分 類 ごとの 性 能 を 軸 とした 適 合 分 類 に 基 づき 各 端 末 の 典 型 的 な 実 装 タイプが 分 類 できる 以 降 テスト 適 合 要 件 の 記 号 定 義 として 以 下 を 用 いる M Mandatory: 必 要 要 件 O Option: オプション 静 止 画 スライドショー 型 例 えば 小 規 模 な 小 売 店 舗 で 店 の 情 報 などを 表 示 する 場 合 や 企 業 オフィスで 従 業 員 向 けの 情 報 を 伝 える 場 合 において 動 画 は 多 用 せず 静 止 画 のアニメーションやテキストを 主 とするケースを 想 定 している このような 静 止 画 スライドショー 型 のテスト 適 合 要 件 は 以 下 のようになる ( 出 典 :DSC デジタルサイネージシステムガイドブック) # 評 価 分 類 適 合 分 類 適 用 要 件 # 評 価 分 類 適 合 分 類 適 用 要 件 1 解 像 度 小 密 度 型 M 4 並 行 処 理 シングル 型 M 中 密 度 型 O マルチ 対 応 型 O 高 密 度 型 O 5 ビデオ 再 生 少 機 能 型 M 2 ストレージ キャッシュ 型 - 中 機 能 型 O 蓄 積 型 M 高 機 能 型 O 大 容 量 蓄 積 型 O 6 オーディオ 再 生 少 機 能 型 M 3 描 画 速 度 低 速 型 M 高 機 能 型 O 中 速 型 O 7 再 生 開 始 遅 延 低 速 型 O 高 速 型 O 高 速 型 O 13

35 動 画 型 動 画 型 では 静 止 画 スライドショー 型 に 加 え ビデオ 再 生 を 多 用 したコンテンツにも 対 応 するケースを 想 定 している 例 えば イメージ 映 像 や 環 境 映 像 などを 表 示 する 場 合 が 考 えられる このような 動 画 型 のテ スト 適 合 要 件 は 以 下 のようになる # 評 価 分 類 適 合 分 類 適 用 要 件 # 評 価 分 類 適 合 分 類 適 用 要 件 1 解 像 度 小 密 度 型 M 4 並 行 処 理 シングル 型 - 中 密 度 型 O マルチ 対 応 型 M 高 密 度 型 O 5 ビデオ 再 生 少 機 能 型 - 2 ストレージ キャッシュ 型 - 中 機 能 型 M 蓄 積 型 - 高 機 能 型 O 大 容 量 蓄 積 型 M 6 オーディオ 再 生 少 機 能 型 - 3 描 画 速 度 低 速 型 - 高 機 能 型 M 中 速 型 M 7 再 生 開 始 遅 延 低 速 型 M 高 速 型 O 高 速 型 O 複 合 型 複 合 型 は 全 評 価 項 目 で 最 高 クラスに 属 し 様 々な 表 現 が 可 能 となる 例 えば 高 品 質 なハイビジョン 映 像 や 高 精 細 静 止 画 などで 構 成 されるコンテンツも 表 示 するケースが 考 えられる このような 複 合 型 のテ スト 適 合 要 件 は 以 下 のようになる # 評 価 分 類 適 合 分 類 適 用 要 件 # 評 価 分 類 適 合 分 類 適 用 要 件 1 解 像 度 小 密 度 型 - 4 並 行 処 理 シングル 型 - 中 密 度 型 - マルチ 対 応 型 M 高 密 度 型 M 5 ビデオ 再 生 少 機 能 型 - 2 ストレージ キャッシュ 型 - 中 機 能 型 - 蓄 積 型 - 高 機 能 型 M 大 容 量 蓄 積 型 M 6 オーディオ 再 生 少 機 能 型 - 3 描 画 速 度 低 速 型 - 高 機 能 型 M 中 速 型 - 7 再 生 開 始 遅 延 低 速 型 - 高 速 型 M 高 速 型 M 14

36 3.2. Web-based Signage 端 末 性 能 テスト 申 請 例 基 本 情 報 会 社 名 住 所 所 属 役 職 担 当 者 氏 名 (ふりがな) 電 話 番 号 /Fax 番 号 製 品 名 ( 型 番 ) 機 器 カテゴリー 機 器 の 仕 様 機 器 がサポートしている 仕 様 ( 値 )を 記 入 してください 解 像 度 (ピクセル) ブラウザーランタイムのビューポート 解 像 度 ピクセル ストレージ(バイト) コンテンツとなる 画 像 動 画 ファイルを 保 存 する 機 能 の 有 無 保 存 する 機 能 がある 場 合 は 保 存 サイズ 有 無 MB 描 画 速 度 (フレーム) ティッカーと 全 画 面 移 動 の 各 場 合 の 15 秒 間 再 生 中 のコマ 落 ちフレーム ティッカー: frames 数 全 画 面 移 動 : frames 並 行 処 理 同 時 並 行 処 理 のサポート 有 無 有 無 ビデオ 再 生 サポートするビデオタイプ MIME-Type ビデオコーデック オーディオコーデック コンテナ 自 動 再 生 サポートの 有 無 有 無 全 画 面 再 生 可 能 なフレームレート ビットレート fps, Mbps 縮 小 拡 大 回 転 移 動 後 のビデオ 再 生 機 能 有 無 オーディオ サポートするオーディオタイプ MIME-Type オーディオコーデック コンテナ 自 動 再 生 サポートの 有 無 有 無 オーディオイフェクト 等 の 処 理 (2.6.1)への 対 応 有 無 再 生 開 始 遅 延 再 生 開 始 コマンド 後 実 際 に 再 生 開 始 されるまでの 時 間 msec 15

37 3.3. Web-based Signage 端 末 性 能 テスト 結 果 例 試 験 判 定 結 果 と 3.1 で 述 べた Web-based Signage の 実 装 タイプにおける 各 適 用 要 件 とを 照 合 すること で 試 験 した 機 器 の 実 装 タイプを 分 類 することもできる 下 記 の 場 合 複 合 型 をベースに 描 画 速 度 が 中 速 型 の 実 装 タイプであると 分 類 できる # 機 能 申 請 値 試 験 判 定 適 用 要 件 ( 複 合 型 ) 1 解 像 度 小 密 度 型 中 密 度 型 高 密 度 型 **ピクセル Pass **ピクセル M 2 ストレージ キャッシュ 型 蓄 積 型 大 容 量 蓄 積 型 **MB Pass **MB M 3 描 画 速 度 低 速 型 中 速 型 - Pass **frames - 高 速 型 **frames Fail M 4 並 行 処 理 シングル 型 マルチ 対 応 型 対 応 Pass M 5 ビデオ 再 生 少 機 能 型 - - 中 機 能 型 高 機 能 型 **Mbps Pass **Mbps M 6 オーディオ 少 機 能 型 高 機 能 型 対 応 Pass M 低 速 型 再 生 開 始 遅 延 Pass 高 速 型 300msec **msec M 16

38 資 料 3 Web-based Signage コンテンツ 開 発 ガイドライン 第 1 版 2016 年 3 月 作 成 : Web プラットフォーム 性 能 ベンチマーク 検 討 会 発 行 : 慶 應 義 塾 大 学 SFC 研 究 所 先 端 ウェブアーキテクチャ ラボ 1

39 目次 コンテンツ開発ガイドラインの概要 ガイドラインの範囲 ガイドラインの方針... 5 開発をはじめる前に 開発対象の全体像と特性の把握 開発プロセスについて... 8 ノウハウ集 表記ルールについて コンテンツの構成と配置 jquery 等巨大ライブラリの利用を避ける JavaScript/CSS ファイルは結合し ミニファイする 部品利用する画像は CSS Sprite 等を用いて１ファイルとする コンテンツ記述時 動的な DOM 生成時は DocumentFragment を利用する CSS の gradient/box-shadow/border-radius を控えめにする

40 フォントがキャッシュに 収 まるように 文 字 スタイルを 絞 る リフローが 与 える 影 響 を 考 慮 する マルチコア 環 境 では Web Worker を 活 用 する GPU の 活 用

41 1. コンテンツ 開 発 ガイドラインの 概 要 本 資 料 は Web-based Signage 普 及 を 目 的 に コンテンツ 制 作 者 向 けにハードウェア 上 でもっとも 効 果 的 に 動 作 するコンテンツを 制 作 するためのガイドラインを 示 す 1.1. ガイドラインの 範 囲 Web-based Signage は コンテンツを 管 理 する CMS(コンテンツ 登 録 やプレイリストなどを 管 理 ) コンテンツを 配 信 する CDN( 配 信 クラウドとネットワーク) そして コンテンツを 再 生 する 端 末 から 構 成 さ れる 本 ガイドラインは これら Web-based Signage システム 全 体 のうち コンテンツ 部 分 を 対 象 とする Web-based Signage システムは 以 下 の 要 素 で 構 成 される ハードウェア 物 理 的 に 端 末 を 構 成 する 構 成 要 素 を 指 す 具 体 的 には パネル SoC(CPU, GPU, メモリなど) 入 出 力 インタ フェース(HDMI, USB, 電 源 など)で 構 成 される オペレーティングシステム Web-based Signage として 端 末 ハードウェアを 利 用 するためにインストールされる 基 本 ソフトを 指 す 具 体 的 には Windows, Android, ios, Linux, FreeBSD, Firefox OS などを 指 す ブラウザーランタイム HTML, CSS, JavaScript などの Web 標 準 技 術 を 動 作 させることができるアプリケーション 基 盤 を 指 す 具 体 的 に はウェブブラウザーを 指 すが 必 ずしも 一 般 的 なウェブブラウザーである 必 要 はない 例 えば Android の WebView など ランタイムとして 用 意 された 環 境 も 含 む JS プレーヤー プレイリストに 基 づいてコンテンツを 再 生 するためのアプリケーションを 指 す Web-based Signage では ブラウザーラ ンタイム 上 で 動 作 するウェブアプリケーションとして 作 られる 具 体 的 には HTML, CSS, JavaScript を 駆 使 して 開 発 される コンテンツ コンテンツは JS プレーヤー 上 で 表 示 または 実 行 され サイネージ 端 末 の 前 にいるユーザーに 見 えるものである コンテ ンツは 単 体 画 像 動 画 または ウェブアプリケーションとして 制 作 される 中 には これらコンテンツを 表 示 しつつ 音 声 を 再 生 するものも 存 在 する 4

42 1.2. ガイドラインの 方 針 PC 等 に 比 べ RAM/ROM/CPU 等 の 資 源 が 少 ない 組 み 込 み 機 器 上 で 動 作 するブラウザーランタイム JS プレーヤーのパフォーマンスを 引 き 出 すための 指 針 を 示 す 具 体 的 なコード 例 を 避 け コンテンツ 制 作 者 の 創 意 工 夫 の 余 地 を 残 しながら 原 則 として 従 うべきグッド/バッドノウハウを 紹 介 する 5

43 2. 開発をはじめる前に 組み込み機器向けにコンテンツ(ウェブアプリケーション)を制作する上で 表示対象となる端末 ブラウザ の特性を把握することが非常に重要である 本章では 開発をはじめる前にどういった端末情報を把握す べきかについて記述する 2.1. 開発対象の全体像と特性の把握 参考情報としてブラウザ搭載組み込み機器の概念図を以下に示す この図の中の(a)以外については コンテンツ制作者が関与できない部分のため Web-based Signage 試験結果表 を事前に入手し 表示対象となる端末 ブラウザの特性を把握することを推奨する 6

44 (a) HTML コンテンツ 唯 一 コンテンツ 制 作 者 がコントロールできる 部 分 コンテンツ 制 作 者 は(b)~(e)の 特 性 を 考 慮 した 企 画 デザインを 行 うことが 肝 要 である Web-based Signage 試 験 結 果 表 に 記 されている 特 性 を 理 解 した 上 でコンテンツの 内 容 を 検 討 し 表 示 対 象 となる 端 末 ブラ ウザに 最 適 なコンテンツ 設 計 実 装 をおこなう 必 要 がある (b) ブラウザ 内 部 ブラウザ は 前 述 の 図 の 様 に 大 きく 分 けてアプリケーション エンジン 端 末 との 結 合 部 分 と3つに 分 けることができる ブラウザアプリケーションとは 主 にブラウザエンジンの 起 動 や 終 了 メニュー ブックマークなどの UI 表 示 などのコンテンツ 実 行 以 外 の 付 帯 部 分 さらには 端 末 側 からのキー 入 力 やタイマーなどの OS やハードウェアからの 割 り 込 みをきっかけにしてブラ ウザエンジンに 対 して 制 御 命 令 をだす 部 分 である ブラウザアプリケーションは 上 述 の 様 に コンテンツ 以 外 の 外 部 の 入 力 をブラウザに 伝 える 役 割 をしている その 関 係 で 同 じブラウザ エンジンを 利 用 していても ブラウザアプリケーション 次 第 では 異 なる 挙 動 となる 後 述 の (c)(d)による 影 響 が 大 きい 場 合 もあるが 表 示 対 象 となる 端 末 に 特 に 気 をつけるべき 動 作 制 限 が 公 開 情 報 としてないかを 事 前 に 調 査 しておくことを 推 奨 する なお ブラウザベン ダによっては PC 上 で 動 作 するシミュレータを 用 意 していることもあり 必 要 に 応 じて 入 手 活 用 することを 推 奨 する (c) ブラウザ 移 植 部 (ソフトウェア 実 装 ) ブラウザエンジンの 設 計 次 第 ではあるが ハードウェアを 利 用 できそうな 機 能 は ブラウザエン ジンの 外 で 処 理 を 行 えるように 切 り 出 されている 場 合 がある 端 末 の 仕 様 によるが これら の 切 り 出 された 機 能 がハードウェアに 結 合 されている 場 合 と ソフトウェアで 実 装 されている 場 合 がある Web-based Signage 試 験 結 果 表 を 参 照 することで これらの 特 性 がつ かめてくると 思 うが 後 述 の GPU アクセラレーションが 無 効 もしくはほぼ 効 いていないような 場 合 は これらの 機 能 はなるべく 利 用 を 控 えることを 推 奨 する 例 えば アニメーションなどの 描 画 性 能 は GPU アクセラレーションが 無 効 な 場 合 は CPU やメモリバス 速 度 に 依 存 してく る この 場 合 アニメーション グラデーション アルファ 値 の 操 作 などが 高 負 荷 処 理 となる (d) ブラウザ 移 植 部 (ハードウェア 結 合 ) GPU アクセラレーションが 有 効 な 場 合 は ブロック 要 素 のレイヤー 化 などが 利 用 できる 可 能 性 があるため より 滑 らかなアニメーションが 期 待 できる レイヤー 化 の 詳 細 については 後 述 の 3. ノウハウ 集 を 参 照 とするが レイヤー 化 を 意 識 したコンテンツ 制 作 をおこなう 必 要 7

45 があるため 企 画 デザインの 検 討 に 入 る 前 に 表 示 対 象 の 端 末 が GPU アクセラレーションに 適 応 しているかどうか 調 査 しておくことを 推 奨 する (e) デバイスドライバーハードウェア 間 (c)(d)にて 記 述 したハードウェア アクセラレーションが 有 効 な 場 合 においても デバイスドラ イバとハードウェアの 間 の 結 合 品 質 によっては 期 待 どおりのパフォーマンスが 出 ないことがあ る 表 示 対 象 の 端 末 で このような 既 知 の 問 題 が 存 在 するかを 企 画 デザインの 検 討 に 入 る 前 に 調 査 しておくことを 推 奨 する 2.2. 開 発 プロセスについて 開 発 をはじめる 前 に 対 象 となる 端 末 を 入 手 し 開 発 中 のコンテンツを 随 時 テストできる 環 境 を 構 築 する ことを 強 く 推 奨 する 開 発 効 率 を 優 先 して 一 般 的 な PC ブラウザにて 開 発 を 進 めることについては 否 定 しな いが 出 来 るだけ 実 際 の 端 末 上 で 動 作 確 認 をおこなうことを 推 奨 する 実 機 での 動 作 は PC の 動 作 と 比 べて 動 作 速 度 や 見 え 方 などが 異 なる 場 合 も 多 く コンテンツ 作 成 時 から 実 機 で 確 認 していくことでコンテン ツ 作 成 の 手 戻 りを 防 ぐことが 出 来 る たとえば ブラウザエンジンの 種 類 や 端 末 毎 にサポートする 機 能 が 微 妙 に 異 なっていることや 利 用 可 能 なメモリ 量 にも 違 いがある 場 合 があり 端 末 上 でのみエラーが 発 生 する こともある また 動 作 速 度 の 違 いにより 期 待 する UX が 実 現 できないこともある 一 般 的 な PC ブラウザや ブラウザベンダが 提 供 する PC シミュレータ 等 を 活 用 し 効 率 的 に 開 発 を 進 めつつ 定 期 的 に 対 象 となる 端 末 上 で 動 作 確 認 をおこなうことが 重 要 である 8

46 3. ノウハウ 集 3.1. 表 記 ルールについて 以 降 に 記 述 する 各 ノウハウについて そのノウハウにより 良 化 が 見 込 まれる 項 目 や 逆 に 悪 化 する 可 能 性 のある 項 目 (トレードオフ)を 以 下 のタグ 表 記 により 示 すものとする 良 化 の 可 能 性 あり 悪 化 の 可 能 性 あり 項 目 : [CPU] CPU 負 荷 に 影 響 するため CPU スペックが 低 い 端 末 での 効 果 が 期 待 できる 項 目 [ 通 信 ] 通 信 負 荷 に 影 響 するため 主 にコンテンツ 表 示 までの 速 度 の 改 善 が 見 込 める [メモリ] メモリ 使 用 量 が 減 るため メモリ 搭 載 量 の 少 ない 端 末 でのメモリ 不 足 回 避 が 見 込 める [ 描 画 ] 描 画 処 理 の 負 荷 が 軽 減 されるため UX の 改 善 に 繋 がる 可 能 性 がある [フォント] 文 字 描 画 処 理 の 負 荷 に 影 響 するため 文 字 を 多 用 するコンテンツでの 改 善 が 見 込 める [ 保 守 性 ] 成 果 物 の 運 用 メンテナンス 時 の 手 間 の 削 減 が 見 込 める 表 記 例 : 通 信 メモリ 通 信 処 理 の 高 速 化 が 見 込 めるが トレードオフとしてメモリ 使 用 量 が 増 えるという 意 味 9

47 3.2. コンテンツの 構 成 と 配 置 jquery 等 巨 大 ライブラリの 利 用 を 避 ける CPU 通 信 メモリ 描 画 高 度 なアニメーション 処 理 が 必 要 とされる 場 合 を 除 き 原 則 としてミニファイした 状 態 で 数 百 KB 以 上 の 容 量 をもつライブラリの 利 用 を 避 ける 高 度 な 用 途 向 けに 設 計 されたライブラリは 一 般 的 に 処 理 負 荷 が 高 く シンプルな 処 理 に 利 用 すると スムーズなコンテンツ 再 生 の 妨 げとなることが 多 い また 巨 大 ライブラリ を 利 用 しないことで 通 信 処 理 や JS 解 析 処 理 の 軽 減 により 起 動 高 速 化 やメモリ 使 用 量 の 削 減 などの 効 果 も 期 待 できる JavaScript/CSS ファイルは 結 合 し ミニファイする 通 信 保 守 性 JavaScript ファイルや CSS ファイルはリクエスト 回 数 の 削 減 および 処 理 系 の 負 荷 軽 減 を 目 的 とし フ ァイルを 結 合 したのち ミニファイ( 難 読 化 でも 同 様 の 効 果 )する これらを HTML ファイル 中 に 埋 め 込 むこと で さらにリクエスト 回 数 を 削 減 するという 手 法 もあるため 開 発 規 模 や 保 守 性 などを 考 慮 した 上 で 適 切 な 手 法 を 選 定 することを 推 奨 する 部 品 利 用 する 画 像 は CSS Sprite 等 を 用 いて1ファイルとする 通 信 メモリ 保 守 性 部 品 として 利 用 する 小 さい 画 像 については CSS Sprite(1 枚 の 画 像 の 特 定 領 域 のみを padding, overflow: hidden 等 で 表 示 する 技 法 ) 等 を 用 いてできるだけ 1 ファイルにまとめる これにより リクエスト 回 数 を 削 減 することができる ただし 利 用 頻 度 がそれほど 高 くない 画 像 を 含 んでしまった 場 合 にメモリ 使 用 量 が 単 体 ファイル 利 用 時 よりも 増 えてしまう 場 合 があるため 対 象 とする 画 像 の 選 定 は 慎 重 におこなう 必 要 がある 10

48 3.3. コンテンツ 記 述 時 動 的 な DOM 生 成 時 は DocumentFragment を 利 用 する CPU 描 画 DOM ツリーの 操 作 にはそれに 対 応 するメモリ 操 作 や 再 描 画 処 理 が 伴 うため Native API の appendchild()を 繰 り 返 し 呼 び 出 して HTML を 生 成 することや jquery の $.append() や $.appendto()を 繰 り 返 し 呼 び 出 して HTML を 生 成 することは 避 けた 方 がよい 代 わりに DocumentFragment により 仮 想 的 な DOM ツリーを 構 築 してから DOM ツリーに appendchild す ることで 再 描 画 を 最 低 限 に 抑 制 することができる DocumentFragment が 利 用 できない 場 合 は String で 出 力 する(innerHTML 等 )などの 手 法 でも 実 現 できる CSS の gradient/box-shadow/border-radius を 控 えめにする 描 画 大 きな 画 像 に 対 する CSS での 飾 り 付 け 処 理 は ブラウザーランタイムにとって 非 常 に 負 荷 の 高 い 処 理 と なるため 基 本 的 には 避 ける 動 的 にトランジションしていく 場 合 など 特 別 の 理 由 がない 限 り 元 の 画 像 のほ うで 付 与 しておく 特 に GPU アクセラレーションの 有 無 により 大 きくパフォーマンスが 異 なる 可 能 性 があるた め 企 画 デザイン 検 討 段 階 で 端 末 性 能 を 正 しく 把 握 するためにコンテンツのプロトタイプを 用 意 し 動 作 確 認 を 実 施 することを 推 奨 する フォントがキャッシュに 収 まるように 文 字 スタイルを 絞 る フォント 環 境 に 依 存 するが 基 本 的 にフォント 描 画 は 処 理 コストは 高 い 一 度 描 画 したフォントを 使 いまわし キ ャッシュに 残 るように 工 夫 する 特 に 文 字 列 をアニメーションさせる 場 合 など 頻 繁 にフォント 描 画 が 発 生 す るようなコンテンツでは 効 果 が 得 られる 可 能 性 がある 11

49 リフローが 与 える 影 響 を 考 慮 する CPU 描 画 親 要 素 に 対 する class / style の 変 更 は 子 孫 要 素 へも 影 響 があるため 再 計 算 再 描 画 処 理 が 大 量 に 発 生 してしまう 場 合 がある 特 に 深 い 階 層 をもつ 要 素 ではパフォーマンスへの 影 響 が 甚 大 なため コンテンツ 制 作 者 はリフロー 発 生 を 意 識 した 設 計 実 装 をすること マルチコア 環 境 では Web Worker を 活 用 する CPU DOM 処 理 等 の 長 大 な JavaScript 処 理 を 複 数 実 行 する 必 要 がある 場 合 かつ 性 能 要 件 における マルチ 対 応 型 に 適 合 する 環 境 であれば 積 極 的 に Web Workers を 活 用 する GPU の 活 用 CPU 描 画 ブラウザエンジンの 種 類 やその 移 植 方 法 によっても 活 用 の 仕 方 が 異 なるため 一 意 に 説 明 することは 難 し いため ここでは Webkit 系 のブラウザについて 説 明 する Webkit では Accelerated-Compositing と 呼 ばれる 機 能 があり この 機 能 が 有 効 化 されたブラウザでは 指 定 したブロック 要 素 を 別 レイヤー 化 する ことでアニメーションの 高 速 化 ができる 可 能 性 がある Accelerated-Compositing はその 名 のとおり 合 成 処 理 を 高 速 化 するというものである 具 体 的 には 1 枚 の 絵 として 生 成 していたコンテンツを 複 数 の レイヤーに 分 けてレイヤー 同 士 を GPU で 合 成 (ブレンディング)することで 高 速 化 を 図 るというものである 以 下 では <BODY><DIV id= a >の 要 素 の 上 で<DIV id= b >がアニメーションする 場 合 を 例 に レイヤー 化 の 概 念 を 説 明 する 12

50 まず レイヤー 化 ができない 場 合 以 下 の 図 のようにアニメーションが 発 生 する 度 に DOM ツリーを 辿 っ て 何 度 も 再 描 画 する 必 要 があり 描 画 処 理 に 時 間 がかかってしまうためアニメーションのフレームレートが 上 がらない 場 合 が 多 い 一 方 でレイヤー 化 できる 場 合 <BODY><DIV id= a >と<DIV id= b >の 描 画 レイヤーを 分 離 し それぞれのレイヤーを GPU で 合 成 することで 再 描 画 処 理 の 軽 減 が 見 込 める 13

51 但 し レイヤーの 多 用 は VRAM を 著 しく 消 費 するため 端 末 によっては 正 常 な 描 画 ができなくなる 場 合 があるため 注 意 が 必 要 である 加 えて レイヤーの 多 用 により 本 来 レイヤー 化 して 描 画 を 分 離 したい 要 素 が 意 図 通 りに 分 離 できない 事 態 も 発 生 する 可 能 性 がある 一 般 的 に CSS Animations CSS Transitions などを 指 定 することによりレイヤー 化 することができ る 他 にも translate3d(0,0,0)などの 指 定 により 強 制 的 にレイヤー 化 するハック 的 な 手 法 もあるため 対 象 となる 端 末 上 で 事 前 に 検 証 しておくことを 推 奨 する 14