Awesome HTML5

HTML5を扱う資料や関連プロジェクトをまとめたAwesomeリストです。

目次

• 記事と標準
• マルチメディア機能
  • Audio
  • メディアキャプチャ
  • ピクチャーインピクチャー
  • 音声合成
  • 音声認識
  • 仮想現実 (VR)
  • ウェブアニメーション
• 要素
  • Canvas
  • Head
  • セクショニング
  • メディア要素
  • フォーム
  • Time
  • WebVTT
  • HTML Imports
• 開発 API
  • Permissions
  • Geolocation
  • 暗号化
  • File
  • フレームタイミング
  • requestIdleCallback
  • requestAnimationFrame
  • ウェブ決済
• セマンティクス
• アクセシビリティ
• DOM 管理
  • Shadow DOM
  • データバインディング
  • Web Components
• プログレッシブウェブアプリ
  • Service Workers
  • オフラインキャッシュ
  • プッシュ通知
• クライアントサイドストレージ
• パフォーマンス
• モバイル
• 通信と相互運用性
  • Web Sockets
  • WebRTC
• Web Workers
• WebGL
• ブラウザー互換性
• 書籍
• ゲーム開発
• ブートキャンプ
• 動画と基調講演
• ウェブサイトとリソース
  • Websites
  • 週刊ニュース
  • Twitter
• 貢献方法

記事と標準

• HTML 5.3 - 現在の HTML5 仕様
• プログレッシブエンハンスメント
• 拡張可能なウェブのマニフェスト
• W3C による HTML5 と HTML4 の違い

マルチメディア機能

Audio

• Web Audio API 入門
• MDN の Web Audio API
• HTML5 でギターチューナーを作る
• Web Audio API・React によるオーディオ可視化

メディアキャプチャ

• HTML5 でオーディオ・動画をキャプチャする
• メディアキャプチャ API の使用

ピクチャーインピクチャー

• Chrome の新しい Picture in Picture API

音声合成

• HTML5 Speech Synthesis API 入門
• もう一つの役立つ入門

音声認識

• Web Speech API デモ
• Web Speech API の使用
• Web Speech API を試す
• 無料音声認識ライブラリ (annyang)

仮想現実

• Firefox Reality が利用可能に

ウェブアニメーション

• ウェブアニメーション入門
• Web Animations API を使うべきとき

要素

Canvas

• W3 Schools の簡潔な説明
• MDN のチュートリアル
• 各種チュートリアル
• チートシート

Head

• ページの HEAD 要素に入るものの一覧

セクショニング

• HTML5 セクショニング要素の使い方

メディア要素

• 音声と動画
  • audio tag from W3Schools
  • video tag from W3 Schools
  • Tutorial from MDN
  • Capturing audio and video in HTML5
• embed タグ
  • Brief description from W3 Schools
• source タグ
  • Brief description from W3 Schools
• track タグ
  • Brief description from W3 Schools

フォーム

• MDN による HTML5 のフォーム変更
• HTML フォーム

Details

• Details・Summary 要素の使い方
• Details 要素 polyfill

Time

• Time 要素ガイド

WebVTT

• W3C の最初の草案

HTML Imports

• HTML import 入門

開発 API

権限

• Google によるウェブ向け Permissions API

Geolocation

• Geolocation の使用
• HTML5 アプリ: Geolocation による位置特定

暗号化

• Web Cryptography API 草案
• ウェブ暗号化サポート表
• Window.crypto
• W3C による暗号化の次のステップ

ファイル

• ウェブアプリケーションからファイルを使う（MDN）
• JavaScript でローカルファイルを読む
• File API 草案
• File System API

フレームタイミング

• Google developers の動画
• W3C の草案

requestIdleCallback

• Google developers の記事

requestAnimationFrame

• requestAnimationFrame の使用（CSS Tricks）
• Paul Irish による優れた記事

ウェブ決済

• Web payments API の概要

セマンティクス

• W3Schools のセマンティック要素
• MDN 文書の HTML5 セクションとアウトライン
• Smashing Magazine の HTML5 セマンティクス
• W3C・Opera のあまり知られていないセマンティック要素

アクセシビリティ

• Google fundamentals によるアクセシビリティの優れた入門
• ウェブ開発者向けアクセシビリティチェックリスト
• MDN の ARIA
• 優れたアクセシビリティスタイルガイド
• 認知的差異のためのデザイン
• HTML 要素のスクリーンリーダー対応に関するガイド
• ウェブサイト向けアクセシビリティテストツール上位 25
• W3 のウェブアクセシビリティ評価ツール一覧
• Pa11y — 自動アクセシビリティテスト
• HTML の ARIA
• アクセシブルでレスポンシブな HTML5 動画プレーヤー

DOM 管理

Shadow DOM

• Shadow DOM v1: 自己完結型ウェブコンポーネント
• Shadow DOM v1 の新機能（例による解説）

データバインディング

• Object.observe() によるデータバインディング革命

Web Components

• Custom elements v1: 再利用可能なウェブコンポーネント
• ウェブコンポーネントの力
• Polymer プロジェクト
• Polymer のクイック入門
• Polymer・ES6 クラスを使ったウェブコンポーネントの構築
• Web Components の神話を解く
• HTML import
• Yeoman・Polymer を使うウェブアプリ構築

プログレッシブウェブアプリ

• PWA 入門
• プログレッシブウェブアプリケーションの包括的ガイド
• プログレッシブウェブアプリのビジネスケース

Service Workers

• Service Worker の基礎
• ServiceWorkies — ゲームで SW を学ぶ
• Service Worker Cookbook
• Service Worker によるオフラインコンテンツ
• Service Worker の作成: ケーススタディ（Smashing Magazine）
• Service Worker の解説
• Service Worker ライブラリ、ツール活用のヒント
• ServiceWorker: ウェブプラットフォームの革命

オフラインキャッシュ

• Offline Cookbook
• 即時ロードのオフラインファースト（Progressive Web App Summit 2016）
• プログレッシブウェブアプリのオフラインストレージ（Addy Osmani の記事）
• Application Cache 利用の初心者向けガイド

プッシュ通知

• Web Push Notifications（Google の Web fundamentals）
• Push API W3C 草案
• Notifications API 仕様

クライアントサイドストレージ

• クライアントサイドストレージ
• Offline Cookbook
• IndexedDB 入門
• 実世界のオフラインデータストレージ
• ローカルストレージチュートリアル

パフォーマンス

• Accelerated Mobile Pages (AMP)
• Google developers のベストプラクティス
• Google Web Fundamentals によるパフォーマンス最適化
• Resource hints 草案（preconnect・preload）
• プリフェッチと事前レンダリング
• 画像圧縮
• テキスト圧縮
• Resource timing 仕様

モバイル

• Web App Manifest（Google の fundamentals）
• ウェブアプリケーションのフィールドガイド
• Apache Cordova チュートリアル
• PhoneGap をゼロから学ぶ
• モバイルウェブアプリのベストプラクティス
• Kendo UI でモバイルアプリを構築
• HTML5 Vibration API
• HTML5 Battery Status API
• HTML5 Battery Status API のプライバシー分析
• HTML5 Network Information API
• Sencha Touch チュートリアル

通信と相互運用性

Web Sockets

• WebSocket の紹介
• HTML5 WebSocket について
• HTML5 Web Sockets API

WebRTC

• WebRTC とは何か、どのように動作するか
• WebRTC を簡単にする
• WebRTC データチャネルチュートリアル
• MDN の WebRTC データチャネル

Web Workers

• Web Worker の基礎
• Web Worker はどれほど高速か？
• MDN の Web Workers
• Web Workers 入門

WebGL

• WebGL の基礎

ブラウザー互換性

• 使いたい
• Can I use…
• W3C 品質ツール
• HTML5 テスト
• HTML5 デモ

書籍

• Dive Into HTML5
• HTML5: Up and Running
• HTML5 Filesystem API を使う
• HTML5 ゲーム開発の洞察
• Web Design Playground: HTML & CSS をインタラクティブに学ぶ

ゲーム開発

• Mozilla Hacks による HTML5 ゲーム開発入門
• Mozilla による HTML5 ゲーム開発動画シリーズ
• 情報、ニュース、チュートリアル
• HTML5 ゲーム開発の 380 超リソース
• オープンソース JavaScript ゲームエンジン
  • Pixi.js
  • Phaser
  • MelonJS
  • Kiwi.js
  • Crafty
  • PhysicsJS
  • Stage.js
  • Cocos2d

ブートキャンプ

*オンラインで無料のコーディング学習 *無料オンラインコース

動画と基調講演

• HTML5 Developer Conference
• Polymer: 宣言的、カプセル化、再利用可能なコンポーネント
• モバイルウェブを高速・高機能・美しくする
• Dart: 今日の未来の HTML！

ウェブサイトとリソース

ウェブサイト

• HTML 公式リファレンス（wiki のようにコンテンツを共同編集可能）
• HTML5 Rocks（ニュース、チュートリアル、更新情報）
• HTML5 Gallery（HTML5 マークアップ・API を使うサイトのショーケース）
• MDN の HTML5 開発ガイド
• 2014 年 6 月の W3C ハイライト
• HTML5 Please（HTML5 機能を使用可能になる時期を知る）
• Keen HTML（HTML を学ぶ無料インタラクティブレッスン）
• Table 要素の完全ガイド

週刊ニュース

• HTML5 Weekly
• Mozilla Hacks 週刊記事
• Responsive Design ニュースレター

Twitter

• @html5
• @html5rock
• @html5gallery
• @html5doctor
• @GameDevHTML5
• @mozhacks
• @googlechrome

その他の Awesome リスト

• awesome-awesomeness
• lists
• コミュニティがキュレーションしたリソース

貢献方法

貢献はいつでも歓迎します！