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 | 郢ァ�ソ郢ァ�、郢晏干竊題脂遨ゑスコ荵昶€ウ邵コ�」邵コ�ィ髫穂ケ昶命邵コ荵晢ス�
郢ァ�ィ郢晢スウ郢ァ�ク郢昜ケ昴>髴�ス「髢ィ�キ郢晁シ斐♂郢ァ�「鬮「蜿・縺� IT&郢晢ス「郢晏シア笆シ邵コ荳奇ス顔ケァ�ィ郢晢スウ郢ァ�ク郢昜ケ昴>郢ァ蜻茨スア繧�ス∫ケァ蜿・笏∵ソカ�ッ闔ィ竏オ�・�ュ邵コ謔滂ス、�ァ鬮ョ�ス�オ謦ー�シ�ス

type邵コ�ォ隰暦スイ髴域��ク�ュ邵コ�ョ陞滂スァ隰�ケ晢ソス闔��コ雎悟カコ�シ竏オ�・�ュ邵コ�ョ雎弱f�コ�コ

type驍ア�ィ鬮ョ�スホ夂クコ遒∝ッ皮ケァ竏壺螺闔��コ雎檎軸�ウ�ィ騾カ�ョ闔ィ竏オ�・�ュ邵コ�ョ雎弱f�コ�コ郢ァ蛛オ��o�ケ闔我ケ晢シ�邵コ�セ邵コ蜷カツ€�ス

闔ィ竏オ�・�ュ陷キ髦ェ�ス髢ィ�キ驕橸スョ陷キ�ス驍ィ�ヲ闕ウ�ス陷搾ス、陷榊雀諷�
隨�ソス隲��ウ陞ウ螢シ�ケ�エ陷ソ雜」�シ�ス450闕ウ�ス�ス�ス800闕ウ�ス�ス�ス莠・貂戊ュ幢スャ驍ィ�ヲ12郢晢スカ隴帑コ・�ス�ス邇厄スウ讓費スク�ス2郢晢スカ隴帑コ・�ス�ス�ス隴鯉ス・隴幢スャ陜暦スス陷€�ス�定恆閧エ鄂イ邵コ�ォ邵イ竏晢ソス陜暦スス邵コ�ョ陷キ�ス縺檎ケ晁シ斐≦郢ァ�ケ郢ァ�ス諠�陞ウ�ス竊醍クコ�ゥ邵イ竏昴Ο邵コ荳橸ソス�エ隰�€郢ァ蛛オ��ゥ包スク隰壽ァュ�樒クコ貅倪味邵コ莉」竏ェ邵コ蜷カツ€�ス

闔�ツ€騾包スー髯ャ�ス髣匁瑳�ス�ェ陟台ク茨スシ螟ゑス、�セ

郢ァ�ェ郢晢スシ郢晏干ホヲ郢晄亢縺夂ケァ�キ郢晢スァ郢晢スウ

鬩滓ヲ奇スア讓抵スオ�ス�ケ譁撰ス�ォ。�ス�ス阮呻ソス郢晢スュ郢ァ�ク郢ァ�ァ郢ァ�ッ郢晏現竊鍋ケァ蛹サ�企€。�ー邵コ�ェ郢ァ鄙ォ竏ェ邵コ蜷カツ€�ス
隲��ウ陞ウ螢シ�ケ�エ陷ソ雜」�シ�ス400闕ウ�ス�ス�ス�ス1000闕ウ�ス�ス
鬩滓ヲ奇スア讓抵スオ�ス�ケ譁撰ス�ォ。�ス�ス阮呻ソス郢晢スュ郢ァ�ク郢ァ�ァ郢ァ�ッ郢晏現竊鍋ケァ蛹サ�企€。�ー邵コ�ェ郢ァ鄙ォ竏ェ邵コ蜷カツ€�ス

隴鯉ス・隴幢スャ郢晄ァュ縺�ケァ�ッ郢晢スュ郢ァ�ス郢晁シ斐Κ隴ャ�ェ陟台ク茨スシ螟ゑス、�セ

郢ァ�ェ郢晢スシ郢晏干ホヲ郢晄亢縺夂ケァ�キ郢晢スァ郢晢スウ

鬩滓ヲ奇スア讓抵スオ�ス�ケ譁撰ス�ォ。�ス�ス阮呻ソス郢晢スュ郢ァ�ク郢ァ�ァ郢ァ�ッ郢晏現竊鍋ケァ蛹サ�企€。�ー邵コ�ェ郢ァ鄙ォ竏ェ邵コ蜷カツ€�ス
隨�スシ陷ソ繧環€�ス 陝キ�エ闖ォ�ク650闕ウ�スツ€諛カ�シ�ス1/12郢ァ蜻域€ヲ邵イ�ス鬮ェ驍ィ�ヲ�ス�ス
陷ゥ竏晢スキ譎�た驕会スセ
�ス蝓滓憧闔��ャ鬩幢スス雋ゑスッ陋ケ�コ雋ゑスッ陷奇ソス2-16-3 陷ゥ竏晢スキ譏エ縺堤ケ晢スゥ郢晢スウ郢晏ウィ縺晉ケ晢スウ郢晏現ホ帷ケ晢スォ郢ァ�ソ郢晢スッ郢晢スシ�ス�ス
陝キ�エ闖ォ�ク陋サ�カ�ス閧イ�オ遒�スィ阮卍€竏ャ�ス陷牙クキ�ュ蟲ィ�帝蔓�ス�ス邵コ�ョ邵コ�ス竏エ陟夜豪�、�セ髫穂ク橸スョ螢ケ竊鍋ケァ蛹サ�願ア趣スコ陞ウ螟イ�シ�ス隴夲スア闔��ャ鬩幢スス(隴�スー陞ウ�ソ陋ケ�コ)邵イ竏晢ス、�ァ鬮ヲ�ェ陟趣ソス(陞滂スァ鬮ヲ�ェ陝カ繧�スク�ュ陞滂スョ陋ケ�コ)

郢ァ�ウ郢ァ�ッ郢晢スィ隴ャ�ェ陟台ク茨スシ螟ゑス、�セ

郢ァ�ェ郢晢スシ郢晏干ホヲ郢晄亢縺夂ケァ�キ郢晢スァ郢晢スウ

陷大エ趣ソス邵コ�ョ邵コ逧ョ�オ遒�スィ阮呻ソス郢ァ�ケ郢ァ�ュ郢晢スォ驕イ蟲ィ�帝蔓�ス�ス邵コ蜉ア窶サ雎趣スコ陞ウ螢ケ��邵コ�セ邵コ蜷カツ€�ス隴夲スア闔��ャ鬩幢スス邵イ竏晢ス、�ァ鬮ヲ�ェ陟趣ソス

隴ャ�ェ陟台ク茨スシ螟ゑス、�セ郢ァ�ェ郢晢スシ郢晢ソス縺�ケァ�ェ郢晢ソス縺醍ケ昜ケ昴″

郢ァ�ェ郢晢スシ郢晏干ホヲ郢晄亢縺夂ケァ�キ郢晢スァ郢晢スウ

隲��ウ陞ウ螢シ�ケ�エ陷ソ雜」�シ螟ゑスオ遒�スィ阮呻ソス郢ァ�ケ郢ァ�ュ郢晢スォ郢ァ螳堋€�ス�ス邵コ�ョ闕ウ鄙ォツ€竏オ�ア�コ陞ウ螢ケ��邵コ�セ邵コ蜷カツ€�ス隴夲スア闔��ャ鬩幢スス �ス蝓滓椢闔��ャ陋ケ�コ邵イ竏ォ莨エ騾包スー陝カ繧托スシ�ス

その他の条件で探す

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

転職活動を進める

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

  • スカウト

    スカウト

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

  • オファーDM

    オファーDM

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

  • 検討中リスト

    検討中リスト

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