Pixel Pedals of Tomakomai

北海道苫小牧市出身の初老の日常

Shibuya.js beyond HTML5 に参加してきます

hiratara : とりあえず確保。上司から許可が取れたら行きます

Shibuya.js beyond HTML5

上司の許可がとれたので行ってきます! → 出席してます!

おさらい(JavaScriptの歴史)

  • ... → JavaScriptJScriptECMAScript → 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 → 何をしたか(コピー?移動?)
  • Target
    • dragenter
      • event.preventDefault() を呼ぶ (デフォルト動作のキャンセル。次のイベントが呼ばれる)
    • dragover
      • dataTransfer.dropEffect → UIに効果を表示する(アイコンの変更など)
      • dataTransfer.effectAllowed → 何が許されているか
      • event.preventDefault() を呼ぶ
  • drop
    • event.preventDefault() を呼ぶ
  • DataTransfer
    • dragstart : データの設定
    • dragenter : データをチェックする
    • drop : データを取り出す
  • ファイルをドラッグとかもできる
    • event.dataTransfer.files
    • W3C File API のリスト (HTML5ではデータ型は未規定らしい)
  • なぜ使わなかったか → 視覚効果に問題。UIの一部を掴むと、掴んだ部分だけ動いてしまう
    • dataTransfer の setDragImage, addElement がその仕様。まだ実装不足
  • 注意1: D&D の視覚効果はブラウザ依存
  • 注意2: ドラッギング中は、キーボード、マウスイベントが発生しない(楽ちん!)
Event Capturing
  • IEFirefox4(予定)にある機能
  • ブラウザのデフォルト動作以外を実装するときは、ユーザにフィードバックを返す必要がある
  • その際に登場する排他的な状態を制御
    • 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
    • ラッキングで利用。ブラウザによってはブロックされる
    • 外部から自社サービスを参照された場合は、Cookieがくることは期待してはいけない
  • lcalStorageが、サードパーティCookie の代用になる
    • IFRAMEを埋め込むドメインは気にせず利用できる
    • IFRAME内のドメインとポートは一致してないと駄目
    • フレーム間は、postMessageでやりとり
  • メリット → クライアントサイドで
  • デメリット
    • XSSによってlocalStorageが漏れるとまずい
    • クリックジャッキングはこれでは解決しない
    • ユーザがブロックできない?? シークレットモード、は使える
  • JSON, JSONP には問題がある。対策は、
    • POSTにする
    • JSONPに機密は入れない
    • token等の利用で、不用意に呼べなくする
  • ブログパーツドメインが失効したりしていると、乗っ取られている可能性がある
    • コードは常に自社ドメインで、データのみを外部から持ってくるようにする。evalはしない
    • Twitterとかはどうなの?過去にドメインが乗っ取られたこともある
  • 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 APIAndroidにて実装中
  • 将来的には、物理層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 を利用
    • 赤文字で半透明。ブラーをかけず。シャドーで緑の文字。

js do.it / @sugyan

[Ustream]

  • js do.it
  • JSのコードの共有。5月くらいにリリース。
  • JS, CSS, HTML を編集し、閲覧が可能
  • fork でパク・・・共有して、改変ができる
  • ライブラリも完備!
  • JSエディタは、サーバサイドでLINTしている
  • デモ: パーティクル崩し
  • JS VS Flash なイベントもやってる

顔文字:-D / @takesako

[Ustream]

  • 空前の関数型言語ブーム
    • Erlangでの記号プログラミング
  • 顔文字プログラミング
    • pypyencode
    • 複数言語で実行可能な物(perl, Ruby, JS, .comファイル)
  • 利点: キーボードの大部分が壊れてもコーディングできる!
  • HTML5 と HTML4 の違い → 記述の違いや、要素の追加
  • File API → 大きいファイルだと CPU利用率 100%になる
    • yield を使うといい (Firefoxのみ)
    • WEB Workerとか
  • 以上、前置き
  • JSで顔文字プログラム → aaencode
  • AA86 → 実行できる.comコードを生成

時を超えた JavaScript への道 / @teppeis

[Ustream][Ustream]

  • @amachangときゃっきゃうふふ → LT
  • 国際化が流行ってる → タイムゾーンのお話
  • デモ: ATNDの時間をChrome拡張でPDT(サマータイム)時間に変更
  • JSのnew Date() はローカルタイムと UTCしか使えない
  • PDTの扱いが、ブラウザによって違う → サマータイムのルールが変わった
    • サマーターイムの対応: ルールベース or ヒストリカルデータ(過去の夏時間を記録)
    • ブラジルは都度発表する → Microsoft ではレジストリを操作するよう勧めている
    • ネパールは +5:45 とか +5:40 のようなイレギュラーな値
  • ECMAScriptではどう規定されているか
    • 原則ルールベース。ただし、ホストがヒストリカルならあわせてもよい
  • Google Closure Library → http://go/ google 内部のデータらしい・・・
  • RhinoJavaの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。
    • 保存の機能は、local storage に mapしている
    • インタプリタ型だと遅い。classファイルをJSにコンパイルしている
    • JSのローカル変数はJITされるとレジスタになる → スタックを高速化
    • その他、様々な高速化
    • MIDPのスレッドにも対応 → msecで自前のコンテキストスイッチ。例外を投げて切り替える
    • repaint は setTimeout からブラウザに返して表現
  • デモ: Android ケータイ
    • ちょっと遅い。
    • GCが変なタイミングで動く?
    • canvasタグのバグが取れたのは最近
  • デモ: 描画単位の画面転送
    • ピクセル単位と違い、転送量が少なくて住む
    • WebSocketは使っていない。改善可能?
  • Q. JVMをJSで書いているのか、JSのコードを作っている?
  • A. classファイルをJSに事前コンパイルしている。18万8千400行のコード。
  • Q. ASにコンパイルするとFlashで動く??
  • A. AS版もある。型付きのコードへのコンパイラがある。
  • Q. ASとJSはどっちが速い印象?
  • A. Chromeが一番速い。FirefoxFlashが同じ感触。
    • case文を除くことはできるはずだが、FirefoxとかでJITの関連でうまくいかない

ここから、懇親会(ビアトーク)となりました。

LL Tiger のご案内 / @iwaim

  • 2003年から始まったイベント
  • 明日開催。ニッショーホール。
  • LLの虎は、出演者は本日決まり
    • 商品: 最近リリースされたいいもの
    • 参加者: @gyuque, @yukoba, @kawanet
    • 会場の前の席の人が審査員という噂
  • その他、参加チームも競合です!
  • Language update(JSはないけどHTML5はある)、電子出版系、フィジカルコンピューティング、ライセンス系、高速化

WebSocketでVNCっぽいなにか / @kanasan

  • Kanasan.js の発起人
  • gihyo.jp での連載(Jetty, WebSocket)
  • WebScoketでVNCっぽいものを作った
    • WebSocket は ・・・ Ajax的なUIでcometポイことができる
  • サーバ: Java, Robot, Jetty
    • クライアント: JSだけ、 WebSocketのオブジェクト
  • キャプチャ + 画像処理 + BASE64で遅い(WebSocketは高速だよ!)
    • クライアント処理は、imgでつっこむだけ。
    • マウスのみ対応 (キーイベントは、ブラウザの差が大きいため)
  • デモ: VNCの実演。スムーズに動く
    • pngなのでフルカラー
    • 処理の4〜5割が、pngの圧縮処理

ものづくり寺子屋の紹介 / @mactkg

  • 高一。レゴのビジュアルプログラミングをずっとやっていた。Cを始めた。
  • tkgは「たまごかけごはん」、の略。ご飯にはのりたまをかけるのが好き。
  • ものづくり寺子屋 → 小中学生向けのワークショップ
    • 入門に使われる。すぐできる。

―JS入門勉強会。テキストは @amachangテトリス。At OperaJapan.

    • ワークショップで使うには難しい
    • 勉強会の運営経験になった、優良なフィードバック、講師の練習
    • nattanatta
  • ワークショップのネタ募集

特別企画? : @secondlife × @mala

@amachang が司会で対談方式。きわどい内容もあるのでustreamで見ましょう。