既存も新規も業務アプリは「HTML5」が原則！ モダンなUIを作りユーザーが満点を出す開発者を目指そう

業務アプリケーションでも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]。

資格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は最良のツールといえそうだ。

HTML5にするとコンピュータが構造を理解しやすいページとなる

　市古編集長の動揺は横に置いて、抜山氏は先に進む。まず、HTML5の概要から説明した。「これまで（HTML4ベースのWebページ）は人間が読むことを前提とした、人間のためのフォーマットでした。一方、HTML5はセマンティックで、コンピュータがWebページの構造を理解できるように考慮されています。ここがHTML4とHTML5で大きく違う点です」（抜山氏）

　HTML4とHTML5の間に、XMLという技術が進展したという経緯もあり（XHTMLという仕様もあった）、HTMLソースの構造をコンピュータが理解できるように刷新したのがHTML5ともいえる。コンピュータがHTMLソースの構造を理解できるようになると、検索エンジンが目的のWebページをより的確に判断できたり、スクリーンリーダー（読み上げソフト）の読み上げ精度が高まったりすることが期待される。

　新規のWebページを作るならHTML5にするとしても、既存のHTML4ページをHTML5に書き換えるのはおっくうかもしれない。ブラウザからWebページを閲覧するユーザーからすると、ソースコードがHTMLが4でも5でも違いに気づくことはないからだ。

　しかし、抜山氏は既存ページをHTML5へと書き換えるメリットについてこう話す。「HTML4だと画像で労力をかけて対応していたところも、HTML5（とCSS3）ならタグで対応可能となるなど、今後デザインを変更するときの労力を減らせます。また、IE以外のブラウザ、例えばGoogle ChromeやFireFoxなどの互換性の問題も減ります。総合的に見ると、HTML5で作成したWebページは寿命が長くなります」

　では、実際にどこがどのように違うのか。論より証拠ということで、抜山氏は資格Zineをサンプルに解説を始める。資格Zine、いよいよ「まな板の鯉」である。ソースコードが富士通ラーニングメディアの一室で明かされる。市古編集長、きっと心拍が上がっているに違いない。

　ソースコードを目の前にして、市古編集長はおそるおそる「……あの、資格Zineのソースコードは問題なかったですか？ 今日の教材に使えるんでしょうか？」と抜山氏にたずねた。すると「大丈夫でしたよ」とにっこり。むしろソースコードとしてよくできているからこそ教材に選ばれたのだろう。と、思っていいのでは。

　サンプルとして、抜山氏は資格Zineの右サイドバーにある「人気ランキング」の領域のソースコードを開いた。［今日］と［月間］でランキングリストが切り替わるようになっている部分があり、このタブのようなものの角に相当するCSS（border-radius）のパラメータを4ピクセル（4px）から60ピクセル（60px）へ変更すると、途端にWebページのタブ角丸のアール（半径）が大きくなった。もちろん、サーバーにあるソースコードを書き換えるわけではないので、表示の変更はこの端末だけ。だとしてもなんと便利な機能だろうか。

　この「タブの角を丸くする」というのはささいな変更に見えるかもしれないが、数ピクセルだけでも変更すると印象が変わる。また、かつてこうした角丸の大きさを変更するには、それに合わせた画像を作り直すなど、とても面倒だったのだ。しかし、今はCSSでパラメータを変更するだけ。ほかにもHTML5では利用可能なタグが増えて表現力が広がり、ソースコードを変更するだけで見た目を変更できる幅が広がった。これは保守管理の労力を減らせるというメリットがある。

　「これまで業務アプリケーションでは実装する機能に重点がおかれ、相対的にUIが犠牲になってきました。しかし、業務アプリケーションでももっとモダンになっていいと思います」（抜山氏）

　市古編集長はうなずきながら、「そうですよね。ユーザーからすると、UIがヘタレだとやる気なくしてしまうんですよね」と同調する。抜山氏もうなずきながら、「どんなにサーバー側で高度な処理を実装しても、エンドユーザーには伝わりにくいものです。でもUIなら分かりやすいですよね」と話す。Webページのフロント部分を作るときの醍醐味といえそうだ。

　本コースは、Webページのフロントを担当している人はもちろん、開発を担当するシステムエンジニアや社内システムの企画担当など、HTMLやCSSの基本的な知識を持つ人がHTML5の新要素を把握するのにぴったりといえそうだ。HTML5を使えばどんなレイアウトが可能なのか、それに掛かる工数はどれほどなのか、ぜひ学んでいただきたい。

抜山雄一（ぬきやま ゆういち）

株式会社富士通ラーニングメディア
ナレッジサービス事業部 第二ラーニングサービス部

富士通ラーニングメディア入社後、Microsoft系の技術を修得。主に、ASP.NETやSQL Server、IISなどの講習会を担当する。HTML5の登場で、フロントエンド開発に目覚め、LPI-Japan認定のコース開発などに努める。近年はJavaScriptのスーパーセットであるTypeScriptがブーム。アプリからインフラまでの幅広い技術知識を活かし、色々な観点でアドバイスできる講師、技術に対する熱い想いを持った講師として、受講者から高い信頼を得ている。

［主な取得資格］HTML5プロフェッショナル認定資格 レベル2、Microsoft認定トレーナーなど