CodeZine読者の皆様、こんにちは。本稿は、IT資格でスキルアップ／キャリアアップを目指すエンジニアのためのWebメディア「資格Zine」で公開中の記事の試し読みページです。続きは資格Zineのページでお読みいただけます。
業務アプリケーションでもHTML5対応はもう不可避です
富士通ラーニングメディアでは、ITエンジニアが習得するべき技術のトレーニングコースを幅広く提供している。これまで本連載でも、Linux、プロジェクトマネジメント、ビッグデータ時代に向けてのBIツール、DevOpsへの第一歩とするChefまで、同社のさまざまな研修コースの体験レポートをお届けしてきた。今回、市古編集長が体験したコースは「ココが違う！HTML5 ～HTML4.01からの新要素 ～」。HTML4の知識をある程度持っているITエンジニアやWebページ作成者向けに、HTML5でどう変わったのかを集中的に解説するコースである。
講師を務めてくださったのは、富士通ラーニングメディア ナレッジサービス事業本部 第二ラーニングサービス部 抜山雄一先生。「一般的なWebサイトではHTML5は浸透していますが、業務アプリケーションとなると、まだHTML4をベースとするものが多いのではないでしょうか。基幹業務システムとなるとブラウザの下位互換も重要で、企業内だとやはりIE（Internet Explorer）が多いという背景もあります。ただし、マイクロソフトは2016年1月にIE 10以前の古いIEのサポートを終了しました。これが業務アプリケーションでWebページを徐々に刷新していこうという動きへとつながっています」（抜山先生）
業務アプリケーションにとって、古いIEのサポート終了はインパクトが大きい。念のため補足しておくと、問題なのは古いブラウザであり、HTMLのバージョンではない。しかし、ブラウザ再考と並行して「WebページをHTML5に」という考えが、業務アプリケーション開発者の間で広まってきている。
なぜか。歴史がある業務アプリケーションの中には、サーバー側の処理は最先端に刷新されていたとしても、意外と見た目（フロントエンド）は古いままのものもある。しかし、いつまでも古いままではいられない。イマドキのWebページを作るなら、HTML5、CSS3、JavaScriptの組み合わせは必須かつ定番である。中でも、HTML5は土台となる仕様だ。そのため、これから新規に開発する業務アプリケーションを念頭に、「そろそろHTML5を見直しておくか」という開発者が増えてきているのだ。
また、スマートフォンを業務で使用することが一般化したことも後押しとなっている。スマートフォンでもWebアプリの使い勝手を損なわないための技術として、近年では「レスポンシブWebデザイン」が定着してきている[1]。レスポンシブWebデザインではデバイスを判別し、デバイスのディスプレイサイズに合わせて表示を自動調整してくれる。こうした技術を理解するにも、HTML5の知識が必要だ。業務アプリケーションの開発者も、HTML5はもはや習得不可避な存在なのである[2]。
注
[1]: レスポンシブWebデザインが施されたWebページは、パソコンから閲覧していれば横幅を広く用い、スマートフォンなら縦長にコンテンツを配置する。スマートフォンでも、もし横に傾ければ横幅に合わせてコンテンツがするっと移動したりする。これはレスポンシブWebデザインを実現するメディアクエリー（ウィンドウの幅やデバイスの向きに合わせて別のCSSを適用する技術）という仕掛けのおかげだ。
[2]: HTML5の資格試験も登場した。ITエンジニアがHTML5を学習するためのツール（あるいは教材）として便利だろう。
資格ZineのHTMLソースがサンプルに……（恥）
さて、今回の「ココが違う！HTML5 ～HTML4.01からの新要素～」コースは富士通ラーニングメディアのオリジナルで、実施期間は2日間。教材はオリジナル教材に加えて、LPI-Japan HTML5認定教材『HTML5プロフェッショナル認定資格 レベル１ 教科書』も併せて利用する。なお、同コースには、LPI-JapanのHTML5プロフェッショナル認定試験の受験バウチャーチケット付きコースもあり、こちらは受講者の満足度が特に高いコースとなっている。
コースは初めてHTMLやWeb制作に触れるコースではないため、普段からWebページをある程度見慣れている人を想定している。その点では、いやしくもWebメディア「資格Zine」の編集長を務めているのだから、市古編集長も受講の資格がある。それどころか、連載5回目にして初めてホームグラウンドでの受講である。
コース概要の説明を終え、実際のコース体験へと進もうとしたところ、抜山先生は「今回は資格ZineのWebサイトをサンプルに解説していきましょう。先に資格Zineのサイトを見ておきました」とさらっと告げた。先生、なんというお気遣い。市古編集長のためにスペシャルプライベートレッスンにしてくれたようだ（このシリーズは毎回プライベートレッスンだが）。
うれしさのあまり（？）「ええっ。なんか、自分んちの冷蔵庫を見られるような感じですね……」と動揺を隠せない市古編集長。ものすごく恥ずかしいようだ。
Webページのソースコードを確認するのにおすすめのブラウザ
Webページのソースコードを確認するには、Google Chromeを使うのがおすすめである。Webページを開き、キーボードから［F12］キーを押すだけ。ブラウザ画面に実際のWebページとソースコードが並んで表示される。ソースコードのペインでマウスを動かすと、実際のWebページに該当する領域が色分けされる。ソースコードがどの領域を定義しているのかすぐ分かる。Webページの仕組みを学ぶならGoogle Chromeは最良のツールといえそうだ。
