沖縄地区

教育システム情報学会 2016年度学生研究発表会

Web サイトにおける有用性の考察
Consideration of Usefulness on Web Site
仲宗根 未苗 *1,谷口 祐治 *2
Minae Nakasone*1, Yuji Taniguchi *2*1 琉球大学情報工学科*1Department of Information Engineering and Science,University of the Ryukyus*2 琉球大学 総合情報処理センター*2Computing and Networking Center,University of the Ryukyus
Email: e135734@ie.u-ryukyu.ac.jp, taniguchi@cc.u-ryukyu.ac.jp
あらまし：本稿では，Web 上のすべての HTML 文書が現在の Web 標準である HTML5 を仕様していないことから，HTML5 を HTML4, XHTML の比較を行い，有用性を考察する。また，HTML5 の事例をもとに利点と課題を示す。そして，HTML を設計することで HTML5 の有用性を述べる。
キーワード：HTML5, HTML4, XHTML, Web ブラウザ1.

はじめにこ の よ うな 経 緯を 持つ HTML5 を ， HTML4 ，XHTML での記述の比較，Flash の脆弱性を述べ，HTML5 が Flash を代替できる技術であり，その範囲としている技術について述べる．

総務省の平成 28 年版情報通信白書 (1) により，平成 27 年度のインターネットの普及率が人口に対して 83%に達している．そのような発展とともに，あらゆる趣旨を持つ Web サイトが登場しており，Webサイトを構成している言語は HTML である．HTMLは過去にバージョンアップが繰り返され，最新のバージョンは HTML5 である．しかし，Web 上には，従来バージョンである HTML4，XHTML を使用している Web サイトも見られる．そこで本論文では，HTML4，XHTML，HTML5 で記述した Web ページをそれぞれ比較し，HTML5 からの新機能について述べ，有用性を検討する．また，WordPress で構成された学科サイトを元に，HTML5 の仕様に準じて記述することの必要性について述べる．

2.

3.1 記述の比較
一般的に利用される Web サイトの構成として，Web ページを作成し，ドキュメントタイプの宣言，style 要素の仕様について Web ブラウザで確認し，使用した要素の記述について比較した．Web ブラウザ
は世界で最も利用されている Google Chrome を利用した．比較により，以下の結果が得られた．
(a) ドキュメント宣言の仕様が Google Chrome と仕様が異なる．
(b) XHTML の CDATA による style 要素の記述がWeb ブラウザによって異なる．Chrome では図 1 のように CSS が適用されず，Safari では図 2 のように適用された．

HTML の背景

HTML(Hyper Text Markup Language)は，スイスの粒子学研究所 CERN のソフトウェアエンジニアであった Tim Berners-Lee 氏が，大量の情報を電子上で管理するために考案した技術の一つである．SGML というマークアップ言語で定義されている．マークアップ言語は文字列を定義された要素で囲むことで，文書の構造を明確に記述できる．HTML はそのマークアップ言語の特徴と，ハイパーリンクによって文書間を結びつけることで，文書を関連付けて管理できる仕組みを持つ．HTML は CERN で誕生後，場所を変え，バージョンアップを繰り返してきた．

3.

Web 技術の変遷

HTML5 は，HTML の最新バージョンである．1999
年 10 月に HTML4.01 が勧告後，XHTML が勧告され，HTML4.01 が最後の HTML となるはずだった．
しかし，HTML の思想が普及していたことにより，HTML のバージョンアップが HTML5 となって再開した．

245

図 1 Chrome での表示

沖縄地区

教育システム情報学会 2016年度学生研究発表会

図 2 Safari での表示

図 3 (a)の問題点について(c) HTML5 の新しい要素によって，従来バージョンに比べて HTML 文書の可視化が向上した．
従来バージョンの XHTML の記述に Web ブラウ
ザ間の表示の相違があるため，現行の Web 標準である HTML5 を使用する必要がある．HTML5 の要素を使用することで，HTML 文書が可視化できる記述ができるため，HTML5 を使用するのが適切である．

(b)の問題点では，現行の学科サイトでは，div 要素が多く使用され，また同じ属性値を持つ要素がある．
このことにより，CSS でのデザイン変更に際し，不親切である．学科サイトは，学生が管理しており，管理者が変わる．管理者が変わっても， Web サイトのデザインが変更できるように HTML の構文を正しく記述しておく必要がある．HTML5 で Web サイ
トを構成することにより，HTML 文書の可視化が行え，Web ページの変更が容易になる．

3.2 HTML5 で代替できる Flash
HTML5 をセキュリティの観点から比較するために，動画，音声，アニメーションを Web 上で扱える技術を持つ Flash の脆弱性を示し，Flash の機能をHTML5 の仕様で代替できる．

5.

3.3 HTML5 の範囲としている技術
HTML5 Specification の Scope(2) では，HTML5 は，意味的な HTML 文書を作成でき，静的なものから動的な機能を持つコンテンツの開発が可能である．しかし、拡張機能による HTML5 の脆弱性も報告されている．

4.

CMS サイトにおける比較

WordPress のような CMS で自動生成されたサイトとの比較をするため，WordPress で構成された学科サ
イトを題材とし，Web ページを HTML5 で設計した．
現行の Web サイトと，作成した Web ページの HTML構文を調べた．
自動生成された現在の学科の Web サイトは，HTML の構文エラーが見られる．
エラーによる主な問題点を二つあげる．
(a) img 要素の alt 属性をしていしていない．
(b) 同じ属性値を指定している．

まとめ

本 研究 では， Web 上に 従来 バー ジョン であ る
HTML4，XHTML のサイトが見られたことから，バージョン間での記述を比較した．比較の結果により，Web 標準である HTML5 を使用することで，Web ブラウザ間の相違をなくし，脆弱性の軽減できることを示した．また，HTML5 を応用した事例を紹介し，HTML5 の有用性を検討した．そして，HTML5 を使用した可視性のある HTML 文書を作成し，現行の学科サイトと比較することで，管理者の変わる Web サイトにおいてデザイン変更がしやすい利点があることを述べた．HTML5 は現行の Web 標準であり，Webブラウザで解釈，HTML 文書としても進化している．
Web 上にある HTML 文書も情報資源である．それらのページを Web 標準である HTML5 の技術で補うことで，情報を補完し，管理することができる．

参考文献(1) 総務省:“平成 28 年度情報通信白書”(2) W3C,“HTML5Specifcation”,https://www.w3.org/TR/html5/(a)の問題により，テキストブラウザでサイトを開いたときに，図 3 のように表示され，図の説明が不十分である．テキストブラウザのユーザには情報供給が不親切である．

246