■ IT News Letter ■文教大学大学院 ■ 情報学研究科

HTML5 がもたらす Web コンテンツの変化
文教大学大学院情報学研究科 准教授

池 辺 正 典†Masanori Ikebe†

あらまし Web コンテンツの制作は，関連する様々な技術の進化により変化を遂げている．Web 技術の最新動向として，2012 年 12 月に，Web 関連の標準化を策定する団体である World Wide Web Consortium（W3C）は，HTML5 およびCanvas 2D に関する仕様が勧告候補となり，2014 年の勧告を目指すと発表した．本稿では，HTML5 がもたらす Web コンテンツの変化について再確認することを目的とする．
キーワード：プログラミング，Web，JavaScript，HTML5

1. は じ め に

音声データを取り扱う audio 要素がある．従来の HTMLでも画像データは img 要素で表示することが可能であったパソコンやスマートフォン等の携帯端末の高性能化は，が，これに対して新規で追加された canvas 要素はピクセル

Web コンテンツにも変化をもたらした．従来はサーバーサ単位でのバイナリデータの制御が可能であり，より細かなイドでのシステム構築が主流であったのに対して，近年は画像処理等の分野で用いられてきた処理を JavaScript 等のクライアントサイドにおいて大半の処理を行うシステムの言語で容易に実装することが可能となった．図 1 は canvas構築事例が増加している．Web コンテンツを作成する際は，要素で読み込んだ画像を JavaScript でグレースケール化おHTML と呼ばれるデータ形式を用いるが，従来は Web コよびエッジ検出を行なったものである．

ンテンツの静的なデータを保持するためのデータ形式としての側面が強く，補助的な役割として JavaScript 等のクライアントサイドでのプログラムによる実装が行われていた．
しかし，HTML の最新バージョンである HTML51) では，その仕様の中で HTML のデータを操作するための DOM等にも触れられるなど JavaScript 等のクライアントサイドのプログラミングを行う際に必要となる共通基盤となるインターフェイスの提供に主眼を置かれているように考えられる．関連する規格としては，Web Storage，WebSocket，Geolocation API，XMLHttpRequest，File API 等のク
ライアントサイドのプログラミングからの利用が前提となっている技術も広義の HTML5 に含めることもある．この他に追加でマルチメディアデータの取り扱いに関する内容も

図 1 canvas 要素による処理追加されており，Web ブラウザにプラグインの必要なく，様々なマルチメディアデータの取り扱いが可能となった．

2. マルチメディアの取り扱いについて
HTML5 で新規に追加された主要な要素として，画像デー
タ取り扱う canvas 要素，動作データを取り扱う video 要素，canvas 要素からバイナリデータにアクセスする際には，getContext メソッドで生成されるオブジェクトに対して，getImageData メソッドを実行することで得られる画像デー
タの data プロパティを参照することで，バイナリ形式の画像データの取得が可能となる．

2013 年 2 月 9 日受付† 〒 253–8550 神奈川県茅ヶ崎市行谷 1100

また，従来から Web の人間関係を可視化するソーシャルm ikebe@shonan.bunkyo.ac.jp

グラフなどは情報の表現手法としてよく見られたが，canvas† Graduate School of Information and Communications,
Bunkyo University

要素を用いることで，物理モデルを採用した位置最適化の1100 Namegaya, Chigasaki, Kanagawa 253–8550, Japan

計算を動的に行うグラフ描画なども容易に実装 2) すること

文教大学大学院情報学研究科 IT News Letter Vol. 9, No. 1, pp. 1〜2 (2013)(1) 1

が可能となった．図 2 に JavaScript で Web の人間関係を位置検出が可能であるために，Web コンテンツ側でも Ge-表現するサンプルを示す．

olocation API 等の対応した規格が整備されている．また，位置情報を保持するために，RSS を拡張した GeoRSS を利用した Web コンテンツの事例も増加 4) している．GeoRSS
は，国土地理院等でも利用されている GML に準拠したデータ形式である．本データは XML 形式作成されており，これにより位置情報を加味したアプリケーションの実装がより一層進むものと考えられる．例えば，Twitter において，GeoRSS を用いて，利用者の位置情報を含める場合には，以下のようになる．
< entry >図 2 canvas 要素による処理

そして，video 要素では，Web カメラ等との連携により，リアルタイムの映像を処理することも可能となり，プログラムを追加することで，顔認識や AR マーカーの認識などの拡張現実技術を利用した Web コンテンツの実装も可能となった．また，audio 要素では，プログラムからバイナリデータとして音声データを作成することが可能であるために音声処理技術を利用した Web コンテンツが発展することが期待される．

3. サーバー・クライアント間の通信
現在の Web コンテンツは，Ajax 技術の普及により，非同期でサーバー・クライアント間の通信が容易に行うことが可能となったために，主にユーザビリティを向上する目的でこれらの技術が用いられることが増加した．HTML5と同時期に策定された WebSocket は，これをさらに発展させたものである．最大の特徴はサーバーにおいて接続中< twitter : geo >< georss : point >35.3701 139.4165 </ georss : point ></ twitter : geo >< google : location 神奈川県茅ヶ崎市 > </ google : location >< twitter : place >< twitter : id > XXXXXXXXXXXXXX </ twitter : id >< twitter : full_name > ChigasakiCity , Kanagawa</ twitter : full_name >< twitter : type > city </ twitter : type ></ twitter : place ></ entry >上記において，georss:point 要素が GML により位置情報を保持している箇所であり，緯度・経度の情報が記載されていることが分かる．

5. お わ り にWeb コンテンツは，サーバーにコンテンツを配置するという特性上，容易にシステムのアップデートが可能である．
このような特性から，本稿で紹介した HTML5 も未だ勧告には至っていないが，各 Web ブラウザでの独自実装は既に進んでおり，既に様々な Web コンテンツにその技術が含まれているのが現状である． このため，Web コンテンツ制作に関わる人材は，技術の進化に即時に対応するという心構えが重要である．の各クライアントがプログラムから認識可能である点に加〔文え，クライアントへの一斉の情報配信が可能であるという点である．WebSocket により，従来はクライアントサイドのプログラミングでは，追加の制御用のプログラムがない場合には，サーバーとクライアント間の 1 対 1 の通信という制約があったが，特定のクライアントが発信した情報が他のクライアントにも共有することが可能となったために，多人数が同時に利用することが可能な Web コンテンツを容易に実装 3) することが可能となった．

献〕

1）
2）

W3C：HTML5，http://www.w3.org/TR/html5/
池辺正典, 川合康央, 松本浩之: Web 上の収集情報を利用した人間関係の可視化による生徒指導支援システムについての研究, 情報処理学会シンポジウムシリーズ, 情報処理学会, Vol.2012, No.4, pp.241-248,2012.
3） 川合康央, 池辺正典, 佐久間拓也: 幼児の言語獲得に寄与するディジ
タル絵本の試作, 情報処理学会シンポジウムシリーズ, 情報処理学会,
Vol.2012, No.4, pp.161-168, 2012.
4） 池辺正典: 災害時における地域情報ネットワークの役割, 文教大学湘南総合研究所紀要, No.16, pp.35-43, 2012.

今後は，WebSocket を用いることで，スマートフォン等の利用を想定したネイティブアプリケーションと遜色のないユーザーインターフェイスを備えた Web アプリケーションが増加すると考えられる．

いけ べ池辺

ま さの り正典 1977 年生．関西大学大学院総合情報学研究科博士後期課程修了。2007 年 4 月より文教大学情報学部に着任．情報システム，データマイニングなどが専門．情報学研究科では「ウェブコンテンツ演習」を担当．

4. 位置情報について
近年利用が増大しているスマートフォンは，GPS による2 (2)文教大学大学院情報学研究科 IT News Letter Vol. 9, No. 1 (2013)