「Flashクリエータの為のHTML5入門勉強会」メモ

「Flashクリエータの為のHTML5入門勉強会」というのを思いついたのでメモ。

HTML5ってなに？

• ウェブアプリケーションの為のHTML
  • 今までのHTMLは文章を共有するのが主目的
  • AjaxやWeb2.0の登場でウェブがアプリケーションになってきた
  • ウェブアプリを開発しやすいように新しく仕様を作り直したのがHTML5
• HTMLなので…
  • プレーンテキスト
  • ウェブ標準
    • プラグインが必要ない
    • iPhone, iPadでも動く！
  • 情報が構造化できる
    • 表現と構造の分離
    • 検索に強い
    • アクセシビリティも高い
• 対応ブラウザ
  • FireFox
  • Safari
  • Chrome
  • Opera
  • ( IE9 )

なにができるのか？

• canvas
  • 動的に画像を生成／編集ができる
• video/audio
  • プラグイン無しで、動画と音声の再生／制御が可能
• 改良されたフォーム
  • 日付入力（カレンダー）
  • 数値入力フィールド
  • スライダー
  • バリデーション
  • オートコンプリート
• ドラッグ&ドロップ

HTML5関連技術

上記で説明したものは狭義のHTML5。世間でHTML5と言われているものは下記のようなものも含む場合もある。

• CSS3
  • CSSの最新バージョン
  • グラデーション
  • ドロップシャドウ
  • 角丸
  • 変形
    • 移動
    • 回転
    • 拡大縮小
    • ゆがみ
  • アニメーション
  • ウェブフォント
• SVG
  • ベクラーグラフィックスがブラウザ上で利用可能
  • SVGフォント
  • SVGアニメーション
• JavaScript
  • 動的にHTMLの要素やCSSのプロパティを操作できる

Flashからの乗り換え案内

• FLV (動画)
  • videoタグ
• Sprite, Graphics (ベクターブラフィック)
  • SVG
• MovieClip (アニメーション)
  • CSS3アニメーション
  • SVGアニメーション
• ActionScript
  • JavaScript
• BitMap (ピクセル画像の操作)
  • canvas

まだ乗り換えられなさそうなもの

• 3D
  • canvasの3D版であるWebGLが現在策定中
• ウェブカメラなどの外部デバイスとのやり取り
  • HTML Device が現在策定中

HTML5チュートリアル

• HTML5
  • 基礎
  • video要素
    • 使用できるコンテナとコーデックがブラウザ毎に異なるので注意
      • WebMで統一される？？
• CSS3
  • グラデーション
  • ドロップシャドウ
  • 角丸
  • 変形
    • 移動
    • 回転
    • 拡大縮小
    • ゆがみ
  • アニメーション
  • ウェブフォント
• SVG
  • テキストエディタで直接書く
  • Illustratorから書き出し
    • 画像の埋め込み
    • SVGフォント
  • HTMLへの埋め込み方法
    • svg要素(Firefoxでhtml5を有効にすれば可能)
    • object
    • img
  • CSS3で変形もできる
• JavaScript
  • ActionScriptとは親戚関係
    • クラスが存在しない
      • プロトタイプ型のオブジェクト指向言語
  • HTMLへの適用方法
    • script要素
  • DOM
    • HTMLの要素を操作
    • document.getElementById()
    • document.createElement()
    • appendChild()
    • イベント（インタラクティブに）
      • addEventListener()
  • JavaScriptを使ったアニメーション
    • CSS3との連携
    • setInterval() を利用したアニメーション
      • Event.ENTER_FRAME の代わりに setInterval() を使用
      • Tweener の代わりに、jQuery の animate()
      • CSS3アニメーションを使用したほうが早いし、分かりやすい
• canvas
  • 画像の描画
  • シャドウ
  • テキストの描画
  • 変形
  • フィルタ

以上。