close
プログラミング クラウド Microsoft Azure 情報処理資格 基本情報技術者 IT基礎 応用情報技術者 開発・設計方法 オブジェクト指向 内定者・新人研修 プログラミング基礎 アルゴリズム コンピュータ数学 内定者研修 新人研修 ヒューマンスキル プロジェクトマネジメント プレゼンテーション リーダーシップ 組織マネジメント ネゴシエーション ロジカルシンキング Java UI/UX HTTP JavaScript基礎 情報処理資格 ネットワークスペシャリスト ネットワーク インターネットルーティング応用 IPアドレス データベース応用 SQL応用 パフォーマンスチューニング データベース設計 ER図 概念設計(データベース) 論理設計(データベース) IT資格 Linux基礎 OS・システム基盤 セキュリティ TCP/IP OSI参照モデル データベースセキュリティ ファイアウォール 標的型攻撃 SQLインジェクション ネットワーク基本設計 CCNA Cisco プロジェクトマネジメント資格 情報処理資格プロジェクトマネージャ 情報処理安全確保支援士 人事給与 財務会計 管理会計 簿記 生産管理 在庫管理 ERP バランススコアカード 情報処理資格 ITアーキテクト 情報処理資格 ITストラテジスト 情報処理資格 ITサービスマネジメント 情報処理資格 システム監査 PMBOK® PMP® プロジェクト計画 WBS リスクコントロール ITIL ITサービスマネジメント 要求定義 要件定義 見積手法 ビジネスインダストリ 業種・業界知識 業務知識 提案力 ソフトウェアテスト基礎 情報処理資格 データベーススペシャリスト ハードウェア基礎 外部設計(基本設計) 内部設計(詳細設計) データベース基礎 SQL基礎 RDBMS 物理設計(データベース) C++ Ruby MVC基礎 Webアプリケーション開発 JavaEE Javaプログラミング応用 フレームワーク MVC応用 Spring フレームワーク ソフトウェアテスト応用 テスト手法 Junit スマートフォンアプリ開発 Androidアプリ開発 C# 基礎 C# 応用 負荷テスト Javaプログラミング基礎 ソフトウェアテスト コーチング メンタリング HTML/CSS サーバー構築 仮想化技術 KVS (NoSQL) アジャイル スクラム ファシリテーション C言語 ITパスポート JSTQB データサイエンス 単体テスト ユニットテスト キャリアアップ インターネットルーティング基礎 パケット解析 LAN構築 データベース データサイエンティスト トレンド 障害対応 インフラ監視 HTTP/2.0 コンピュータサイエンス VPN ネットワーク物理設計 データベース障害 JavaScript モダンJS (Modern JavaScript) 応用 MVS応用 バックアップ/リカバリ 分散処理 Hadoop Hive Python AI 深層学習(DeepLearning) CentOS Linux応用 Zabbix シェルスクリプト Infrastructure as Code Windowsサーバー基礎 内部設計 Docker DevOps Windowsサーバー応用 NginX chef Ainsible ロジカルライティング R テスト自動化 Jenkins Git 継続的インテグレーション (CI) バージョン管理 Vagrant 要求分析 Redmine 継続的インテグレーション(CI) 継続的デリバリー (CD) ヒューマンリソース管理 Web API マイクロサービス コミュニケーション 業務知識/業界知識 マーケティング 語学 AWS 法務 IoT ビジネスマナー OJT 業務効率化 表計算ソフト オフィスソフト コンプライアンス フロントエンド Subversion PHP 関数型プログラミング Laravel モダンJS (Modern JavaScript) 基礎 Android Studio 機械学習 iOSアプリ開発 ぷプログラミング React 次世代高度IT人材 共創 IPA Raspberry Pi Xamarin スクリプト言語 GoF CUI VBA 資格 ビジネス文書 jQuery 研修参加レポート マネジメント OSPF テーブル設計 アンガーマネジメント クリティカル・シンキング PDU 経営改善 Pマーク 問題解決技法 サイバー攻撃 エンジニア 参加してみた エンゲージメントマネジメント 労働関連法 新人育成 ネットワーク構築 情報セキュリティマネジメント デザインパターン リファクタリング マルチスレッドプログラミング ベンダーコントロール Modern JavaScript 冗長化 VLAN インフラエンジニア チームビルディング テストケース リーダブルコード セキュリティ入門 ネットワーク入門 Node.js npm gulp ビルドツール Python入門 冗長化入門 インフラ実機演習 プロジェクト管理 Active Directory ネットワーク管理 コンテナ 正規化理論 Haskell 品質管理 OpenStack シンギュラリティ DBA中級 プロトコル UX 基本設計 FinTech トラブルシューティング 並列処理 見える化 PMO ロジカルコミュニケーション Deep Learning インデックス設計 超上流工程 BGP Excel C-CENT Selenide プライベートクラウド アセンブラ コンピュータ基礎 工数見積 CCENT 法律知識 失敗から学ぶ プロジェクト失敗事例 PDCA プログラミング入門 非エンジニア向け 4Biz DNS セルフマネジメント 片付け術 サーバーダウン サーバー タイムマネジメント GO言語 プロダクトマネジメント プロダクトマネージャ LVS ロードバランサー 負荷分散 仮想通過 犯罪心理学 情報漏えい SEカレッジ導入事例 IT研修を聞いてみた 会社規模 (100~300名) IT研修制度を聞いてみた CentOS7 開発環境構築 数字力 財務 IT人材 UI Machine Learning Go言語 (golang) データマイニング 統計学 新人教育 やり直し数学 RDB つながる工場 モチベーション WebSocket WebWorker HTML5 CSS3 Bootstrap 微分・積分 システム設計 決断力 LAMP環境 トレ担 教育研修担当者向け ルーティング Linux入門 図解術 目標設定 試験対策 インタビュー技法 Vue.js ブロックチェーン 会社規模 (~50名) DHCP 仕掛け学 BSC 財務諸表 自己分析 RIP スタティックルート バッファオーバーフロー DoS攻撃 システム開発 会社規模 (~99名) Wireshark パケットキャプチャ 管理職研修 部下育成 ワークあり 文章力 情報システム部門向け プロジェクトリーダー プロジェクトマネージャ 塗り絵 リスク管理 法改定 会社の仕組み Chainer AI人材 会話術 会社規模 (~25名) テスト技法 組織規模 51名~99名 組織規模:~199名 [組織規模]199名まで 組織規模 199名まで 組織規模199名まで 会社規模199名まで 会社規模49名まで 会社規模99名まで アプリ開発 サーバサイドJava 営業知識 Cloud 栄養学 基本コマンド ウォーターフォールモデル ヘルスケア 論理設計 ニューラルネットワーク ハンズオン UML 顧客ヒアリング マウスで学ぶ Apache EC2 Lightsail M5Stack DevSecOps プロジェクト成果 画像認識 チャットポット コマンド レビュー 基本用語 自動構築 LPIC-1 サーバーサイドJavascript キャリア形成 ワークライフバランス インバスケット テック用語 GitHub Windows エディタ 教養 令和時代 RESTful API 物理設計 会社規模300名以上 データモデリング サーバーサイドJava Webサーバー基礎 Webサーバー応用 Watson IBMWatson Learning Topics OS モバイル コンテスト トレーニング手法 アーキテクチャ 人材モデル インフラ CI/CD Infrastructure as a Code チーム開発 制度づくり Special_Intro AI市場分析 研修ロードマップ 仕事術 デジタルトランスフォーメーション 財務分析手法 情報整理 PowerPoint 新しい研修 オンライン研修 見どころ紹介 統計分析 ディープラーニング G検定 情報処理技術者試験 販売管理 C# テスト計画 Linuxサーバー WEBサーバ構築 http/2 Postfix イーサリアム プロジェクト・メンバ 正規化 パケット実験 作業分解

モダンコーディング(HTML5 / CSS3)入門とWebSocketなど新技術 研修コースに参加してみた


2020-05-12 更新

今回参加した研修コースは モダンコーディング(HTML5 / CSS3)入門と WebSocket など新技術 です。

参加する前はいろいろなタグを紹介するだけかなぁと思っていたのですが、このコースはサンプルコードを見る、動かしてみる、を繰り返し行い、実際に自分で書く時間を減らしながら書き方がわかる、不思議な達成感のあるコースでした。

また改めて、HTML の歴史、 HTML5 / CSS3 / JavaScript で出来るようになったことがわかり、いまのモダンブラウザ ( Web 標準 ) で出来ること、例えば、チャットなどの同期通信、オフラインストレージなど、かいつまんでわかりました。

 

では、どんなコースだったのかレポートします!!

コース情報

想定している受講者 Web 開発の基本を理解している方
受講目標
  • HTML の歴史と HTML5 の特徴を知る
  • HTML5 で導入された新技術を知る
  • CSS3 の特徴を知る

講師紹介

プログラミングカテゴリではおなじみの 米山 学 さんです。

米山 学
米山 学
JavaはもちろんPython/PHPなどスクリプト言語、Vue/ReactなどJSだってなんだってテックが大好き。原点をおさえた実践演習で人気

ちなみに、講師紹介にもあるとおり、冬のスペインで登山するのが大好きな米山さんなので、冬は日本を離れがちなのです。

HTML

まずはザックリ、HTMLの概要や歴史を紹介いただきました。

  • W3C が標準仕様を策定している
    • 最も大きな団体
  • 最新版は 5.2
    • December, 2017 Release
    • 5.3 が準備中
  • Recommendation (勧告) というのが正式な仕様のリリース
    • 他にも Workingdraft などがある
  • WHATWG という団体も標準仕様を決めている
    • ブラウザベンダが作った ( Firefox / Safari / Opera )

歴史的経緯

  • 前のバージョンはHTML 4
    • 1999 年にリリースされたもの実は W3C が次にリリースしようとしていたものは XHTML
      • 仕様が複雑かつ巨大
    • XHTMLを嫌がった WHATWG が HTML5 を提案
    • Chrome が WHATWG に入って、HTML 5 が正式仕様になった
    • 現在は W3C と WHATWG は協調してやっている
  • W3C がやっていること
    • いわゆる html タグ <> の仕様を作っている
  • WHATWG がやっていること
    • Living Standard を作っている
      • HTML のような静的なページではなく動的なページの仕様
      • Web アプリケーションの基盤
    • 実は HTML5 は Web アプリケーションに対応するための様々な技術が含まれている
      • CSS や JavaScript も入っている

私は W3C が HTML、WHATWG がブラウザと理解しました!

 

一方で、HTMLレンダリングエンジンはどうなっているのだろうと、ググってみると、こんな感じでした。

  • Gecko (Firefox など) -> Netscape が源流
  • WebKit (Safari など) -> Unix 系のレンダリングエンジン KHTML をフォーク
    • Blink ( chromium / chrome / Opera など)

こちらもそれぞれ特徴があって面白そうです。最近では MS が EdgeHTML の開発を停止し、 chromium ベースにすると発表したので、事実上、3 つの実装しか無くなったようです。

こちらはこちらで、Rust, wasm など最近は面白いトピックもあるので、いつかコースで聞きたいなぁ。

 

ちなみに “WHATWG” ってなんて呼ぶんだろうと思っていると、 「わっとだぶりゅじー」で良さそうです。

WHATWGってなんて読むの? : mwSoft blog

HTML5 に入った新技術

下のリファレンス ( Web ページ) を見ながら、それぞれ解説いただきました。

HTML5 – ウェブデベロッパーガイド | MDN

  • 合計 8 個の技術が入っている
  • SEMANTICS: (訳: 意味論)
    • 文書が持つ意味をハッキリさせる
    • 機械でもわかるようにする
      • たとえば Googlebot のようなクローラ
      • 色や強調など見栄えは評価しなくなった
        • ex. HTML4にあった <b>…</b> のような装飾
        • 一応レンダリングされる
  • OFFLINE / STORAGE
    • モバイルのようにオフラインになってもローカルに保存する仕組みを強化
  • DEVICES ACCESS
    • PC と違ってモバイルにはカメラやセンサーなどもついている
    • GPS などにも対応
  • CONNECTIVITY
    • 接続を速くする
    • 接続しなくても表示できる
    • 双方向バインディング
    • リクエストとレスポンスだけでなく繋がった状態を保持する
  • MULTIMEDIA
    • 音楽や動画の再生
    • 専用ソフトが無くても再生できる
  • GRAPHICS AND EFFECTS
    • 3D など
  • PERFORMANCE AND INTEGRATION
    • 処理性能を上げる仕組みの実装
  • STYLING
    • CSS3
    • 従来は全く別だったものをくっつけた
    • ページの見栄えは CSS であつらえる
    • CSS から JavaScript を呼び出してアニメーションすることもできる

セマンティクスの話題で、たしかに人間からすれば、この記事はよい、この記事は悪い、は判断できますが、機械からはわからないので、だから目次、h2 などヘッダなどをちゃんと書くように SEO 対策で言われるようになったのか、と今さら合点しました。(いまさら…)

 

ちなみに今回リファレンスとして使った MDN が質・網羅性において、どれも一番とのことでした。

HTML5 / CSS3 を試してみよう

ここからは実際にブラウザとサンプルコードを見ながら、動かしてみました。

このレポートではその中でいくつか紹介します。

MultiMedia

  • <audio></audio>
    • controls という属性がないとコントローラーが表示されない
    • 自作もできる
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML5 audio</title>
  </head>
  <body>
    <audio controls>
      <source src="[ファイルパス/ファイル名]" type="audio/mpeg" />
      <p>Your device does not support HTML5 audio.</p>
    </audio>
  </body>
</html>

Form

  • 入力フォーム
    • 数量 / 日付 / インクリメンタルサーチ (入力補完) /
    • placeholder を使うと validatecheck が出来る
      • email / URL / 電話番号など
      • タグで出来る (!!)
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML5 Form</title>
    <script>
      function showValue(val) {
        document.getElementById("output").value = val;
      }
    </script>
  </head>
  <body>
    <h3>Date and Time Input Field</h3>
    <form>
      <fieldset>
        <legend>Appointment Request</legend>
        <p><label>Date <input type="date" name="date" value="2011-03-15"></label></p>
      </fieldset>
      <p><button type="submit">Submit</button></p>
    </form>
    <hr>
    <form action="#" autocomplete="on">
      <table>
        <tr>
          <td>インクリメンタル・サーチ:</td>
          <td>
            <input type="seach" list="keywords">
            <datalist id="keywords">
              <option value="Canvas">Canvas</option>
              <option value="Web Workers">Web Workers</option>
              <option value="WebSocket">WebSocket</option>
            </datalist>
          </td>
        </tr>
        <tr>
          <td><input type="file" id="file" multiple></td>
        </tr>
      </table>
    </form>
  <body>
</html>

WebSocket

  • Web では通常、HTTP というプロトコルを使っている
  • 必ずクライアントからリクエストしないとレスポンスを返せない
  • このままでは同期通信ができない
    • 例えば、チャットが作れない
    • 誰かが発言してもサーバから配信できない
    • 例えば株価情報もリクエストが無いので更新できない
  • これを解消するのがWebSocket
    • 双方向で通信できる
  • デモンストレーションするにはサーバとサーバプログラムが必要なので node.js と express を使う
    • node.js を使うと、apache などが無くても WebServer を立てられる (!!)

使ったファイルは米山さんに OK いただき GitHub に配置しましたので、ぜひ試してみてください。

07_WebSocket

他にも WebWorker でマルチスレッドを実験してみたり、WebStrage を試してみながら、コードをみて、とても楽しい時間でした。

CSS3

続いて、 CSS3 もコードを見ながらブラウザで表現を確認しました。

  • 基本の使い方
    • styleタグで囲んで、要素を指定します
<style>
  <tag> {
    font-size: 16px;
  }
</style>
  • Border
    • 角丸を作る
<!DOCTYPE html>
<html>
<head>
  <title>CSS3 Border Radius Examples</title>
  <style>

    div {
      background: #39C;
      width: 300px;
      height: 200px;
      margin: 10px;
      border: solid 3px #039;
      float: left;
    }

    .box1 {
      border-radius: 10px;
    }

  </style>
</head>
<body>		
  <div class="box1"></div>
</body>
</html>
  • Button
    • 画像を使わずボタンが作れる
@charset "utf-8"

body {
  text-rendering: optimizeLegibility;
}

button:hover {
  cursor: pointer;
}

button.minimal {
  background: #e3e3e3;
  border: 1px solid #bbb;
  border-radius: 3px;
  box-shadow: inset 0 0 1px 1px #f6f6f6;
  color: #333;
  font-family: "helvetica neue", helvetica, arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  padding: 8px 0 9px;
  text-align: center;
  text-shadow: 0 1px 0 #fff;
  width: 150px;
}

button.minimal:hover {
  background: #d9d9d9;
  box-shadow: inset 0 0 1px 1px #eaeaea;
  color: #222;
}

button.minimal:active {
  background: #d0d0d0;
  box-shadow: inset 0 0 1px 1px #e3e3e3;
  color: #000;
}
<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <title>CSS3 buttons</title>
    <link rel="stylesheet" href="buttons.css" />
	</head>
	<body>
    <ul class="column">
      <li>
        <button class="minimal">Minimal</button>
      </li>
    </ul>
	</body>
</html>
  • flex-layout
    • 簡単にレイアウトが組めるようになった
<!DOCTYPE html>

<html>
  <head>
    <title>CSS Multi-column Layout Module</title>
    <style>
      .outer {
        display: flex;
        width: 60%;
      }
      .inner {
        color: white;
        font-size: 20px;
        padding: 10px;
       }
      .inner:nth-child(1) { background: #0074bf; }
      .inner:nth-child(2) { background: #d16b16; }
      .inner:nth-child(3) { background: #9460a0; }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner">
        Flexbox is similar to the block layout, except that it lacks many of the properties that can be used in a block layout, such as floats and columns. 
      </div>
      <div class="inner">
        Using flexbox, you can also lay elements out inside a container in either directions: horizontal or vertical, called the flex directions; you’re not bound to just one direction as in other layout modes. 
      </div>
      <div class="inner">
        Last but not least, you can change the visual order of elements inside the container without affecting their actual order in the markup. 
      </div>
    </div>
  </body>
</html>

  • Web フォント
    • 従来はクライアントにフォントが無いと出来なかった
  • サーバから配信したフォントを表示させられる
    • Google fonts が使える
    • <link href="https://fonts.googleapis.com/css?family=Ravi+Prakash" rel="stylesheet">
    • こんな感じで指定する

HTML5 と CSS3 を組み合わせて書く

今度は HTML5 と CSS3 を組み合わせて、どんなステップを踏むのか、ステップごとのサンプルコードを見て、動かしてみます。

  1. まずタグでページの構造化を行う
  2. HTML5 で コンテントモデル を追加 // 文書の構造化
    <nav></nav>
    <header></header>
    <section></section>
    <article></article>
    <aside></aside>
    <footer></footer>

    などなど

  3. CSS を適用して見栄えを調整
    • <p class="hoge"></p> で定義をつくる
    • .hoge {} で指定する
  4. レイアウトや色をつける
    • <nav></nav> などを <div></div> タグで括ってやる
  5. ( css フレームワークをあてる)
    • (今回は Bootstrap をあててみます)
  6. 1. (レスポンシブにする)
    • CSS3 の @media クエリを使う
@media (min-width: 1190px) {
  /* 全体の横幅を固定 */
  .top-box, .etc-box, .header-inner, .copyright, article.main {
    width: 1140px;
    margin-left: auto;
    margin-right: auto;
  }

すべてのステップを経ると、 ↓ のようになりました。

このサンプルページを確認したところで、このコースは修了しました。

まとめ

このコースでは HTML5 / CSS3 で変わったところを中心に、実装と動きを確かめてみました。

思わず、WebSocket の動きや WebStorage などの仕組みなどを JavaScript も含めて確認でき、まさしく LivingStandard がわかるコースでした。

HTMLのタグを学ぶんだろうなぁ、という予想を、良い意味で裏切られたので、HTML はもちろんブラウザ周りの今の標準を知りたい方にはとてもオススメです!

 

 

label SE カレッジの無料見学、資料請求などお問い合わせはこちらから!!


SEカレッジについて

label SEカレッジを詳しく知りたいという方はこちらから !!

SEcollege logo
SEカレッジ
IT専門の定額制研修 月額28,000円 ~/ 1社 で IT研修 制度を導入できます。
年間 670 講座をほぼ毎日開催中!!

特集・キャンペーン

午前免除 FAQ

タグ一覧