ITips(アイティップス) ITエンジニアのスキルアップ方法とノウハウ情報

モバイル端末向け開発で先行!canvasやvideoタグをサポートしたHTML5を勉強しよう!

HTML5(エイチティーエムエル・ファイブ)は、Webページを記述するためのマークアップ言語であるHTMLの15年ぶり5回目の改定版です。これまでの4回の改定に比べ、大幅にパワーアップしたとして注目を集めています。

HTML5

HTML5(エイチティーエムエル・ファイブ)は、Webページを記述するためのマークアップ言語であるHTMLの15年ぶり5回目の改定版です。これまでの4回の改定に比べ、大幅にパワーアップしたとして注目を集めています。

HTMLが誕生したのは1990年頃で、まだインターネットが黎明期の時代です。HTMLで記述されたWEBページを閲覧できるブラウザの開発により、インターネットは爆発的に普及していきます。この当時、ブラウザはNetscape Navigator(ネットスケープ ナビゲーター:ネットスケープコミュニケーションズが開発していたウェブブラウザ)とInternet Explorer(IE)がそれぞれの覇権を競って、熾烈な戦いを繰り広げていました。

2005年ごろから、インターネットではインタラクティブ(双方向)性の高いサービスが志向されるようになります。ここで大きな役割を果たしたのがJavaScriptです。また、この頃からWEBの標準化(Webブラウザをはじめとする閲覧環境に依存せず、どのような環境においても同様の表示・表現を行うことができる技術)が叫ばれるようになりました。

次いで、大きな潮目となったのがスマートフォンをはじめとするモバイル端末の登場です。スマートフォンに搭載されたブラウザでは、Flash (フラッシュ:Adobe Systems社による、音声や動画、を組み合わせたWebコンテンツ)、Silverlight (シルバーライト:Microsoft社のWebブラウザ拡張機能。Webブラウザ上で動画やアニメーションを再生可能)と言ったの動画の再生などに必要なプラグインに対応していない反面、2004年ごろから策定が始まっていたHTML5への対応は進んでいました。

WEBブラウザでは、最大のシェアをもつIEがHTML5対応に消極的だったこともあり、HTML5はスマートフォン専用ページの開発技術として注目を集めるようになりました。

HTML5が優れている2つのポイント

HTML5が従来のバージョンに比べて大きく優れている点は、以下の2つです。
1.今まで複雑だった処理が簡単にできる
2.HTMLを構造的にすっきりと記述することができる

1.については、例えば画像の埋め込み。これまではJPEGやGIFといった画像ファイルを用意しなくてはいけませんでしたが、HTML5でcanvasタグを定義すれば、図形の描写を自由に行うことができます。

また、動画や音声データなどのマルチコンテンツメディア(動画・音声・静止画・文章などを組み合わせたマルチメディアタイトルを作成するための素材)に対する利便性も圧倒的に高まりました。以前はFlash、Silverlightなどのプラグインでしか実現できなかった動画の再生やベクター画像の取り扱いが、HTML5ではブラウザのみで実現できるようになりました。そのため、プラグインのインストールやアップデートの手間がなくなり、プラグインがないモバイル端末でも同じようにWEBを利用することができます。

2.については、doctypeタグ(その文書がどのバージョンのHTMLで、どの仕様に従って作られているのかをブラウザに伝えるためのタグ)、metaタグの一部、linkタグ、styleタグ、scriptタグなどの記述が簡素化されたこと、加えて要素の定義の見直しや要素の追加などがあります。

他にもvideoタグのサポートで簡単に動画を公開できるなど、これまで制作側が苦労していた箇所をHTML5ではあらかじめ実装されたり、見直したりしたといえます。

WindowsXPのサポート終了とともに、HTML5も普及する

2014年、長らく普及していたWindowsXPがサポートを終了したことが大きな話題となりました。XP搭載のPC(パーソナルコンピュータ)ではHTML5に非対応のブラウザである、IEバージョン6、7、8が主に使われていたため、サポート終了とともにこれらが急速にシェアを落とすことで、HTML5のシェアも高まると予想されます。

WEB開発の現場ではHTML5が当たり前、という時代はすぐに訪れるでしょう。



霆「閨キ縺ェ繧液ype | 繧ソ繧、繝励↑莉穂コ九″縺」縺ィ隕九▽縺九k
繧ィ繝ウ繧ク繝九い霆「閨キ繝輔ぉ繧「髢句ぎ IT&繝「繝弱▼縺上j繧ィ繝ウ繧ク繝九い繧呈アゅa繧句━濶ッ莨∵・ュ縺悟、ァ髮�オ撰シ�

type縺ォ謗イ霈我クュ縺ョ螟ァ謇九�莠コ豌嶺シ∵・ュ縺ョ豎ゆココ

type邱ィ髮�Κ縺碁寔繧√◆莠コ豌玲ウィ逶ョ莨∵・ュ縺ョ豎ゆココ繧偵#邏ケ莉九@縺セ縺吶€�

莨∵・ュ蜷阪�閨キ遞ョ蜷�邨ヲ荳�蜍、蜍吝慍
笆�諠ウ螳壼ケエ蜿趣シ�450荳�ス�800荳���亥渕譛ャ邨ヲ12繝カ譛亥��玖ウ樔ク�2繝カ譛亥���譌・譛ャ蝗ス蜀�r蜑肴署縺ォ縲∝�蝗ス縺ョ蜷�が繝輔ぅ繧ケ繧�惠螳�↑縺ゥ縲∝ロ縺丞�エ謇€繧偵#驕ク謚槭>縺溘□縺代∪縺吶€�

莠€逕ー陬ス闖捺�ェ蠑丈シ夂、セ

繧ェ繝シ繝励Φ繝昴ず繧キ繝ァ繝ウ

驟榊ア樒オ�ケ斐d諡�ス薙�繝ュ繧ク繧ァ繧ッ繝医↓繧医j逡ー縺ェ繧翫∪縺吶€�
諠ウ螳壼ケエ蜿趣シ�400荳����1000荳��
驟榊ア樒オ�ケ斐d諡�ス薙�繝ュ繧ク繧ァ繧ッ繝医↓繧医j逡ー縺ェ繧翫∪縺吶€�

譌・譛ャ繝槭う繧ッ繝ュ繧ス繝輔ヨ譬ェ蠑丈シ夂、セ

繧ェ繝シ繝励Φ繝昴ず繧キ繝ァ繝ウ

驟榊ア樒オ�ケ斐d諡�ス薙�繝ュ繧ク繧ァ繧ッ繝医↓繧医j逡ー縺ェ繧翫∪縺吶€�
笆シ蜿り€� 蟷エ菫ク650荳�€懶シ�1/12繧呈怦縲�髪邨ヲ��
蜩∝キ晄悽遉セ
�域擲莠ャ驛ス貂ッ蛹コ貂ッ蜊�2-16-3 蜩∝キ昴げ繝ゥ繝ウ繝峨そ繝ウ繝医Λ繝ォ繧ソ繝ッ繝シ��
蟷エ菫ク蛻カ�育オ碁ィ薙€∬�蜉帷ュ峨r閠��縺ョ縺�∴蠖鍋、セ隕丞ョ壹↓繧医j豎コ螳夲シ�譚ア莠ャ驛ス(譁ー螳ソ蛹コ)縲∝、ァ髦ェ蠎�(螟ァ髦ェ蟶ゆクュ螟ョ蛹コ)

繧ウ繧ッ繝ィ譬ェ蠑丈シ夂、セ

繧ェ繝シ繝励Φ繝昴ず繧キ繝ァ繝ウ

蜑崎�縺ョ縺皮オ碁ィ薙�繧ケ繧ュ繝ォ遲峨r閠��縺励※豎コ螳壹@縺セ縺吶€�譚ア莠ャ驛ス縲∝、ァ髦ェ蠎�

譬ェ蠑丈シ夂、セ繧ェ繝シ繝�ぅ繧ェ繝�け繝九き

繧ェ繝シ繝励Φ繝昴ず繧キ繝ァ繝ウ

諠ウ螳壼ケエ蜿趣シ夂オ碁ィ薙�繧ケ繧ュ繝ォ繧定€��縺ョ荳翫€∵アコ螳壹@縺セ縺吶€�譚ア莠ャ驛ス �域枚莠ャ蛹コ縲∫伴逕ー蟶ゑシ�

その他の条件で探す

typeでは職種や勤務地、仕事探しで譲れないこだわりの条件など、様々な切り口から自分の働き方に合った求人を探すことができます。気になるキーワードやテーマから転職・求人情報をチェックしてください。

転職活動を進める

あなたの転職活動をサポートする、typeの各種サービスをご案内します。

  • スカウト

    スカウト

    匿名だから安心!あなたに興味を持った企業の採用担当から直接メールが届くサービスです。

  • オファーDM

    オファーDM

    あなたが登録した情報と近い内容の募集条件の企業から、メールが届くサービスです。

  • 検討中リスト

    検討中リスト

    興味を持った求人を保存しておくことができ、気になる求人を一覧にて比較検討できます。