Posts Tagged ‘イベント’

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

ATNDのイベントページに最寄り駅情報の表示やGoogleカレンダーの登録ボタンを追加などをするGreasemonkeyスクリプトを書いてみました。 元ネタはATND++というものがあったのですが、メンテされてなかったので自分で修正(ATND++を適当に修正したもの — Gist)して使っていたのですが、そのままだとメンテしにくかったので最初から書き直してみました。

• Better ATND for Greasemonkey

機能としては以下のような機能が付いています。(2011-03-06)

• 最寄り駅情報の表示
• 最寄り駅をまとめた地図画像の表示
• Google Calendarへの登録ボタンの追加

Googleカレンダーへの登録時には、イベントページから場所や概要などの情報も自動で入力します(説明文は長すぎるとエラーになるので300文字ぐらいで切っています)

画像でみる機能

最寄り駅情報

Google Calendarの登録ボタン

Google Calendarの登録ページ

作った(使ってた)理由としては場所を言われてもピンとこない場合が多いのと、電車が主な移動手段であることが多いので、会場がどの駅に近いのかがわかると便利です。また参加してなくてもUstや後で資料を出してくれるイベントも多いので、忘れないように気になったイベントはGoogle Calendarに登録していました。最初はブックマークレット(ATNDのイベント画面にGoogleカレンダーへ予定を登録するボタンを追加するブックマークレット – 電脳戦士ハラキリ -SE道とは死ぬ事と見つけたり-)を使ってたのですが、少し面倒になったのでGreasemonkeyにその機能を入れました。
ATNDのリニューアルでicsリンクがでて、Google Calendarで読み込む事ができるのですが、icsを読み込むと”他のカレンダー”が増えるのであんまり好みじゃないので今まで通り登録ボタンにしました。

APIは以下の2つを使っています

• ATND API リファレンス
• SimpleAPI vol.2 – 最寄り駅Webサービス & 最寄り駅モバイル地図

両方ともjsonなどいろいろな形式ではいたりしてくれるので、手軽に使えて便利です。

Better ATND for Greasemonkey

http://userscripts.org/scripts/show/98456

better_atnd at master from azu/Greasemonkey – GitHub

https://github.com/azu/Greasemonkey/tree/master/better_atnd