HTML5テクニックバイブル

書籍の概要

この本の概要

テクニックバイブルシリーズの1冊です。HTML 5はWebクリエーターなどのWebデザインの分野で爆発的な人気となりました。しかし,HTML 5の本当の魅力は,Webアプリケーション開発にあります。たとえばクロスブラウザ対応というWebアプリケーション開発者を悩ませていた互換性の問題を解決できます。そこで,本書は,実際に利用する際に役立つ技を逆引きリファレンスとして活用できるテクニック集を企画します。

こんな方におすすめ

  • もっとプログラミングを勉強したいデザイナー
  • もっとデザインのことを勉強したいエンジニア
  • HTML5の全体像をさっと把握したいすべての人

著者の一言

HTML5は,Webアプリケーションのクライアントサイド開発における事実上の標準技術です。Webブラウザが使える環境であればどこでも動作するため,スマートフォンはもちろん,最近ではテレビなどでも利用できます。オープンな技術としてここまで広く普及したクライアントサイド技術は他にありません。

この事実だけでもHTML5を学ぶモチベーションとしては十分ですが,たとえばGoogle Glassを筆頭に,今後は次々と身近なものがAPIを備えたデバイスに拡張されていく未来が予想できます。これらのデバイス上で動くアプリの開発手段として,デバイス独自の技術ではなく,HTML5のような標準技術が選択される未来を筆者は期待しています。PCが主流であったWebアプリが今やスマホやテレビでも動作するように,既にWebアプリには様々なデバイス上での動作実績があります。

しかしながら,『HTML5』という単語が示す範囲は膨大です。筆者の経験上,クライアントサイドの開発では『実装自体の難しさ』よりも,『何ができるのかわからない』ためにかかるコストのほうが問題となります。そのため本書では,重要なトピックに絞って詳細に解説するよりも,HTML5の全貌を網羅的に紹介する方法を選択しています。

本書が読者にとって,HTML5の膨大なナレッジを整理して理解するための一助となれば幸いです。

著者プロフィール

浜辺将太(はまべしょうた)

学生時代にアリエル・ネットワーク株式会社でプログラミングを覚え,無理やりEmacsに改宗させられる。また株式会社グルコースで煩悩駆動開発に触れる。2009年にヤフー株式会社に入社し,家電向けサービスや動画系サービスの開発に携わる。最近では社内SNSを開発して全社に浸透させ,新生ヤフーの爆速化に貢献する。2013年7月よりJavaScript/HTML5の黒帯を拝命。

藤木裕介(ふじきゆうすけ)

2007年にヤフー株式会社にデザイナーとして入社し,その後エンジニアに転身。過去にスマートフォン版Yahoo! JAPANトップページなどの開発を担当。現在はカカオジャパンに所属し,スマートフォン向けWebアプリの開発や,iOS向けネイティブアプリの開発を担当。好きな言語はJavaScript, Objective-C, Ruby。

伊藤雄哉(いとうゆうや)

2009年にヤフー株式会社にエンジニアとして入社し,ID関連サービスの開発やTwitter・Facebook関連の案件を主に担当している。実は会社の業務とはあまり関係のないHTML5だが,以前から動向を追いかけている。ID厨。

鈴置菜津女(すずおきなつめ)

ヤフー株式会社にデザイナーとして入社。子ども向けサービスや代理店向け広告管理ツール,Yahoo!ニュース個人など幅広くサービス開発に携わり,多言語対応も多く経験する。現在はプロモーションのデザイン/アートディレクションに従事。プライベートではクリエイティブユニット「dot3(dot3.jp)」のメンバーとして活動。

鈴木健司(すずきけんじ)

多摩美術大学大学院(修士/情報デザイン領域)修了。ヤフー株式会社にデザイナーとして入社し,PIM系サービスのインタラクションデザイン,ビジュアルデザイン,FE開発を担当する。現在はスマートフォン向けアプリのディレクター。プライベートではクリエイティブユニット「dot3(dot3.jp)」のメンバーとして活動。

栗山太希(くりやまだいき)

2009年にヤフー株式会社にエンジニアとして入社し,広告関連システムのバックエンドの開発に携わる。その後サーバサイドJavaScriptに興味を持ち,社内イベントHackDayにてHTML5とNode.jsを活用したWebアプリケーションを開発。現在はそのアプリケーションの更新に加え,サーバサイドJavaScriptをサービス開発で利用する際のノウハウを社内に普及・啓蒙している。

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

実践的テクニック開発の決定版「HTML5テクニックバイブル」
本シリーズは実際に開発を行っているエンジニアにとって,効率よく開発できるよう逆引き形式でまとめたリファレンスです。

目次

Chapter01 HTML

  • 1-1 HTMLの記述量を削減する
  • 1-2 主要なコンテンツをマークアップする
  • 1-3 文書構造を明確にする
  • 1-4 文書の意味をより明確にする
  • 1-5 数値の占める割合を視覚的に表示する
  • 1-6 進行状況を視覚的に表示する
  • 1-7 関連するコンテンツを指定する
  • 1-8 検索結果の表示をリッチにする
  • 1-9 アクセシビリティを考慮してマークアップする

Chapter02 ユーザビリティ

  • 2-1 入力エリアにガイドテキストを表示する
  • 2-2 ポインタイベントを制御する
  • 2-3 ブラウザの専用入力UIを利用する
  • 2-4 入力フォームの必須項目を指定する
  • 2-5 リッチテキストエディタを作成する
  • 2-6 起動時にフォーカスする要素を指定する
  • 2-7 電話番号の発信リンクを制御する
  • 2-8 コンテキストメニューをカスタマイズする

Chapter03 マルチデバイス対応

  • 3-1 スマートデバイスにページを最適化する
  • 3-2 スマートデバイスに要素を最適化する
  • 3-3 長押しアクションを制御する
  • 3-4 解像度に適した画像を表示する
  • 3-5 レスポンシブデザインを実装する
  • 3-6 定型的なレスポンシブデザインを実装する
  • 3-7 スクロールに合わせてコンテンツを変化させる
  • 3-8 CSSを簡単に記述する①
  • 3-9 CSSを簡単に記述する②
  • 3-10 クロスブラウザ対応のCSS3を簡単に記述する

Chapter04 レイアウト

  • 4-1 テキストを段組で表示する
  • 4-2 テキストの組み方向を指定する
  • 4-3 デバイスの画面サイズに応じてレイアウトを出し分ける
  • 4-4 リキッドレイアウトを簡単に実装する
  • 4-5 フレックスボックスをカスタマイズする
  • 4-6 スタイルの適用対象を絞る
  • 4-7 空の要素を指定する
  • 4-8 CSSで簡単な計算式を使う
  • 4-9 雑誌のようなレイアウトを表現する

Chapter05 デコレーション

  • 5-1 透明度を含む色指定をする
  • 5-2 画像を使わずにボタンを作成する
  • 5-3 押し心地のいいボタンを作成する
  • 5-4 CSSだけで袋文字を作成する
  • 5-5 グラデーションテキストを作成する
  • 5-6 あふれたテキストを処理する
  • 5-7 背景画像を拡大縮小する
  • 5-8 複数の背景画像を指定する
  • 5-9 要素を画像として扱う
  • 5-10 Webフォントを利用する
  • 5-11 OpenTypeの機能を利用する

Chapter06 グラフィック

  • 6-1 要素を変形する
  • 6-2 要素を細かく変形する
  • 6-3 要素にマスクをかける
  • 6-4 要素にフィルタ効果をかける
  • 6-5 2Dグラフィックを描画する
  • 6-6 3Dグラフィックを描画する
  • 6-7 3Dグラフィックを簡単に描画する
  • 6-8 棒グラフをCSSで描く
  • 6-9 折れ線グラフを描く
  • 6-10 3Dグラフを描く

Chapter07 アニメーション

  • 7-1 CSSだけでアニメーションを実装する
  • 7-2 CSSだけでアニメーションを実装する(transitionプロパティ)
  • 7-3 CSSだけでアニメーションを実装する(animationプロパティ)
  • 7-4 CSSアニメーションのイージングを実装する
  • 7-5 要素の変形とアニメーションを組み合わせる
  • 7-6 CSSアニメーションをJavaScriptで制御する
  • 7-7 JavaScriptアニメーションを最適化する
  • 7-8 複数のアニメーションを連携して一括管理する

Chapter08 ECMAScript 5

  • 8-1 古いブラウザで新しい機能を使う
  • 8-2 JavaScriptオブジェクトとJSON文字列を相互に変換する
  • 8-3 配列の操作を便利にする
  • 8-4 プロパティの挙動を細かく設定する
  • 8-5 プロパティにアクセサを設定する
  • 8-6 オブジェクトの編集権限を一括で制限する
  • 8-7 関数のthisや引数を固定する
  • 8-8 strictモードを利用する

Chapter09 DOM API

  • 9-1 CSSセレクタでDOM要素を取得する
  • 9-2 DOM要素のクラス操作を簡単に記述する
  • 9-3 DOM要素に任意のデータを格納する
  • 9-4 テキストの入力イベントを捕捉する
  • 9-5 DOMの更新を簡単に監視する
  • 9-6 DOMの更新を効率良く監視する
  • 9-7 ドラッグ&ドロップ関連APIを活用する
  • 9-8 ページの表示状態を参照する

Chapter10 デバイスAPI

  • 10-1 現在位置を取得して地図に表示する
  • 10-2 現在地を取得し続けながら地図を更新する
  • 10-3 センサーを使って端末の傾きを検出する
  • 10-4 タッチイベントを使ってユーザ体験を向上する
  • 10-5 ジェスチャーを簡単に検知する
  • 10-6 ネットワークの接続状態を調べる
  • 10-7 ネットワークの種類でコンテンツを出し分ける
  • 10-8 ブラウザ画面をフルスクリーンで表示する
  • 10-9 カメラを呼び出して画像を取得する
  • 10-10 バイブレーションを制御する
  • 10-11 バッテリー状況をハードウェアから取得する

Chapter11 マルチメディアAPI

  • 11-1 音声を再生する
  • 11-2 動画を再生する
  • 11-3 動画と音声を操作する
  • 11-4 画像や動画を加工する
  • 11-5 音声を合成する
  • 11-6 複数の音声を合成してコンプレッサーをかける
  • 11-7 音声入力を利用する
  • 11-8 カメラの映像を取得する
  • 11-9 リアルタイムに映像を処理する
  • 11-10 リアルタイムに任意のデータを交換する

Chapter12 パフォーマンス

  • 12-1 JavaScriptファイルを非同期に読み込む
  • 12-2 重い処理をバックグラウンドで実行する
  • 12-3 1つのリソースを複数のページで共有する
  • 12-4 オフラインアプリケーションを作成する
  • 12-5 ブラウザのパフォーマンス情報を参照する
  • 12-6 ページ読み込み時のパフォーマンス情報を参照する
  • 12-7 非同期処理のパフォーマンスを改善する
  • 12-8 jQueryの互換ライブラリでパフォーマンスを改善する
  • 12-9 JavaScriptやCSSを圧縮して転送量を削減する
  • 12-10 CSSスプライトを簡単に生成する

Chapter13 データ連携

  • 13-1 バイナリデータを扱う
  • 13-2 バイナリデータを文字列として扱う
  • 13-3 Data URLを利用する
  • 13-4 Blob URLを作成する
  • 13-5 クロスオリジンのページ間でデータを送受信する
  • 13-6 iframe内で表示できるコンテンツを制限する
  • 13-7 iframeを親ページの一部のように表示する
  • 13-8 ブラウザのURLや履歴を管理する
  • 13-9 デスクトップ通知を表示する
  • 13-10 デスクトップ通知をアップデートする
  • 13-11 クリップボードにアクセスする

Chapter14 クライアントストレージ

  • 14-1 ページをまたいでデータを保持する
  • 14-2 永続的なデータをブラウザに保存する
  • 14-3 ローカルストレージの更新を検知する
  • 14-4 ブラウザでデータベースを利用する
  • 14-5 ドラッグ&ドロップでファイルを読み込む
  • 14-6 ドラッグ&ドロップでファイルをダウンロードする
  • 14-7 クリックでファイルをダウンロードする
  • 14-8 ローカルファイルシステムを利用する
  • 14-9 ファイルを操作する
  • 14-10 ディレクトリを操作する

Chapter15 ネットワーク

  • 15-1 データの読み込み状況を取得する
  • 15-2 HTTPリクエストでバイナリデータを取得する
  • 15-3 クロスオリジンのHTTPリクエストを送信する
  • 15-4 複雑なクロスオリジンリクエストを行う
  • 15-5 Cookie送信を伴うクロスオリジンのリクエストを行う
  • 15-6 WebSocketを利用する
  • 15-7 Socket.IOを利用する
  • 15-8 Server-Sent Eventsを利用する
  • 15-9 XSSなどの攻撃を軽減する①
  • 15-10 XSSなどの攻撃を軽減する②