Posts Tagged ‘イベント’

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 トライアングル演算子

• 常にArrayを継承できる
• <|の右はリテラルしか置けない
• なぜリテラルのみ
  • JITとかに破壊的になってしまう
  • inline cacheが破壊されて、キャシュが機能しない
• 右側にfunctionリテラルときは挙動が変わる
  • 継承っぽくなる
  • Base.prototypeを[[Prototype]]にもつObjectが生成されて、インスタンスのprototypeに設定される
• ECMAScript と OOP パラダイム、それに ES.next の議論中 OOP 周りのシンタックス – oogattaの勉強日記

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 テクニカルトーク#1 : ATND に参加してきたので、その時のメモ。

Shibuya.XSS

• Shibuya.XSSまとめ – Togetter

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

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

JavaScript Testing FrameworkのBusterJSを使う via kwout

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

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

中心となってる作者の一人はSinon.JS、Test-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に参加してきたので、その時のメモです。(いつも通り正確性は保証されません)

Read the rest of this entry »

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

• 海外のJavaScript情報を見つけよう
• 世界のJavaScript情報を読もう
• 今からRSS購読すべきタグと検索結果
• ブラウザの最新情報を知るために、Web開発者が読んでおくべきブログ
• HOW TO LEARN (これだけ記事じゃないですが)

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

自分は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のスライドの方にもまとめたのでそちらを見てください。

• オフライン勉強会で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で逆になったり

飯食う

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

感想

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

メモ環境

• Mou

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

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

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

• 15:00 – 15:10: Opening

自己紹介の流れ。

• コマンドの補完

Inspector

• 次世代のセキュリティポリシー
  • XSSの攻撃防止
• コンテンツ種別で読み込み制御
  • 画像やCSSやJSなども制御できるようにする
• Webkitではほぼ開発されてる

• デフォルトセキュリティポリシーがいろいろ強化される
• CSPの使い方
  • X-Content-Security-PolicyのHTTPレスポンスヘッダを送信
  • HTMLのメタタグは書き換えできたりするものだからヘッダーで
  • Apache でCSPの設定
• CSP対応に移行する
  • JS,CSSは外部ファイルに
  • evalを使わない
  • ポリシー違反レポートでどこがおかしいのかも確認できる
    • ヘッダーでレポートを報告するURLを指定してログを残せる
  • CSPブックマークレットもある

HTTP Strict Transport Security

• Do-Not-Trackヘッダ
  • ブラウザ側でサイトに通知する
  • IE,Safariも対応
  • Chromeだけ非対応
• 受け取ったらユーザー追跡をしない

• ALT
• back to owner tab
• Fox Splitter

restartlessのコードリーディング

• アドオン 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以降は禁止された
    • ざんねんでしたね

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

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

Read the rest of this entry »

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でPerｌのコアと正規表現エンジンを独立させた
  • コードを修正しなくても正規表現エンジンを変えられる
• いろいろな正規表現エンジン

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

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

Lightning Talks

• 20:30 – 僕の考えた世界最強の正規表現エンジン(速けりゃイイじゃん?) – @sinya8282
  • 実装した正規表現エンジンの紹介
  • regen
    • sinya8282/Regen – GitHub
    • http://code.google.com/p/regen/
  • 速度の追求
    • 動的なコード生成
    • 並列DFAマッチング
    • 機械語レベルの最適化
• 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時限目

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

http://atnd.org/events/13529

Togetter - #tng1のまとめ

http://togetter.com/li/115851

タイムテーブル

ご挨拶

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

ObjectのFreeze/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

JavaScriptでkinectで動くものが帰る

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が面白かった。