2012年のHTML5、CSS3、JavaScriptはこうなる〜実際のサービス事例で考えるHTML5の近未来 参加メモ

HTML5 JavaScript

2012年のHTML5、CSS3、JavaScriptはこうなる〜実際のサービス事例で考えるHTML5の近未来に参加してきました。

基調講演　HTML5最新動向（株式会社オープンウェブ・テクノロジー 代表　白石俊平氏）

HTML5最新動向

HTML5マークアップ

  • 現在の要素数は108
    • 30種類の新要素
    • 14種類の既存要素が変化
    • time要素、hgroup要素、date要素が争点

HTML5 Forms

  • 入力フォーム(<input type="xxx">)がリッチに
  • Operaが先行して対応している


HTML Microdata

  • HTMLにマシンリーダブルなデータを埋め込むための仕様
  • itemscope, itemprop
  • Googleは対応している

RDF/RDFa/RDFa Lite

  • RDFはXML、RDFaは属性で定義
  • PDFa LiteはRDFaのサブセット
  • 最近できたばかり

Schema.org

script要素の新属性

  • async属性：スクリプトファイルの非同期読み込み
  • defer属性：スクリプトファイルのダウンロードは非同期で行われ、実行はページの読み込み後

DOMCryptAPI

Web Intents

  • AndroidのIntentをWebアプリ間で実現するためのAPI
  • 要素を検知したブラウザは、サービスを自身に登録する

Web Notifications

  • ユーザへの通知を行うためのAPI
  • Chromeでのデスクトップ通知など

■ オフラインWebアプリケーションと関連API
Application Cache

  • HTML/CSS/JavaScript/画像など、Webアプリが必要とするリソースをキャッシュし、オフラインでも利用可能にする仕組み

Web Storage

  • シンプルなローカルストレージ
  • 文字列値しか受け付けない仕様になった

Indexed Database API

  • JavaScriptオブジェクトをそのまま読み書きできるローカルストレージ
  • 使いづらい

File API

  • ローカルファイルの読み書き
  • ブラウザ内に仮想的なファイルシステムを作るのでセキュリティの問題はない

Quota Management API

Typed Array

■ デバイスAPI - スマフォなどの操作
Contacts API

  • アドレス帳からのデータ読み出しを可能にするAPI
  • Web Intentsに置き換えられるだろう

Battery Status API

HTML Media Capture

  • <input type="file">を拡張し、カメラやマイクからの取り込みを可能に

Messaging API

  • WebアプリからE-mail/SMS/MMSを送信するためのAPI
  • Web Intentsに置き換えられるだろう

The Network Information API

  • 現在接続しているネットワーク(3g,wifi,...)の種類を検知できるAPI

Sensor API

  • デバイスの各種センサーにアクセスするためのAPI

Vibration API

Geolocation API

HTML Speech

DeviceOrientationEvents

  • デバイスの向きや傾きを加速度センサーから得るためのAPI

Touch Events

  • マルチタッチを検知するための仕組み
  • touchstart, touchend, touchmove, ...

Web RTC(Real Time Communication)

  • ローカル・リモートを問わないメディアデータの送受信を可能にするAPI
  • Chromeで実装された
  • P2Pのコネクション

第1部　HTML5で実現する「世界で一番のマンガ投稿＆共有サイト（スパイシーソフト株式会社 大谷恭仁氏）

  • 開発で苦労した点
    • Android2.1のブラウザのCanvasにバグがあった
    • Androidの端末ごとの差 → 個別対応
    • IEはCanvas未対応 → 独自対応

第2部　スマホブラウザゲームのクオリティアップにHTML5あり！（株式会社フォリフ 熊谷祐二氏）

HTML5とその優位性

  • マルチデバイス
  • 開発スピード
  • ネイティブ非依存

HTML5ゲーム

  • ゲーム作成で気を付けた点
    • CanvasとCSSの使い分け - Canvasは重い
    • キャラクターは変形させず画像の入れ替えで対応
    • Android2.1バグ -> 個別実装してUAで切り替え
  • WebSocketの活用例
  • Local Cacheの活用例
    • Application Cache
    • Web Storage - Session：一時的、Local：永続的
    • Web Database

2012年の予想

  1. HTML5ベースのリッチコンテンツ化
  2. Facebook Mobileアプリの本格化

スマートフォンで動くブラウザゲームの作り方（面白法人カヤック 吾郷協氏）

資料はこちら
ワークフロー

  • チケット管理はJSerがおすすめ
    • JSerはプロジェクトの最初より後半が忙しい
    • チケットは大抵JSerへ一番最後に回ってくる
    • サーバサイドとマークアップの繋ぎこみが多い
  • ディレクタがタスクリストを作る
    • タスク1個は2日程度で終わるもの
  • 作業者全員で見積もり
    • 「見積もりポーカー」
    • 見積もり時間はすべて加算して計算
    • チケット化に必要な簡単な設計も行う
  • エンジニアがチケット化する
    • 一番重要度が高いタスクのみチケット化する
    • 見積時に決めた優先度、実装に必要な情報を記述
  • 1日に一回タスクリストをアップデートする
    • ディレクタがタスクリストを変えたい場合はここで

「エンジニアが主導できて」、「簡単に導入できること」を主眼にしている

実装詳細

  • フレームワーク
  • 開発ツール
  • 単体テスト
  • 採用しなかったライブラリ
    • jQuery Mobile
      • 安定版なかった、Android,iOS以外もサポートしてて無駄に大きい
    • CoffeeScript
      • 複数人で開発していたので
  • はまりどころ
    • スクロール周り
    • Android
      • 機種によってサポートされているAPIが違う
      • 性能が非常にまちまち
      • 筐体のサイズによる
    • イベント周り
      • CSSのpointer-event:noneを使えば対象要素のイベントを発生できないようにできる -> ダブルタップ回避に使える
  • その他
    • Androidは現代のIE
    • ただ、JSの言語仕様上は問題ない。イベント、CSS、DOM関連が大変
    • Androidベースで作成し、後でiOS対応が楽