HTML5カンファレンス

HTML5 Conferenceに午後から参加したのでメモ

Web: Reboot

13:20 - 14:00 Michel Smith

  • What is “Extensible Web”
  • The Extensible Web Manifesto
    • ちょっと政治的っぽい
  • The Extensible Web Report Card
  • Exntensible Web の前にWebとはなにかか
  • “Web Is Everywhere?”
  • <= Web is Universality
  • Timの言霊
  • 全てのものが全てのものとつながる
  • Amazon.com: Weaving the Web: The Original Design and Ultimate Destiny of the World Wide Web (Audible Audio Edition): Tim Berners-Lee: Books
    • Audio Bookでまだ買える
  • “分散的” というキーワード
    • Node
  • オリジナルウェブで定義されたもの
    • Shared universal information space
    • Decetralized
    • Link unconnected bits of information
  • => WWW(World Wide Web)
  • Webは技術的なセットというものではなかった
    • HTMLとかそういうの特定の何かの集合というわけではない
    • なんでもWebになれる
  • Extensible WebというのはそのオリジナルのWebに回帰するところがる
  • “decentralized innovation” がExtensible Webでは可能になるかもしれない
    • 今まではトップダウンなプロセスだった
    • 仕様 -> ブラウザベンダー -> 開発者
    • Extensible Webでは開発者がイノベーションを起こせる
    • 開発者自身が自分で作ったものをWebにできるかも?
    • Permissive Innovation
  • Power
    • Developer, Maker, Creater が Get involved.
  • Evaluate
    • 評価してフィードバックできる
    • このAPIが良くないよとか伝える
  • The Extensible Web Report Card
  • 歴史
  • In 2004-5 XHR が大きな変革点(Webの)だった
  • => Web Reboot

2015年これからの日本のWebサイトパフォーマンスについて

  • パフォーマンス改善の技術について聞きたい人が多い感じ
  • 日本のサイトのダウンロード時間
  • パフォーマンスのとりくみ
    • この画面で何秒とか、パフォーマンスはやって当たり前の話
    • まずはパフォーマンス測定の前に試験をする
    • 長い目で見ていく試験
    • あんまりパフォーマンスをどう改善していくのかの指標とかが公開されてない
  • 続ハイパフォーマンスWebサイト
    • 色々なツールはでてきた
    • 納品系はそれが適応できてない
  • Amazon.co.jpのfirst paintの速度について
    • 定期的に計測してると特定の期間から初期表示の時間がバラけてる
    • ネットワーク回線も日々変化してる
    • アクセス回線がネックになるケースが多い
      • アクセス回線が結構引っ張ることがある
    • コネクションが貼れない時を前提とした仕様とかが検討されてる?
  • 0.5秒が初回表示時間の区切り
  • Webの配信品質とは?
    • 1ヶ月また365日 のn％が目標の数値で提供出来てるか
    • アクセスが集中する夜間に計測してる?
    • この品質に関わるのが統計学
  • Googleがやってることが常に正しいという基準ではなくて、常に計測したデータを指標に考えるべき
  • トップページにでかい画像を置く文化は減ってきてる
  • 重要なのは定期的な観測

Web Audio API、 Web MIDI API を使ったサウンドプログラミング

  • Web Audio API
  • APIの特徴
    • JavaScriptで音そのものを作成&加工
    • W3Cから発行されるオープンな仕様
    • Audio WGで策定作業
    • プラットフォーム依存がない
  • API策定の方針
    • デベロッパー思考
    • 手数を少なくすることを考慮
    • APIの互換性の考慮
    • ネイティブと同等のAPIを目指す
      • プラットフォームに依存しないでネイティブと同等にする
    • モジュール思考
      • 一つ一つをNodeと呼んでいる
  • モジュール思考
    • オシレーター
    • フィルター
    • ディレイ
    • パン
    • … などそれぞれをNodeとして用意してる
    • これらのNodeをつなげて音声ファイルに対して効果をかけることができる
  • デモ
    • マイク -> ピッチシフト -> ディレイ -> 出力
    • ディレイ + ボリュームダウンを繰り返し => エコー
  • 変更点
    • New: AudioWorker
    • Old: ScriptProccesor
    • ScriptProccesorはUIスレッドで動いてたので、Workerスレッドで動かせるようにする目的
  • ブラウザ
    • IEはIn Development
    • 他のブラウザに実装されてる
  • 音程
    • 波が変わると音程も変わる
    • 音色を変更 = 波形を変える
    • シンセサイザーと同じ仕組み
  • デモ
    • オシレーター(発信機) * 2
    • LFO
    • フィルターなどで音を変えているということがシンセサイザーな基本的な動作原理
    • Node作ってconnectしていくコードを書くだけ
  • Web MIDI API
    • ウェブブラウザとMIDI機器を直接接続するためのAPI
  • Chromeが実装してる
  • Web MIDI APIのプロトコル
  • MIDI メッセージ
    • メッセージは16進数
    • message.toString(16);
  • 16コの音を並列に鳴らせることができる = チャンネル
  • MIDIは音を鳴らしたり、停止したりプロトコル
    • 音色については取り決めがない
    • SysExで指定できる
  • x-midi
    • polymerを使ったWeb MIDIのWebComponents
  • 昔からできたよね
    • Flash
    • Java
    • 音楽系のアプリが動作するプラットフォームが増えたというだけ
  • ウェブというプラットフォーム
    • 実行環境がブラウザ
    • コンパイルが必要ない
    • 仕様がちゃんとある
    • 仕様策定のスピードが早い
  • 2つの視点、マーケット
    • ユーザー視線
      • アプリのインストール不要
      • ネイティブと同様のことができる(まだ途中)
    • デベロッパー視点
      • 開発のハードルが下がった
      • 知識やノウハウも得やすい
    • マーケット
      • 音楽以外の分野との親和性が上がる
      • イノベーションが自分で試して実現できるかも

Beyond CSS Architecture

  • CSSの難しいところ
    • アイコン + テキストを揃える
    • カラムの高さを合わせる
    • カラムの調整
    • こういう難しいところの難しさはCSSのプロパティの指定の問題
  • CSS設計で悩ませるのはセレクタ
.selector{
	property : value
}
  • CSSの場合はグルーピングするときに,区切りで並べて管理する
  • 数が多くなると大変
  • OOCSS
    • ページで使うCSSルールを定義して、それをマークアップ時に要素にルールを適応する
  • BEM
    • 大きなフレームワーク
    • その一部である命名規則がよく取り上げられる
    • Block, Element, Modifierの3つの要素に分ける
    • .mediaがBlock、.media__bodyがElement
    • CSSセレクタをネストすると詳細度が高くなってしまう
    • BEMは詳細度を一定にできるので詳細度の考えを飛ばせる
  • Sass
    • %Media プレースホルダーを使って継承させる
    • マークアップからはひとつのclassで済むのでスリムになる
    • マルチクラスに固執しないて、シングルクラスで書くことができる
    • %Media を継承した.authorを継承したクラスを作ったりすると何が何に依存してるかわからなくなる
    • 継承元を一つに集約するべき
  • AMCSS - Attribute Modules for CSS
    • 属性セレクタを使った拡張する
  • 他にはEvery Declaration Just Onceの例 - Weblog - Hail2u.netやYACP
  • コンポーネントやモジュールはどういう単位で作っていくべきか
  • SMACSSというアプローチ
  • ITCSS
    • itcss, from CSS Wizardry
    • 逆三角形の構造(下に行くほど詳細度が強くなる)
    • 詳細度と戦うための設計
    • Sassなどのプリプロセッサを前提にしてる
    • Setting
      • グローバル変数、設定
    • Tools
      • Mixin, Function
    • Generic
      • Normalize,Reset 要素セレクタ
    • Base
      • タイプセレクタ
    • Objects
      • OOCSS的なベーシックなパターン
    • Components
      • UIを構成するコンポーネント
    • Trumps
      • Helper, Utils
    • この逆三角形を維持した(途中の要素を削ってもいいので)設計　
  • CSS設計を支えるツール
    • (Static) Styleguide
      • Website Style Guide Resources
      • コーディングガイド
      • スタイルガイド駆動開発
      • デザイナーとのコミュケーションツール
      • テスト・ツール
    • (Living) Styleguide
      • CSSのコメントからスタイルガイドを更新できるようにする
      • 動的なドキュメント生成
      • trulia/hologram
  • セレクタと詳細度の傾向を見るツール
    • Specification Graph
    • コードの後ろになるほど詳細度が高くなるといい
  • t32k/stylestats
    • 宣言されてる色のチェック
    • ヘルスチェックツール
  • より高度なCSS(クリティカルレンダリングパス)
    • リソース数の最小化
      • 画像とかCSSの数
    • バイト数の最小化
      • ファイルサイズ
    • パス長の最小化
  • カンファレンスサイトの最適化
    • クリティカル・パスを
    • ジェネレータを使って吐いたものをつかた
  • CSS設計の未来
    • ここまでの設計は現状に対する苦し紛れの対処法
    • Shadow DOMとかが未来的な