HTML5 と JavaScript および CSS3 との組み合わせによるプログラミング

Microsoft University: #20480

概要

HTML5, CSS3, JavaScriptについて学習します。HTML5/CSS3/JavaScriptによるプログラミングスキルの向上を目指します。このコースはプログラマのトレーニングパスにおけるエントリーポイントで、WebアプリケーションとWindowsストアアプリの両方に対応しています。

HTML5、JavaScript、CSS3によるアプリ開発に興味があり、6~12ヶ月の経験を持つプログラマを対象にしています。Windows 8 向けのWindowsストアアプリにも、一般的な Web アプリにも対応しています。

Windows 8 上の Visual Studio 2012 を使用します。

【短縮版】について

学習内容に自信のある方を対象に、コースの一部内容を省略して3日間に詰め込んだコースです。

学習項目

  • HTML5/CSS3/JavaScriptを使ったプログラムのロジック
  • 変数の定義と利用
  • ループと分岐
  • ユーザインターフェイスの開発
  • ユーザからの入力値の獲得と評価
  • データの保存
  • アプリケーションの設計手法

コース標準日数と受講料

5日間、225,000円 (税抜)

ただし【短縮版】は3日間、135,000円 (税抜)

対応MCP試験

70-480 HTML5 と JavaScript および CSS3 との組み合わせによるプログラミング

スケジュールとお申込

銀行振込をご希望の場合 sales@july.co.jp または TEL 03-6272-3234 にお問い合わせ下さい。
クレジットカードをご希望の方は PeaTiX からお願いします。

コース名 会場 申込期限 日程 時間 申込
480-C06 東京都千代田区飯田橋 6/16 10:00 2014/6/23(月)、6/24(火)、6/25(水)、6/26(木)、6/27(金) 10:00~16:00 PeaTiX
またはメール sales@july.co.jp
【短縮版】480S-C07 東京都千代田区飯田橋 7/7 10:00 2014/7/14(月)、7/15(火)、7/16(水) 10:00~16:00 PeaTiX
またはメール sales@july.co.jp

※ なお、この講座は マイクロソフトの SA トレーニング受講券 と、厚生労働省の「正規雇用労働者育成支援奨励金」ならびに「非正規雇用労働者育成支援奨励金」 にも対応しています。

受講対象者

  • Webアプリ開発(JavaScriptの基本も含む)の経験:1 – 3 ヶ月
  • Windowsアプリケーション開発の経験:1ヶ月程度
  • Visual Studio 2010または2012の利用の経験:1ヶ月程度

HTML5の開発で3ヶ月以上の経験を持つプログラマは対象にしていません。
開発の実務経験なしでこのコースに参加することを希望する学生は、前記の条件に注意して下さい。

このコースではプログラミングの基本も取り上げますので、5年以上の経験があるプログラマにとっては、コースの一部が退屈に感じるかもしれません。

前提条件

プログラミング言語を問わず、3ヶ月以上のプログラマとしての実務経験。
さらに下記に示す、HTML5 の基本的な知識を持っていること。

具体的な条件

(1)基本的なHTML文書構造の理解
  • 文字に対するHTMLタグの使い方
  • 画像に対するHTMLタグの使い方
  • HTML APIの使い方
(2)よく使うHTML要素とCSSの理解
  • レイアウトとコンテンツの分離
  • コンテンツフローの管理
  • 要素の位置の制御方法
  • CSSの実装方法
(3)JavaScriptの書き方
  • 変数の作成と利用
  • 変数を演算する方法
  • 変数を比較する方法
  • 論理演算子を利用する
  • if … else 文によるプログラムフローの制御
  • ループの実装
  • 簡単な関数を定義する

学習目標

このコースを修了すると、次のことを習得できます。

  • Visual Studio 2012により、Webアプリを作成し実行する
  • HTML5の新機能を理解し、HTML5ページを作成しデザインする
  • JavaScriptによりHTML5ページにインタラクティブな機能を追加する
  • 異なる入力タイプのHTML5フォームを作成し、HTML5の属性とJavaScriptコードによって入力値をチェックする
  • XMLHTTPRequestオブジェクトとjQuery の AJAX 処理を使って、外部データソースからデータを送受信する。
  • CSS3でHTML5ページの見栄えをデザインする
  • メンテナンスを容易とする、整頓されたJavaScriptコードを書く
  • インタラクティブなWebアプリで一般的なHTML5 APIを使う
  • オフライン操作できるWebアプリを開発
  • 多様なデバイスや条件に対応したHTML5のWebページを作成する
  • Canvas要素によりHTML5ページにSVGによる高度なグラフィックスを追加する
  • HTML5ページにアニメーションを追加してユーザ経験を向上させる
  • Webソケットにより、Webアプリとサーバでデータをやり取りする
  • Web Workerプロセスにより、Webアプリの処理時間が長時間にわたるときの応答性を向上させる
  • 対応MCP試験: このコースはMCP 70-480に対応しています。

学習内容の詳細

第1章:HTMLとCSSの概要

  • HTMLとCSSの概要およびVisual Studio 2012でWebアプリを作成する方法
  • レッスン
    • HTMLの概要
    • CSSの概要
    • Visual Studio 2012でWebアプリを作成する方法
  • Lab: Contosoカンファレンスアプリの概要
  • チュートリアル、テストと変更
  • 目標:次のことが説明できるようになる
    • HTML要素と属性の基本
    • CSSの構造
    • Visual Studio 2012のWebアプリ開発ツール

第2章:HTML5ページを作成し、スタイルシート使う

  • HTML5の新機能と、HTML5のスタイルシートの解説
  • レッスン
    • HTML5ページを作る
    • スタイルシートを作る
  • Lab:HTML5ページ、スタイルシート
  • 目標
    • HTML5の新機能を使った静的ページを作ることができる
    • CSS3を使った基本的なスタイルをHTML5要素に適用できる

第3章:JavaScriptの基本

  • JavaScript言語の基本と、HTML5ページでJavaScriptを使ってインタラクティブ性を追加する。
  • レッスン
    • JavaScript文法の概要
    • JavaScriptのHTML DOMプログラミング
    • jQueryの紹介
  • Lab:JavaScriptを使ったデータ表示とイベント処理
    • プログラムからデータを表示する
    • イベント処理
  • 目標
    • JavaScriptの文法を理解し、HTML5と一緒にJavaScriptを使う方法を説明できる
    • HTML DOMを操作し、イベント処理をするJavaScriptコードを書くことができる
    • 複数の汎用JavaScript APIを活用してコードを簡素化するための、jQueryの使い方を説明できる

第4章: フォームによるデータ収集と入力値チェック

  • HTML5の新しいinputタイプを解説し、JavaScriptコードとHTML5の新しい属性によりユーザからデータを収集してバリデートするフォームの作成方法。
  • レッスン
    • FormとInputタイプの概略
    • HTML5属性を使った入力値のバリデーション
    • JavaScriptによる入力値のバリデーション
  • Lab :HTML5属性と、JavaScriptを使ってフォームからの入力値をバリデートする
  • 目標
    • HTML5の新しいinputタイプでFormを作ることができる
    • HTML5の新しい属性によりフォームからの入力値をバリデートできる
    • HTML5の属性で対応できない場合はJavaScriptで入力値をバリデートできる

第5章:リモートデータソースとの交信

  • jQuery AJAX と XMLHTTPRequest オブジェクトによってリモートデータソースと交信することで、データの送受信を行う方法。
  • レッスン
    • jQuery AJAX、XMLHTTPRequestでデータを送受信する方法
    • リモートデータソースとの交信
    • データ取得
    • データのシリアライズと送信
    • jQuery AJAXによる方法
  • 目標
    • XMLHTTPRequestオブジェクトを使ってデータをシリアライズする、デシリアライズする、送信する、受信することができる
    • jQuery AJAXにより、データのシリアライズ、デシリアライズ、送信、受信のコードを簡素化する

第6章:CSS3によるHTML5のスタイリング

  • CSS3の新しい機能により、HTML5ページとその要素のスタイルを指定する方法。
  • レッスン
    • 文字スタイル
    • ブロック要素スタイル
    • CSS3セレクター
    • CSS3による高度なグラフィック効果
  • Lab :文字とブロック要素のCSS3スタイル
    • ナビゲーションバーのスタイル
    • ページヘッダのスタイル
    • Aboutページのスタイル
  • 目標
    • HTML5ページの文字要素をCSS3でスタイリングできる
    • ブロック要素にCSS3のスタイルを適用できる
    • Webアプリにおいて、CSS3セレクターによって要素を特定できる
    • 新しいCSS3プロパティを使って視覚効果や移動を実装できる

第7章:JavaScriptのオブジェクトとメソッド

  • JavaScriptコードを整頓されてメンテナンスしやすいものにする方法と、WebアプリにJavaScriptのオブジェクト指向を適用する方法。
  • レッスン
    • JavaScriptで整頓されたコードを書く
    • オブジェクトをカスタムする
    • オブジェクトを拡張する
  • Lab : メンテナンス性と拡張性を考慮したコード
    • 継承
    • オブジェクト指向で書き換える
  • 目標
    • メンテナンス性と拡張性に配慮したJavaScriptコードの重要性を説明できる
    • JavaScriptでカスタムオブジェクトを作成するときの、最適な方法を説明できる
    • 機能追加のためにオブジェクトを拡張する方法を解説できる

第8章:HTML5 APIを使ったインタラクティブなページ

  • HTML5 API によりインタラクティブな機能をWebアプリに追加する方法と、Webアプリのデバッグならびにプロファイリング手法
  • レッスン
    • ファイルの取り扱い
    • マルチメディアの組み込み
    • 位置とコンテキストに反応する
    • Webアプリのデバッグとプロファイリング
  • Lab:HTML5 APIでインタラクティブなページを作る
    • 動画を組み込む
    • 画像を組み込む
    • ジオロケーションAPIを使う
  • 目標
    • Webアプリでドラッグ&ドロップとFile APIを使った、ファイルの取り扱いができる
    • 音声や画像をWebアプリに組み込むことができる
    • ジオロケーションAPIにより、Webアプリを実行しているユーザの位置情報を取得できる
    • Web Timing APIとInternet Explorer Developer Toolsによる、デバッグおよびプロファイリングする方法を説明できる

第9章:Webアプリのオフラインサポート

  • ユーザのブラウザがネットワークに繋がっていないときでもWebアプリが使える、オフラインサポート機能を追加する方法
  • レッスン
    • ローカルデータの読み書き
    • アプリケーションキャッシュを使ったオフラインサポートを追加する
  • Lab :Webアプリにオフラインサポートを追加しよう
    • アプリケーションキャッシュの実装
    • ローカルストレージの実装
  • 目標
    • ローカルストレージAPIを使って、ユーザのPCにローカル保存し、読み込むことができる
    • アプリケーションキャッシュAPIを使って、Webアプリにオフラインサポートを提供できる

第10章:アダプティブ・ユーザインターフェイス(Adaptive User Interface)の実装

  • デバイスやフォームの状態を動的に検出し、それに適応するHTML5ページの作成方法
  • レッスン
    • 複数Formのサポート
    • アダプティブ・ユーザインターフェイスを作る
  • Lab : アダプティブ・ユーザインターフェイスの実装
    • 印刷に適したスタイルシートを作る
    • Formの状況に適した、アダプティブなページレイアウト
  • 目標
    • Webアプリにおいて異なるフォームファクターからデバイスの機能を特定し、それに応じた振る舞いをすることの必要性を説明できる
    • 異なるフォームファクターに適したレイアウトへと、動的に変化するWebページを作成できる

第11章:Canvas要素とSVGによる高度な画像

  • HTML5のWebアプリで、Canvas要素とScalable Vector Graphics(SVG)によって、より高度な画像を作成する方法
  • レッスン
    • SVGによるインタラクティブな画像
    • Canvasによる画像プログラム
  • Lab : 高度な画像の作成
    • SVGでインタラクティブな会場マップを作る
    • Canvas要素で講演者のバッジを作る
  • 目標
    • SVGにより、Webアプリにインタラクティブな画像を追加できる
    • HTML5のCanvas要素とJavaScriptにより、複雑な画像をつくることができる

第12章:ユーザインターフェイスのアニメーション

  • HTML5のWebアプリにアニメーションを追加することで、ユーザエクスペリエンスを向上させる方法
  • レッスン
    • CSSトランジションを適用
    • 要素を変形
    • CSSキーフレームアニメーションを適用
  • Lab : ユーザインターフェイス要素のアニメーション
    • ユーザインターフェイス要素にトランジションを適用
    • キーフレームアニメーションを適用
  • 目標
    • HTML5ページにCSSトランジションを適用し、トランジションの発生を検知するJavaScriptコードを書く
    • CSS3の2Dおよび3Dトランジションを理解する
    • CSSキーフレームとJavaScriptにより、複雑なアニメーションを実装する

第13章:Web Socketによるリアルタイム通信の実装

  • Web Socketにより、HTML5 Webアプリとサーバとの間でデータの送受信を行う方法
  • レッスン
    • Web Socketの紹介
    • Web Socketによるデータ送受信
  • Lab : Web Socketによるリアルタイム通信の実装
    • Web Socketからデータを受け取る
    • Web Socketにデータを送る
    • Web Socketに複数タイプのメッセージを送ったり受け取ったりする
  • 目標
    • Web Socketによって、データを送受信する方法を理解する
    • JavaScriptからWeb Socket APIを使ってWeb Socketサーバに接続してデータを送り、メッセージの送受信で発生する複数のイベントを取り扱う

第14章:Web Workerプロセス

  • Web Workerプロセスの利用法。HTML5 Webアプリで時間がかかる処理を非同期で実行することで、応答性を向上させます。
  • レッスン
    • Web Workerの紹介
    • Web Workerによる非同期処理の実装
  • Lab : Web Workerプロセスの作成
    • Web Workerを使った応答性の向上
  • 目標
    • Web Workerプロセスの目的と、非同期処理を行うということだけでなく、操作と処理の分離に利用できることを理解する
    • JavaScriptでWeb Worker APIを使ってWeb Workerプロセスの作成、実行、モニタリングを行う