ポケットリファレンスシリーズHTML5開発ポケットリファレンス

[表紙]HTML5開発ポケットリファレンス

四六判/448ページ

定価(本体2,580円+税)

ISBN 978-4-7741-5067-3

→学校・法人一括購入ご検討の皆様へ

書籍の概要

この本の概要

ロングセラーシリーズ・ポケットリファレンスに次世代のWeb標準技術であるHTML5が新登場。フォーム機能,Canvasなどのメディア機能,Webアプリケーション開発のためのAPIの中から重要なものを厳選。

「逆引き形式で目的からすぐ探せる」
「サンプルコードを見ながら具体的な実装のイメージがつかめる」

という特徴で,困ったときにすぐに役立ちます。

Internet Explorer,Firefox,Chrome,Safari,Operaの各ブラウザ,そしてiPhone/Androidでの対応状況も明記。『JavaScript本格入門』をはじめ数多くの著書で定評ある山田祥寛氏の監修の,現場で役立つ1冊です。

こんな方におすすめ

  • Webプログラマ
  • スマートフォンアプリ開発者
  • Webデザイナー

著者の一言

HTML5という言葉がプログラマーやデザイナーの間で使われるようになって,2年ほど経とうとしています。今やインターネットに関係するすべての職業の方にとってHTML5は知っておくべき知識の一部として広まりつつあります。それだけではなく,インターネットにアクセスできる最も身近で高機能な端末であるスマートフォンのユーザーにとっても,Webを利用するためにはなくてはならない技術となりつつあります。HTML5の仕様が発表されて以降,当初では思いもつかなかった仕様が次々と加わり,手を変え品を変えWebを便利に,高機能に利用するための技術が日々進化しています。

本書では,HTML5のフォーム機能,メディア機能およびWebアプリケーション開発のためのAPIの標準的な機能について解説しています。とはいえ,API自体の仕様も細かく,組み合わせや派生した機能まで含めると,とても1冊の本ではカバーできません。そのため本書では各APIの基本的な機能を抑えつつ,1つ1つのメソッドやオブジェクトを解説し,できるだけ開発や制作の現場で利用できるサンプルを掲載しました。本書がHTML5を利用した開発や制作,ディレクションにおいて皆様のお役に立てることができれば,これ以上の喜びはありません。

この書籍に関連する記事があります!

はたしてポケットに入るのか? 次世代Web標準技術・HTML5が定番のポケットリファレンスシリーズに新登場!
HTML5という単語を耳にすることが増えてきているのではないでしょうか。そもそもHTML5は,これまでのHTMLと何が違うのでしょうか?

目次

CHAPTER 1 HTML5とは

概要

本書で扱う内容

CHAPTER 2 フォーム入力

概要

フォームコントロール

  • 電話番号/メールアドレス/URLの入力欄を作成する
  • 数値の入力欄を作成する
  • 日付の入力欄を作成する
  • 月/週の入力欄を作成する
  • 時間の入力欄を作成する
  • スライダーを作成する
  • 色の入力欄を作成する
  • 検索用の入力欄を作成する

入力補助

  • オートコンプリート機能を有効にする
  • 入力欄に自動でフォーカスする
  • 入力欄に入力候補を提示する
  • 複数の値を入力する
  • 入力の最大値/最小値を指定する
  • 入力の増減幅を指定する
  • 入力のヒントを表示する

入力チェック

  • 必須入力をチェックする
  • 入力パターンを指定する
  • 検証機能を無効化する

入力チェック(JavaScript)

  • バリデーションの状態を取得する
  • 入力された文字列をチェックする
  • 入力された数値をチェックする
  • 任意のエラーメッセージを指定する
  • 要素の全てのバリデーションをチェックする
  • 明示的に要素のバリデーションをチェックする

入力内容の表示

  • 入力処理の結果を表示する
  • 作業の進捗状態を表示する
  • 数量や割合をゲージで表示する

CHAPTER 3 メディアの取り扱い

概要

メディア要素 (共通)

  • メディアファイルを再生する
  • メディアファイルの再生状況を指定する
  • 複数のメディアファイルを指定する

動画ファイルの再生

  • 再生画面のサイズを指定する
  • 再生待ちの画像を指定する

JavaScriptからの操作

  • メディア要素が利用できるか判断する
  • メディア要素を操作するAudio/Videoオブジェクトを生成する
  • メディアファイルが再生できるか判断する
  • メディアファイルの読み込み状況を検出する
  • メディアファイルを再生/停止する
  • メディアファイルの情報を取得する
  • ファイルのバッファ済み/再生済み/シーク可能な時間を取得する
  • 音量や再生速度を変更する
  • メディアファイル再生前のエラーを検出する
  • メディアファイル再生後の状態の変化を検出する
  • メディアファイル再生時の処理をカスタマイズする
  • ユーザーの操作に応じた処理を指定する
  • フルスクリーンで再生する
  • 動画を加工して表示する

Audio Data API

  • 音声ファイルの情報を取得する
  • 簡易的なシンセサイザーを表示する
  • 音を生成/出力する

CHAPTER 4 Canvas API

概要

Canvas APIの基本

  • Canvas APIが利用できるか判断する
  • 描画領域を指定する

線の描画

  • 直線を描画する
  • 曲線を描画する
  • 線のスタイルを指定する
  • 角の形状を指定する

図形の描画

  • 多角形を描画/塗りつぶす
  • 矩形を描画する
  • 円を描画する
  • グラデーションを描画する

文字の描画

  • 文字を描画する
  • 文字のフォントや基準位置を指定する
  • 文字のベースラインを指定する
  • 描画した文字の幅を取得する
  • 文字や図形に影をつける

画像の表示

  • 画像を表示する
  • 画像を切り出して表示する
  • 画像を繰り返し表示する

描画状態の操作

  • キャンバスの状態を保存/復元する
  • 画像の特定範囲だけを描画する
  • 画像を変形して表示する
  • 描画モードを指定する
  • ピクセルを操作する

描画状態の操作

  • マウスの座標を取得して描画する
  • 描画内容をコピー/保存する

CHAPTER 5 ドラッグ&ドロップAPI

概要

ドラッグ/ドロップ

  • ページ内の要素をドラッグ可能にする
  • ドラッグ/ドロップ時の処理を指定する
  • ドロップ先の要素にデータを渡す
  • ドロップ先の要素にフォーマットを指定してデータを渡す
  • ドラッグ&ドロップで受け渡しするデータを削除する
  • 他のアプリケーションからのデータを渡す

ドラッグ動作のカスタマイズ

  • ドラッグ時のマウスポインタの形状を変更する
  • ドラッグ中のアイコンに画像を指定する
  • ドラッグ中のアイコンに画像以外の情報を指定する

CHAPTER 6 File API

概要

File API

  • File APIが利用できるか判断する
  • ファイルの名前/種類/サイズを取得する
  • テキストファイルを読み取る
  • ファイル読み取り時の処理を指定する
  • ファイル読み込み時のエラー処理を指定する
  • ファイル読み込みの進捗状況を表示する
  • 画像/映像/音声ファイルを読み取る
  • バイナリデータを読み取る
  • ファイルのURIを生成する
  • ファイルの読み込みを中止する
  • ファイル関連の同期APIを利用する

File API:Writer/File API:Directories and System

  • Blobデータを構築する
  • Blobデータを追加/取得する
  • ファイルシステムを開く
  • ファイルシステムの情報を取得する
  • ファイルシステム利用時のエラー処理を指定する
  • ファイルを生成する
  • ディレクトリを生成する
  • ファイルへ書き込む
  • ファイルへ追記する
  • ファイルの情報を取得する
  • ディレクトリ内のファイルを取得する
  • URLを指定してエントリを取得する
  • エントリを削除する
  • エントリをコピー/移動する
  • File API:Writer/File API:Directories and Systemの非同期APIを利用する

CHAPTER 7 Geolocation API

概要

Geolocation APIの基本

  • Geolocation APIが利用できるか判断する

現在位置の取得

  • 現在の位置情報を取得する
  • 位置取得時のエラーを検出する

現在位置の定期取得

  • 連続して位置情報を取得する
  • 連続した位置情報の取得を停止する

CHAPTER 8 オフラインWebアプリケーション

概要

  • ファイルのキャッシュ
  • オンライン/オフラインを判断する
  • キャッシュマニフェストを指定する
  • コンテンツをキャッシュする
  • キャッシュしないリソースを指定する
  • オフラインで表示できないリソースの代替リソースを定義する

JavaScriptからの制御

  • オフラインWebアプリケーションが利用できるか判断する
  • キャッシュを更新する
  • キャッシュ更新中の処理を指定する

CHAPTER 9 Web Storage

概要

Web Storageの基本

  • Web Storageが利用できるか判断する

データの読み書き

  • Web Storageにデータを保存する
  • Web Storageに保存したデータを参照する
  • Web Storageの特定のデータを削除する
  • Web Storageのデータを全て削除する
  • Web Storageに保存されているデータの数を取得する
  • Web Storageのn番目のキーを取得する
  • Web Storageへのデータの登録/更新/削除の際の処理を指定する

CHAPTER 10 Web Database

概要

Indexed Database API

  • Indexed Database APIが利用できるか判断する
  • データベースを利用する
  • オブジェクトストアを作成/削除する
  • データを保存する
  • トランザクションを利用する
  • データを更新する
  • キーを指定してデータを取得する
  • データベース利用時のエラー処理を指定する
  • データを削除する
  • 複数のデータを取得する
  • 範囲を指定してデータを取得する
  • インデックスを作成/削除する
  • インデックスを使ってデータを取得する
  • Indexed Databaseの同期APIを利用する

Web SQL Database

  • Web SQL Databaseが利用できるか判断する
  • データベースをオープンする
  • トランザクションを開始する
  • 結果セットを返さないSQLを実行する
  • 結果セットを返すSQLを実行する

CHAPTER 11 クロスドキュメントメッセージング

概要

メッセージの送受信

  • メッセージの送受信が利用できるか判断する
  • メッセージを送信する
  • メッセージを受信/参照する

CHAPTER 12 XMLHTTPRequest Level2

概要

通信の基本

  • クロスドメイン通信を許可する
  • XMLHTTPRequest Level2が利用できるか判断する
  • サーバーにリクエストを送信する
  • 通信のタイムアウト時間を設定する
  • リダイレクトの可否を設定する
  • バイナリデータを送信する
  • XMLデータを送信する
  • フォームの形式でデータを送信する
  • サーバーからデータを受信する
  • Blob型のレスポンスが受信できるか判断する
  • 受信するデータのMIMEタイプを指定する

通信の制御

  • 通信の状態を参照する
  • 通信時の処理を指定する
  • 通信時のエラー/例外処理を指定する
  • データ送信時の進捗状況を取得する
  • リクエストヘッダを指定する
  • レスポンスヘッダを取得する
  • 通信を中断する

CHAPTER 13 WebSocket

概要

双方向通信の基本

  • 双方向通信が利用できるか判断する
  • WebSocketサーバーへの接続を確立する
  • 接続状態を確認する
  • メッセージの送信/切断を行う
  • 送信データのサイズを確認する
  • データを受信する

双方向通信の制御

  • 通信の接続時/切断時/エラー時の処理を指定する
  • オブジェクトを共有する
    • CHAPTER 14 Web Workers

      概要

      バックグラウンドでの処理

      • ワーカーが利用できるか判断する
      • ワーカーを作成する/メッセージを送信する
      • メッセージを受信する
      • ワーカーを終了する
      • ワーカーのエラーを検出する
      • ワーカー内の環境情報を取得する
      • ワーカー内で別ファイルのJavaScriptを利用する
      • 複数のワーカーを利用する
      • 共有ワーカーを利用する

      他のAPIとの連携

      • ワーカーからFile APIを利用する
      • ワーカーからWeb Socketを利用する
      • ワーカーからXMLHttpRequest Level2を利用する

      CHAPTER 15 テキストの扱い

      概要

      Text Editing API

      • 要素を編集可能にする
      • 要素の編集の可否を設定する
      • ページ全体を編集可能にする
      • 編集コマンドが利用できるか判断する
      • 編集コマンドを実行する
      • 選択したテキストを取得する

      Text Selection API

      • テキストの選択状態を取得する
      • キャレットの位置を指定する
      • テキストの選択範囲の詳細を取得する
      • テキストの選択範囲を指定する
      • テキストの選択範囲を削除する
      • テキストの選択範囲を生成/セット/解除する
      • 複数のテキストの選択範囲を扱う

      Selectors API

      • CSSセレクタにマッチした要素を取得する
      • 要素がCSSセレクタにマッチしているか判断する

      CHAPTER 16 スマートフォン向けの機能

      概要

      スマートフォン開発の基本

      • Webサイトの表示サイズを調整する
      • アニメーション効果を実装する

      端末の向きに応じた処理

      • 端末の向きに応じた処理が利用できるか判断する
      • 端末の向きの変化を利用する
      • 方位/精度を取得する
      • 端末が横向き/縦向きになった際の処理を指定する

      センサーの値

      • 端末のセンサーの値が利用できるか判断する
      • 端末のセンサーの値を利用する
      • ジャイロセンサーの値を利用する

      マルチタッチディスプレイ

      • 画面にタッチした際の処理を指定する
      • 複数のタッチに対する処理を指定する
      • ジェスチャーの際の処理を指定する

      付録

      ブラウザーで利用できる開発ツール

      Google Maps API簡易リファレンス

      jQuery Mobile簡易リファレンス

      Column目次

      フルスクリーンAPI

      音声データを扱うAPI

      IE8以前でのCanvasの利用

      保存/復元の機能を利用してパターンを作成する

      clipメソッド利用時の注意点

      HTML5のAPIの具体的な利用イメージをつかむために

      Geolocation APIを利用した Webアプリケーションの開発

      キャッシュマニフェストが効いているか確かめる方法

      オフライン WebアプリケーションとlocalStorage

      HTML5での開発とJavaScriptの知識

      Indexed Database APIの利用について

      手軽にWebSocketを利用できるPusher

      カメラの映像をWebSocketで配信する

      要素の編集

      designModeプロパティを利用したエディタの作成

      選択した部分をハイライトさせる

      古い IEでの選択範囲

      スマートフォン向けサイトで使うべきでない技術

      iOSでのJavaScriptのデバッグ

      Chrome for Android

著者プロフィール

片渕彼富(かたふちかのとみ)

WINGS プロジェクト 執筆コミュニティ「WINGS プロジェクト」所属のライター。旅行,EC,アイドル関係のコンテンツ会社勤務後,フリーへ。現在は株式会社メディカルアプリ取締役としてスマートフォン,タブレット関連事業に邁進中。主な著書に「HTML5基礎」(毎日コミュニケーションズ ),「Flash CS5.5で学ぶ iPhone実践プログラミング」(ソシム)。


山田祥寛(やまだよしひろ)

千葉県鎌ヶ谷市在住のフリーライター。Microsoft MVPfor ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。書籍執筆を中心に,雑誌/ サイト記事,取材,講演までを手がける多忙な毎日。最近の活動内容は公式サイトを参照。