HTML5でなにができる?
そもそもHTML5ってなに!?
HTML5とはwebアプリケーションに対応しやすい HTMLの規格のことで、HTML4の次に発表されました。現在、インターネット上で公開されているHPのベースは、HTMLです。URLを入力するとWebページを閲覧する為にブラウザに表示されますが、そこでWebページから送られてくるデータがHTMLです。
HTMLとは
Hyper Text Markup Language(ハイパーテキストマークアップランゲージ)の略語でWebページの内容を記述する言語です。 「Hyper Text」の意味は文字や表や絵の一つ一つを対象物として扱いそれぞれ複数に関連性を持たせた文章のことです。HTMLは文章が主体のTextである為、CSS(Cascating Style Sheets カスケーティングスタイルシート)とHTMLを組み合わせて「レイアウト」の変更や「文字」などの大きさを指定します。「Markup」は目印のことで、表示されている文章がどんな見出しでどんな段落なのかを表しています。これに言語である、Languageを組み合わせて「HTML」と言います。
HTML5とHTML4って何がちがうの?
・HTML5とHTML4の大きな違いは「動画」や「音声」などの要素が簡単にウェブページに組み込めるようになった事です。その他にアニメーションを表示させる為には、HTML4では外部ソフト「flash」など使用していましたが、HTML5にはアニメーションを作る機能も用意されています。 (※HTML5移行の為、2020年末にAdobeがFlash Playerの開発と配布、サポートを終了します。) また、HTML5とHTML4の記述を比較すると、必要とされる記述がHTML5の方が随分少なくなっており、記述が簡単になりました。
HTML5でなにができる!?
1.動画や音声の組み込み
HTML4ではWebページで動画を扱う際、従来は外部ソフト「Flash」を埋め込んで利用しておりました。埋込コード自体も難しいものでしたし場合によっては、ユーザーが「Flash」のプラグインをインストールしていないこともありました。ですがHTML5では「動画」や「音声」を組み込む為の要素があります。その要素を使用し、これまでは「javascript」や「PHP」などのプログラムやアプリケーションを介して行われていた処理を簡単に使用することが可能になりました。 また、スマートフォンでも同じように表示さすことができるので、閲覧している端末ごとに対策をする必要もなく、効率的な開発が可能になりました。
2.アプリの制作が可能
HTML5で開発したアプリはインターネットに繋がっていないオフラインの状態でも使用することが可能です。このHTML5で作られるアプリは「ハイブリッドアプリ」と呼ばれています。 HTML5では「Webアプリ」と「ネイティブアプリ」の2つの技術を組み合わせたものとして「ハイブリッドアプリ」が使用されています。
■Webアプリ
Webアプリはインターネットを経由してアプリケーションを使用するものです。 「銀行のオンラインバンキング」や「ネットでの販売のショピングカート」がこれに該当します
メリット:使用ユーザはアプリをインストールする必要がない。運営側が行うファイルの更新も容易。
デメリット:インターネットに繋がっていないと使用できない。
■ネイティブアプリ
一方、「ネイティブアプリ」とはスマートフォンやタブレット端末内で直接実行するアプリケーションです。例えば、「iTunes」、「GooglePlay」などからスマートフォンに直接アプリをダウンロードしてアイコンから起動するというものでインターネットに繋がっていないオフラインでも使用できます。
メリット:インターネットに繋がっていないオフラインでも使用できる。
デメリット:ユーザ端末に直接アプリをダウンロードするので端末容量がかかる、アップデートの際はユーザ自身で実行しなければならない。
■ハイブリッドアプリ
上記、2つのアプリのメリットを合わせたのが「ハイブリッドアプリです。二つの技術を一つに合わせることで、iPhoneやAndroidなどの二つのプラットフォームの違いを意識することなくアプリ開発が可能ですのでそれぞれのプラットフォーム固有の言語を覚える必要もありません。
唯一「ネイティブアプリ」よりも処理速度が遅くなってしまうのがデメリットです。その為、高速処理を行っているアプリなどはハイブリッドアプリには適しません。用途に合わせて、「Webアプリ」と「ネイティブアプリ」または「ハイブリッドアプリ」なのか使い分ける必要があるでしょう。
3.明確に文書構造を示すことが可能
今まではHTMLでWebページを構築すると、タグで文章が埋め尽くされてしまいました。HTML5では、新しい要素を加わえることで、ブラウザや検索エンジンに対してより明確に文書構造を伝えられるようになりました。 代表的なタグを以下になります。
・<article> 自己完結したセクションを表す
・<aside> 補足的なセクションを表す
・<audio> プラグインを使わずに音声を再生する
・<figure> 参照される図版を表す
・<footer> フッタを表す
・<header> ヘッダを表す
・<main> 文書のメインコンテンツを表す
・<mark> テキストのハイライト表示
・<meter> 特定範囲内の数量や割合を示す
・<nav> ナビゲーションを表す
・<output> 計算結果の出力欄を作る
・<progress> 作業の進捗状況を示す
・<section> 一般的なセクションを表す
・<source> メディアリソースの候補を指定する
・<time> 日付や時刻を表す
・<track> 動画・音声と同期するテキストトラック
・<video> プラグインを使わずに動画を再生する
・<wbr> 改行位置の候補を表す