SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

From 資格Zine(AD)

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

【富士通ラーニングメディア】のすごいIT研修 体験記 | 第5回

  • X ポスト
  • このエントリーをはてなブックマークに追加

 業務で使用するエンタープライズシステムでも、UI(ユーザーインターフェイス)の出来不出来が評価に大きく影響する時代。IT技術の研修サービスを行っている富士通ラーニングメディアでは、「HTML5」を学びに来る業務アプリケーション開発者が増えているという。資格Zine編集長の市古が同社の研修を体験をレポートするシリーズの第5回として、今回はHTML5研修の体験レポートをお届けする。

  • X ポスト
  • このエントリーをはてなブックマークに追加
資格Zine

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プロフェッショナル認定資格 レベル1 教科書』も併せて利用する。なお、同コースには、LPI-JapanのHTML5プロフェッショナル認定試験の受験バウチャーチケット付きコースもあり、こちらは受講者の満足度が特に高いコースとなっている。

 コースは初めてHTMLやWeb制作に触れるコースではないため、普段からWebページをある程度見慣れている人を想定している。その点では、いやしくもWebメディア「資格Zine」の編集長を務めているのだから、市古編集長も受講の資格がある。それどころか、連載5回目にして初めてホームグラウンドでの受講である。

 コース概要の説明を終え、実際のコース体験へと進もうとしたところ、抜山先生は「今回は資格ZineのWebサイトをサンプルに解説していきましょう。先に資格Zineのサイトを見ておきました」とさらっと告げた。先生、なんというお気遣い。市古編集長のためにスペシャルプライベートレッスンにしてくれたようだ(このシリーズは毎回プライベートレッスンだが)。

 うれしさのあまり(?)「ええっ。なんか、自分んちの冷蔵庫を見られるような感じですね……」と動揺を隠せない市古編集長。ものすごく恥ずかしいようだ。

Webページのソースコードを確認するのにおすすめのブラウザ

 Webページのソースコードを確認するには、Google Chromeを使うのがおすすめである。Webページを開き、キーボードから[F12]キーを押すだけ。ブラウザ画面に実際のWebページとソースコードが並んで表示される。ソースコードのペインでマウスを動かすと、実際のWebページに該当する領域が色分けされる。ソースコードがどの領域を定義しているのかすぐ分かる。Webページの仕組みを学ぶならGoogle Chromeは最良のツールといえそうだ。

Google Chromeから資格ZineページのHTMLソースを確認中
Google Chromeから資格ZineページのHTMLソースを確認中

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
From 資格Zine連載記事一覧

もっと読む

この記事の著者

加山 恵美(カヤマ エミ)

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

うさぎ化してますが、1972年の子年生まれ。宝飾店の売り子、辞書専門編集プロダクションの編集者(兼MS Access担当)を経て、2000年に株式会社翔泳社に入社。月刊DBマガジン(休刊)、IT系技術書・資格学習書の編集を担当後、2014年4月より開発者向けWebメディア「CodeZine」の編集に参加。資...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/9789 2016/11/02 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング