Lesson 01 HTML5とWebアプリケーション - HTML5+CSS3 次世代Webコーディングの超・最新動向・Webアプリケーション編 | デザインってオモシロイ -MdN Design Interactive-

Lesson 01 HTML5とWebアプリケーション - HTML5+CSS3 次世代Webコーディングの超・最新動向・Webアプリケーション編

2024.4.30 TUE

【サイトリニューアル!】新サイトはこちらMdNについて

HTML5+CSS3
次世代Webコーディングの
超・最新動向

Webアプリケーション編

Lesson 01 HTML5と
Webアプリケーション
制作・文 外村和仁(ピクセルグリッド)

今までにも、JavaScriptやFlashを使った多くのWebアプリケーションは存在していた。しかし、HTML5の登場によっ て、その技術を使ったWebアプリケーションが今後多く登場することが期待されている。

JavaScriptを使った
Webアプリケーション

HTML5 が登場する以前にも多くのWebアプリケーションは存在していた。 古くは掲示板やブログサービスなどもWeb アプリケーションと呼ぶことができるだろうし、JavaScript を使ったアプリケーションでいえば、代表的な例が「Gmail」や「GoogleMap」といったものがある【1】。
これらのサービスは当時画期的だった「Ajax」という方法を使い、それまで衰退傾向にあったJavaScriptが有用なものであるということを示した。
これらのアプリケーションが使われ始めたのをきっかけに、JavaScriptはWebアプリケーションをつくるうえで重要な技術として注目され、JavaScriptを中心にしたWeb アプリケーションは増加していくことになる。

【1】
【1】GoogleMap

Flashを使った
Webアプリケーション

また、これらのアプリケーション以外にもFlash を使ったアプリケーションも数多く存在していた。Flash を使ったアプリケーションは動画の再生やリアルタイムな通信、インタラクティブなアニメーションなど、既存のWeb 技術だけでは実現できないものを実現できるものだった。Flash を使ったアプリケーションでは「アメーバピグ」などが有名だ【2】。




【2】
【2】アメーバピグ

HTML5の登場

しかし、JavaScript をベースにしたアプリケーションは機能が貧弱で、できることが限られているという問題があった。たとえば「動画や音声の再生ができない」、「オフラインでの作業ができない」「サーバとの双方向通信ができない」などである。
一方Flash ではこれらの問題をいくつか解決できる機能があったが、仕様が標準化されていないという問題があった。そういった状況の中で「HTML5」というWeb アプリケーションを作るために標準化された技術が登場し、Web アプリケーションの状況は大きく変わることとなった。

HTML5の機能

HTML5 の機能の中にはこれまでの技術で代替えできるものある。動画再生がFlash で代替えできたり、WebStorageがCookie で代替えできるといったものだ。しかし、これらは制限があったり元々想定していない使い方をするため、使いやすさの面で問題があることが多い。HTML5 という統一された仕様の中で使うことができるのは大きなメリットといえる。

HTML5を使った
Webアプリケーション

今後はHTML5 を使ったWeb アプリケーションが多く登場することが期待される。今はまだ仕様の策定段階であり、ブラウザの実装もまちまちであるため全部の機能が自由に使えるわけではないが、スマートフォンを始め一部の限られた環境で使えるものも数多くある。このCHAPTER では、HTML5 を使ったWebアプリケーションの事例をいくつか紹介し、実際にHTML5 の技術を使ってアプリケーションを構築する行程について解説する。
なお、このCHAPTER で紹介する技術の中で、正確にはHTML5 の仕様に含まないものもあるが、HTML5 の関連技術も含めた広い意味でのHTML5 として扱うこととする。
また、CSS3 の存在もWebアプリケーション開発の手助けとなっている。CSS3 では角丸やグラデーションなどが画像を使わずに表現できるようなることはよく知られている。その他にもセレクタの強化、Web フォント、アニメーション、2D / 3D の変形など、これまでCSS とは比べものにならないほど表現力が向上している。このようなCSS3の機能を使うことで、リッチなビジュアルのWeb アプリケーションをこれまでより簡単に実現できるようになるだろう。

>>目次に戻る
twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在