タイトル

Transcription

1 参 考 資 料 3-5 平 成 26 年 度 クラウド 等 の 最 先 端 情 報 通 信 技 術 を 活 用 した 学 習 教 育 システムに 関 する 実 証 別 冊 ( 案 ) 2015 年 3 月

2 目 次 はじめに ガイドブックの 目 的 及 び 概 要 ガイドブックの 目 的 学 習 教 育 クラウド プラットフォームの 概 要 ガイドブックの 適 用 範 囲 および 前 提 条 件 コンテンツとして 最 低 限 必 要 な 要 素 認 証 ユーザ 認 証 結 果 情 報 の 利 用 共 通 インターフェイス 共 通 ユーザーインターフェースの 利 用 について iframe を 利 用 した 共 通 ユーザーインターフェースの 搭 載 方 法 について 教 材 コンテンツ 画 面 上 の 終 了 ボタン 等 と 共 通 ユーザーインターフェースの 連 動 につ いて 異 なる 画 面 サイズへの 対 応 概 要 Media Queries リキッドレイアウト 個 人 情 報 概 要 HTML5の 要 素 に 関 して セキュリティ 概 要 Video 要 素 概 要 要 素 固 有 の 属 性 上 記 属 性 を 除 く IDL 属 性 とメソッド 記 述 例 外 部 リンク Audio 要 素 概 要 コンテンツとして audio 要 素 を 利 用 する 際 に 必 要 となる 要 件 要 素 固 有 の 属 性 記 述 例 外 部 リンク Track 要 素 概 要... 21

3 3.5 Canvas 要 素 概 要 コンテンツとして canvas 要 素 を 利 用 する 際 に 必 要 となる 要 件 要 素 固 有 の 属 性 TIPS 外 部 リンク Progress 要 素 概 要 要 素 固 有 の 属 性 記 述 例 外 部 リンク Meter 要 素 概 要 要 素 固 有 の 属 性 記 述 例 外 部 リンク MathML 概 要 コンテンツ 内 で 数 式 表 現 をする 場 合 数 式 表 現 の 代 替 案 外 部 リンク ストレージ 概 要 コンテンツとしてストレージ 系 API 利 用 する 際 に 必 要 となる 要 件 ストレージ 系 API の 概 要 と 特 徴 ブラウザ 別 の API サポート 状 況 と 対 処 方 法 オリジン 単 位 で 保 存 されるデータ データの 消 去 プライバシーの 対 処 フォーム 概 要 コンテンツとして video 要 素 を 利 用 する 際 に 必 要 となる 要 件 新 たなフォームコントロール 新 たな input 要 素 の 属 性 コントロールをサポートしていないブラウザの 対 処 入 力 制 約 のエラーメッセージ グラデーション 概 要 主 要 ユーザーエージェントに 向 けた 実 装 方 法 ツール Writing-mode 概 要... 37

4 プロパティに 指 定 できる 値 記 述 例 ウェブブラウザ 別 表 示 例 TIPS 外 部 リンク... 39

5 はじめに 本 書 は 平 成 26 年 度 クラウド 等 の 最 先 端 情 報 通 信 技 術 を 活 用 した 学 習 教 育 システム に 関 する 実 証 において 技 術 仕 様 検 討 の 一 環 として 作 成 した コンテンツ 作 成 者 向 けの コ ンテンツ 作 成 ガイドブック である 1

6 1. ガイドブックの 目 的 及 び 概 要 1.1 ガイドブックの 目 的 ( 以 下 ガイドブック )は 平 成 26 年 度 クラウド 等 の 最 先 端 情 報 通 信 技 術 を 活 用 した 学 習 教 育 システムに 関 する 実 証 において 検 討 を 行 った 学 習 教 育 クラウド プラットフォームについて コンテンツ 作 成 者 がコンテンツ 作 成 する 際 に 満 たすべき 要 件 を 示 すことを 目 的 とする 1.2 学 習 教 育 クラウド プラットフォームの 概 要 学 習 教 育 クラウド プラットフォームの 概 要 を 図 1-1 に 示 す 図 1-1 学 習 教 育 クラウド プラットフォームの 概 要 1.3 ガイドブックの 適 用 範 囲 および 前 提 条 件 学 習 教 育 クラウド プラットフォームは 前 項 で 示 した 各 機 能 をパブリック クラウド サービス(IaaS) 上 で 実 現 することを 前 提 とする 教 育 用 コンテンツの 規 格 としては HTML5 を 採 用 した HTML5 とは WWW に 関 する 各 2

7 種 技 術 の 標 準 化 を 進 める 団 体 である W3C により 策 定 が 進 められている HTML の 最 も 新 しい 標 準 規 格 である ただ 広 義 には 厳 密 に W3C が 定 義 した HTML5 仕 様 のみではなく Web API と 呼 ばれるウェブアプリケーション 向 けの 機 能 に 関 わる 規 格 と CSS3 と 呼 ばれる 表 示 に 関 わる 規 格 など ウェブ 技 術 全 般 の 急 速 な 進 化 を 指 すことが 多 い HTML5 の 規 格 自 体 は W3C によりほぼ 策 定 を 終 えたと 言 える 一 方 ブラウザの 対 応 は 進 行 中 で ブラウザの 種 類 やバージョンによって 実 装 のレベルは 異 なっている このため HTML5 の 規 格 に 厳 密 に 則 ってコンテンツを 制 作 したとしても すべてのブラ ウザで 正 常 に 動 作 するわけではないのが 現 状 である 本 事 業 では HTML5 のコンテンツを 制 作 する 上 で W3C の 策 定 した 仕 様 を 前 提 としてい るが ブラウザの 差 異 に 対 する 対 応 等 コンテンツに 共 通 するノウハウはドキュメントにま とめて 共 有 することとし を 制 作 した また 共 通 インターフ ェースやユーザー 認 証 学 習 記 録 データの 書 き 出 しなど 本 事 業 のプラットフォームに 適 合 させるための 基 準 も 必 要 であり それらもにまとめた 3

8 2. コンテンツとして 最 低 限 必 要 な 要 素 本 事 業 のコンテンツは 共 通 のシステム 上 で 動 作 する そのため コンテンツには コンテ ンツ 本 体 の 他 にシステムとの 接 続 のために 指 定 のファイルを 含 める 必 要 がある 本 章 では 共 通 システムとの 接 続 に 必 要 なファイルの 説 明 と 個 別 のコンテンツ 毎 に 必 要 なカスタマイズについて 記 述 する 2.1 認 証 ユーザ 認 証 結 果 情 報 の 利 用 以 下 のコードを JavaScript ファイル 内 に 記 述 (ペースト)する 記 述 例 var binit = false; var ocomif = null; var szvendorpfx = "Comp1"; var szproductpfx = 'Product1'; var ncomiftype = ComIF.typeMin; var szcomifcolor = 'b'; var szapproom = 'A'; var bgroup = false; var szname = ' 匿 名 '; document.onreadystatechange = function () { if (document.readystate == "complete") { init(); ; window.onunload = function() { if (ocomif!= null) { ocomif.closebar(); ocomif = null; ; function init() { if (binit == false) { binit = true; ocomif = new ComIF(szVendorPfx, szproductpfx, ncomiftype, szcomifcolor, szapproom, bgroup); ocomif.loadbar(function(szres) { if (szres!== 'success') { alert(szres); else { ocomif.getauthorizedinfo(szvendorpfx, szproductpfx, function(szres) { if (szres!== 'success') { alert(szres); 4

9 else { ); ); var arauthinfo = ocomif.getuserinfo(); // szname = arauthinfo.uname; で 取 得 可 能 なユーザー 認 証 結 果 情 報 は 以 下 となる group org jaorg gr cl uname jauname opid aff // ユーザー 認 証 機 能 による 学 校 間 連 携 用 グループ 情 報 // 半 角 文 字 組 織 名 称 情 報 // 全 角 文 字 組 織 名 称 情 報 // 学 年 情 報 // クラス 情 報 // 半 角 文 字 ユーザー 表 示 名 情 報 // 全 角 文 字 ユーザー 表 示 名 情 報 // 学 外 一 意 ユーザー(ID ハッシュ 化 ) 情 報 // 教 員, 保 護 者, 生 徒 識 別 情 報 の 例 では getuserinfo() が 返 した 連 想 配 列 から uname 項 目 を szname 変 数 に 格 納 している 認 証 システムに 関 連 するポリシーから 必 ず 全 ての 情 報 が 参 照 可 能 とは 限 らない 教 材 コ ンテンツによっては null 値 となる 項 目 が 混 在 することがある opid は ユーザー 認 証 フェデレーションの 範 囲 内 にて 一 意 性 および 永 続 性 が 保 証 さ れる 情 報 である 各 項 目 のフォーマット 等 に 関 しては ユーザー 認 証 機 能 より 提 供 される 仕 様 書 等 を 参 照 す ること student / teacher / parent 等 2.2 共 通 インターフェイス 共 通 ユーザーインターフェースの 利 用 について HTML5 教 材 コンテンツ 画 面 上 に 共 通 ユーザーインターフェース 機 能 を 搭 載 する 手 順 に ついて 説 明 する 共 通 ユーザーインターフェースは 所 謂 ツールバー として 教 材 コンテンツ 画 面 に 被 る 形 で ブラウザのクライアント 領 域 下 部 の 高 さ 値 42 ピクセル を 占 有 する パラメータにて クライアント 領 域 下 部 の 全 幅 を 占 有 するか または 右 端 の 最 低 利 用 域 のみとするかを 選 択 できる クライアント 領 域 下 部 を 占 有 する 要 件 が 教 材 コンテンツに 不 都 合 な 場 合 には iframe を 5

10 併 用 することで 描 画 領 域 の 重 なりに 関 する 問 題 を 回 避 することも 可 能 である (1) ファイル 構 成 とライブラリの 読 み 込 み 定 義 1 教 材 コンテンツのファイル 構 成 について 3 種 のファイル(my_app.html / my_app.css / my_app.js)にて 教 材 コンテンツが 構 成 さ れること(2 参 照 )を 前 提 に 以 降 の 説 明 をする 既 存 の 教 材 コンテンツにおいて js (Java Script)プログラムを 別 ファイルとしては 持 たずに html 内 に 記 述 している 場 合 には 該 当 箇 所 に 対 する 説 明 として 読 み 替 えること また js プログラムを 一 切 含 まない 教 材 コンテンツの 場 合 には 新 たに my_app.js ファイルを 作 成 し script タ グを 以 下 のように <head> </head> タグ 間 等 に 加 えること [ 例 ] <script type="text/javascript" src= my_app.js ></script> ( 上 記 では my_app.html と 同 じ PATH 内 に my_app.js 名 の Java Script ファ イルを 設 置 している) 2 共 通 ユーザーインターフェースを 利 用 するには 以 下 の 2 行 を </head> 前 のどこか もしくは </body> と </html> の 間 に 記 述 する <link rel="stylesheet" href= /> <script type="text/javascript" src= ></script> 複 数 の HTML ファイルにて 構 成 される 教 材 コンテンツの 場 合 には それぞれの HTML ファイルに 上 記 定 義 を 加 えること また 2 以 降 で 説 明 される 作 業 も 同 じよ うにおこなう 必 要 がある ドメイン 名 や PATH 等 については 今 後 変 更 される 場 合 がある また 教 材 コン テンツを 配 置 するプラットフォームが 複 数 存 在 する 場 合 には プラットフォーム 毎 の 指 定 ドメイン 名 や PATH 等 に 書 き 換 えた 上 で 教 材 コンテンツの 配 置 をお 願 いする 可 能 性 が 考 えられる ここまでの 説 明 にて my_app.html の <head> タグ 内 定 義 は 以 下 のようになる 6

11 <head> <link rel="stylesheet" href= /> <link rel="stylesheet" href= my_app.css /> <script type="text/javascript" src= ></script> <script type="text/javascript" src= my_app.js ></script> </head> <body> (2) ユーザー 識 別 情 報 教 材 コンテンツ 識 別 情 報 の 登 録 にアクセスし ユーザー 識 別 情 報 および 教 材 コン テンツ 識 別 情 報 を 登 録 する 上 記 ページを 利 用 するには 別 途 提 供 されるユーザー 認 証 システムへの ID, パスワード が 必 要 である ユーザー 識 別 情 報 のユーザーとは 共 通 ユーザーインターフェース 機 能 を 利 用 する 教 材 コンテンツを 提 供 される 方 を 指 す (3) JavaScript プログラムの 記 述 ( 既 存 JavaScript プログラムへの 追 記 ) 以 下 のコードを JavaScript ファイル 内 に 記 述 (ペースト)する (JavaScript コードが 無 い 教 材 コンテンツの 場 合 には 先 に 作 成 した my_app.js ファイル 内 に 記 述 する ) 記 述 例 7

12 var binit = false; var ocomif = null; var szvendorpfx = "Comp1"; // Comp1 に(2)で 登 録 した ユーザー 識 別 情 報 を 記 述 (ア) var szproductpfx = 'Product1'; // Product1 に(1)で 登 録 した 教 材 コンテンツ 識 別 情 報 を 記 述 (イ) var ncomiftype = ComIF.typeMin; // 共 通 ユーザーインターフェースのタイプや 利 用 機 能 の 指 定 (ウ) var szcomifcolor = 'b'; // 共 通 I/F の 色 ( 黄 (y), 青 (b), 赤 (r))の 指 定 (エ) var szapproom = 'A'; var bgroup = false; var szname = ' 匿 名 '; document.onreadystatechange = function () { if (document.readystate == "complete") { init(); ; window.onunload = function() { if (ocomif!= null) { ocomif.closebar(); ocomif = null; ; function init() { if (binit == false) { binit = true; ocomif = new ComIF(szVendorPfx, szproductpfx, ncomiftype, szcomifcolor, szapproom, bgroup); ocomif.loadbar(function(szres) { if (szres!== 'success') { alert(szres); else { ocomif.getauthorizedinfo(szvendorpfx, szproductpfx, function(szres) { if (szres!== 'success') { alert(szres); else { var arauthinfo = ocomif.getuserinfo(); szname = arauthinfo.uname; ); ); (ア)(イ) 共 登 録 済 みの 識 別 情 報 を 設 定 する 必 要 がある 8

13 (エ)にて 青 赤 黄 のいずれかで 共 通 ユーザーインターフェースの 色 を 指 定 する 教 材 コンテンツにて 既 に document.onreadystatechange window.onunload イベントをフ ックされている 場 合 には 既 存 のプログラム 内 に 前 頁 の 記 述 例 部 を 追 記 すること JQuery 等 を 利 用 されている 場 合 には document.onreadystatechange window.onunload イベントフック 部 を 読 み 替 えて 参 照 すること 尚 共 通 ユーザインターフェースでは JQuery 等 のライブラリを 一 切 利 用 していない (4) 共 通 ユーザーインターフェースへのパラメータ 共 通 ユーザーインターフェースの 利 用 機 能 やタイプについては(ウ)にて 設 定 する ( 今 後 変 更 や 追 加 が 予 定 される 情 報 である) ComIF.typeMin //リアルタイム Web 機 能 を 利 用 しない ComIF.typeDef //リアルタイム Web 機 能 を 最 低 限 利 用 (IWB 連 携, 防 災 アラートにて 利 用 ) ComIF.typeFloating // 共 通 ユーザーインターフェースのツールバーを 画 面 右 下 に 最 低 限 のサイズで 表 示 ( 設 定 例 ) var ncomiftype = ComIF.typeMin ComIF.typeFloating; // 上 記 2つを 共 に 指 定 なお 平 成 26 年 度 事 業 における 実 証 環 境 では リアルタイム Web 機 能 を 利 用 しないこと となった ついては 上 記 パラメータの ComIF.typeDef は 利 用 せずに 必 ず ComIF.typeMin を 指 定 すること iframe を 利 用 した 共 通 ユーザーインターフェースの 搭 載 方 法 について 画 面 レイアウトへの 影 響 等 にて 教 材 コンテンツが 全 てのクライアント 領 域 を 占 有 する 必 要 がある 場 合 には 教 材 コンテンツを iframe 内 に 読 み 込 むことで 共 通 ユーザーインターフ ェース 機 能 を 搭 載 することが 可 能 である ここでは サンプル をベ ースに 説 明 する (1) 共 通 ユーザーインターフェース 搭 載 iframe 教 材 コンテンツラッパーの 利 用 以 下 の 手 順 にて 利 用 できる (2)の 内 容 を 参 考 に ユーザー 識 別 情 報 および 教 材 コンテンツ 識 別 情 報 を 登 録 する 2 サンプル rp_test フォルダー 内 の cifcontwrapper.html を 既 存 教 材 コンテンツの トップページファイルのパス 下 に 配 置 し cifcontwrapper.html をエディタで 開 く 3 以 下 の 2 行 に1での 登 録 情 報 を 設 定 する var cif_szvendorpfx = "; // 企 業 情 報 ) 共 通 ユーザーI/F MBaaS 利 用 情 報 管 理 に て 登 録 したプリフィクスを 渡 す 9

14 var cif_szproductpfx = "; // 教 材 コンテンツ 情 報 )< 上 記 同 様 > 4 共 通 ユーザーインターフェースの 色 等 必 要 に 応 じ 他 のパラメータを 調 整 する 5 教 材 コンテンツのトップページのファイル 名 が index.html では 無 い 場 合 には 以 下 の index.html 部 を 書 き 換 える <iframe id="contframe" src="index.html" frameborder="0"></iframe> 6 ブラウザにて cifcontwrapper.html にアクセスし 動 作 を 検 証 する (2) iframe ラッパー 利 用 時 の 注 意 点 教 材 コンテンツ 内 に target= _top 等 の iframe から 脱 出 するリンク 定 義 が 混 じる 場 合 には 該 当 箇 所 を 変 更 いただく 等 の 対 応 が 要 求 されることが 考 えられる 教 材 コンテンツ 画 面 上 の 終 了 ボタン 等 と 共 通 ユーザーインターフェースの 連 動 に ついて 教 材 コンテンツ 画 面 上 に 学 習 を 終 了 するためのボタン 等 が 設 置 されている 場 合 共 通 ユ ーザーインターフェースの マイポータル 画 面 への 復 帰 ボタン や ログアウトボタン と 連 動 させることが 可 能 である (1) 教 材 コンテンツと 共 通 ユーザーインターフェースの 連 動 ここでは サンプル をベースに 説 明 する 共 通 ユーザーインターフェースの マイポータルへの 復 帰 ボタン ログアウトボタン と 連 動 するには 教 材 コンテンツの JavaScript プログラム 内 に 以 下 のコードを 加 える ocomif.loadbar(function(szres) { if (szres!== 'success') { alert(szres); else { ocomif.getauthorizedinfo(szvendorpfx, szproductpfx, function(szres) { if (szres!== 'success') { alert(szres); else { // ハンドラーの 登 録 ocomif.setevhandler(retmenu, ComIF.ev2Portal); // 1 ocomif.setevhandler(dologout, ComIF.evLogout); // 2 ( 以 降 省 略 ) 1では 共 通 ユーザーインターフェースの マイポータルへの 復 帰 ボタン が 利 用 者 によ って 選 択 された 時 に 起 動 してもらう 関 数 を 登 録 しており 2も 同 様 に ログアウトボタン 押 下 時 の 関 数 を 登 録 している retmenu は 教 材 コンテンツ 側 にて マイポータルへの 復 帰 ボタンが 押 下 された 時 におこなう 処 理 が 記 述 された 関 数 名 であり dologout は ログ 10

15 アウトボタン 押 下 時 のそれであることを 示 している それぞれの 関 数 内 は 以 下 となる function retmenu() { // 教 材 コンテンツにて 必 要 な 処 理 ocomif.onmyportal(false); // 共 通 ユーザーインターフェースに マイポータル 画 面 への 復 帰 処 理 を 実 行 させる(3) (ログアウト 処 理 (4)も 同 様 に ocomif.onlogout(false); をコールする) 尚 教 材 コンテンツ 画 面 にて 終 了 等 の 処 理 が 選 択 された 場 合 には 教 材 コンテンツ 側 にて 必 要 な 後 処 理 をおこなった 上 で 3 または 4のように 共 通 ユーザーインターフェー ス 側 の 関 数 を 呼 ぶが その 前 に 1 2にて 登 録 したハンドラーを 外 す 手 続 きが 以 下 のよう に 必 要 となる ocomif.removeevhandler(comif.ev2portal); // 1のハンドラーを 削 除 ocomif.removeevhandler(comif.evlogout); // 2のハンドラーを 削 除 教 材 コンテンツ 画 面 上 の 終 了 等 の 機 能 を プラットフォーム 内 においては マイポータル 画 面 への 復 帰 に 置 き 換 えるのか または ログアウト なのかについては 教 材 コンテン ツの 制 作 者 が 選 択 もしくは 双 方 を 網 羅 可 能 な 仕 様 としている (2) iframe ラッパー 内 教 材 コンテンツと 共 通 ユーザーインターフェースの 連 動 ここでは サンプル 1 をベースに 説 明 する iframe 内 教 材 コンテンツと iframe 外 設 置 共 通 ユーザーインターフェース 間 においてメ ッセージのやりとりをおこなうにはサンプルの js フォルダー 内 に 格 納 されている cifmsg.js ライブラリーが 必 要 である コピーして 利 用 すること 教 材 コンテンツへのプログラム 追 記 内 容 については 概 ね iframe ラッパーが 利 用 され ていない 前 ページまでの 説 明 とさほど 変 わりはない 以 下 のように 教 材 コンテンツがブラウザにロードされたタイミングにて 共 通 ユーザー インターフェースの マイポータルへの 復 帰 ボタン ログアウトボタン 機 能 に 対 する 教 材 コンテンツ 側 のハンドラー 関 数 を 登 録 する 教 材 コンテンツがブラウザに 読 み 込 まれた 直 後 に 処 理 をおこなう 例 : document.onreadystatechange = function () {

16 if (document.readystate == "complete") { // ここに 処 理 を 記 述 する 1 ; 1 内 の 記 述 例 : cifsetevhandler(false, retmenu); // マイポータルへの 復 帰 処 理 に 対 する 関 数 (retmenu)を 登 録 2 cifsetevhandler(true, dologout); // ログアウト 処 理 に 対 する 関 数 (dologout)を 登 録 3 教 材 コンテンツから 共 通 ユーザーインターフェースに 対 し マイポータルへの 復 帰 また は ログアウト 処 理 を 実 施 させるには 以 下 のように 記 述 する cifsendmessage(false, 'launch'); // マイポータル 画 面 への 復 帰 cifsendmessage(true, 'launch'); // ログアウトの 実 行 尚 教 材 コンテンツ 側 の 終 了 ボタン 等 が 押 下 された 場 合 には 2,3で 登 録 したハンドラ ーを 削 除 する 必 要 がある cifsendmessage(false, 'remove'); // 2ハンドラーの 削 除 cifsendmessage(true, 'remove'); // 3ハンドラーの 削 除 2.3 異 なる 画 面 サイズへの 対 応 概 要 CSS3 では Media Queries という 様 々なデバイスに 対 し 最 適 な 表 示 を 提 供 するための 仕 組 みがある また ウェブブラウザに 対 して 表 示 する 幅 を%で 指 定 することで ブラウザの 幅 によってコンテンツのサイズを 変 更 する いわゆるリキッドレイアウトと 呼 ばれる 可 変 レ イアウトで 種 々の 環 境 での 表 示 を 行 う 仕 組 みがある 学 習 教 育 クラウド プラットフォ ームで 提 供 されるコンテンツは あらゆる 画 面 サイズで 最 適 なプレゼンテーションを 提 供 す る 必 要 がある Media Queries 記 述 screen and (max-width: 980px) { /* view port の 横 幅 が 980px 以 下 の 時 に 適 当 され る CSS */ #hogehoge{ width: 900px; 12

17 @media screen and (max-width: 760px) { /* view port の 横 幅 が 760px 以 下 の 時 に 適 当 され る CSS */ #hogehoge{ width: screen and (max-width: 480px) screen and (max-width: 320px) { リキッドレイアウト 記 述 例 <div id="wrapper"> <div id="main"> <div id="maincontent">div#main</div> </div> <div id="sub">div#sub</div> </div> div#wrapper { width: 80%; div#main { width: 100%; float: right; div#maincontent { margin-left: 200px; div#sub { width: 200px; margin-right: -200px; float: left; 2.4 個 人 情 報 概 要 コンテンツ 内 では 児 童 生 徒 の 名 前 を 入 力 させたり 手 書 きで 書 かせたりしてはならな い システム 上 では 児 童 生 徒 の 名 前 は 一 切 扱 わない 13

18 3. HTML5の 要 素 に 関 して HTML5 に 関 連 する 多 くの 規 格 の 策 定 状 況 はかなり 成 熟 してきており 規 格 を 満 たす 実 装 を 待 つ 状 態 と 言 える しかし 現 在 は 目 下 ブラウザの 実 装 が 進 行 中 であり ブラウザの 種 類 やバージョンによっては 未 実 装 の 箇 所 や 動 作 が 異 なる 部 分 がある 本 章 では その 差 異 を 考 慮 に 入 れ 各 端 末 で 問 題 なくコンテンツを 動 作 させるために 必 要 な 情 報 手 段 をまとめている 3.1 セキュリティ 概 要 HTML5 を 始 めとしたウェブ 技 術 の 進 展 に 伴 い ウェブアプリケーションのセキュリティ 問 題 が 心 配 される 2013 年 10 月 30 日 に JPCERT/CC より HTML5 を 利 用 した Web アプ リケーションのセキュリティ 問 題 に 関 する 調 査 報 告 書 が 一 般 公 開 された コンテンツ 開 発 の 前 に 必 ず このドキュメントを 一 読 し セキュリティを 考 慮 したアプリケーション 設 計 を 行 うこと JPCERT/CC HTML5 を 利 用 した Web アプリケーションのセキュリティ 問 題 に 関 する 調 査 報 告 書 また 概 要 を 把 握 するために JPCERT/CC 職 員 が 行 った 過 去 の 講 演 や 記 事 を 読 むことを 推 奨 する JPCERT/CC 講 演 執 筆 活 動 一 覧 今 から 始 める HTML5 セキュリティ Video 要 素 概 要 video 要 素 は HTML5 で 新 たに 導 入 された 要 素 である これまで ウェブページに 動 画 を 組 み 込 む 場 合 は プラグインが 利 用 されてきた しかし HTML5 では video 要 素 を 使 う ことでウェブページに 動 画 を 組 み 込 むことが 可 能 になった さらに HTML の 要 素 となる ことで CSS で 見 た 目 の 定 義 を 行 うことができ JavaScript により 制 御 を 行 えるようになっ た 本 項 では コンテンツとして 適 合 する video 要 素 の 記 述 方 法 について 記 載 している 動 画 ファイル 動 画 ファイルは 以 下 の 形 式 を 推 奨 する 推 奨 H AAC + MP4( 拡 張 子 :.mp4, MIME タイプ:video/mp4) 任 意 WebM( 拡 張 子 :.webm, MIME タイプ:video/webm) H.264 は Windows 8.1/IE11, Android/Chrome, ios7/safar のいずれもサポートしいている 14

19 また Firefox も Windows 8.1, MacOS X 上 でならサポートしている H.264 は スマートフォンやタブレットにおいては ハードウェアデコードするため CPU は PC と 比 べて 非 力 ながらも 再 生 パフォーマンスが 期 待 できる WebMは Chrome, Firefox, Opera がサポートしているが コンテンツが 対 象 とする Windows 8.1/IE11 と ios7 Safari がサポートしていないため 特 別 な 事 情 がない 限 りは 推 奨 しない H.264 をサポートしていないブラウザおよび OS 環 境 においても 再 生 させたい 場 合 に H.264 のフォールバックとして 採 用 することを 推 奨 する マークアップ 例 <video controls width="360" height="240"> <source src="v.mp4" type="video/mp4"> <source src="v.webm" type="video/webm"> <p>ご 利 用 のブラウザではビデオが 再 生 できません ビデオファイルは<a href="v.mp4">こちら</a>からダウンロードできます </p> </video> もし 動 画 ファイルがユーザーに 対 してダウンロードが 許 可 されるのであれば video 要 素 の 開 始 タグと 終 了 タグの 間 に 動 画 ファイルのダウンロードリンクを 用 意 するのが 良 い こ うすることで 仮 に video 要 素 そして 対 象 の 動 画 コーデックをサポートしていないブラウザ からアクセスがあった 際 に 便 利 ではないが 動 画 を 閲 覧 する 手 段 を 提 供 することが 可 能 に なる Web サーバ 動 画 ファイルの 拡 張 子 に 合 わせた MIME タイプをユーザーエージェントへ 送 信 できるこ と もしウェブサーバーの 設 定 が 難 しい 場 合 動 画 ファイルが 存 在 するディレクトリ 内 に.htaccess ファイルを 用 意 し 以 下 のディレクティブを 記 述 することで 対 処 できる 場 合 が ある AddType video/mp4.mp4 AddType video/webm.webm 要 素 固 有 の 属 性 src 動 画 ファイルのアドレスを 指 定 する (src 属 性 が 存 在 しない 場 合 video 要 素 の 中 に 1 つ 以 上 の source 要 素 を 含 む ) crossorigin CORS(Cross-Origin Resource Sharing)で 使 用 される 属 性 で 異 なるサイトのファイルにアク セスする 場 合 に 認 証 情 報 を 使 用 するかどうかを 指 定 する anonymous : 認 証 情 報 を 使 用 しない use-credintials : 認 証 情 報 を 使 用 する poster ブラウザが 動 画 ファイルのロードを 開 始 して 再 生 準 備 が 整 うまでの 間 に 表 示 する 画 像 フ 15

20 ァイルのアドレスを 指 定 する この 画 像 は 指 定 の 動 画 ファイルが 存 在 しなかった または 再 生 できなかった 場 合 にも 表 示 される preload 動 画 ファイルのデータの 先 読 みの 挙 動 の 指 針 をブラウザに 伝 えることができる なお こ の 属 性 は あくまでもブラウザにヒント 与 えるに 過 ぎず 実 際 に 指 定 の 挙 動 を 保 証 するもの ではない 指 定 可 能 な 値 は 以 下 の 通 りである none 音 声 ファイルを 先 読 みしない metadata 動 画 の 長 さなどのメタデータのみを 先 読 みする auto 動 画 ファイルを 先 読 みする(デフォルト) preload 属 性 が 指 定 されていない 場 合 は デフォルトである auto が 採 用 される autoplay 論 理 属 性 である 属 性 を 指 定 することで 動 画 の 読 み 込 みが 行 われると 自 動 的 に 再 生 を 開 始 する ( Nexus10,iPad の 標 準 ブラウザでは 自 動 再 生 は 機 能 しない なので 本 属 性 は 使 用 しない ) mediagroup 複 数 の 動 画 ファイルをグルーピングする 際 のグループ 名 を 指 定 する loop 論 理 属 性 である 属 性 を 指 定 することで ループ 再 生 する ( Nexus10,iPad の 標 準 ブラ ウザでは 自 動 再 生 は 機 能 しない なので 本 属 性 は 使 用 しない ) muted 論 理 属 性 である 属 性 を 指 定 することで 音 をミュートする ( Nexus10,iPad の 標 準 ブ ラウザでは 自 動 再 生 は 機 能 しない なので 本 属 性 は 使 用 してはならない ) controls 論 理 属 性 である 属 性 を 指 定 することで ユーザーエージェント 標 準 のコントローラを 表 示 する 動 画 の 再 生 制 御 を JavaScript で 行 わないのであれば 必 ず この 属 性 はセットする こと セットしないと ユーザーが 動 画 再 生 をコントロールすることができなくなるので 注 意 すること width 横 幅 を 指 定 する 属 性 である height 高 さを 指 定 する 属 性 である 上 記 属 性 を 除 く IDL 属 性 とメソッド videowidth ( 読 み 込 み 専 用 ) 動 画 の 幅 を 返 す videoheight ( 読 み 込 み 専 用 ) 動 画 の 高 さを 返 す currentsrc 16

21 ( 読 み 込 み 専 用 ) 現 在 の 動 画 のアドレスを 返 す 動 画 が 存 在 しない 場 合 空 の 文 字 列 を 返 す audio erroe state error ( 読 み 込 み 専 用 )MediaError オブジェクトを 返 す エラーが 無 ければ null を 返 す network state networkstate ( 読 み 込 み 専 用 )ネットワークアクティビティを 返 す NETWORK_EMPTY = 0: まだ 初 期 化 されていない すべての 属 性 は 初 期 状 態 のままであ る NETWORK_IDLE = 1 : 要 素 のリソース 選 択 アルゴリズムはアクティブで かつ リソー スが 選 択 された 状 態 である しかし 実 際 には この 時 点 ではネットワークを 使 っていない NETWORK_LOADING = 2 : ユーザーエージェントは 現 在 データをダウンロードしよう としている NETWORK_NO_SOURCE = 3 : 要 素 のリソース 選 択 アルゴリズムはアクティブであるが まだ 採 用 するリソースは 見 つかっていない bufferd ( 読 み 込 み 専 用 ) ユーザーエージェントがバッファした 動 画 の 範 囲 を 表 す TimeRanges オブ ジェクトを 返 す load() 要 素 をリセットする そして 最 初 から 新 たな 動 画 を 選 択 し それをロードし 始 める canplaytype(type) 空 の 文 字 列 ( 否 定 的 な 回 答 ) "maybe"( 確 信 がない) "probably"( 確 信 )を 返 す 指 定 された type の 動 画 を 再 生 できるかどうかを ユーザーエージェントがどれほど 確 信 できるかどうかに 基 づき 返 す ready state readystate ( 読 み 込 み 専 用 ) 現 在 再 生 位 置 のレンダリングに 関 して 要 素 の 現 在 の 状 態 を 表 す 値 を 返 す HAVE_NOTHING = 0 : 動 画 に 関 する 情 報 はまだ 何 も 入 手 できていない 現 在 再 生 位 置 のデ ータも 何 も 入 手 できていない networkstate 属 性 が NETWORK_EMPTY にセットされたメデ ィア 要 素 は 常 に HAVE_NOTHING 状 態 にある HAVE_METADATA = 1 : 十 分 なリソースが 取 得 でき そのリソースの 尺 がわかっている video 要 素 の 場 合 そのビデオの 寸 法 もわかっている もうシーク 時 に API から 例 外 が 発 出 されることはない 現 在 再 生 位 置 の 直 近 のメディア データはまだ 入 手 できていない テキ スト トラックは 準 備 できている HAVE_CURRENT_DATA = 2 : 現 在 再 生 位 置 の 直 近 のデータが 取 得 できている しかし ユ ー ザ ー エ ー ジ ェ ン ト は 再 生 方 向 に 現 在 再 生 位 置 を 進 め よ う と す る と す ぐ に HAVE_METADATA 状 態 に 戻 ってしまう 状 態 または 再 生 方 向 に 取 得 すべきデータがない 状 態 のいずれかである 例 えば ビデオでは これは ユーザーエージェントが 現 在 のフレ ームのデータを 持 っているけれども 次 のフレームは 持 っていない 状 態 に そして 再 生 が 17

22 終 わったときに 一 致 する HAVE_FUTURE_DATA = 3 : 現 在 再 生 位 置 の 直 近 のデータが 取 得 できている さらに ユ ーザーエージェントは すぐに HAVE_METADATA 状 態 に 戻 ること 無 しに 少 なくとも 少 し は 再 生 方 向 に 現 在 再 生 位 置 を 進 めることができる 状 態 である 例 えば ビデオでは ユーザ ーエージェントが 少 なくとも 現 在 のフレームと 次 のフレームのデータを 持 ち 合 わせている 状 態 である ユーザーエージェントは 再 生 が 終 わったら この 状 態 に 留 まることはできな い HAVE_ENOUGH_DATA = 4 :ユーザーエージェントは 実 効 再 生 レートで 進 めるとしても 再 生 がメディア リソースの 最 後 に 到 達 する 前 に 現 在 再 生 位 置 が 利 用 可 能 なデータを 追 い 越 してしまうことはないほどの 割 合 でデータをフェッチしていると 見 積 もっている seeking ( 読 み 込 み 専 用 ) ユーザーエージェントが 現 在 シーク 中 なら true を 返 す playback state currenttime 現 在 再 生 位 置 を 返 す 単 位 は 秒 である duration メディア リソースの 最 後 の 時 間 を 返 す 単 位 は 秒 である paused メディア 要 素 が 停 止 されているかどうかを 返 す defaultplaybackrate メディア リソースを 再 生 させたい 速 度 を 与 える これは その 本 来 の 速 度 の 倍 数 である 取 得 時 においては それにセットされた 最 後 の 値 を 返 さなければいけない playbackrate この 属 性 は 実 効 再 生 レートを 与 える これは メディア リソースが 再 生 する 速 度 のこ とで その 本 来 の 速 度 の 倍 数 である 取 得 時 おいては 最 後 にセットされた 値 を 返 さなけれ ばいけない played この 属 性 は メディア リソースの 範 囲 があれば これを 表 す 新 たな 静 的 な 正 規 化 TimeRanges オブジェクトを 返 さなければいけない これは ユーザーエージェントが この 属 性 が 評 価 される 時 点 で すでにレンダリングした 範 囲 である ended メディア 要 素 の 再 生 が 終 了 し 再 生 方 向 が 前 進 なら true を そうでなければ false を 返 す play() 動 画 の 再 生 を 開 始 する pause() 動 画 を 一 時 停 止 する controls volume 属 性 には 現 在 再 生 しているメディア リソースの 再 生 ボリュームの 値 を 与 える (0.0~1.0) 取 得 時 は 現 在 の 再 生 ボリュームを 返 す muted 18

23 属 性 には 現 在 再 生 しているメディア リソースのミュートの 設 定 を 与 える 取 得 時 は 現 在 の 状 態 を 返 す 記 述 例 コンテンツの 要 件 を 満 たす video 要 素 の 記 述 例 <video controls width="360" height="240"> <source src="video/video.mp4" type="video/mp4" /> <source src="video/video.ogv" type="video/ogg" /> <source src="video/video.webm" type="video/webm" /> <p> ご 使 用 中 の ブ ラ ウ ザ で は 動 画 再 生 機 能 は ご 利 用 で き ま せ ん <a href="video/vide.mp4">こちら</a>からダウンロードしてください </p> </video> 外 部 リンク W3C HTML5 - The video element( W3C (HTML5 Video Events and API) 3.3 Audio 要 素 概 要 audio 要 素 は HTML5 で 新 たに 導 入 された 要 素 である ウェブページに 音 声 を 組 み 込 む 場 合 は プラグインが 利 用 されてきた しかし HTML5 では audio 要 素 を 使 うことでウェ ブページに 音 声 を 組 み 込 むことが 可 能 になった さらに JavaScript により 制 御 を 行 えるようになった 本 項 では コンテンツとして 適 合 する video 要 素 の 記 述 方 法 について 記 載 している コンテンツとして audio 要 素 を 利 用 する 際 に 必 要 となる 要 件 音 声 ファイル 音 声 ファイルは 以 下 の 形 式 を 推 奨 する 推 奨 AAC( 拡 張 子 :.aac, MIME タイプ:audio/aac) 推 奨 MP3( 拡 張 子 :.mp3, MIME タイプ:audio/mp3) 任 意 Vorbis + Ogg( 拡 張 子 :.ogg, MIME タイプ:audio/ogg) 任 意 WAVE( 拡 張 子 :.wav, MIME タイプ:audio/wave) AAC と MP3 は Windows 8.1/IE11, Android/Chrome, ios7/safar のいずれもサポートしいて いる また Firefox も Windows 8.1, MacOS X 上 でならサポートしている Ogg WAVE は コンテンツが 対 象 とする Windows 8.1/IE11 と ios7 Safari がサポートしていないため 特 別 な 事 情 がない 限 りは 推 奨 しない AAC または MP3 のいずれもサポートしていないブラ ウザおよび OS 環 境 においても 再 生 させたい 場 合 に AAC または MP3 のフォールバックと して 採 用 することを 推 奨 する マークアップ 例 19

24 <audio controls> <source src="a.mp3" type="audio/mp3"> <source src="a.ogg" type="audio/ogg"> <p>ご 利 用 のブラウザではオーディオが 再 生 できません オーディオファイルは<a href="a.mp3">こちら</a>から ダウンロードできます </p> </video> もし 音 声 ファイルがユーザーに 対 してダウンロードが 許 可 されるのであれば audio 要 素 の 開 始 タグと 終 了 タグの 間 に 音 声 ファイルのダウンロードリンクを 用 意 するのが 良 い こ うすることで 仮 に video 要 素 そして 対 象 の 音 声 コーデックをサポートしていないブラウザ からアクセスが 有 った 際 に 便 利 ではないが 音 声 コンテンツを 利 用 する 手 段 を 提 供 するこ とが 可 能 になる Web サーバ 音 声 ファイルの 拡 張 子 に 合 わせた MIME タイプをユーザーエージェントへ 送 信 できること もしウェブサーバーの 設 定 が 難 しい 場 合 音 声 ファイルが 存 在 するディレク トリ 内 に.htaccess ファイルを 用 意 し 以 下 のディレクティブを 記 述 することで 対 処 できる 場 合 がある AddType audio/mp4.acc AddType audio/mpeg.mp3 AddType audio/ogg.ogg AddType audio/wav.wav 要 素 固 有 の 属 性 src 音 声 ファイルのアドレスを 指 定 する (src 属 性 が 存 在 しない 場 合 audio 要 素 の 中 に 1 つ 以 上 の source 要 素 を 含 む ) crossorigin CORS(Cross-Origin Resource Sharing)で 使 用 される 属 性 で 異 なるサイトのファイルにアク セスする 場 合 に 認 証 情 報 を 使 用 するかどうかを 指 定 する anonymous : 認 証 情 報 を 使 用 しない use-credintials : 認 証 情 報 を 使 用 する preload 音 声 ファイルのデータの 先 読 みの 挙 動 の 指 針 をブラウザに 伝 えることができる なお こ の 属 性 は あくまでもブラウザにヒント 与 えるに 過 ぎず 実 際 に 指 定 の 挙 動 を 保 証 するもの ではない 指 定 可 能 な 値 は 以 下 の 通 りである none : 音 声 ファイルを 先 読 みしない metadata : 音 声 の 長 さなどのメタデータのみを 先 読 みする auto : 音 声 ファイルを 先 読 みする(デフォルト) preload 属 性 が 指 定 されていない 場 合 は デフォルトである auto が 採 用 される autoplay 論 理 属 性 である 属 性 を 指 定 することで 音 声 の 読 み 込 みが 行 われると 自 動 的 に 再 生 を 開 始 する Nexus10,iPad の 標 準 ブラウザでは 自 動 再 生 は 機 能 しない なので 本 属 性 は 使 用 20

25 しない mediagroup 複 数 の 音 声 ファイルをグルーピングする 際 のグループ 名 を 指 定 する loop 論 理 属 性 である 属 性 を 指 定 することで ループ 再 生 をする Nexus10 標 準 ブラウザでは ループは 機 能 しない なので 本 属 性 は 使 用 しない muted 論 理 属 性 である 属 性 を 指 定 することで 音 をミュートする Nexus10,iPad の 標 準 ブラウ ザでは ミュートは 機 能 しない なので 本 属 性 は 使 用 しない controls 論 理 属 性 である 属 性 を 指 定 することで ユーザーエージェント 標 準 のコントローラを 表 示 する 音 声 の 再 生 制 御 を JavaScript で 行 わないのであれば 必 ず この 属 性 はセットする こと セットしないと ユーザーが 音 声 再 生 をコントロールすることができなくなるので 注 意 すること 記 述 例 コンテンツの 要 件 を 満 たす audio 要 素 の 記 述 例 <audio controls> <source src="audio/audio.mp4" type="audio/aac" /> <source src="audio/audio.mp3" type="audio/mp3" /> <source src="audio/audio.ogg" type="audio/ogg" /> <source src="audio/audio.wav" type="audio/wav" /> <p>ご 使 用 中 のブラウザでは 音 声 再 生 機 能 はご 利 用 できません <a href="audio/audio.mp4 ">こちら</a>からダウンロードしてください </p> </video> 外 部 リンク W3C HTML5 - The audio element( ) 3.4 Track 要 素 概 要 track 要 素 は HTML5 で 新 たに 導 入 された 要 素 である video 要 素 や audio 要 素 に 字 幕 やキ ャプションを 標 準 化 された 方 法 で 追 加 することができる track 要 素 記 述 例 <video src="v.mp4" controls> <track kind="subtitles" src="subtitle_ja.vtt" srclang="ja" label=" 日 本 語 " default> <track kind="subtitles" src="subtitle_en.vtt" srclang="en" label="english"> </video> track 要 素 をサポートしているのは Windows8.1/IE11 と Chrome のみである しかし 学 習 教 材 の 動 画 において 字 幕 やキャプションは 生 徒 にとっては 理 解 に 役 立 つため 字 幕 やキャ 21

26 プションは 出 来 る 限 りにおいて 用 意 することを 推 奨 する すべての 環 境 で 確 実 に 字 幕 やキ ャプションを 表 示 させるには track 要 素 を 使 わずに 字 幕 やキャプションを 直 接 埋 め 込 ん だ 形 で 動 画 を 用 意 する もし 字 幕 やキャプションをテキストデータとして 用 意 する 場 合 track 要 素 を 使 いつつも 多 くの 環 境 で 字 幕 やキャプションをサポートするために JavaScript ライブラリの 利 用 を 推 奨 する Captionator.js Captionator.js は 字 幕 ファイルのフォーマットに WebVTT を 採 用 している WebVTT: The Web Video Text Tracks Format WebVTT の 記 述 例 WEBVTT FILE 00:00: > 00:00: みなさん こんにちわ 00:00: > 00:00: お 集 まり 頂 き ありがとうございます 00:00: > 00:00: これから 教 材 の 使 い 方 について 紹 介 させてください Web サーバーは WebVTT ファイルの 拡 張 子 に 合 わせた MIME タイプをユーザーエージ ェントへ 送 信 する 必 要 がある もしウェブサーバーの 設 定 が 難 しい 場 合 WebVTT ファイ ルが 存 在 するディレクトリ 内 に.htaccess ファイルを 用 意 し 以 下 のディレクティブを 記 述 す ることで 対 処 できる 場 合 がある AddType text/vtt.vtt 3.5 Canvas 要 素 概 要 canvas 要 素 はHTML5 で 新 たに 導 入 された 要 素 である canvas 要 素 を 使 うことで JavaScript によって 動 的 に 二 次 元 グラフィックスを 描 画 することができる 本 項 では コンテンツとし て 適 合 する canvas 要 素 の 記 述 方 法 について 記 載 している コンテンツとして canvas 要 素 を 利 用 する 際 に 必 要 となる 要 件 (1) ソースコード 三 次 元 グラフィックスを 扱 う WebGL も canvas 要 素 を 使 うが 実 証 研 究 用 のデバイス の 一 部 でサポートされていない したがって 教 材 として 無 くてはならないコンテン ツとして WebGL を 採 用 してはならない canvas につける ID は canvas 保 管 時 の JSON キー もしくは 画 像 ファイル 名 の 一 22

27 部 として 利 用 される よって JSON キーやファイル 名 に 使 用 できない 文 字 を 使 って はならない (2) アニメーション canvas を 使 ってアニメーションを 実 現 する 際 には JavaScript の setinterval()や setinterval()といったタイマー 関 数 ではなく W3C の Timing control for script-based animations 仕 様 で 規 定 された requestanimationframe()メソッドを 採 用 することを 推 奨 する なめらかなアニメーションを 実 現 しようとすると 概 ね 16 ミリ 秒 ごとに 描 画 処 理 を 実 行 ( 約 60fps)する 必 要 がある タイマー 関 数 では 16 ミリ 秒 間 隔 でタイマ ーをセットしても その 精 度 は 低 く また 必 ずしもディスプレイのリフレッシュレ ートに 一 致 しないため 非 常 に 非 効 率 である また デバイスのバッテリー 消 費 が 激 しいと 言 われている 一 方 requestanimationframe()は デバイスのディスプレイのリフレッシュレートに 合 わせてコールバック 関 数 を 呼 び 出 す W3C - Timing control for script-based animations サンプルコード // 現 在 のタイムスタンプ var start = window.performance.now(); // canvas にフレームを 描 画 する 関 数 var startanimation = function(now) { ; // canvas に 描 画... // 次 のリフレッシュ 時 に startanimation() 関 数 を 呼 び 出 す window.requestanimationframe(startanimation); // アニメーション 開 始 window.requestanimationframe(startanimation); 要 素 固 有 の 属 性 width 横 幅 を 指 定 する 属 性 である height 高 さを 指 定 する 属 性 である TIPS 簡 単 に canvas を 扱 えるよう Javscript ライブラリが 公 開 されている CreateJS CreateJS は ActionScript に 近 いコーディングスタイルを 採 用 している Flash クリエイタ ーには 馴 染 みやすいライブラリといえる また Flash Professional CC には Flash コンテン ツを CreateJS から 利 用 できる 形 に 変 換 する Toolkit for CreateJS が 用 意 されている シン 23

28 プルな Flash コンテンツなら 過 去 の Flash コンテンツ 資 産 をそのまま 変 換 できる 可 能 性 が ある 外 部 リンク W3C HTML5 - The canvas element( ) W3C HTML Canvas 2D Context( ) 3.6 Progress 要 素 概 要 progress 要 素 は HTML5 で 新 たに 導 入 された 要 素 である 何 かしらの 処 理 の 進 捗 を 表 すた めに 使 用 する 実 証 研 究 用 のデバイスにおいては progress 要 素 がサポートされているが 進 捗 バーの 見 た 目 はブラウザによって 異 なるので 注 意 すること 進 捗 バーは ユーザーに とって 進 捗 の 概 略 を 直 感 的 に 把 握 することはできるが 詳 細 な 値 を 読 み 取 ることができない もしユーザーに 値 を 読 み 取 らせる 必 要 がある 場 合 は progress 要 素 の 外 にテキスト 情 報 も 用 意 することを 推 奨 する コードサンプル <progress id="pb" value="50" max="100"></progress> <span id="pt">50%</span> スクリプトを 使 って 動 的 に 進 捗 を 変 化 させる 場 合 も テキストの 情 報 の 更 新 も 忘 れないよ うにすること document.getelementbyid("pb").value = 30; document.getelementbyid("pt").textcontent = "30%"; 要 素 固 有 の 属 性 value 進 捗 を 表 す 数 値 を 指 定 する max 属 性 に 指 定 した 値 以 下 の 数 値 を 指 定 しなければいけない max 属 性 を 指 定 しない 場 合 は 0.0 以 上 1.0 以 下 の 数 値 を 指 定 しなければならない max 進 捗 の 完 了 を 表 す 数 値 を 指 定 する 0 以 上 の 数 値 を 指 定 しなければならない max 属 性 が 指 定 されなければ 1 が 指 定 されたとして 処 理 される 記 述 例 <p><progress value="3" max="5">60%</progress></p> 外 部 リンク W3C HTML5 - the progress element( ) 24

29 3.7 Meter 要 素 概 要 meter 要 素 は HTML5 で 新 たに 導 入 された 要 素 である 最 小 値 と 最 大 値 が 指 定 された 限 定 された 範 囲 における 値 を 表 すために 使 用 する 実 際 にはバーの 形 をしたメーターとしてレン ダリングされる 実 証 研 究 用 のデバイスにおいては IE11 に meter 要 素 が 実 装 されていない それ 以 外 のブラウザでは meter 要 素 がサポートされているが メーターの 見 た 目 はブラウザ によって 異 なるので 注 意 すること JavaScript のライブラリを 使 うことで サポート 外 のブラウザでも meter 要 素 のレンダリ ングを 行 うことが 可 能 である (1) html5.jp(<meter> polyfill (jquery プラグイン)) メーターは ユーザーにとって 概 略 を 直 感 的 に 把 握 することはできるが 詳 細 な 値 を 読 み 取 ることができない もしユーザーに 値 を 読 み 取 らせる 必 要 がある 場 合 は meter 要 素 の 外 にテキスト 情 報 も 用 意 することを 推 奨 する (2) コードサンプル <meter id="mb" min="0" max="128" value="24"></meter> <span id="mt">128 個 の 空 きに 対 して 24 個 が 使 用 中 である </span> スクリプトを 使 って 動 的 に 進 捗 を 変 化 させる 場 合 も テキストの 情 報 の 更 新 も 忘 れないよ うにすること document.getelementbyid("mb").value = 30; document.getelementbyid("mt").textcontent = "128 個 の 空 きに 対 して 30 個 が 使 用 中 である "; 要 素 固 有 の 属 性 value メーターに 表 す 値 を 指 定 する min メーターが 表 す 範 囲 の 下 限 値 を 指 定 する low 低 領 域 の 上 限 値 を 指 定 する high 高 領 域 の 下 限 値 を 指 定 する max メーターが 表 す 範 囲 の 上 限 値 を 指 定 する optimum 最 適 値 を 指 定 する 25

30 3.7.3 記 述 例 <p><meter value="3" min="0" max="5">5 分 の3</meter></p> 外 部 リンク W3C HTML5 - the meter element( ) 3.8 MathML 概 要 MathML は これまで HTML 中 に 直 接 記 述 することができなかった しかし HTML5 の 仕 様 では 直 接 記 述 することができるようになった ただ 仕 様 上 では 規 定 されたが 実 装 されているユーザーエージェントは 大 変 限 られている 今 回 の 実 証 実 験 で 使 われるデバ イスの 標 準 ウェブブラウザでは サポートされていない したがって MathML は 使 用 して はならない コンテンツ 内 で 数 式 表 現 をする 場 合 コンテンツ 内 で 数 式 表 現 をする 場 合 次 の 節 で 詳 細 を 記 述 をする 代 替 案 から 条 件 に 適 し たものを 選 んで 適 用 すること 1. 簡 易 な 数 式 を 利 用 する 場 合 ( 四 則 演 算 等 ) HTML+CSS 2. 高 等 数 学 の 数 式 を 利 用 する 場 合 ( 平 方 根 積 分 等 ) MathJax 3. 初 等 数 学 指 導 のために 独 特 な 表 現 がある 場 合 ( 分 数 割 り 算 掛 け 算 の 筆 算 ) 画 像 数 式 表 現 の 代 替 案 MathML を 使 用 せずに 今 回 の 実 証 実 験 で 使 用 するデバイスにて 数 式 の 記 述 を 行 う 方 法 は 以 下 の 方 法 がある MathJax MathJax は 世 界 最 大 の 数 学 論 文 データベース MathSciNet で 採 用 されている 数 式 表 示 の 仕 組 みである JavaScript で 作 られており 多 くのブラウザで 同 じ 表 示 を 実 現 すること が 可 能 である 数 式 の 記 載 方 法 は 公 式 ページを 参 照 のこと 初 等 数 学 ( 割 り 算 の 筆 算 等 ) はサポートされていない MathJax CSS を 使 った 表 現 W3C が CSS を 使 った MathML の 表 示 を 文 書 として 公 開 している CSS ファイルを 読 み 込 んで MathML の 記 述 を 行 うことで ある 程 度 の 表 現 を 行 うことができる MathML で 初 等 数 学 の 規 定 をしているため 初 等 数 学 の 表 現 も 可 能 である 画 像 想 定 する 表 現 ができない 場 合 画 像 で 対 応 することも 可 能 である 画 像 で 対 応 する 場 合 26

31 読 み 上 げなどで 同 じ 情 報 を 伝 えられるように 配 慮 すること 外 部 リンク W3C(Mathematical Markup Language (MathML) Version 3.0) 3.9 ストレージ 概 要 近 年 のブラウザには データをブラウザに 蓄 積 する API がいくつか 追 加 されている 旧 来 の Cookie とは 異 なり 大 きなデータや 大 量 のデータの 蓄 積 や 蓄 積 したデータを 検 索 で きる 点 が 大 きな 特 徴 である 本 項 では これらストレージ 関 連 の API の 概 要 に 加 え コンテンツとして 適 合 するスト レージの 活 用 について 記 載 している コンテンツとしてストレージ 系 API 利 用 する 際 に 必 要 となる 要 件 ストレージ 系 API は それぞれに 特 徴 がある 用 途 を 見 極 めて API を 選 択 すること 詳 細 は ストレージ 系 API の 概 要 と 特 徴 および ブラウザ 別 の API サポート 状 況 と 対 処 方 法 を 参 照 すること 異 なるアプリがお 互 いのストレージデータに 干 渉 しないよう データ 蓄 積 メカニズム を 設 計 すること 詳 細 は オリジン 単 位 で 保 存 されるデータ を 参 照 すること ブラウザのストレージに 蓄 積 されたデータは 消 去 されてしまう 場 合 があることを 想 定 すること 詳 細 は データの 消 去 を 参 照 すること ストレージには 決 して 個 人 を 特 定 できる 情 報 やプライバシーに 関 わる 情 報 を 保 存 し てはならない 詳 細 は プライバシーの 対 処 を 参 照 すること ストレージ 系 API の 概 要 と 特 徴 近 年 のブラウザは 4 種 類 のストレージ 系 API が 実 装 されている ここでは それぞれに ついて 概 要 と 特 徴 を 解 説 する Web Storage Web Storage は テキストデータを 一 意 の 値 となるキーに 結 び 付 けて 蓄 積 するための 枠 組 みを 提 供 する 非 常 にシンプルなストレージ API である すでにすべてのメジャーブラウザ に 実 装 されている Web Storage には 2 種 類 のストレージが 用 意 されている 一 つは 永 続 的 にデータが 保 存 さ れるローカルストレージである ローカルストレージに 保 存 されたデータは ブラウザを 閉 じても 残 り 続 ける もう 一 つは ページがブラウザに 表 示 されている 間 だけ 存 続 するセッシ ョンストレージである ブラウザを 閉 じれば 保 存 したデータは 完 全 に 消 えて 無 くなる Web Storage は 他 のストレージ 系 API とは 異 なり 書 き 込 みと 読 み 取 りともに 同 期 処 理 で ある また 容 量 も 5MB~10MB に 制 限 されている Web Storage は アプリケーションの 設 定 データなどの 小 さなデータを 保 存 するのに 適 している 27

32 Indexed Database API Indexed Database API( 以 降 は Indexed DB と 呼 ぶ)は 構 造 化 データを 保 存 する 枠 組 みを 提 供 する 検 索 高 速 化 のためのインデックスや 排 他 処 理 を 実 現 するトランザクションをサ ポートしている 点 が 特 徴 である 大 きなデータを 保 存 する 場 合 や 大 量 のレコードを 扱 う 場 合 に 有 効 である File API: Directories and System File API: Directories and System( 以 降 は File System と 呼 ぶ)は ファイルシステムにアク セスするための API である ブラウザが 管 理 するサンドボックス 化 された 仮 想 的 なファイ ルシステムにのみアクセスすることができる File API: Directories and System は 他 のストレージ 系 API とは 異 なり データをファイル という 実 体 として 保 存 する さらに ディレクトリを 自 由 に 作 成 することもできる SQL Database API SQL Database API( 以 降 は SQL DB と 呼 ぶ)は SQL を 使 ってデータにアクセスする 枠 組 みを 提 供 する W3C では SQL DB は 廃 止 となったが Safari や Chrome などのブラウザが 実 装 していることもあり 現 在 でもよく 使 われている API である ブラウザ 別 の API サポート 状 況 と 対 処 方 法 前 述 のストレージ 系 API は ブラウザによってサポート 状 況 が 大 きく 異 なる 実 証 研 究 用 のデバイスの 対 象 ブラウザの API サポート 状 況 は 下 表 のとおりである ブラウザごとのストレージ 系 API サポート 状 況 (2014 年 2 月 現 在 ) ブラウザ Web Storage Indexed DB File System SQL DB Internet Explorer 11 for Windows 8.1 Chrome for Android Safari for ios すべてのブラウザでサポートされているストレージ 系 API は Web Storage のみである もし 小 さなデータを 保 存 するのであれば Web Storage を 利 用 することを 推 奨 する もし 大 きなデータや 大 量 のレコードを 保 存 したい 場 合 は Safari では SQL DB を 使 わざる を 得 ない 一 方 Internet Explorer 11 と Chrome では Indexed DB が 利 用 可 能 である 面 倒 で はあるが ブラウザによって API を 使 い 分 ける 必 要 がある SQL DB は 前 述 のとおり すでに 仕 様 が 廃 止 になっている Chrome でも SQL DB は 利 用 可 能 であるが 余 程 の 理 由 がない 限 り Chrome においては Indexed DB の 採 用 を 推 奨 す る Safari で SQL DB を 採 用 するのは あくまでも 代 替 手 段 が 無 いため と 考 えること File System は 技 術 的 には Indexed DB で 代 用 可 能 である 現 在 のところ File System API は Chrome のみに 実 装 されているが 他 のブラウザベンダーは File System を 実 装 する 予 定 がない 一 方 Indexed DB は Safari を 除 いて すべてのメジャーブラウザが 実 装 している 従 って 現 段 階 では File System と Indexed DB の 選 択 に 迫 られた 場 合 は 将 来 性 も 考 慮 し Indexed DB の 採 用 を 推 奨 する 28

33 3.9.5 オリジン 単 位 で 保 存 されるデータ 前 述 のストレージ 系 API はいずれも オリジン 単 位 にデータ 領 域 が 用 意 される オリジ ンとは URL のうち 以 下 の 範 囲 を 指 す スキーム( 番 号 (80)までが オリジンと 呼 ばれる もしオリジンが 異 なると 別 のデータ 領 域 が 用 意 され お 互 いに 参 照 しあうことはできない 同 じアプリケーションが 複 数 のオリジンを 扱 う 場 合 の 注 意 点 もしアプリケーションが 複 数 のオリジンにまたがって 構 成 されている 場 合 には 注 意 する こと 例 えば 以 下 のオリジンは すべて 別 オリジンとして 扱 われる 名 が 異 なる) 番 号 が 異 なる) 異 なる) もし 上 記 のオリジンを 一 つのアプリケーションが 使 っている 場 合 同 じアプリケーション といえども それぞれで 保 存 されたデータをお 互 いに 読 み 取 ったり 書 き 込 んだりすることは できない もしストレージのデータを 使 う 場 合 は 同 じオリジンでアプリを 構 築 すること 異 なるアプリが 同 じオリジンを 扱 う 場 合 の 注 意 点 逆 に 複 数 のアプリが 同 じオリジンを 使 っている 場 合 にも 注 意 が 必 要 である 以 下 の URL は いずれも 同 じオリジンとして 扱 われる このように アプリケーションをディレクトリで 分 けてしまうと それぞれのアプリケー ションが 同 じデータ 領 域 を 参 照 してしまう アプリケーションごとに それぞれが 影 響 しあ わないように 調 整 するのは 効 率 的 ではない 可 能 な 限 り アプリケーションごとにオリジン を 割 り 当 てることを 推 奨 する もしアプリケーションごとにドメインを 取 得 するのが 難 しい 場 合 は サブドメインを 使 うのがよい データの 消 去 どのストレージ 系 API で 蓄 積 されたデータも さまざまな 理 由 で 削 除 されてしまう 可 能 性 がある 削 除 されてしまうきっかけとしては ユーザーが 意 図 的 にブラウザのメニューか らデータを 削 除 した 場 合 や ディスクの 空 き 容 量 が 無 くなった 場 合 が 挙 げられる コンテ ンツにおいては 決 して 保 存 したデータが 永 続 的 に 保 存 されていることを 前 提 にアプリを 設 計 することがないよう 注 意 すること どうしてもデータを 保 存 しておきたい 場 合 は クラ ウド(サーバー) 側 にもデータを 蓄 積 する 方 式 を 検 討 すること 29

34 3.9.7 プライバシーの 対 処 ストレージ 系 の API を 使 えば さまざまなデータをデバイス 上 に 保 存 することが 可 能 で ある ゆえに プライバシー 問 題 を 孕 む 場 合 がある コンテンツにおいては 決 して ユー ザー 個 人 を 特 定 できるような 情 報 や プライバシーに 関 わる 情 報 を 保 存 しないこと もし 仮 にアプリケーションがクロスサイトスクリプティングの 脆 弱 性 を 孕 んでいたとす る 悪 意 のある 第 三 者 によって 攻 撃 を 受 けると ストレージに 蓄 積 されたデータを 盗 みとら れることが 想 定 される アプリケーションにセキュリティ 上 の 脆 弱 性 があってはならないも のの 完 全 に 脆 弱 性 を 排 除 したことを 保 証 することは 不 可 能 である 従 って 万 が 一 未 発 見 の 脆 弱 性 を 突 いた 攻 撃 を 受 けた 場 合 においても ユーザーに 迷 惑 をかけないようにするた めに 不 必 要 なデータの 保 存 は 避 けること 3.10 フォーム 概 要 これまで HTML にはテキスト 入 力 フィールド パスワード 入 力 フィールド ラジオボタ ン チェックボックスなどのフォームコントロールが 用 意 されているが HTML5 では ア プリケーションとして 求 められるフォームコントロールがいくつか 追 加 された また input 要 素 にも 新 たな 属 性 が 追 加 されている 本 項 では HTML5 で 新 たに 導 入 された 新 フォームコントロールの 概 要 に 加 え コンテン ツとして 適 合 する 新 フォームコントロールの 記 述 方 法 について 記 載 している コンテンツとして video 要 素 を 利 用 する 際 に 必 要 となる 要 件 該 当 のフォームコントロールをサポートしていないブラウザを 利 用 するユーザーで も コンテンツが 利 用 できるよう 配 慮 すること 後 述 の コントロールをサポートし ていないブラウザの 対 処 を 参 照 すること 入 力 制 限 を 持 つフォームコントロールを 使 う 場 合 利 用 者 が そのコントロールに 何 を 入 力 すべきかがわかるよう 適 切 な 説 明 を 加 えること 後 述 の 入 力 制 約 のエラー メッセージ を 参 照 すること 入 力 制 限 をマークアップで 用 意 したとしても 確 実 に 期 待 する 値 がサーバーに 送 信 さ れるとは 限 らない 該 当 のコントロールをサポートしていないブラウザだけでなく 意 図 的 に 不 正 な 値 を 送 信 することは 簡 単 である 従 って たとえマークアップで 入 力 制 限 を 用 意 したとしても サーバー 側 でも 同 様 またはそれ 以 上 の 入 力 チェックを 行 うようにすること 新 たなフォームコントロール 以 下 に HTML5 に 新 たに 加 わったフォームコントロールの 概 要 について 解 説 する 検 索 キーワード <input type="search"> 検 索 キーワード 入 力 を 想 定 したテキスト 入 力 フィールドである 該 当 の OS の 検 索 キーワ ード 入 力 欄 と 同 じ 形 状 のコントロールとして 表 示 されるため ユーザーはそれが 検 索 キーワ 30

35 ード 入 力 欄 であることが 分 かりやすくなる マークアップ 例 <input type="search" name="q"> 表 示 例 電 話 番 号 <input type=tel> 電 話 番 号 入 力 を 想 定 したテキスト 入 力 フィールドである 見 た 目 は 通 常 のテキスト 入 力 フ ィールドと 同 じであるが タブレットなどでは 数 字 入 力 モードのキーパッドが 表 示 される ため ユーザーにとっては 使 いやすいコントロールになる マークアップ 例 <input type="tel" name="telno" value=" "> 表 示 例 [ 編 集 ]URL <input type=url> URL 入 力 を 想 定 したテキスト 入 力 フィールドである 見 た 目 は 通 常 のテキスト 入 力 フィ ールドと 同 じであるが タブレットなどでは アルファベット 入 力 モードの 入 力 パッドが 表 示 されるため ユーザーにとっては 使 いやすいコントロールになる マークアップ 例 <input type="url" name="blog" value=" 表 示 例 また HTML5 仕 様 上 このコントロールは 入 力 制 約 を 持 つ HTML5 仕 様 に 完 全 に 準 拠 31

36 したブラウザであれば もし URL に 適 さない 値 を 入 力 してフォームを 送 信 しようとすると サーバーに 送 信 する 前 に 該 当 のフォームコントロールにエラーメッセージが 表 示 される メールアドレス <input type= > メールアドレス 入 力 を 想 定 したテキスト 入 力 フィールドである 見 た 目 は 通 常 のテキスト 入 力 フィールドと 同 じであるが タブレットなどでは アルファベット 入 力 モードの 入 力 パ ッドが 表 示 されるため ユーザーにとっては 使 いやすいコントロールになる マークアップ 例 <input type=" " name="mailaddress" 表 示 例 また HTML5 仕 様 上 このコントロールは 入 力 制 約 を 持 つ HTML5 仕 様 に 完 全 に 準 拠 したブラウザであれば もしメールアドレスに 適 さない 値 を 入 力 してフォームを 送 信 しよう とすると サーバーに 送 信 する 前 に 該 当 のフォームコントロールにエラーメッセージが 表 示 される 日 付 <input type=date> 日 付 入 力 を 想 定 したフォームコントロールである 通 常 は 入 力 時 にカレンダーまたはセレ クターが 表 示 され ユーザーは 日 付 を 選 択 できる 値 がセットされた 時 点 では "2004/07/23" のように 表 示 されるが サーバーに 送 信 される 値 は" "のようにハイフン 区 切 りの 形 式 である マークアップ 例 <input type="date" name="birthday" value=" "> 表 示 例 数 値 <input type=number> 数 値 入 力 を 想 定 したフォームコントロールである 見 た 目 は 通 常 のテキスト 入 力 フィール ドと 同 じであるが タブレットなどでは 数 値 入 力 モードの 入 力 パッドが 表 示 されるため ユーザーにとっては 使 いやすいコントロールになる 32

37 マークアップ 例 <input type="number" name="age" value="11"> 表 示 例 数 値 ではない 値 を 入 力 してフォームを 送 信 しようとすると サーバーに 送 信 する 前 に 該 当 のフォームコントロールにエラーメッセージが 表 示 される また HTML5 仕 様 上 こ のコントロールは 入 力 制 約 を 持 つ HTML5 仕 様 に 完 全 に 準 拠 したブラウザであれば もし 数 字 に 適 さない 値 を 入 力 してフォームを 送 信 しようとすると サーバーに 送 信 する 前 に 該 当 のフォームコントロールにエラーメッセージが 表 示 される 範 囲 限 定 の 数 値 <input type=range> スライダーが 表 示 され ユーザーはマウスまたはタッチによってスライダーを 動 かすこと で 数 値 をセットする マークアップ 例 <input type="range" name="level" value="3" min="0" max="5" step="1"> 表 示 例 min 属 性 はスライダーの 最 小 値 を max 属 性 はスライダーの 最 大 値 を 表 す step 属 性 は 値 の 変 化 の 幅 を 表 す 上 記 の 例 では 0 から 5 の 間 で 1 ずつスライダーを 動 かせることを 意 味 する つまり 取 りうる 値 は 0, 1, 2, 3, 4, 5 のいずれかとなる その 他 2014 年 2 月 現 在 HTML5 仕 様 の 最 新 のドラフトでは 上 記 の 他 に 以 下 の 新 コントロー ルが 定 義 されている <input type=color> <input type=datetime> <input type=month> <input type=week> <input type=time> ただし 現 在 のところ これらのコントロールは"at risk"と 呼 ばれる 状 態 になっており 33

38 W3C の 仕 様 策 定 において 最 終 的 にどうなるかが 確 定 していない 仕 様 から 削 除 される 可 能 性 もあるし 仕 様 に 残 ったとしても 内 容 が 変 更 される 可 能 性 がある これらのコントロー ルに 関 しては HTML5 仕 様 の 確 定 を 待 った 上 で ブラウザの 実 装 状 況 を 踏 まえて 採 用 を 判 断 すること 新 たな input 要 素 の 属 性 以 下 に HTML5 に 新 たに 加 わったフォームコントロールの 概 要 について 解 説 する required 属 性 入 力 必 須 を 指 定 する 論 理 属 性 である マークアップ 例 <input type="text" name="nickname" required> HTML5 仕 様 に 完 全 に 準 拠 したブラウザであれば もし 何 も 入 力 せずにフォームを 送 信 し ようとすると サーバーに 送 信 する 前 に 該 当 のフォームコントロールにエラーメッセージ が 表 示 される pattern 属 性 入 力 値 パターンを 正 規 表 現 で 指 定 することができる マークアップ 例 <input type="text" name="zip" pattern=" d{3 - d{4"> HTML5 仕 様 に 完 全 に 準 拠 したブラウザであれば もしパターンに 一 致 しない 値 を 入 力 し てフォームを 送 信 しようとすると サーバーに 送 信 する 前 に 該 当 のフォームコントロール にエラーメッセージが 表 示 される min 属 性 と max 属 性 と step 属 性 min 属 性 と max 属 性 は それぞれ 最 小 値 と 最 大 値 を 指 定 する step 属 性 は 入 力 できる 値 のステップ( 刻 み)を 指 定 する これらの 属 性 は type 属 性 が date number range の input 要 素 で 指 定 可 能 である マークアップ 例 <input type="date" name="reservation-date" min=" " max=" " step="1"> HTML5 仕 様 に 完 全 に 準 拠 したブラウザであれば 指 定 の 範 囲 の 値 が 入 力 できないよう 制 限 されるか または 指 定 の 範 囲 を 超 えた 値 を 入 力 してフォームを 送 信 しようとすると サ ーバーに 送 信 する 前 に 該 当 のフォームコントロールにエラーメッセージが 表 示 される placeholder 属 性 placeholder 属 性 は そのテキスト 入 力 フィールドに 何 を 入 力 したら 良 いかをユーザーに 気 づかせるようなヒントを 指 定 することができる placeholder 属 性 にセットされたヒントは 該 当 のテキスト 入 力 フィールドに 何 も 値 がセットされていない 場 合 に 限 り そのフィールド 内 に 表 示 される このコンテンツ 属 性 は input 要 素 の type コンテンツ 属 性 の 値 が text search url tel password の 場 合 に 利 用 することができる マークアップ 例 34

39 <input type="search" name="q" placeholder=" 検 索 キーワード"> 表 示 例 コントロールをサポートしていないブラウザの 対 処 ここで 紹 介 したフォームコントロールは すべて 実 証 研 究 用 のデバイス 上 のブラウザでサ ポートされているわけではない これらのコントロールをサポートしていないブラウザでは 単 なるテキスト 入 力 フィールドとして 表 示 される たとえば date タイプの input 要 素 は IE11 ではテキスト 入 力 フィールドとして 表 示 されてしまう 従 って コントロールの 説 明 文 は どのブラウザに 対 しても 不 自 然 にならないよう 考 慮 すること 不 適 切 な 説 明 文 の 例 <p> 誕 生 日 を 選 択 してください : <input type="date" name="birthday"></p> ipad の Safari では date タイプの input 要 素 はセレクターとして 表 示 されるため 説 明 文 の 選 択 してください は 適 切 なのであるが IE11 では 単 なるテキスト 入 力 フィールドとし て 表 示 されるため この 説 明 文 は 不 自 然 になる 適 切 な 説 明 文 の 例 <p> 誕 生 日 を 指 定 してください : <input type="date" name="birthday"></p> このように どちらのブラウザでも 不 自 然 とならない 文 章 を 考 えること どうしても 文 章 を 統 一 できない 場 合 は スクリプトを 使 って 説 明 文 を 切 り 替 える 方 法 が 使 える マークアップ 例 <p> <span id="desc" data-desc2=" 誕 生 日 を 選 択 してください"> 誕 生 日 を YYYY-MM-DD 形 式 で 入 力 してください</span> : <input type="date" name="birthday"> </p> スクリプト 例 var input_el = document.queryselector("input[name='birthday']"); if(input_el.type === "date") { var desc_el = document.queryselector("#desc"); desc_el.textcontent = desc_el.getattribute("data-desc2"); 上 記 の 例 では date タイプをサポートしていないブラウザ 向 けの 説 明 文 が span 要 素 でマ ークアップされている しかし span 要 素 の data-desc2 属 性 に date タイプをサポートして いるブラウザ 向 けの 説 明 文 も 記 述 されている これを スクリプトを 使 って 差 し 替 える スクリプトでは もし input 要 素 が date タイプをサポートしていれば input 要 素 の DOM オブジェクトの type プロパティは 文 字 列 "date"を 返 す サポートしていなければ 文 字 列 "text"を 返 す これを 応 用 して date タイプをサポートしたブラウザの 場 合 にのみ 説 明 文 35

40 を 差 し 替 える 入 力 制 約 のエラーメッセージ 入 力 制 約 を 持 つコントロールに 不 適 切 な 値 を 入 力 して フォームを 送 信 しようとすると HTML5 仕 様 に 準 拠 したブラウザでは 該 当 のコントロールにエラーメッセージが 表 示 され る マークアップ 例 <p><label> 郵 便 番 号 :<input type="text" name="zip" pattern=" d{3 - d{4"></label></p> このコントロールは 郵 便 番 号 を 入 力 させるために 用 意 されている そのため pattern 属 性 を 使 って 日 本 の 郵 便 番 号 形 式 ( 例 : )の 値 しか 受 け 付 けないよう 制 限 している もしパターンが 違 う 値 を 入 力 してフォームを 送 信 しようとすると IE11 では 次 のような エラーが 表 示 される パターンエラーの 表 示 例 このように ユーザーにとって どうすれば 良 いかが 分 かりにくいエラーメッセージが 表 示 される このメッセージは ブラウザによって 異 なる これを 回 避 するために 入 力 制 約 を 持 つコントロールには 必 ず title 属 性 をマークアップすること title 属 性 のマークアップ 例 <p><label> 郵 便 番 号 :<input type="text" name="zip" pattern=" d{3 - d{4" title=" 形 式 で 入 力 してください "></label></p> title 属 性 をマークアップしておくと その 値 がエラーメッセージの 最 後 に 追 加 される パターンエラーの 表 示 例 なお 2014 年 2 月 現 在 で ios 版 Safari では 入 力 制 約 を 持 つコントロールのエラーメッ セージ 表 示 がサポートされていない 従 って このエラーメッセージが 表 示 されることを 前 提 としたアプリケーション 設 計 は 避 けること もし 入 力 値 チェックとエラーメッセージ 表 示 を ブラウザに 頼 らず スクリプトを 使 っ て 実 現 したい 場 合 は このブラウザのエラーメッセージを 表 示 させないようにすることが 可 能 である form 要 素 に novalidate 属 性 をマークアップすると ブラウザによる 入 力 制 約 のチ ェックが 無 効 になる novalidate 属 性 のマークアップ 例 <form action="#" method="post" novalidate>... </form> 36

41 3.11 グラデーション 概 要 CSS を 利 用 したグラデーションでは 画 像 を 利 用 したグラデーションと 違 い サーバに 画 像 を 読 み 込 みに 行 く 必 要 がない そのため 読 み 込 み 回 数 を 減 らすことができ グラデ ーションの 変 更 もコードを 書 き 換 えるのみなど 作 業 の 負 担 が 小 さく 済 むメリットがある しかし 現 状 として グラデーションの 表 示 には ユーザーエージェント 毎 の 実 装 の 差 異 があるため 同 じコンテンツを 表 示 するためには ソースコードに 工 夫 をする 必 要 がある 主 要 ユーザーエージェントに 向 けた 実 装 方 法.gradient { background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */ background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */ background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */ ツール adobe Dreamweaver help( 背 景 へのグラデーションの 適 用 ) Ultimate CSS Gradient Generator 3.12 Writing-mode 概 要 writing-mode プロパティは 文 書 表 示 方 向 の 指 定 に 使 われるプロパティである 長 らく Internet Explorer の 独 自 拡 張 だったが W3C が 定 める CSS3 に 組 み 込 まれた 本 プロパテ ィと direction プロパティを 使 用 することにより 日 本 語 の 縦 書 表 現 を 実 現 することが 可 能 になる プロパティに 指 定 できる 値 horizontal-tb 行 内 のテキストは 横 に 進 み 行 は 上 から 下 に 進 む 横 書 き 行 内 のテキストの 左 右 の 方 向 は direction プロパティによって 指 定 する vertical-rl 行 内 のテキストは 縦 に 進 み 行 は 右 から 左 に 進 む 縦 書 き 行 内 のテキストの 方 向 は direction プロパティによって 指 定 する vertical-lr 37

42 行 内 のテキストは 縦 に 進 み 行 は 左 から 右 に 進 む 縦 書 き 行 内 のテキストの 方 向 は direction プロパティによって 指 定 する 記 述 例 writing-mode プロパティは CSS3 に 規 定 されているが 現 状 として ブラウザごとの 独 自 実 装 となっている そのため で 本 プロパティを 使 用 する 場 合 は 次 のような 記 述 が 必 要 である コンテンツの 要 件 を 満 たす writing-mode の 記 述 例.verticalWrite { -ms-writing-mode:tb-rl; /* Internet Explorer */ -webkit-writing-mode:vertical-rl; /* Webkit Browser */ writing-mode:vertical-rl; /* CSS3 */ ウェブブラウザ 別 表 示 例 今 回 の 実 証 研 究 で 使 用 されるウェブブラウザ 別 の writing-mode プロパティ 表 示 例 表 示 コード( 該 当 部 分 のみ).verticalText { android(chrome) ipad(safari) windows8(internet Explorer10) -ms-writing-mode:tb-rl ; -webkit-writing-mode: vertical-rl; writing-mode:vertical-r l; direction:ltr; line-height: 200%; TIPS ruby 要 素 との 併 用 について ruby 要 素 を 利 用 した 縦 書 コンテンツは ウェブブラウザによっては 本 文 の 列 が 左 側 に ずれる コンテンツ 内 でルビを 振 った 縦 書 き 文 書 を 利 用 される 場 合 は 画 像 化 したテキス トを 使 用 すること 今 回 の 実 証 研 究 で 使 用 されるウェブブラウザ 別 のルビふり 縦 書 表 示 例 38

43 android(chrome) ipad(safari) windows8(internet Explorer10) 今 回 の 実 証 研 究 で 使 用 されるウェブブラウザ 別 の SVG 縦 書 表 示 例 android(chrome) ipad(safari) windows8(internet Explorer10) SVG を 用 いた 縦 書 き HTML: 般 若 心 経 ( ) 外 部 リンク W3C Working Draft(CSS Writing Modes Module Level 3)( g-modes/ ) 以 上 39