に参戦してきた

  • 振り返り中 by kawasakiさん

Rich UI with JS @amachang

  • Shibuya.js的にHMLT5は「DOM はあと HTML 」
  • Agenda
    • Drag and Drop
    • Event Capturing
    • Border Box
Drag and Drop
  • Source
  • Target
  • Data Transfer
  • preventDefaultでしねる
  • mime-typeを設定できて、設定しておくほうが、外部アプリからのほげほげとかが来て予測不可な挙動が起きなくていい
  • file Drag and Drop楽しいよ!
  • 非同期メソッドでprogress barとかほげほげできるよ!
  • Feedback Imageはどのブラウザも対応できてないよ!
    • dragする対象とは別の画像をdragしてる視覚効果をだしたりできるよ(仕様的には
  • Note
    1. Drag and Drop not only for Visual Media
    2. During dragging, all keyboard and mouse events are disabled
Event Capturing
  • Event Capturingが必要な理由
    • 過渡的な状態戦い
    • とにかくフィードバックしないと、ユーザは分かってくれない
    • mousemove や mouseover や mouseout やりまくり
    • 排他的な状態が沢山
  • たとえば
    • Drag
    • 矩形選択
    • ポップアップメニュー
  • event Capturing
    • element.setCapture(false)
    • element.releaseCapture()
    • losecapture event
      • setCaptureとlosecaptureで入口と出口を抑えておこう
  • 擬似 Event Capturing
    • document で addEventListenerの第三引数でtrueでイベント捕獲
      • e.proventDefault()とe.stopPropargation()しておく
      • windowオブジェクトのonblurを監視しておく必要がある
border box

css3

box-sizing: border-box;

HTML5時代のクロスドメインAPIの設計と実装 @bulkneets

  • UIスペシャリスト
livedoor Readerのクロールしているフィードまわり
クライアントサイド
  • クロスドメインで
  • flash使わない
  • third-party cookieは死ねばいい
  • localstorageに保存しておけば、iframe内でも使うことができるんだからいいんじゃない?
  • コンストラクタハック
  • JSONPに機密情報入れるな
  • ドメイン乗っ取りや信用できない回線、ブログパーツの提供ドメイン失効とか・・・
  • 外部から提供されたscriptをそのまま実行する危険性
  • 認証情報扱っているドメインで他社の提供するブログパーツ貼るのやめましょう
  • 改善案
    • コードは常に自社ドメイン
    • データのみ外部から持ってくる
    • evalしない
  • HTML5時代のJSONPの代用
    • XHR leve2 + JSON
    • JSON.parseで安全性の検証
    • evalしない
    • crossDomain XHRやろうね
  • 機密情報を含むJSONやりとり
    • withCredentials で cookie を贈ることが可能
    • originを見れば呼び出し元がわかり検証可能
  • localstorageブロックできない・・
    • もう、この辺から覚書的に・・・

Javascriptで音声モデム @gyuque

3D JavaScript @kawanet

  • とびだせ!JS

jsdo.it 杉(@kayac)

  • jsdo.itの宣伝

顔文字 :D @takesako

  • 顔文字系プログラミング

時を超えたJavaScriptの道 @teppeis

Rediscover the HTML5 @yukoba