Archive for the ‘イベント’ Category

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

横浜JSTDDハンズオンに参加してきて、WebStormというIDEはどういうものなのかについて発表してきました。

WebStorm指南書

発表してきた資料置いておきます。

後から資料として見やすいように画像をたくさん入れながらWebStormの機能紹介について書いたので、WebStormについて知りたい方は読むといいです。
また、最近出たばかりのWebStorm 4.0 Early Access Programについても書いてあるので興味がある人はどうぞ。

スライドの見方

スライドは上記のように機能の紹介がベースで、それの利用方法やこういう機能があって便利という感じのスライドになってます。

WebStormの楽しさ

Web開発等JavaScript周りの環境も変化してきているので、それにあわせてエディタやIDEももっと変化するといいなーと思う部分にいろいろ挑戦してる感じがしてるのがWebStormが好きな所でもあります。
とりあえず、WebStormは30-day trialなので、試してみるといいかもしれません。他のエディタ等もいろいろ競争して質が上がっていくといいなー。

横浜JSTDDハンズオンの方ではJsTestDriverを使ったハンズオンをしたのでその時のアウトラインメモ。
Twitterのまとめは 横浜JSTDDハンズオン #JSTDD つぶやきまとめ – Yukarin’Note に

TDDとは何か

• プログラマが行うホワイトボックステスト
• 開発的なアプローチ(TDD)
• ドキュメント的なアプローチ (サンプルコード

TDD

• 開発を行うためにテストを行う
• コードカバレッジは考慮しない
• 先に大きなインターフェイスを書いて設計を行う

BDD

• 振る舞いを先に定義する
• 開発を始めるときは重要だけど、開発を進めるといらない

ドキュメントアプローチ

• ドキュメントの代わりにテストを書く
• キッチンシンクと言われたりするような主要な機能についてテストを書く
• 開発当初は微妙だけど、公開するにつれて重要になる。

品質的なアプローチ

• コードカバレッジは管理していく段階で重要になる
• コードカバレッジを重視すると、ドキュメント的な役割がし難く。

結合テスト

Seleniumとかの話

JsTestDriverのアーキテクチャ

JsTestDriverの使い方

setUp

各テスト実行前に実行される

tearDown

各テストが終わる事に実行される

AsyncTestCase

引数で同期か非同期化を分けられるので、SyncTestCaseにもできる。

各テストにはqueueという引数がわたってくる 非同期テストはとても面倒

sinon.js

非同期テストを楽にするFakeテストができる

JSTestDriverのエラーになりやすい所

• serverオプションに/を付けるとエラー
• 複数人で同じサーバのJSTestDriverを使える(パブリックはやめとけ)
• ブラウザでアクティブでないタブのsetTimeoutがゆっくりになるので、それぞれウィンドウで実行するのがよい

Sinon.js

トロイの木馬の手引きをしたスパイの名前が由来

ツール

• Qute for PC/Mac
• WebStorm

書いたコードは azu/YokohamaJSTDD – GitHub に置いてあります。

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

#shibuya_sp 勉強会 vol1 : ATNDに参加してきたので、その時のメモです。

iOSアプリケーションのUnit Test – 岸川

テストを習慣化するには

なぜテストを書かないか

• テストの効果がわかりにくい
• iPhoneアプリのテストってどう書けばいいのかワカラナイ
• デバイス固有のデータを利用していたりする

ツール/フレームワークを使う

• 繰り返し実行するのが簡単
• 自動化できる
• テスト結果が見えてくるようになる

無理をしない

• モデルのテストは書きやすい
• 論理構造はそう簡単に変わらないはず
• 繰り返し実行するメリットがあるので(正常系/例外/異常/境界値)をちゃんとテストする

表示は論理構造が簡単にひっくり返る事があるので、テストを無理に書こうとしない

テストしやすいコードを書く努力はする

• テストしやすいコードは、使い易いコードなので良い設計にも繋がる
• メソッドをきちんと分けてあげる

単体テストをワークフローに取り入れる

• OCUnit
• GHUnit

OCUnit

• XCode標準
• XCodeと統合されてるが、アサーションが貧弱
• 非同期テストがサポートされてない

GHUnit

• XCode非標準
• アサーションが豊富
• まともなテストができる(teardown/setup)
• 非同期テストのサポート(waitを使える)
• OCUnitのテストケースも実行可能
• viewのテスト機能が追加された

Viewのテスト

GHVerifyView あらかじめ取っておいた画面の画像と照らしあわせてテストしてくれる 画像での比較

Flashからcocos2dに移植した話 – CAつりポンチーム

• Flashとcocos2dに移植した

• 1万７千件のレビュー

• 平均4.5☆

• Twitterによる拡散

• 完全無料広告なし
• アメーバピグ
• ストレスフリー
• App Storeのレビュー誘導

オフライン対応

非会員対応

• ほぼすべての機能を非会員でも遊べる
• 会員と非会員の差別化
• タイトル画面の対応のみ
• ポイントの管理をローカルにおいて、サーバ側からポイント管理を排除

iPod Touchのユーザーが30% => オフライン対応の成果?

cocos2dとFlash

大量の画像を書きだす

• 手動は日が暮れるので
• アクションを作って、画像ファイル名=レイヤー名にしてバッチで生成

texturepacker を知る

• 一枚の画像に素材を貼り付けて、座標データからファイルを切り出して表示する
• CSS スプライトみたいな

AutoSD

自動でRetinaと通常の解像度を作成できる

Spriteはフォルダ管理

Finder上でフォルダ構造そのままにSPriteを管理できて楽 texturepacker上に反映する

見ていて飽きないガチャを作れという司令

まずはFlashで動きを作る

1. 色を選ぶ
2. ガチャを出すアニメーション

自作AIRツールで座標の抽出

swfから座標の抽出をするソフトを作成した

• 座標系の違いを補正する スクリーン座標 -> デカルト座標
• Flash上のレイアウトがそのままcocos2dに移植

cocos2dを利王した最適化と高速化

• 描画処理の高速化
• テクスチャロードの非同期化

iPhoneのOpenGLの傾向と対策

• OpenGLの描画を呼び出すほどオーバーヘッドが大きなリ重くなる傾向
• なので、texturepackerを使ってテクスチャを一回でロードしたりして 呼び出し回数を減らした。

テクスチャロードの非同期化

• 非同期で先にテクスチャを読み込んで、読み込み待ちを減少させる
• addImageAsyncを使って非同期ロード

テクスチャフォーマットの調整

• RGBA4444に統一してる(32bit -> 16bit)

モーション制御の最適化

CCPawnやCCSequenceを処理コストが多いでの、人体とかが苦手だった。 モーションデータを削減して、モーション制御をNEONで並列処理にして最適化

コンフィグの微調整

ccConfig.hでCCUSESVBOを無効にするだけで結構変わる

Time Profiler

順次上から見て最適化をしていく

まとめ

• テクスチャは一枚にまとめてCCSpriteBatchNodeで描画
• NEONなどSIMDを使って最適化
• ccConfig.hをみてチューニング

OCTOBAから見た面白いAndroidアプリ – 丸岡

Android Market

アプリ削除率

• 37%?

OCTOBA

• 男性が多い
• 30-40代が多い

パーミッションの問題

Any.Do

• 機密ログデータの読取
• このパーミッションを要求するアプリはレビューしない

いろいろなパーミッション

• 機密ログデータの読取
• 連絡先データの読取
• SMSメッセージの送信
• アカウントの認証情報を利用
• 起動中のアプリケーション情報
• 端末ステータスとIDの取得

広告SDKでGPSデータを利用してターゲティングを使用したりするものもある。 組み込んだアプリでGPSを使ってなくても、パーミッションが求められる

レビューの基準

人気ジャンル

セキュリティが5月(2011)あたりが入ってる

• ツール・設定系
• ゲームエンタメ系

昔はツール系が多かったが、ゲームエンタメ系が増えてきている

検索キーワード

1. 電話帳
2. 時計
3. メール

使ってもらえるアプリの考え方 – fladdict

ATMアプリを考えてみる

架空の事例で考える

リサーチ

• 既存のATMの機能?
• 既存のATMの不便?
• どういう時に使う

既存のATMの機能

• 残高確認
• 入金、引き出し
• 送金
• 設定変更

オンラインバンキングを含めるともっとたくさんあるので、 どの機能をアプリに含めるのかを考える -> 絞り込む、利用の想定

シナリオ

• 通販などの振込
• 通常の送金
• 支払い忘れへの緊急対応
• 残高確認

逆にスマートフォンで保険や税金管理などの操作はしないとのでいらないはず

90%のユーザーが必要な機能を入れる

• ヘルプなしでわかるアプリを作る
• アプリを起動してからそのアプリのタスクを1-2駅程度の間に完了できるようにする

必要な機能を絞り込んでから、コンセプトを立てる

コンセプトの定義

iPhoneアプリは大体4つの形がある

• ユーティリティ型
• ナビゲーション型(TableView)
• タブ型
• 没入型(全画面)

それぞれのタイプをプロトタイピングして検証していく。

ユーティリティ型

• 最低限だけの機能
• 残高の確認
• 送金ができる

ナビゲーション型

ユーティリティより機能は増える

• ニュース
• 残高
• 送金
• 設定

タブ型

ナビゲーション型と似た機能を持つが、平行して機能を使える

没入型

iPhoneのUIに頼らないので時間がかかる

• 実際の画面に似せるなど
• ナビゲーションを出してみたり
• 現実のメタファ

今回はナビゲーション型かタブ型

ナビゲーション型

• 拡張しやすい
• 単純

タブ型

• 拡張に限界がある
• 平行して機能を利用できるのが利点

ナビゲーション型は階層が深いと、作業を切り替えるにコストがかかるので、タブ型の方がやりやすい

タブ型のメニュー

よく使うものから左から右へ配置していく

ニュースを残高確認後に見る人はあまりいない ニュースをATM側としては配信したいので、ニュースを左に持ってきて自動的に見せるようにした。

設定画面

• ピンコード
• アカウント名
• 銀行アカウントのパスコード

入力UI

• Pickerを使って桁ミスなくすなど
• 送金時はボタンのミスタッチをなくす
• スライドで送金処理を完了させる <= 難しいUIな気がする…
• 最初にボタンを詰め込みすぎない

Edit Qute for PC/Mac

第七回ありえるえりあ勉強会 〜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 »

サイボウズ・ラボユース 「中間成果報告会」に参加してきたのでそのときのメモです。
かなり乱雑なメモで正確性など存在していないので、そのまま読まない方がいいです。
(特に手元でスライドがあるわけじゃないので、ちゃんとメモれてすらないです…)

環境記録
メモソフトウェア: bodhi/MarkdownEditor – GitHub

サイボウズラボユース中間結果発表会

NDAは結ばずに、成果をオープンすることを条件に支援を行う。

• サイボウズ・ラボユース

「ロボット制作を支援するログ解析プログラムの開発」 by @sn_monochr

マイコンカー

赤外線センサーを使ってリアルタイムで制御するカー。 C言語で開発を行う。

マイコンカーの走行ログ

走行ログ

• 制御プログラムの動作状態
• 赤外線などのセンサー状態

メモリが限られているので、データはシフト演算などを使って一つにまとめて保存、送信を行う。 これらのデータを可視化していくため、解析ソフトウェアを開発する。(Windows)

走行ログの可視化

• データに基づいたマシン調整が可能になる
• １つのソフトウェアに統合

夏の合宿

目標設定をして合宿を行った

• 走行ログの可視化

ラインの中でモードの変更をライン色の変更してる。

• 無線通信でログのやり取りをするのが今後目標

走るコースに、車線変更や直角カーブなどのマークが書かれていて、それを読み取ってモードを変えることで動きを変える。

「世界最速の正規表現JITエンジンの実装」by @sinya8282

• 正規表現エンジンの作成
• 正規表現の歴史は古い 1960～
• • 実装はたくさんある
• • いろいろやられている

「正規表現エンジンの開発」には意義があるのですか? -> 車輪は車輪でも「最速の車輪」を開発する

正規表現エンジンRegen(れーげん)の開発

Regen

動的コード生成

• Xbyak でJIT regex
• 正規表現に合わせて、プログラムがプログラムを生成する
• 正規表現コンパイルに最適化レベル導入(O0 – O4)
• • 最適化しにくいパターンもある

マッチング並列化

• 並列化のための特殊なモデルを実装

ベンチマーク

Google RE2との比較。

JITしても3-5倍の高速化 -> 今はメニーコアの時代 -> 正規表現の並列化

• 6コアでガクって落ちるのはアーキテクチャの問題

まとめ

高速化の二台手法は実装した、成果もでた

• JIT
• 並列化

これからの課題

• 実システムへの応用、ツールの作成
• 正規表現エンジンじゃないと処理できない問題
• • なければ作る
• ライブラリとして今夏中に整えたい

質問

• 正規表現 <-> インデクシング
• フィルターなどの分野では、流れるデータに対して正規表現の活用などもある。
• 禁止ワードのORつなぎみたいなものは正規表現より向いてる方法があるとか

「JavaScriptによる型推論器の実装と可視化」by takuto_h

• JavaScriptで型推論器を作りました – takuto_hの日記

型推論

• 型を書かなくて楽
• 型があるんで安全

引数の型

function foo(bar){ return bar + 1; }

どのような演算子を呼んでいるかを見て、型を推論する

型推論は方程式

• 値が広志位なら型が等しい
• 方の上での方程式を集めて解くのが型推論

コンピューターでは解くのか

a = b, b = c, c = d, d= int

<a>, <b>, <c>, <d>というオブジェクトとintという物体を用意する。

• a = b で <a : <b>>, <b>, <c>, <d>
• b = c で ….

どんどん置き換えて行って型推論を行う。

Ibisという型推論機

IbisはJavaScriptで書かれている。

• まずはパースして構文木にする
• ここからステップごとに型推論の計算(推論)を表示
• 最終的に、関数の入力と出力の型推論結果が表示される

型推論はパズル

質問

型推論にとってオブジェクトは鬼門

Q . 循環参照の時はどうするの?

２つの考え方

• 禁止する方針
• 再帰的なものも許す方針

OCamlは不健全な循環参照は禁止されている。 再帰的なものはチェックを付けて型推論を続ける。

演算子のオーバーロードがあると型推論はむずい

「世界で一番仕様に忠実なJavaScript処理系の作成」 by Constellation

iv/lv5

iv / lv5 VM engine – 枕を欹てて聴く

• ESのパーサーiv
• エンジンlv5

sputniktestというECMA262への正確性を測るテスト

• 以前はASTはインタープリンタ
• VMに変えたのでECMAエンジンといえますね。
• インタープリタと共存している(オプションで切り替えが可能)

JITをモジュールとして取り込めるのではないかと。

高速化

いろいろ。11倍近く高速

まだJITはしていない。

今後

• RegisterVmについての検討
• GCの自作

az: ECMAScript Analyzer

JavaScriptの補完候補を出す

型の推論 Doctorjs

• 抽象的なAbstractインタプリターを使って型情報を集めている
• これを元にC++にした

JavaScriptは後ろに関数宣言置けるし、補完するときにシンタックスは壊れてるからどうするの?

方針: シンタックスが不正なASTに対して解析を行う

• シンタックスが不正なスクリプトでも常にASTを得る

target.

こういう時はに解析を行うと、式がエラーになるので、ここでステートメントにマークを付ける。

改行があったらそのへんは大丈夫なんじゃないかと、してぶっちぎる。 JavaScriptにはセミコロン自動挿入があるので、改行を判定に使う必要性が出てくる。

問題点

• Abstractインタープリタは状態が有限でないと終わらない
• なので状態を有限して、行う
• jQueryとのfor inとかむず

WebStromの場合

• JSDocで型情報を読んでこれを基準に解析
• 元に情報を用意して何とかする方向

おわり

仕様忠実は第一

「現役高校生の考えるクラウドOSの設計と実装」by liva_s

クラスドOSって何だろう?

Googleの場合

• ブラウザ上でWebアプリを走らせている
• 確かにクラウドを利用している

僕の考えるクラウド化

カーネルのクラウド化

• カーネルがやるべきことをクラウドサーバー上で一括処理するのはどうだろか?
• サーバー側に処理を置くことで、クライアント側の負荷が減る

カーネルを分割して、クラウド上でカーネルが動いてるいうという状態

• 当然ローカルでやるべきことも残る(ハードウェア制御)
• ローカルとくらうどの線引きが大事になる

どの境界線はどう測るべきものかがわからない(ベンチマークで?)

マイクロカーネル開発

カーネルには最小限なものにして、Serverというアプリケーションにわけてやるもの。 この時のServerをクラウドに乗っければ、クラウドOSになる。

=> マイクロカーネルの開発がいいのではないかと

Serverを単位にして、ローカルとクラウドでベンチマークを取れば、境界線がわかりやくなる。

モジュール開発とマイクロカーネル

モジュールはプロセス管理を作る前に、モジュールを開発できる。 (後で動かせばいい)

まとめ

クラウドOSはWebアプリベースのOSではない

Q. カーネルでどの辺がボトルネックになってるのか?

A. モジュール化していけばベンチは測りやすいから、これからは。

カーネルのモジュール化はダイナミックに構成を変更できるということが結構面白い事になる

Q.マルチキャストの逆みたいな話。同じような処理をしてるコンピューターはいっぱいあるから、そのへんの処理を効率ができるのではないかと