コンテンツ制作ガイドライン

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

内 容 1. コンテンツ 開 発 ガイドラインの 概 要...4 1.1. ガイドラインの 範 囲...4 1.2. ガイドラインの 方 針...5 2. 開 発 をはじめる 前 に...6 2.1. 開 発 対 象 の 全 体 像 と 特 性 の 把 握...6 2.2. 開 発 プロセスについて...8 3. ノウハウ 集...9 3.1. 表 記 ルールについて...9 3.2. コンテンツの 構 成 と 配 置...10 3.2.1. jquery 等 巨 大 ライブラリの 利 用 を 避 ける...10 3.2.2. JavaScript/CSS ファイルは 結 合 し ミニファイする...10 3.2.3. 部 品 利 用 する 画 像 は CSS Sprite 等 を 用 いて1ファイルとする...10 3.3. コンテンツ 記 述 時...11 3.3.1. 動 的 な DOM 生 成 時 は DocumentFragment を 利 用 する...11 3.3.2. CSS の gradient/box-shadow/border-radius を 控 えめにする...11 3.3.3. フォントがキャッシュに 収 まるように 文 字 スタイルを 絞 る...11 3.3.4. リフローが 与 える 影 響 を 考 慮 する...12 3.3.5. マルチコア 環 境 では Web Worker を 活 用 する...12 3.3.6. GPU の 活 用...12 2

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 を 駆 使 して 開 発 される コンテンツ 3

コンテンツは JS プレーヤー 上 で 表 示 または 実 行 され サイネージ 端 末 の 前 にいるユーザーに 見 えるものである コンテ ンツは 単 体 画 像 動 画 または ウェブアプリケーションとして 制 作 される 中 には これらコンテンツを 表 示 しつつ 音 声 を 再 生 するものも 存 在 する 1.2. ガイドラインの 方 針 PC 等 に 比 べ RAM/ROM/CPU 等 の 資 源 が 少 ない 組 み 込 み 機 器 上 で 動 作 するブラウザーランタイム JS プレーヤーのパフォーマンスを 引 き 出 すための 指 針 を 示 す 具 体 的 なコード 例 を 避 け コンテンツ 制 作 者 の 創 意 工 夫 の 余 地 を 残 しながら 原 則 として 従 うべきグッド/バッドノウハウを 紹 介 する 4

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

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

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

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

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

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

3.3.5. マルチコア 環 境 では Web Worker を 活 用 する CPU DOM 処 理 等 の 長 大 な JavaScript 処 理 を 複 数 実 行 する 必 要 がある 場 合 かつ 性 能 要 件 における マルチ 対 応 型 に 適 合 する 環 境 であれば 積 極 的 に Web Workers を 活 用 する 3.3.6. GPU の 活 用 CPU 描 画 ブラウザエンジンの 種 類 やその 移 植 方 法 によっても 活 用 の 仕 方 が 異 なるため 一 意 に 説 明 することは 難 し いため ここでは Webkit 系 のブラウザについて 説 明 する Webkit では Accelerated-Compositing と 呼 ばれる 機 能 があり この 機 能 が 有 効 化 されたブラウザでは 指 定 したブロック 要 素 を 別 レイヤー 化 する ことでアニメーションの 高 速 化 ができる 可 能 性 がある Accelerated-Compositing はその 名 のとおり 合 成 処 理 を 高 速 化 するというものである 具 体 的 には 1 枚 の 絵 として 生 成 していたコンテンツを 複 数 の レイヤーに 分 けてレイヤー 同 士 を GPU で 合 成 (ブレンディング)することで 高 速 化 を 図 るというものである 以 下 では <BODY><DIV id= a >の 要 素 の 上 で<DIV id= b >がアニメーションする 場 合 を 例 に レイヤー 化 の 概 念 を 説 明 する まず レイヤー 化 ができない 場 合 以 下 の 図 のようにアニメーションが 発 生 する 度 に DOM ツリーを 辿 っ て 何 度 も 再 描 画 する 必 要 があり 描 画 処 理 に 時 間 がかかってしまうためアニメーションのフレームレートが 上 がらない 場 合 が 多 い 11

一 方 でレイヤー 化 できる 場 合 <BODY><DIV id= a >と<DIV id= b >の 描 画 レイヤーを 分 離 し それぞれのレイヤーを GPU で 合 成 することで 再 描 画 処 理 の 軽 減 が 見 込 める 但 し レイヤーの 多 用 は VRAM を 著 しく 消 費 するため 端 末 によっては 正 常 な 描 画 ができなくなる 場 合 があるため 注 意 が 必 要 である 加 えて レイヤーの 多 用 により 本 来 レイヤー 化 して 描 画 を 分 離 したい 要 素 が 意 図 通 りに 分 離 できない 事 態 も 発 生 する 可 能 性 がある 12

一 般 的 に CSS Animations CSS Transitions などを 指 定 することによりレイヤー 化 することができ る 他 にも translate3d(0,0,0)などの 指 定 により 強 制 的 にレイヤー 化 するハック 的 な 手 法 もあるため 対 象 となる 端 末 上 で 事 前 に 検 証 しておくことを 推 奨 する 13