hiratara : とりあえず確保。上司から許可が取れたら行きます
上司の許可がとれたので行ってきます！ → 出席してます！
おさらい(JavaScriptの歴史)
- ... → JavaScript → JScript → ECMAScript → HTML 4.01
- コンセプト: Rediscover the JavaScript
- 2006年が第1回。2008年の京都が最後で、2年ぶり (実は渋谷ではやっていない)
- 最近やってなかったのは → jQueryとか便利だし、日常化した
- 復活したのは → HTML5の登場、JITの高速化、IE6の終了
- LTの虎の予選も兼ねているらしい
Rich UI with JS / @amachang
- jQueryの作者にも認められているShibuya.js
- HTML5とは？ → 仕様にDOMとHTMLが両方入っている
D&D
- ドラッグできる画像とできない画像を作れる
- Source, Target, Data Transfer
- Source
- draggable属性
- imageでfalse にするとdragできなくなる。
- pタグでtrueとかにするとドラッグできるようになる
- dragstartイベント
- バブリングするので、event.targetがthisかを確かめた方がよい
- dataTransfer.effectAllowed で、コピー、移動、ショートカット、の種類を指定
- dragendイベント
- 同様にバブリングする
- dataTransfer.dropEffect → 何をしたか(コピー？移動？)
- draggable属性
- Target
- dragenter
- event.preventDefault() を呼ぶ (デフォルト動作のキャンセル。次のイベントが呼ばれる)
- dragover
- dataTransfer.dropEffect → UIに効果を表示する(アイコンの変更など)
- dataTransfer.effectAllowed → 何が許されているか
- event.preventDefault() を呼ぶ
- dragenter
- drop
- event.preventDefault() を呼ぶ
- DataTransfer
- dragstart : データの設定
- dragenter : データをチェックする
- drop : データを取り出す
- ファイルをドラッグとかもできる
- なぜ使わなかったか → 視覚効果に問題。UIの一部を掴むと、掴んだ部分だけ動いてしまう
- dataTransfer の setDragImage, addElement がその仕様。まだ実装不足
- 注意1: D&D の視覚効果はブラウザ依存
- 注意2: ドラッギング中は、キーボード、マウスイベントが発生しない(楽ちん！)
Event Capturing
- IEとFirefox4(予定)にある機能
- ブラウザのデフォルト動作以外を実装するときは、ユーザにフィードバックを返す必要がある
- その際に登場する排他的な状態を制御
- D&D、矩形選択、ポップアップメニュー等の時、mouseoverとかonclickの制御が必要
- setCapture(false)、releaseCapture() → イベントが特定の要素にしか行かなくする
- OSやブラウザによる強制解除はありうる → losecaptureイベント が発生
- 疑似的にやる
- DOMイベントのキャプチャリングフェーズ
- addEventListener の第3引数 を true
- Windowオブジェクトのonblurは監視しないと、拾えないイベントが出てくる
Border Box
-
- box-sizing: border-box; は便利
- 要素が少なくなる
HTML5時代のクロスドメインAPIの設計と実装 / @bulkneets
[Ustream]
- 以前のlivedoorセミナーで端折った話の掘り下げ
- デモ: ストリーミング(JSON ストリーミング)。WebSocket対応したらリリース予定
- 「クロスドメイン、Flash使わない、JSONのストリーミング方法」
- httpでOK、ブラウザのプラグイン不要
- Content-type: multipart/mixed
- MXHRでググルとよい
- XMLHttpRequest Level2をサポートするブラウザが必要
- 古いブラウザ向け → MXHR(iframe内、同一ドメイン) + window.postMessage
- postMessage
- HTML5仕様。別のwindow, iframe へ文字列を送れる(文字列のみ)
- IE向け → window.name + IFRAME間通信 (子フレーム、孫フレーム が必要) ← とっても簡単・・・ではないorz
- window.name ハック
- window.name(target先) は、ドメインが移動しても引き継がれる
- さらにIE → IFRAMEストリーミング
- <script />タグをサーバから送ると、逐次実行されることを利用
- クロス止め以南
- OAUth → サーバの人を信用しないといけない (なるほど4時じゃねーの)
- サーバ再度に中継させないAPIを作るには、どうすればいいのか
- サードパーティCookie
- lcalStorageが、サードパーティCookie の代用になる
- メリット → クライアントサイドで
- デメリット
- XSSによってlocalStorageが漏れるとまずい
- クリックジャッキングはこれでは解決しない
- ユーザがブロックできない？？ シークレットモード、は使える
- JSON, JSONP には問題がある。対策は、
- POSTにする
- JSONPに機密は入れない
- token等の利用で、不用意に呼べなくする
- ブログパーツでドメインが失効したりしていると、乗っ取られている可能性がある
- HTML5だと・・・ → XHR level2 + JSON, JSON.parse(安全性の検証), evalはしない
- withCredentials で cookie を送れる。originの呼び出し元で検証が可能
JavaScript FCK Modulator / @gyuque
[Ustream]
- デモ(1) : JSで音声の再生
- デモ(2) : JSでModulator(モデムの「モ」)、iPhoneへ転送(iphone側はネイティブ)
- 受信成功！ ラインケーブルを利用。スピーカー越だと、雑音に非常に繊細で難しい
- スピーカーにてチャレンジ → 失敗。空調の音で駄目っぽい。
- 「情報通信におけるディジタル信号処理」を図書館で読むと実装できる
- 低音、高音で 0 / 1 を表す
- 雑音が入らないように、連続して繋げる
- 受信側はバンドパスフィルタ
- 送信側は、 data:audio/wav のテクニック(HTML5的？)
- 受信側は、 HTML Media Capture API がAndroidにて実装中
- 将来的には、物理層〜TCP/IP, HTTPまでフルスタックでJSで実装する！
- FAXも実装したい
- 難点: ストリーミングができないので、通信に使えるかどうか
- MSXのテープ吐き出しも作ったが、実機がないのでデバグ不可
3D JavaScript / @kawanet
- 2006年 Animation.Cube → 写真を縦に切って表現
- 2006年 Triangles by Border of Div → Divタグで三角(ポリゴン)を作れる
- 2008年 3D by Canvs : canvasに描画
- 2008年 3D Renderer with Textures
- 2009年 Sphere Environment Mapping → Canvas 2D・・・かな？
- 2010年 3D眼鏡！！
- デモ(1): 3D眼鏡配布。立体に見える
- デモ(2): ブックマークレットで、任意のページを3Dへ
- 実装には CSS3 を利用
- 赤文字で半透明。ブラーをかけず。シャドーで緑の文字。
時を超えた JavaScript への道 / @teppeis
- @amachangときゃっきゃうふふ → LT
- 国際化が流行ってる → タイムゾーンのお話
- デモ: ATNDの時間をChrome拡張でPDT(サマータイム)時間に変更
- JSのnew Date() はローカルタイムと UTCしか使えない
- PDTの扱いが、ブラウザによって違う → サマータイムのルールが変わった
- ECMAScriptではどう規定されているか
- 原則ルールベース。ただし、ホストがヒストリカルならあわせてもよい
- Google Closure Library → http://go/ google 内部のデータらしい・・・
- RhinoでJavaのJoda Timeを変更 → 358KB
- google のライブラリは実装が不十分なので、自前でも作成
- Q. Rhinoのプログラムを公開して欲しい
- A. はい。
Rediscover the HTML5 / @yukoba
[Ustream]
- JSの上で動く処理系、HTML5はここまでできますよ！
- なぜ？ → 8秒ルール。DLしてインストールさせると、全然守れない
- Firefoxでの統計: ページ表示時間を 5秒 → 2.8秒 になると、DL確率を 10% 上がる
- HTML5によって解決する！
- IE9は、MSが久々に本気になっているブラウザ
- 携帯Java(MIDP) を HTML5 内で動かす
- デモ(1): IE9で ・・・ Flashだった！！
- JS版とFlash版を作ったため？ 似たようなコードでいくらしい
- デモ(2): Chromeで・・・今度はJS。
- デモ: Android ケータイ
- デモ: 描画単位の画面転送
- ピクセル単位と違い、転送量が少なくて住む
- WebSocketは使っていない。改善可能？
- Q. JVMをJSで書いているのか、JSのコードを作っている？
- A. classファイルをJSに事前コンパイルしている。18万8千400行のコード。
- Q. ASにコンパイルするとFlashで動く？？
- A. AS版もある。型付きのコードへのコンパイラがある。
- コンパイルはクラス単位
- Q. ASとJSはどっちが速い印象？
- A. Chromeが一番速い。FirefoxとFlashが同じ感触。
ここから、懇親会(ビアトーク)となりました。
LL Tiger のご案内 / @iwaim
- 2003年から始まったイベント
- 明日開催。ニッショーホール。
- LLの虎は、出演者は本日決まり
- 商品: 最近リリースされたいいもの
- 参加者: @gyuque, @yukoba, @kawanet
- 会場の前の席の人が審査員という噂
- その他、参加チームも競合です！
- Language update(JSはないけどHTML5はある)、電子出版系、フィジカルコンピューティング、ライセンス系、高速化
WebSocketでVNCっぽいなにか / @kanasan
ものづくり寺子屋の紹介 / @mactkg
- 高一。レゴのビジュアルプログラミングをずっとやっていた。Cを始めた。
- tkgは「たまごかけごはん」、の略。ご飯にはのりたまをかけるのが好き。
- ものづくり寺子屋 → 小中学生向けのワークショップ
- 入門に使われる。すぐできる。
―JS入門勉強会。テキストは @amachang のテトリス。At OperaJapan.
-
- ワークショップで使うには難しい
- 勉強会の運営経験になった、優良なフィードバック、講師の練習
- nattanatta
- ワークショップのネタ募集
