Posts Tagged ‘イベント’

ECMAScript勉強会 アウトラインメモ

ECMAScript勉強会 に参加してきたのでその時のメモです。
久々に結構難しい内容が多かった気がする。

ECMAScript勉強会

ECMAScript概要 – rika_t

ECMAScript Study #1 Overview


途中参加


newがあるのはなぜ

プリミティブな型もメソッドやプロパティを持てるようにしたいため、ラッパーでラップしてた。

globalオブジェクト

globalオブジェクトは必ずしもwindowではない

オブジェクトとクラス

内部的には[[Class]]というクラスという文字列がでてきてた。

  • ES6から内部的にClassというものがなくなってきてる。
  • リテラル記法やコンストラクタを使って様々なオブジェクトを表現してる
  • NativeBrandという名前になってる

prototype

  • 仕様書にのってるprototypeの図はわかりにくい

変数宣言

  • “var”キーワードの後にIdentifierを与える
  • opt = option としてInitiliser = “str”みたいに初期化も同時にできる
  • IdentifierName
    • IdentifierStart (変数名の最初に文字列) か初めて
    • IdentifierName IdentifierPart
  • let から始まる内容はここで定義してる内容をかかれてる(他を見なくてもいい)

変数宣言の処理

  • return (normal,empty,empty) normalは正常終了

ES.next 追っかけ – teramako

ES.next 追っかけ – ECMAScript 勉強会

メーリングリストの購読

  • es-discussの購読
  • ES.nextに追うため見るメーリングリスト
  • 流量が多い

構文抽出

  • wiki.ecmascript.org に最新版のドラフトがアップロードされる
  • 更新内容は色分け表示されてる
  • ドラフト仕様から構文部分のみ抽出したものを作成

Mozillaの実装追いかけ

*SpiderMonkeyのHarmony実装をトラッキングするメタバグがある

構文解析

JavaScriptがどうやって構文解析していくか

  • Reflect.parse()メソッド
  • 結果をオブジェクトのツリーで返してくれる
  • reflect.jsmを読み込んでReflect.parseが利用できる

iv/js

  • ES.nextの実装をパースできるツール
  • http://constellation.github.com/iv/js/es.next.html
  • esprimaを使ったものも最近でてきた
  • http://esprima.org/demo/parse.html

quasiリテラル

  • ヒアドキュメント的に使えそう

ES.next the corner case – Constellation

ES.next the corner cases

  • esprima
    • コミッターやってる

ConstDeclarationの話

  • initializer必須
  • Blockスコープ
  • BNFだけでは判断できないで、semaniticsも見ないと行けないようになった *

block scope

  • staticに解析可能
  • ブロックスコープになったことで、ランタイムでないと判定できなかったのが、静的に解析が可能
  • そのため速度がかなりよくなった

  • 再代入はsyntax errorにする

  • これもパース時に判断できるので、速度がよくなる

    const V = 20; V = 30;// syntax error

  • early errorに分類(run timeより前)

egal operator

  • is
  • isnt
  • より値の同一性に重きをおいたequal
  • is/isnt はContextual Keyword
  • Statement先頭にくるキーワードはcontextual Keywordになる
    • ofとか
  • 文脈依存のキーワードのような扱い方をされるということ

<| operator トライアングル演算子

ES.next Library Extension

  • String/Number/Function などに機能を増やす
    • repeat
    • startsWith
    • などの便利な関数
  • GlobalなものをNumberにいける
    • isFinite
    • parseInt などをNumberにも追加する

duplicateな変数purge機構

  • 関数スコープのレキシカルスコープ内で変数宣言が被った時にsyntax errorになる

new Date(NaN)

  • ES.nextのnew Date(NaN).toString() Invalid Dateをかえすようになった

propertyの登場順

  • for-in , Object.keysなどの登場順が規定される

LHS

  • left hand side
  • 今まで()でくくって中が式なら何でも入ってた
  • それがleft hand side expressionという部類のみになった

(1,2,3) = 20;

というのがSyntaxErrorになる(ES5はReferrenceErrorなった) またパース時に判断できる

ES.nextのバグ

  • draftにはバグある

({responseText }) = res;

そもそもオブジェクトリテラルの解釈

名前

  • ES.next
    • バージョン番号がアレなので.nextという名前になってる
  • strawman(ストローマン)
    • とりあえずな感じのバージョン
  • Harmony
    • いずれかのバージョンにはいるかも的なもの

A brief history of ECMAScript versions (including Harmony and ES.next)

CoffeeScript

  • is/isnt みたいにセマンティックが同じなのに、挙動が違うことで論争が起きるのが怖い
  • => とかでも論争がおきてる

ECMAScript読書会

  • 6章からが本番
  • Annexに定義などが入ってる
  • Annex C はStrict mode
  • D, Eが変更点修正点

4.概要

  • この仕様では外部データの入力や計算結果の出力に関する規定はありません

  • 仕様外だが他にもオブジェクトがあるかもしれない事は考慮する(DOM)

4.2.2 Strict mode

  • “ECMAScriptは、言語において使えるいくつかの機能の使い方を制限したいと考えているユーザがいる可能性があることを認識しています。”
  • 標準のものに追加してエラー条件が定義される
  • 実装中の注意
    • パース時にでるエラーと実行時エラー
    • パース時に出すエラーはパース時にstrict modeかどうかをみないといけない
    • 関数の先頭にstringリテラルが連続してる == ディレクティブ プロローグ という
      • この範囲にuse strictが入っていればstrict modeになる
    • ディレクティブ プロローグの最後に”use strict”;を書かれた場合などは、最初のほうのパースにもstrictを適応してエラーにする
    • 関数の引数はどっち(中、外)のstrict modeなのか?
      • 中のstrict modeが適応されるので、関数内がstrict modeなら、関数名にevalとかしてる時もエラーにするようにする(disccuss)
      • body,param,functionName 全部strict modeに適応範囲とする
    • Does ‘use strict’ in a FunctionBody apply strict mode FutureReservedWord restrictions to function name or arguments?

メモ: Mou + github.css

Shibuya.XSS アウトラインメモ

Shibuya.XSS テクニカルトーク#1 : ATND に参加してきたので、その時のメモ。

Shibuya.XSS

DOM Based XSSの傾向と対策 – mala

Shibuya.XSSで発表してきました – 金利0無利息キャッシング – キャッシングできます – subtech

機械的なスキャンで見つけづらいXSS

  • location.hash経由で発火が多い、
  • サーバ側にアクセスログが残りづらい
  • ビーコンでlocation.hashを記録する事も可能だけど、実行順序で潰される事がある

location.hashでの問題

  • XHR2

どんな時に見つけにくい

  • パラメーターをパースして利用してる場合
  • ソースを読まないと見つけにくい。
  • 難読化されてるとしんどい
  • レガシーコード

どうするのがいいのだろうか

  • バリデーション?

バリデーションが必要な状況

  • openにファイル名渡す -> パイプでコマンド実行可能
  • ファイル開く関数とコマンド実行を分けて使うべき
  • 役割に応じて「それだけを行うように」する

バリデーションが必要なライブラリ

  • 直接使うときは安全に倒す

そもそも安全にすることを考える

  • 外部リソース読み込めないようには無理

コーディング規約での対処

  • jQueryの場合
  • セレクタの使い方を徹底する
  • findを使って$関数の直接使用を避ける
  • $関数は汎用的すぎ

コーディング

  • XHRのリクエストは必ず絶対パス+動的パス
  • 絶対パスが/のみだと突破できる
  • /api/的な感じに

問題点

  • HTML5等で今まで安全だったかもしれないものが崩壊して、可能な攻撃が増える

DOM XSS撲滅装置

  • location.hashにタグが会った場合は消す等
  • その文字列を使わないことが保証されてるなら割りと効果的
  • 広告やブログパーツ等、自分で治せないもの等の緊急的
  • 潜在的なXSS

パスワードを盗めるか?

  • ブラウザのパスワード自動入力機能でパスワードを盗める場合がある
  • セッション乗っ取り + パスワード盗み

パスワードの盗み方

  • 自動でフィルインされた値を読み取る
  • 自動的に盗むことが可能
  • 自動フィルイン + クリックジャッキング -> 半自動
  • フォームの宛先を攻撃サイトに誘導

事例

?to=javascript:eval(location.hash)#攻撃コード

  • ログイン後のリダイレクトのURL先でjavascript:を実行可能

対策

  • そのパスワードを入力するドメインをサブドメインで独立させる
    • ログイン機能だけを持ったサブドメインを作成する
    • 他のjsを入れない、厳しめのルール

フェールセーフ設計

  • サンドボックス
  • パスワードを入力するページは外部jsを完全排除するとか
  • パスワード入力ページはそれ専用のサブドメインへ

ブラウザ側のリスク軽減

  • XSSフィルタ
  • パスワードの自動フィルイン対策
  • 元々危険だったものが更に危険になる => 理解されないことが多い

攻撃パターン

  1. iframeで埋め込む -> サードパーティクッキー有効なら発動
  2. 短縮URL + replaceStateでURL偽装
  3. ポップアップWIndowとサードパーティ

ユーザー側の対策

  • NoScript
  • 複雑なルールを設定しないと安全に利用できない
  • 攻撃者が嫌う設定を使う
    • サードパーティクッキーオフ、ポップアップのブロク、リダイレクトの防止
  • 初見のURLは全部シークレットモードで開くとか

まとめ

  • DOM Based XSSはたくさんある
  • XSSがあっても安全にすることを考える

焼肉、刺身

  • XSS発見者には肉か刺身をおごる慣例(*人徳が必要)

x-autocompletetypeの実験 by はまちちゃんさん

  • x-autocompletetypeのデモ
  • http://hamachiya.com/junk/x-autocompletetype.php

サニタイズ言うぞキャンペーン – TAKESAKO

mixiの新着検索ページでXSSで1件

  • いぬぼくxSS

7年前と少し違う状況

  • jQuery
  • XHR2

サニタイズ的なものが必要になる場合がある。

kintone

  • ライブラリ除いて10万行ぐらい

社内勉強会

  • jQueryは甘え

Closure Templateのエスケープ機能について

  • サニタイズコンテント
  • JavaScriptでHTMLのパーサー的に書かれてる
  • 問題を起こしそうな文字列などが定義されてる

Closure Template – Contextual Autoscape

  • JavaScriptエスケープとHTMLエスケープ等の区別をおこなってくれる
  • CSS、属性値等で異なるエスケープを行う
  • 無毒化とかを文脈依存で対処される
  • http://d.hatena.ne.jp/teppeis/20120318/1332092081

オフレコ – 春山

  • ベンチャーから始めると、フローの把握ができてない所が存在する
  • そのフローの把握が重要

JS Array Hijacking with MBCS – hasegawa

Shibuya.XSS テクニカルトーク#1 開催しました。 – 葉っぱ日記

  • Array形式のJSONをジャックする
  • Firefox 修正済み
  • UTF-8をShift-JISで解釈すると壊れた解釈をしてしまう問題

Mozillaはポテンシャル的な脅威にも対処してくれる

  • Content-Typeとcharset をちゃんとつける

LT

mixi scrap Challenge

  • 学生向けのセキュリティイベント
  • 用意したmixiクローンサイトに攻撃してもらって脆弱性を見つけてもらう

イベント用に使ったサイト

  • イベント用のmixiサイトをクローンしてXSSを探してもらう
  • 日記ページにあるXSSを探して、スタッフアカウントに対して攻撃URLを送ってもらう
    • 得点方式

問題

  • ネギ男に、イラクとnicknameがalertされるURLを踏ませて下さい
  • ネギ男に….

みたいな問題形式

実際のサービスのクローンを舞台にして

  • 盛り上がった
  • より実践的な体験をしてもらえた
    • XSSをみつけるだけではなくSNSの使用を考慮して実践的な内容になった
    • 問題をつくやすかった
    • git-grep “XSS” revertで過去に対応してXSS問題から引き出す

AjaxアプリケーションのXSS対応入門 – 徳丸

  • 入門書にもAjax的な問題
  • X-Content-Type-Options: nosniff

JSONハイジャック

  • JSONを罠サイトからスクリプト要素を呼び出す
  • 通常はただのデータなので、読み取りはできないはず…
  • JSONハイジャックで読み取りができてしまう => 既にブラウザは対策済み
  • Androidだとまだ発生する(4.0.3だと問題ない)

対策

  • ヘッダチェックが無難
  • あんまりいい方法がない
  • 外部APIは基本的に信用しない

CSS HTML Attribute Reader – kyo_ago

The Sexy Assassinで紹介されてるCSS HTML Attribute Readerがどこまで危険か検証してみた http://bit.ly/HU74ad

  • CSS Attributeでパスワードの取得 -moz-anyと合わせ技
  • 外部からCSS書けるということ自体が問題
  • :visited の履歴取得も最近のブラウザは対策されてる

ロングIPアドレス

  • ドット無しでドメインを書くことができる
  • ドットを無効化しても、数字だけでドメインを書く事ができるので問題が起こる場合があるかも

セキュリティ小ネタ – send

http://d.hatena.ne.jp/send/20120405/p1

rootkit

  • rootやadminが使えなくなってた
  • 対策
    • 別の所からpsやkill等のバイナリを持ってきてきて殺してた
  • chattrされてた
    • 細かい改ざんをやっていた
  • 対策として改ざん検知などの導入で数ヶ月使った

よく狙われる脆弱性

JSだとimg onerror

  • src属性指定後すぐ発火してしまう
  • ドキュメントに追加しなくても発火してしまってる(高速)
  • onerrorは除去しにくいので対策しにくい

余談

  • 最初にサブドメイン以下にtest. やadmin.とかを見る
  • crossdomein.xml

パスワード入力はやっぱり別ドメインに分けるべき

DOS

くよくよくよくよ

  • セキュリティを使うと守ると考えるは違う

メモ : Mou + Github.css

    カヤック社内勉強会でBusterJSについて発表してきた

    完全にノープランでしたが、唐突にカヤックの社内勉強会に参加してきて、今色々触っているJavaScriptのテストフレームワークのBuster.JSについて発表してきました。(部外者です…)

    スライド : JavaScript Testing FrameworkのBusterJSを使う

    今JavaScriptのテストフレームワークは色々ありますが、Buster.JSJsTestDriverと似た仕組みを持ったテストフレームワークです。
    Nodeで書かれてる所が大きく違いますが、細かい仕組み等はBuster.JS Architecture overviewという文章が公開されているのでそこを見るのがいいです。

    中心となってる作者の一人はSinon.JSTest-Driven JavaScript Developmentで有名なChristian Johansenですが、
    テスト駆動JavaScriptで書かれてるようなノウハウが詰まった感じのテストフレームワークになっているので、触っていてとても楽しいツールになっている気がします。
    またJsTestDriverはブラウザ向けという感じが強いですが、Buster.JSはNodeで書かれているのもあって、Nodeでテストを実行するという方法も行えるのでNodeのテストもできるようになっていると思います。

    まだ、Beta 2なので実装されてない部分やWindows未対応(Windowsで試すならtry-busterjsとか)などの点もありますが、
    それ以上に勢いを感じられるので今後のテストフレームワークの選択肢の一つになってくれるんじゃないかなーと思います。

    WebStormでも使いやすくするために、WebStorm Integrateについてもスライドに少し書いてあります。

     

    Mozilla Vision 2012 Conference Day アウトラインメモ

    Mozilla Vision 2012 – Conference Day

    Mozilla Vision 2012 Conference Dayに参加してきたので、その時のメモです。(いつも通り正確性は保証されません)

    NewImage

    Read the rest of this entry »

    今まで書いたJavaScript情報の読み方をまとめてみた

    もう既に見た人もいるかもしれませんが、オフライン勉強会でJSer.info一周年について発表してきた | JSer.info
    今まで書いてた記事のまとめ的な発表をしてきました。

    世界のJavaScriptを読もう @ 2012を発表していた時、RSS購読フローの部分がなぜか受け良かったようなので、簡単な補足を書いておきます。

    Social flow

    自分はRSSリーダを多用しているので、何でもRSSにしてとりあえずRSSリーダーに流れてくるような状況を作っています。
    Webサイトを見ていて、Read It Latorなどで後で読むことにしても結局読むのを忘れてしまうことがあるため、Read It Latorに登録したリストがRSSとしてRSSリーダーに流れてくるといった感じです。

    Pinboardやはてなブックマークやソーシャルニュースサイト等もRSSで購読していると、同じ記事を扱ったものが何度もRSSに出てきます。
    これは今からRSS購読すべきタグと検索結果でLDRの読み方にでも書いていましたが、SBMなどは量が多くなってしまうので、全て目を通そうとすると気疲れします。
    そのため、SBMや検索結果等のRSSは高めのレートにして心理的に飛ばしやすい(LDRでいうSキーを押す)状態にしています。

    なんで検索結果のRSSは★4にしてるかというと、検索結果RSSで出てくるサイトは★3のサイトと被ったりすることがあるので、
    ★4で飛ばしても★3で出てくるからまあいいっかと適当な感じで読める安心感が生まれます。

    今からRSS購読すべきタグと検索結果 | Web scratch

    ここから、発表してたときにウケてた部分ですが、RSSリーダで読んでいるときに少しでも気になった記事は
    とりあえずTwitterへ投稿しています。(Post Now browsing to TwitterがLDRから直接投稿できるようにしているのもその辺の関係)
    一応軽くは目を通してからTwitterへ投稿していますが、専門的な記事や英語の記事など一度みるだけじゃ理解が出来なかったり、判断が難しい記事も多いと思います。

    そういう時にTwitterのフォロワーから反応があると理解しやすかったりします。
    またFavやRTがあったものが流れてくるようにRSSを購読しておけば、重要な記事 (少なくてもフォロワーが興味を持った記事)が再度RSSとして流れてくるようになります。

    こういう感じで、重要な記事は何度もRSSとして流れるようにして、読み忘れを減らしたり & 心理的に軽い気持ちでフィードを読み飛ばしても大丈夫なように意識しています。
    他の人の力も借りて手を抜きつつ、人があまり見ないようなところもチェックするようにして、いろいろな情報を共有できればいいかなと思います。

    どういう所などをみているかについてはオフライン勉強会でJSer.info一周年について発表してきた | JSer.infoのスライドの方にもまとめたのでそちらを見てください。

     

      第七回ありえるえりあ勉強会 アウトラインメモ

      第七回ありえるえりあ勉強会 〜JSで大規模・エンタープライズ開発〜に参加してきたので、その時のメモ。

      「JavaScriptで大規模ゲーム開発」渋川

      ソーシャルゲームの定義
      • ユーザー間で非同期のやり取りが発生する

      ngCore

      • マルチプラットフォーム
        • 同一ソースでAndroidとiOSに対応
        • テスト環境はFlashにも対応
      ゲームの構成
      • ngCore上にゲームロジック/JavaScript
      • サーバ/APach+FCGI上に認証とか結果の書き込みをMobageサーバに
      役割分担
      • ngCoreのクライアント
        • アクションシーン
        • サーバ側で作ったデータの再生
      • ゲームサーバ
        • パラメーター保持、変化
        • アイテム管理
        • ミッションのスロットの目の決定など
        • ずる防止をするためサーバ側でロジックがある
      ngCoreの開発サイクル
      • node.jsで書かれたビルドサーバでビルドを行う。
        • ファイルの結合とか
      コード
      • CJSライクなモジュール
      • クラスを作るsubclass関数
      • ゲームはmain関数から始まる
      • Core.UpdateEmitter でゲームループを回す
      ゲームの基本構成
      • シンプルなクラス群
        • Sceneクラスを継承してシームを作っていく
        • Sceneを遷移してゲームの遷移が行われる
      • サーバ側からjsonのジョブスタックを受け取る
        • ミッション結果なども配列で返ってくる
        • 知らないジョブが来たら無視が基本方針
        • クライアントは順番に再生していくだけ
        • 新しいミッションも簡単に追加できる
      • サーバエラーがおきたらホーム画面に強制的に戻る
      DnLig/ngGo
      • DnLib
        • ゲーム開発の共通ライブラリ
      • ngGo
      開発拠点
      • サンフランシスコ
      • 日本
      • パキスタン

      • SKypeチャットが主なインフラ

      • git
        • git flow
      • ドキュメントSphinx
      ngGo/ngBuilder
      • – データ駆動で行えるように
      • - パラメーターチューニングのしやすさ
      デバッグとテスト
      • デバッグメニュー
        • サーバにデバッグ用画面がある
      • Jasmineを使ってる
      今後のngCore
      • 3D対応、HTML5対応

      まとめ

      JavaScriptベースで

      オフラインWebアプリケーションの作り方 (白石)

      Google Gearsを使ってオフラインアプリケーションを作ったことがある。

      オフラインWebアプリケーション

      Google Gears
      • Google Gears終了 –> HTML5へ以降を推奨
        • HTML5を中心にするようになった

      オフラインでも読めるアプリの作り方

      • それほど実装は難しくない
      • アプリケーションキャッシュを利用すればいい
      アプリケーションキャッシュとは
      • 静的なリソースをキャッシュすることができる機能
      • ローカルキャッシュの利点
      • IE以外のブラウザでは実装されてる
      キャッシュマニフェスト
      • リソースのリストを作成する
      • Titanium Mobileのリファレンスはローカルキャッシュされてる
      アプリケーションキャッシュのJavaScript API
      • window.applicationCacheにJavaScriptから操作できるアプリケーションキャッシュAPIがある。
      アプリケーションキャッシュを利用する上での注意点
      • キャッシュマニフェストを更新しないとリロードで反映しない
      • キャッシュ容量が限られている
        • モバイルとかだと10MBぐらい

      オフラインでも書けるアプリの作り方

      • 割りと面倒なもの
      • デスクトップアプリとやりたい事はあんまり変わらない
      オフラインWebアプリを作るポイント
      • 基本はリッチクライアント+同期機能
      利用できるローカルストレージ
      • Web Storage
      • Web SQL Database
      • Indexed Database API
      • File API
        • ドメインごとに仮想的な空間
        • セキュリティ的なものがあるため
      双方向同期

      かなり難しく面倒くさい – フェールセーフ – 更新の衝突 – 同期のタイミング – ネットワーク状態、データの状態管理 – ローカルDBのスキーマ管理/サーバのスキーマと2つできてしまう – ローカルDBのクオータ(5MBぐらい)

      - 容量の限界がきたときにどうするか
      

      まとめ

      • オフラインアプリケーションといっても読む/書くの2つがある
      • 書く/同期的なアプリケーションはかなり面倒臭い
        • 割り切ったほうがいい

      スケールするUIについて – @monjudoh

      Objective-Cで非同期処理のチェーンライブラリとか

      要素数

      ループの中でbind/unbindしてたので大量に追加されたときに重たかったのでliveメソッドに変更 bindはここの要素に付けるから、要素が多いと死ぬ。delegateとかliveはその枠の方にイベント一個張るだけだから軽くてすむ。

      D&D
      • ユーザが触れる範囲だけにイベントを付ける
      • D&Dは複数のイベントから成り立つので複雑(down->move-up)
      要素の生成
      • UITableView
        • 表示範囲+ぐらいのみを描画してる
        • 再利用してる

      JavaScriptのテスト事情 – @os0x

      • JavaScriptのテスト
        • まだまだ未成熟
      • 二種類
        • JavaScriptのテスト
          • JavaScriptだけなので比較的わかりやすい
        • JavaScriptを含めたテスト
          • UIとかも含むインテグレーションテスト
      インテグレーションテスト
      • インテグレーションテストは書くのが大変
      • 動いてあることが保証できるので重要
        • 後から追加修正とかも
      インテグレーションテストの定番 – Selenium
      • インテグレーションテストは遅い
      テスト実行環境
      • カピバラさん + Webkit
      QUnit,Jasmine
      • Jasmineの方がアプリケーションテストは向いてる
      jasmine-headless-webkit
      • jasmine のspecをCUI環境で実行できる

      Titanium Mobile – Masui Yuichiro

      • ココログ
      • liblis
      • AKB
      • サイボウズLiveの
      • MobSnap

      Titanium Mobile

      • JavaScriptだけでアプリを作成できる
      • Titanium Mobile のモジュール売買できる
        • mobile market place

      モバイルのUX

      • それぞれのプラットフォームに合わせた形に変換する
      • それぞれに合わせたUIはUXに
      • タブバーの位置がAndroid/iPhoneで逆になったり

      飯食う

      • 追加モジュールとサポートのみが有料
      • 認定トレーニング

        感想

        • ちょっと落ち着きがなかった気がするの
        • あまり掘り下げた感じにはならなかったのは少しもったいない気がした。

        メモ環境

         

          Mozilla 勉強会@東京 6thのアウトラインメモ

          2011年10月1日に行われたMozilla 勉強会@東京 6thのメモ

          イベントのページ: Mozilla 勉強会@東京 6th
          Twitterのまとめ: Mozilla 勉強会@東京 6th – Togetter

          • 14:30 – 15:00: 開場、発表者準備
          • 15:00 – 15:10: Opening

          自己紹介の流れ。

          ■15:10 – 15:50: Firefox for Developers – 開発者ツール&セキュリティ編
          Firefox開発者ツール – Web Console
          • コマンドの補完

          Inspector

          • DOM Inspectorみたいなもの
          • 要素を調査するツール
          • Style Inspector(開発中)
          CSS Doctor
          • CSSの間違いとか
          ScrachPad
          • エディタ
          • 選択行のコードだけを実行できたりする。
          GCLI
          • ubiquityみたいな感じの
          • CUIとGUI
          Source Map
          • CoffeeScriptのような変換コードと元コードをマッピングしたたものを作る
          • 変換前の言語
          Tilt
          • DOMマップを3D化するアドオン
          about:Firefox
          セキュリティとプライバシーの話
          Same Origin Policy
          Content Security Policy
          • 次世代のセキュリティポリシー
            • XSSの攻撃防止
          • コンテンツ種別で読み込み制御
            • 画像やCSSやJSなども制御できるようにする
          • Webkitではほぼ開発されてる
          • デフォルトセキュリティポリシーがいろいろ強化される
          • CSPの使い方
            • X-Content-Security-PolicyのHTTPレスポンスヘッダを送信
            • HTMLのメタタグは書き換えできたりするものだからヘッダーで
            • Apache でCSPの設定
          • CSP対応に移行する
            • JS,CSSは外部ファイルに
            • evalを使わない
            • ポリシー違反レポートでどこがおかしいのかも確認できる
              • ヘッダーでレポートを報告するURLを指定してログを残せる
            • CSPブックマークレットもある

          HTTP Strict Transport Security

          • HTTPSでの接続を要求するヘッダ
          X-Frame-Options
          • クリックジャッキングとか
          Cross-Origin Resource Sharing
          • クロスドメインでの読み込み許可
          • 他のドメインから読み込まれてもいい場合の設定
          • XHR2とか
          ユーザ追跡拒否ヘッダ
          • Do-Not-Trackヘッダ
            • ブラウザ側でサイトに通知する
            • IE,Safariも対応
            • Chromeだけ非対応
          • 受け取ったらユーザー追跡をしない
          ■15:50 – 16:30: Pano って拡張機能 teramako
          Panorama
          • Firefox4から導入された
          • タブグループを管理するビュー
            • アクティブなタブグループの切り替え
          タブの種類
          • ピン止めタブ(AppTab)
          • グループの属するタブ
          • グループに属さないタブ(Firefox7で廃止)
          Pano できること
          • グループの作成/削除
          • グループ名の変更
          • D&D操作
          実装の仕組み
          • panoramade上で起こったイベントを拾ってビューを作ってる
            • tabopenなど
            • 起こらないイベントは上書きして起こす
          • 基本的にはビュー
          頑張った所
          • アイコンはSVG
            • いろいろな場所で使われてる
            • 使いまわしたい -> SVGで作る
          • SVG
            • ベクターなので拡大縮小できる
            • ファイルサイズも小さい
          • about:addonsでアイコンが表示されてない
            • アイコンのサイズが指定されてなかった
            • SVG内にサイズの指定した
          • タブ、Panoramaから発生するDOM Eventを拾う
            • Panoramaから発生しないEvent
              • グループが作成された
              • グループから削除された
              • グループから移動した
            • 取れないEventは無理やり発行させる
              • Gropuが作成されたときに起きるイベントを上書きする
          • GroupItems.registerの上書き
            • 元関数を実行
            • DOM Eventを発行
            • コールバックシステムに関数を登録してDOM Eventを発行させる
          起動速度の改良
          • 起動時のスクリプトは最小限
            • 必要なときにロードさせる
            • mozUSSubScriptLoaderの使用
          • 必要なときに取得
            • getterの使用
          • 速い読み込み
            • Firefox8 から mozUSSubScriptLoader もキャッシュされる
          実装方法
          • 最初の読み込みは必要最小限
            • 40行ほど
            • 最初はロードするものを書いておいて、ロードしたときにそれを上書きする
          • getterの使用
            • XPCOMUtil.jsmを使用してgetterを使いやすくする
            • defineLazyGetter
          コンテンツの遅延読み込み
          • bartab
            • 起動したときはタブはできるが、ロードはされない
            • タブが選択されたときに初めてロードされる
          • nsISessionStoreが鍵
            • 短いコードで実現する
          非アクティブなグループ内に開くには
          • Panoramaとバッテングして上手く行かなった
          • 上手い解決方法が見つからない
            • setTimeoutでぐるぐるー
          パネルでD&Dするために
          • パネルをドラッグする前に閉じないようにする
            • noAutohide = true
          • メニューボタンを押したときは閉じない様にする
          ■16:40 – 17:20: restartless – 再起動不要なアドオンをSDK無しで作るフレームワーク – Piro
          Add-on SDKの目的
          • 誰でも開発できるようにする
          • 高機能なアドオンの開発は目的ではなかった
          • 今までのアドオン開発
            • 自由すぎた
            • 敷居高い
            • 何でもできた
          • SDKを使えばある程度制限された状態で簡単作れるようになる
          Add-on SDKはGreasemonkeyスクリプトと同じような立ち位置
          restartlessの目的
          • 再起動不要なアドオンを今までの開発と同じ方式で作れるように
          • Mozilla特有の事情を必要なのも従来方式
          • 対象も従来の開発者向け
          restartlessの使い方
          • main.jsの内容
            • startup()で読み込まれる
            • 専用の名前空間で実行される
            • shutdown()を定義
          • ユーティリティ
            • location.href
            • load関数 = Cu.importと互換
            • require関数
            • existsでファイルの有無を調べる
            • resolve 相対パスの解決
            • EXPORTED_SYMBOLS
            • doAndWait
              • 非同期処理を同期的に扱うときに使用
            • jstimer
            • pref
            • locale
              • 国際化
            • config
            • WindowManager
              • DOMWindowにアクセスする
              • ウィンドウのopenを監視
            • KeyboardShortcut
              • ショートカットの定義
            • jsDefferred
          restartlessの利用例
          • ALT
          • back to owner tab
          • Fox Splitter

          restartlessのコードリーディング

          • index.rdf
            • bootstrap=”true”で再起動不要と認識される
          • bootstrap.js
            • モジュールのロードとか
          • loader.js
            • ユーティリティとかが定義されている
            • doAndWait
              • スレッドをたててメインループを回す実装
          • main.js
            • 各アドオンのコード
          • module
            • 各ライブラリが入ってるので、削除すれば消える
          ■17:20 – 18:00: Lightning Talk
          • アドオン SDK を利用した初めてのアドオン開発– by knagato
            • 初めてアドオン開発する人が対象
            • SDKを使ったアドオン開発を特徴
              • HTMLやJavaScriptなどが中心で、XULやXPCOMなどMozilla特有の機能を使わなくても開発できる
            • 開発環境の種類
              • Add-on BuilderをWeb上での開発
                • 再起動不要なのでその場で試せる
              • Addon SDKを使った開発
                • コマンドラインベース
            • Add-on SDKのチュートリアル
          • Thunderbirdアドオンによるワークフロー開発について– by Nakashima
            • 提案するツール
              • 自分自身でのプロセス改善が可能
              • やり取りの簡略化ができる
            • http://www.p2pwf.com/ に仕様の詳細
          • Forking Secure Login – by saneyuki_s
            • Secure Loginアドオンのフォークの話
              • 現在はメンテナンスアップデートのみになってる
              • 全面改装してる
            • 一部機能の省略
            • レガシーコードの除去
            • doorhanger対応
              • Firefoxに入ってるSSLのポップアップするやつ
          • jQueryで破棄されたrequestAnimationFrameとJSでのアニメーション実装で注意すること – by kyo_ago
            • requestAnimationFrame
              • setIntervalの問題点としてアニメーション向けではない
            • jQuery 1.6から削除された
              • setIntervalとrequestAnimationFrameが衝突してキューがたまる
              • タブがバックグランドにあるときの挙動
          • ES.next WeakMap– by mooz (@stillpedant)
            • WeakMap = 連想配列
            • Firefox6から利用可能
            • {}やObject()と比較して
              • keyにオブジェクトが指定可能
                • ハッシュはkeyに文字列しか指定できない(toStringされてる)
                • WeakMapはkeyにオブジェクトが指定可能
                  • オブエジェクトしか指定できない
                  • プリミティブ値はエラー
                • オブジェクトの外部拡張
                  • DOMノードに独自プロパティは危険
                  • ES5ではオブジェクトの拡張がfreezeできる
                  • オブジェクト自体は拡張しないで、外部に付加情報を持つ
                  • WeakMapを利用する
                    • キーとして外部情報をもたせる
              • keyに指定されたオブジェクトを弱く参照
                • CGにたいして
          • Firefox4以降のE4X– by teramako
            • ワイルドカード
              • *が指定子に使える
            • 属性アクセス
              • @が使える
            • Firefox3.6までは上記のものがE4X以外でも使えた
              • Firefox4以降は禁止された
              • ざんねんでしたね

          第3回ブラウザー勉強会 アウトラインメモ

          2011年8月20日開催された第3回ブラウザー勉強会に参加してきたので、その時のメモです。

          TwittterのログはTogetter – 「第3回 ブラウザー勉強会(#BrowserWS)のまとめ」にまとまっています。

          Read the rest of this entry »

          Shibuya Perl Mongersテクニカルトーク#16 アウトラインメモ

          Shibuya Perl Mongersテクニカルトーク#16 : ATNDに参加したので、メモっていた内容です。(正確性は保証されません)

          夏の正規表現祭り

          • 18:45 – 開会宣言(会場からの諸注意)

          18:50 – Dan the (Irr|R)egular Expressionist – @dankogai

          • メールアドレスの検証
            • 狭義のメールアドレスは正規表現でマッチできる事になっている
          • IPv4アドレスの検証
          • use Regexp::Commonにこういうよくある感じのが簡単に使えるようになっている。
          • コストが高い正規表現
            • 手動でやるのもコストが高い(人的に)
            • use Regexp::Assemnle というものがある
              • マッチした正規表現を返してくれる -> Perl5.10のやつはここまではできない
            • 実はPerl5.10以降はTRIE Optimizationはしてくれる
          • s//42/sexsexsex…
            • eだけは重ねると意味がある e 修飾子
          • 正規表現はPerlに通じる
            • JavaScriptの正規表現は弱い

          19:10 – スペシャルゲスト「正規表現メモ」 – 木村浩一

          • マイナーな正規表現演算子
            • [[:<:]] と [[:>:]]
              • tclの正規表現
            • [= =]
              • [=e=] はeにアクセントキーがついたものにもマッチする
              • e, é, ë
            • [. .]
              • アルファベットで複数文字が1文字と見なせるための正規表現
              • [.hoge.] <- 一文字と見なしてくれる
            • JPerl 5.6
              • Javaで書かれてます!
              • 5.6で正規表現に戻り読みというのが入った
                • 固定長の問題
            • POSIXの正規表現の分類
              • basic
              • extended
              • Perl拡張
            • 文字クラスとlocaleの悩ましい話
              • []の中で-範囲指定を使って書くときの問題
              • [a-Z] とか言語によって違うことが

          19:40 – Hello, re::engine! – @__gfx__

          • Perl5でPerlのコアと正規表現エンジンを独立させた
            • コードを修正しなくても正規表現エンジンを変えられる
          • いろいろな正規表現エンジン

          19:55 – 正規表現の限界 – @sinya8282

          • 正規表現で何でも表したい
          • 正規表現の演算
            • 基本 : 連接、選択、閉包
            • 糖衣構文 : .^$[]{}()?+
          • マッチしない正規表現 : 否定表現
          • 正規表現の否定 = 正規表現からDFAを作る事
            • DFAの受理状態と被受理状態
            • DFAになれば否定は簡単
          • 任意の文字列を対象にした否定ツール
          • 正規表現で表現できないもの = 自由文法
            • 括弧の対応、四則演算
          • Perlなら再帰のRがある
          • 四則演算と深さを指定したもの
          • 四則演算と長さを指定したもの
            • それぞれできる

          Lightning Talks

          • 20:30 – 僕の考えた世界最強の正規表現エンジン(速けりゃイイじゃん?) – @sinya8282
          • 20:35 – Plaggerで覚えたPerlの正規表現 – @yusukebe
            • 正規表現を覚えた道のり
            • Filter::EntryFullText を正規表現で
              • フェッチして正規表現でbodyを取る
            • エロYAML群
            • 正規表現の最初はPlaggerで
            • 既存プロダクトをいじって学ぶ
          • 20:40 – Regexp::Assembleで正規表現を作るとか – @yappo
            • 住所のマッチを正規表現
              • 郵便局のデータを元にした
            • Regexp::Trie
            • Regexp::Assemble <- こっちがオススメ
          • 20:45 – 再帰的正規表現 – @TAKESAKO
            • (?R) (?0) (?1)
            • JSONとXSS
            • JSON valueの定義
              • JSONのバリデート
            • 正規表現でJSONを表現
            • (?R)
              • JSONのバリデーションに使える
          • 20:50 – 僕と契約して、自己言及コードになってよ! – @sugyan
            • "Quine ruBy"
            • Perl版、JavaScript版を作成
            • Quine(クワイン)
              • 自身のソースコードを出力
          • 20:55 – 色々なものを正規に表現してみよう(仮) – @nipotan
            • 電話番号の正規表現
              • 総務省発表データから作った Number::Phone::JPというものがある
            • 郵便番号の正規表現
              • よくある感じのは無駄なマッチが多い
              • 無駄なものを省いたNumber::ZipCode::JP
              • DBに若干勝つ速度

          感想

          Perlはほとんど触った事なかったけど参加した。そういえば、数少ないPerl経験も正規表現書くだけだったなー
          ↑正規↓表現は奥が深い…
          就職活動してから参加したのでスーツのままでした。。

          東京Node学園 1時限目のアウトラインメモ

          東京Node学園 1時限目

          ~サーバサイドJavaScriptの幕開け~

          http://atnd.org/events/13529

          Togetter - #tng1のまとめ

          http://togetter.com/li/115851

           

          タイムテーブル

          時間

          題目

          発表者

          Ust

          19:00-19:25

          開場

           

           

          19:25-19:30

          ご挨拶 / 5分でわかるNode.js

          @meso

          #1 04:42AM

          19:30-20:00

          ECMAScript5時代のJavaScript再入門

          @masuidrive

          20:10-20:40

          『非同期プログラミングの改善』のエッセンス

          @koichik

          21:50-21:20

          Nodeにおけるテスト手法

          @Jxck_

          #2 05:49AM

          21:30-21:50

          LT大会

           

           

           

          Kinect + node.js + Audio Data API でテルミンみたいな楽器を作る

          @hakobera

           

          「node.jsによるマルチプレイヤーネットワークゲームの可能性」

          @ndruger

          -22:00

          完全撤収

           

           

           

          ご挨拶

          http://tng1.mesolabs.com/

          Node.jsについては著者のブログを読む

          Node.jsの目的はスケーラブルなネットワークプログラムを作成する

          既存のI/Oライブラリがないため、位置からブロックしないライブラリを作成することができる。

           

          ECMAScript5時代のJavaScript再入門

          増えた機能

          JSONサポート

          配列のイテレーター

          Getter, setter

          Strict mode

          5thは誰のためのもの

          独自仕様の整理してAjaxなどから大規模なものも増えてきた。

          多人数の開発やコードのりユーズのための整理

          非同期処理

          JavaScriptは非同期処理を書きやすいけどネストが深くなる。

          JSDeferredライブラリで縦に非同期処理がかけるのとエラー処理を最後にまとめて書くことができる。

          Property Descriptor

          Setter/Getter

          ObjectFreeze/Sealでアクセスレベルの指定

          Object.create(),cloneなど

          Objectの拡張はライブラリでも似たようなことが可能だが、ESでの仕様としてあることで共通知識として利用できるため可読性などが向上する。

          PhotoShare

          サーバー側はRuby

          HTTP経由でアプリテストすると時間がかかる。

           

          ES5によって独自から共通へ

           

          『非同期プログラミングの改善』のエッセンス

          http://www.slideshare.net/koichik/node1

          Node.jsの非同期スタイル

          イベントリスナ・スタイル

          onメソッドでイベント

          コールバック・スタイル

          APIの最後にコールバック関数を渡す

          (プロミス)

          今はない

          Deferredみたいなメソッドチェーンもできた

           

          コールバックスタイルの問題

          無名関数を使うとネストが深くなってしまう

          関数名をつけて使うとgotoもどき

          try..catchがうまくいかない

          改善するには

          コールバックと無名関数を分離する

          コールバックの役割は「次」の無名関数を読み出す

          その無名関数は「アクター」と呼ばれる

          アクターとコールバックを結びつける

          フロー制御モジュールライブラリを使う

          複数のアクターを受け取ってって、アクターにコールバック(next)を提供する。

          フロー制御を導入すると

          ネストが深くならない

          可読性が向上する

          エラー時のルーティング

          アクターごとのエラー処理をしたくない

          エラーが起きたら途中のアクターを飛ばす

           

          Nodeにおけるテスト手法

          Nodeにおけるテストの考え方

          Assertion

          require(“assert”);

          Testing フレームワーク

           

          require(“should”);

          obj.should.test(“”)

          Objectを拡張して、列挙されないようにしてる

          require(“expresso”);

          赤いシャツの人が作った

          jscoverageの出力

          tearDownとかない

          require(“nodeunit”)

          Unit系のモジュール

          qunitみたいな感じ

          ブラウザでも動作する

          exportの代わりにthisを使うことで、どちらでも動作するコードがかける

          sandbox機能

          CI的な機能もあるよ

          クライアントとサーバサイドどちらも同じようにかけるのは大きな利点になる

          require(“Vows”);

          非同期に適してる作り

           

          require(“tobi”)

          ブラウザ的なものをシミュレートしてテスト(envjsみたいな)

           

           

          LT大会

          Kinect + node.js + Audio Data API でテルミンみたいな楽器を作る @hakobera

          http://d.hatena.ne.jp/scalar/20110324/1300983209

          kinnect hackatonではXBOX360所有者がで2/20

          kinect+node.js+Socket.IO

          Kinect -TCP/IP - NodeJS – Socket API – ブラウザ

           

          Kinect.jsの作成

          C++実装 -> Javaラッパー -> Rhino -> JavaScript

          JavaScriptkinectで動くものが帰る

          DSJ(デバイスサイドJavaScript)

          現在の欠点

          遅い

          使ってるラッパーの制限

          node.jsではない

           

          node.jsによるマルチプレイヤーネットワークゲームの可能性 @ndruger

          http://www.slideshare.net/ndruger/nodejs-7375453

          リアルタイム→Node.jsなら簡単

          サーバークライアントで693行程度で簡単にかける

          敷居が高かったものが手軽に作成できる時代

           

           

          他の参加者のまとめ

          東京Node学園 1時限目 メモ – すぎゃーんメモ

          2011-03-25 – のりーごのアミーゴ日記

          東京Node学園 1時限目にいってきた – Web::Service::Blog->new( user => ’hide_o_55’ )

          東京Node学園1限目行ってきましたメモ – y-kawazの日記

          詳細に書かれているので参考になる

           

          感想

          会場(リクルートアネックス1ビル B1F)も伴ってか何かゆったり広々な感じであんまりガツガツとした雰囲気がなかった。角度、距離(文字サイズなども)的にスライドを見るのがつらい部分もあった。

          『非同期プログラミングの改善』のエッセンスLTが面白かった。


          タイムテーブル

          時間


          題目


          発表者


          Ust

          19:00-19:25


          開場







          19:25-19:30


          ご挨拶 / 5分でわかるNode.js


          @meso


          #1 04:42AM

          19:30-20:00


          ECMAScript5時代のJavaScript再入門


          @masuidrive




          20:10-20:40


          『非同期プログラミングの改善』のエッセンス


          @koichik




          21:50-21:20


          Nodeにおけるテスト手法


          @Jxck_


          #2 05:49AM

          21:30-21:50


          LT大会










          Kinect + node.js + Audio Data API でテルミンみたいな楽器を作る


          @hakobera







          「node.jsによるマルチプレイヤーネットワークゲームの可能性」


          @ndruger




          -22:00


          完全撤収





          プロフィール: azu(アズ)
          Firefoxの事やソフトウェアの紹介や使い道、Greasemonkeyの作成
          • OS:Windows Vista, 7
          • ブラウザ:Firefox
          • Twitterのアカウントはこちら
          • azu_re
          • メールアドレス(Twitterの方が確実)
          • info@ドメイン名
          リンク