Shoeisha Technology Media

資格Zine(しかくジン)

記事種別から探す

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加

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ページのタブ角丸のアール(半径)が大きくなった。もちろん、サーバーにあるソースコードを書き換えるわけではないので、表示の変更はこの端末だけ。だとしてもなんと便利な機能だろうか。

border-radiusの値を変更してタブの角を丸くしてみる
border-radiusの値を変更してタブの角を丸くしてみる

 この「タブの角を丸くする」というのはささいな変更に見えるかもしれないが、数ピクセルだけでも変更すると印象が変わる。また、かつてこうした角丸の大きさを変更するには、それに合わせた画像を作り直すなど、とても面倒だったのだ。しかし、今は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認定トレーナーなど

HTML5の無料セミナーを2017年2月に開催!

 富士通ラーニングメディアでは、HTML5の適用方法や要素技術を現場担当からの講演やハンズオンを通してご紹介する「【無料セミナー】体験!HTML5を活用した業務アプリ開発」を2017年2月8日(水)に開催します。詳しくは本セミナーのWebページをご覧ください。



  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 市古 明典(資格Zine編集長)(イチゴ アキノリ)

    うさぎ化してますが、1972年の子年生まれ。宝飾店の売り子、辞書専門編集プロダクションの編集者(兼MS Access担当)を経て、2000年に株式会社翔泳社に入社。月刊DBマガジン(休刊)、IT系技術書・資格学習書の編集を担当後、2014年4月より開発者向けWebメディア「CodeZine」の編集に参加。資格学習書と開発者向けWebメディア両方の経験を活かして、ITエンジニアのスキルアップを支援できればと思い「資格Zine」を立ち上げた。なお、9月から翌年2月まではNFL観戦のため、常時寝不足。

  • 加山 恵美(カヤマ エミ)

    フリーランスライター。茨城大学理学部卒。金融機関のシステム子会社でシステムエンジニアを経験した後にIT系のライターとして独立。エンジニア視点で記事を提供していきたい。EnterpriseZine/DB Onlineの取材・記事や、EnterpriseZine/Security Onlineキュレーターも担当しています。 Webサイト:http://emiekayama.net

バックナンバー

連載:【富士通ラーニングメディア】のすごいIT研修 体験記

この記事もオススメ

All contents copyright © 2015-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.0