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

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認定トレーナーなど