Web scratch

Posts Tagged ‘javascript’

KeySnailついて

自分はEmacsユーザーでもありませんが、KeyConfigの代わりにKeySnailを使い始めました。
そもそもKeyConfigとは役割違うし、KeyConfigもFirefox4対応したので併用しています。
keysnailはuserChrome.jsのキー特化みたいな存在で、便利なAPIがある環境みたいなとらえ方でもいいかもしれないです。(emacsのキーバインドは一切使わないで、まっさらな状態で始めました)

Read the rest of this entry »

Windows VistaでV8を使いたかったのでビルドしたときのメモ

準備編

1. Pythonをインストール(ActivePythonでもいいけど)
2. SConsをインストール(PythonのMakeみたいなものらしい)
3. Visual C++ 2010 Expressをインストール(本当はSConsだけでもいいけど、必要なWindows SDKが内蔵されてるので楽)
4. git か svnがあるとV8のダウンロードが楽

実践編
(X / _ / X <は$みたいなプロンプトです)
バージョンの確認コマンドも打ってますが、How to Download and Build V8 – V8 JavaScript Engine – Google Codeでソフトウェアの必要なバージョンが載っています。

多くの例ではsvnで

svn checkout http://v8.googlecode.com/svn/trunk/ v8

としてv8をダウンロードしているみたいですが、githubに公式ミラーがあるので今回はそれを利用しました。

• v8/v8 – GitHub

X / _ / X < git clone git://github.com/v8/v8.git v8
Initialized empty Git repository in D:/Software/v8/.git/
remote: Counting objects: 53075, done.
remote: Compressing objects: 100% (7672/7672), done.
remote: Total 53075 (delta 46205), reused 51859 (delta 45179)
Receiving objects: 100% (53075/53075), 25.18 MiB | 749 KiB/s, done.
Resolving deltas: 100% (46205/46205), done.
Checking out files: 100% (1426/1426), done.
X / _ / X < python -V
Python 2.6.4
X / _ / X < scons --version
SCons by Steven Knight et al.:
 engine: v2.0.1.r5134, 2010/08/16 23:02:40, by bdeegan on cooldog
Copyright (c) 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010 The SCons Foundation

ここまでで準備は終わり、次はビルドとテスト
sconsの引数はよく分からなかったのでBuildを見てscons d8としました。

X / _ / X < cd v8
X / _ / X < scons d8
#ビルド
X / _ / X < tools\test.py
#テスト
[13:26|% 100|+ 4599|-   3]: Done

特に環境パスの引数なしでも通ったのでシンプルにしていますが、手動でパスを通す場合は大変なので”C:\Program Files\Microsoft Visual Studio 10.0\VC\vcvarsall.bat”などのbatファイルを使うとよいかもしれないです。

• v8をビルドしてみました – とりあえずメモメモ。
• Compiling v8 on Windows 7
• BuildingOnWindows – v8 – Detailed instructions for building V8 on Windows. – V8 JavaScript Engine – Google Project Hosting

最後にベンチマークを取ってみて終了

X / _ / X < cd benchmarks\
X / _ / X < ../d8 run.js
Richards: 7311
DeltaBlue: 9098
Crypto: 8762
RayTrace: 6707
EarleyBoyer: 12664
RegExp: 1440
Splay: 2193
----
Score (version 6): 5521

これで、Windows上で使えるV8(d8)のバイナリ作成ができたので終わり
毎回d8.exeまでのパスを入力するのは大変なので、バイナリの場所までRedmond Pathを使ってパスを通しています。

Firefox4にしてから主にGreasemonkeyのGM_addStyleメソッドで

TypeError: can’t wrap XML objects

というエラーが出たりすることがあります。
これはBug 609143 – E4X XML objects cannot be passed to sandboxのsandbox内でのE4X(XML)の挙動が変わった(意図的に)のが原因らしいです。(あまり詳しくないので…)

GM_addStyle(<><![CDATA[ 
/* 適当なCSSのコード*/
    .clearfix:after {
        content: ".";  /* 新しい要素を作る */
        display: block;  /* ブロックレベル要素に */
        clear: both;
        height: 0;
        visibility: hidden;/*表示はしない*/
    }
 ]]></>)

のような感じでE4X(XML)を直接GM_addStyleに渡しているときなどに起きています。
これを回避するためには、E4X(XML)を明示的に文字列化して渡せばよい見たいです。

GM_addStyle(String(<><![CDATA[
/* CSSコード */
]]></>));

のようにString(E4X)するか、E4X全体をtoString()、”"+E4X のような感じで文字列化すればいい。
もしくはGreasemonkeyにはメタ情報に// @resource CSS example.css という感じで、CSSファイルをロードできるので、そのファイルをGM_addStyle(GM_getResourceText(‘CSS’));して使うなどでもいいと思います。

• @require, @resource of Greasemonkey – KBDAHOLIC – やぬすさんとこ

もしくは下のようにGM_addStyleを書き換えてしまう事でも回避できそうです。(あんまり推奨しないけど)

function GM_addStyle(css) {
    if (!GM_addStyle.style) {
        var head = document.getElementsByTagName("head")[0] ||
                document.documentElement;
        if (!head) {
            return;
        }
        GM_addStyle.style = document.createElement('style');
        GM_addStyle.style.type = 'text/css';
        head.insertBefore(GM_addStyle.style, head.firstChild);
    }
    GM_addStyle.style.appendChild(document.createTextNode(css) + '\n');
}

書き換えの参考

• GM_addStyleの実装と最適化 – 0xFF
• Surefire DOM Element insertion « Paul Irish

Constellation’s gist: 803115 — GistのようにTomblooパッチでGM_addStyleの挙動を変えてしまおうと思ったけどよく分からなくなってあきらめました。

参考

• Firefox 4.0b8～b9 でLDRize (Minibufferの修正) – wltの日記

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

ずっとメインで使っているTwitterブラウザクライアントのtwicliの設定メモ

twicliはブラウザで動くのでUnified Sidebarを使ってサイドバーに縦置きタブバーと一緒に表示しています。
サイドバーへの表示はブックマークは面倒なのでCustom Buttonsのボタンとしておいています。

twicli

次はCSSの設定、CSSは基本的に最小限で無駄なものを消したりするぐらいです。

.uname{
    display:none;
}
#counter{
    font-size: 9pt!important;
}
/* Removeボタン */
#user_info > input{
    display:none;

}
/* shortcut.js */
.selected {
    background-color: #DDD !important
}

Removeボタンを消してるのはプラグインの関係で誤爆を防ぐためです。(通常は確認ダイアログがでるので誤爆しないかな)
次にプラグインの設定

ssl.js
regexp.js
lists.js
shortcutkey.js
search.js
search2.js
followers.js
shorten_url.js
resolve_url.js
translate.js
scroll.js
thumbnail.js
geomap.js
tweet_url_reply.js

https://gist.github.com/510112.txt#multi-users.js


https://gist.github.com/567983.txt#twicli_post_canceler.js


https://gist.github.com/655300.txt#switchViewedSearches.js

data:text/javascript,var fst=$('fst');fst.focus=fst.select=confirm=Array;

URLじゃないの部分はデフォルトのプラグインなので説明を省きますが、最後の4つが使ってるプラグインです。

• multi-users.js

一度タイムラインを表示したことのあるユーザーのタイムラインを簡単に再表示するプラグイン

• twicli post canceler.js

ポストをした際に5秒以内なら中止できるボタンを出す

• switchViewedSearches.js

ハッシュタグや検索結果のタブを一つのタブにまとめる。
サイドバーで使うと狭いので、まとめるために使ってる。

最後のデータスキームURIとなってる部分はわざわざjsファイルとして読み込ませるほど長くはないので直接書いています。

data:text/javascript,var fst=$('fst');fst.focus=fst.select=confirm=Array;

これは、twicliはデフォルトだとポスト後に入力フォーム(fst)へのフォーカスしてしまって、サイドバーで使っているとフォーカスが奪われるのでかなり邪魔になります。なので、focusやselectを潰して、またRTなどで確認ダイアログが面倒になっているので同じように潰しています。(Removeボタンも確認ダイアログがなくなるので、RemoveボタンはCSSで非表示にしています)

他のTwicliプラグインはtwicli plugins – GitHubにまとめられているそうです。

Pickup Patternはそこまで使ってないでの省略。

twicliはJavaScriptで拡張できて、ブラウザで動くのでどこでも使える感じで便利。
みんなもっと設定公開するといいよ

twicli – A Web Browser-Based Lightweight Twitter Client

http://www.geocities.jp/twicli/

自分が書いたJavaScriptのコードスニペットに対してどのコードが早いのかベンチマークを比較することができるWebサービスであるjsPerfの紹介と使い方。JavaScriptでは同じ機能を実現するための方法は様々であり、どのコードが優れているのかを調べる方法としてプロファイラなどを利用することがあります。しかし、JavaScriptはブラウザ毎によっても速度が変わることが多いため、ブラウザ依存のツールだと比較しにくくなるため、ブラウザ上でテストコードを実行し、それらのベンチマークを簡単に記録、比較できるサービスがjsPerfです。

jsPerfの比較方法

jsPerfの内部ではBenchmark JSというベンチマークライブラリが使用されています。(jsPerfの運営者が作成している)
jsPerfの計測方法は一定時間内にどれくらいコードスニペット部が実行できたのかで比較します。そのため数値が大きいほどパフォーマンスがよい(=一定時間で多く実行できる)となります。
ブラウザ固有のテストやライブラリを読み込んでのテストも行うことができます。

使用方法

http://jsperf.comにアクセスします。
過去に他のユーザーが比較した結果はBrowse test cases · jsPerfから見ることができます。
Googleのsite:検索を使って事前に行おうとしている比較があるかを検索するといいかもしれません。
(join vs concat site:jsperf.com – Google 検索みたいな感じで)

ユーザー情報の入力(Your details)

ユーザー情報の入力部

これは任意ですが、名前やメールアドレス(Gravatarを利用したアイコン表示のため)やサイトURLを入力することができます。
ユーザー名が入力してあった場合はhttp://jsperf.com/browse/<USERNAME>.atom というURLからRSSを見たり、過去に比較したものも一覧できるのでユーザー名は入れた方がいいです。
Publishedのチェックを外すことで非公開でテスト行うことができます

テストケースの情報(Test Case Details)

テストケースの情報

この部分はテストケースのタイトルや説明などを入力する場所です。
後で見た人が何のテストなのかわかるように書いておくといいです。slugはタイトルから自動で入力されますが任意で決めることもできます。

事前準備のコード(Preparation code)

事前準備

Preparation code HTMLには必要なライブラリを読み込むScriptタグやDOM操作が関係するテストならDOMを書いておけます。
Preparation code JavaScriptにはテストで使うJavaScriptコードで事前に書いておけるもの(共通して使うなど)を書いておけます。

テストケースの入力(Code snippets to compare)

テストケースはタイトルをコード部分を入力できます。デフォルトは2つ入力する場所がありますが、Add Snippet Codeから増やすこともできます。テストケースのコードを入力する際に気をつけるべきことは、テストコードにテストと関係ないループ文などを含めないことです。
jsPerf側でテストケースのブロック毎に繰り返し実行するため、テストコード内のループ文がテストの本質と関係ない場合は含めない方がいいです。

これで入力は終わりで後は実行して結果を見るだけです

実行して結果を見る

テストページにあるRun Testボタンからテストを実行することができます。
Tipsとしてテストページの最後に#runと付ければボタンを押さずに自動的にテストが実行されます。

JavaScriptやWeb開発に興味を持っている人はブラウザ周りの新しい情報も知っておくと良い場合も多いです。
なのでブラウザ周りに絞ってブラウザ別のブログなどを紹介。

Internet Explorer(IE)

• IEBlog – Site Home – MSDN Blogs
  IEについての最新情報を書いているオフィシャルサイト
• Hebikuzure’s Tech Memo
  IEやWindowsについて多岐にわたり書かれているブログ。
  更新頻度が高く、IE Blog の記事の私訳などとても参考になる。
• Internet Explorer ブログ (日本語版) – Site Home – MSDN Blogs
  IEBlogの翻訳記事などを掲載する日本語オフィシャル版(全て翻訳されるわけじゃないのでIEBlogも見た方がいい)
• Internet Explorer デベロッパーセンターのMSDN オンライン更新情報(RSS)
  タイトルのまま。
  MSDN(ja)の更新情報
• セキュリティ情報検索
  Windowsのセキュリティに関する情報が配信されています
  (セキュリティについては葉っぱ日記も読むと有用な記事が多く見つかると思います)
• EricLaw’s IEInternals – Site Home – MSDN Blogs
  Internet Explorerに関して詳しく書かれています。  via @hasegawayosuke
• JScript Blog – Site Home – MSDN Blogs
  MicrosoftのJScriptチームのブログです。 via @os0x
• @mskkie
  日本マイクロソフト IE Teamの公式アカウントです。
  フィードバックも受け付けてくれる。

Mozilla(Firefox)

• Bit Stampede
  MDCの更新情報を書かれています。
  Firefoxの最新情報が把握しやすいので是非購読しておくといいです。
• A Better Project＠はてなダイアリー
  MDCのローカライズ情報を書かれています。
  MDC-ja 通信など最近の起きたことが分かりやすいです。
• Mozilla Hacks – the Web developer blog
  Mozillaについてだけではなく最新の技術などについても扱っているのでとても重要です。
• Mozilla Flux
  Firefox/Mozillaについてについて、幅広い情報から書かれているブログ。
  情報をしっかり取り込んでから書かれていると思われるため、内容も深いものとなっていてとてもいい。
  筆者id:Rockridge のはてなブックマークもおすすめです。
• Mozilla Developer Street (modest)
  “Mozilla 関連の開発者や利用者が集まり 知識・アイディア の共有とコミュニケーションの場”
  アドオン開発者向けの情報やMozilla Add-ons Blogの翻訳記事などが掲載されています。
• Mozilla Japan ブログ
  名前の通りです。
• MozillaZine.jp
  Mozilla関係のリリース情報を扱っています。
• Scene Side B
  Firefoxのリリース情報やbug fixの情報を書かれています。
  どのような変更が行われたかがまとめて見られます。
• Firefox Hacks 翻訳日記/ウェブリブログ
  Mozilla WikiなどからのFirefoxについて情報を書かれています。
• もずはっく日記 – WebStudio
  “Mozilla Japanのプロダクトへの貢献を中心に書いています”
  最近はIME周りのお話が多いです
• alice0775のファイル置き場 – Yahoo!ジオシティーズ
  Friends of the Treeに掲載されるほど多くの貢献をされている方です。
  bugzillaの情報をメインに載せています。またuserChrome.jsスクリプトを多数書かれていることでも知られています。
• @dynamitter
  Mozilla Japanの浅井さんのアカウントです。
  Firefoxだけではなく、W3Cなどの仕様に関しての情報も多いので参考になると思います。

他にもMozilla本家にはセキュリティとかいろいろブログがあったと思います。
(なのでちょっと本家の方は省き気味です)

Webkit系(Chrome,Safari)

• Peter Beverloo
  WebKitへのコミット情報から拾って、どのような変更や機能追加などがあったかを解説してくれています。
  (著者のPeter BeverlooさんはJoining Googleしました)
• Google Chrome Releases
  Chromeのリリース情報を配信しているオフィシャルブログ
• Chromium Blog
  同じくGoogleのオフィシャルブログ。
  新しい機能の紹介などが中心です。 via @saneyuki_s
• Surfin’ Safari – The WebKit Blog
  名前の通りWebkitについてのブログ
• Developer Advocates – Google Code
  Chromeの関係者などが一覧できるので、そこからブログやTwitterを調べられる。
• Google Chrome OS & Chromebook Review Tips Themes How to Use Install and Learn
  Chrome(OSなど含む)についての最新情報について扱うブログ。
  技術的視点ではなくユーザー視点っぽい感じ

OperaはきっとOperaを愛する人がやってくれるはずです…
追記: Opera版 Operaの最新情報を知るために、Web開発者が読んでおくべきブログ – あまたの何かしら。

その他

• はてなブックマーク – vantguarde
  ブログの方もそうですがWebにおけるW3Cなどの仕様について書かれています(はてブしています)
  Firefox/Chrome/WebKit関係についても多く扱われています。
• Web標準Blog | メソッド | ミツエーリンクス
  名前の通りWeb標準である仕様について扱っています。
• Script Junkie | Essential cross-browser code, information and discussion
  HTML/CSS/JavaScriptなどにWeb全般について扱っています。
  複数人の方によって書かれているブログ via @hasegawayosuke

いろいろなサイト(主にブログ)を乗せましたが、一個づつRSS購読するのは面倒だという人は、LDRならこのページのリンクをまとめて購読する機能があるのでそれを利用するといいですよ。

まとめて購読機能は、リンク集から一括登録できて便利 – livedoor Reader 開発日誌

おまけ

Planetシリーズ
原点はよくわかりませんが、様々なFeedを集めてまとめたアグリゲートブログのようです。
(ちょっと強欲すぎるので、Planet Chromiumのような公式系でまとまったもの以外は破綻する感じがします)

• Planet Firefox
• Planet Mozilla
• Planet Chromium
• Planet WebKit
• Planet Opera
• Planet HTML5

etc..

おわり

他にこのブログ忘れちゃだめだなどのご指摘があったらお願いします。

JavaScriptにもJavaDocのようなコメントからAPIドキュメントを生成するツールがいろいろとあるため、どのようなものがあるか少し調べて見ました。基本的なコメントの書き方は大体がJSDocと共通しているので、特に言及がなければそのような書き方が通るものが多いです。

• JsDoc Toolkit

JSDoc(開発停止)の後継であるため最も有名だと思います。
現在はver2で機能追加のリクエストは停止されていますが、JSDoc 3が開発中となっているそうです。
情報量もそこそこあると思うので、APIドキュメント生成ツール関係について調べる時に参考になる。
Closure Compilerなどいろいろなところで使われていたりします。
-JsDoc Toolkitを使う！ – トップページ

• YUI Doc

YahooのYUI Libraryで使用されているドキュメント生成ツールです。
Pythonで書かれています。

• ext-doc

Ext JS/Sencha Touch風のドキュメント生成ツールです。
ドキュメントの似た目もリッチ
-ext-docでSencha Touchのドキュメントを作ってみる – プログラマとSEのあいだ

• DocumentJS

JavaScriptMVCで使用されているドキュメント生成ツールです。
ドキュメント自体の作りを意識した@pageや@tagなどの要素があるのが特徴的。
rhino(Java)を使っているようです。

• Natural Docs

多種多様な言語に対応しているドキュメント生成ツールです。
他のものとは書き方が異なり、パラメーターなどを使わずに自然な形で書けるように設計されています。
-NaturalDocsの書き方と、出力結果 – 今日もコーディング日和

• jGrouseDoc

どこかで使われているのは見たことないです。
ANTが使われているようです。

• ScriptDoc

Aptanaで使われているドキュメント生成ツールです。
Aptana内のコードアシストに反映したりします。
-Aptanaの使い方解説

• visionmedia/dox – GitHub

node.js製のドキュメント生成ツールです。
Doxを見るとわかりますがコメントとソースコードを並べて表示します

• jashkenas/docco – GitHub

CoffeeScript/JavaScriptに対応したnode.js製のドキュメント生成ツールです。
APIドキュメントというよりはコメントとソースコードを並べて読ませる感じのHTMLを生成します。
backbone.jsなどでも使われていたりして、ソースコードを読ませるのには向いているものだと思います
兄妹ツールとしての派生が多いツールです

1. Ruby – http://rtomayko.github.com/rocco/
2. Sh – http://rtomayko.github.com/shocco/
3. Python – http://fitzgen.github.com/pycco/

いろいろ紹介しましたが、基本的には書き方はJSDocなので似た目や機能などに違いが現れることが多いです。

JavaScript Documentation – The JSMentors JavaScript Discussion Group | Google グループ

http://groups.google.com/group/jsmentors/browse_thread/thread/ab8884987bf4517c

JavaScriptのドキュメントフォーマットにはどんなものがあるの？ – Nobody is perfect.

http://d.hatena.ne.jp/takimo/20101105/1288933921

BPStudy#41に参加してきたのでメモってた内容。
TwitterはTogetter – 「BPStudy#41 まとめ」にまとまっています。

^文殊堂

第一部 – RequireJSとeventとUIコンポーネント

BPStudy#41 RequireJSとeventとUIコンポーネント – 文殊堂

RequireJS実践編

jQuery カスタムイベント応用編

粗結合のUIコンポーネントの作成について

RequireJS実践編

RequireJSとは何か?

AMDのブラウザ向けの実装

RequireJS moduleについて

defineでモジュールを定義する。

requireはmain関数みたいなもの。

define – 第一引数に依存してるモジュール、第二引数に中身
(第一引数に関数オブジェクトを渡すと関数の返値になってしまう)

moduleの用途

関数を返すmoduleを定義すれば、関数として使えるmoduleが作れる。

副作用
何も返さないmoduleも有効利用できる

jQueryをextendしてるmoduleを作れば、requireしたときにその拡張してるという保証が存在するため有用になる。

RequireJS本体の前にrequireというグローバル変数があると、RequireJSの設定として認識される

baseurl

module名はpathから拡張子をのぞいたものだけど、pathの基底を変更できる

paths

pathを探す場所をkey-valueで決められる

urlArgs

読み込むjsファイルに指定したパラメーターをつけることができる。(キャッシュ対策)

deps

最初から読み込んでおきたいファイルを決めておける

text plugin

文字列として取得できる
テンプレート的な利用

jQuery カスタムイベント応用編

カスタムイベントはブラウザ定義ではなく独自定義のイベント

jQueryはtrigger,triggerHandlerなどで、イベントの発火ができる(dispatch event)

カスタムイベントは豊かな表現が行える

jQueryはbindでイベント名とイベントハンドラをくっつける

trigerの第二引数に配列を渡すと展開されて渡した状態でイベントハンドラを実行する

data(“属性” , “値“)をつけられる

イベントハンドラの$(this)==evt.target

カスタムイベントでClassを定義する

liveを利用する。
liveは要素ではなくて、CSSセレクタに紐づけることができる。

カスタムイベントでmixin

liveを使ってるので、classを追加するとメソッドを生える

カスタムイベントでcallback

liveを登録して、callbackをcallする代わりにtirgerでイベントを発火させる。

カスタムイベントでmixout

classを追加することでmixinになるため、classを除去すればmixoutできる。

カスタムイベントで同名の関数を呼び出す

存在しない関数も呼んで大丈夫

好きなだけ定義できる

第二部

マスタリング非同期読み込み – os0x

マスタリング非同期読み込み BPStudy#41

Twitterでも非同期処理やってるけど、本文が表示されるのが最後なので遅い感じがする。

LAB.js

部分的な導入が難しい。
全体を書き換える必要がある。

ControllJS

<script type=”text/cjs”></script>としてtypeを変えて読み込む。

Controll側で評価する

RequireJS

依存がネストすると非同期にできない。

依存関係が複雑だと、読み込み待ちが発生する。

解決方法として、テキストとして読み込んでおいて評価する。とか

whatwgのwikiにいろいろな手法が乗っている。

第三部

gitの歴史改変について – 神速

BPStudy#41で発表しました #bpstudy – アジャイルSEを目指すブログ

分散SCMの基本的なこと

ネットワーク環境がなくても作業できる

誰かが壊しても問題ない

歴史改変でできること

不要な変更のコミット修正

コミットメッセージの修正

作業途中のコミット

適当なコミットを行える

git add -p

部分変更を記録するコマンド

対話式で部分コミットを行える

git rebase -I

コミットの変更、結合、削除とか

歴史改変の実践編

bisect テストが失敗してるところを２分探索するコマンド

ﾃﾞﾓ

間違いを打ち消す git revert

過去のコミットを打ち消す

改変世界からの復帰 – reflog

コミットを移動させたり

歴史を変えてはいけないコミット

人のは変えてはいけない

自分の黒歴史だけ

感想

椅子オンリーだったので、膝上PCつらい。
途中でキーボードがトラブった。
カスタムイベントは何か冗長だけど、今後よく使う方向になりそうな予感がするのでいろんな使い方がでてきそう。
また機会があったら参加したいですね。

Mozilla 勉強会@東京 5thでのLT枠で「世界のJavaScript情報を読もう」というタイトルで発表してきましたので、その補足などの記事。
以下が発表に使ったスライドとなります。

Read the rest of this entry »