Web scratch

Archive for the ‘javascript’ Category

DropPagesというDropboxにテンプレートファイルとMarkdownで書いたコンテンツ(記事)を置いて公開できるサービスを利用してどこでもコードリーディングができる環境を作って使っています。

DropPagesについて

DropPagesの導入方法

詳細はGetting started | DropPages.comを見る。

1. DropPagesから好きなThemeファイルのzipをダウンロードする
2. zipを展開すると<Theme名>.droppages.com というフォルダができるので、
   このフォルダ毎、Dropboxフォルダの好きな所に置く
3. <Theme名>..droppages.com の<Theme名>を自分の使いたいサブドメイン名にする。
   たとえばうちはhttp://sig.droppages.com/なので、sig.droppages.comというフォルダ名にリネーム。
4. Dropboxフォルダ内なら、右クリック->Dropbox->このフォルダを共有からDropboxのサイトが開いて、
   コラボレータのメールアドレスを入力する画面になる。
5. 招待するコラボレーターにserver1@droppages.comと入力すれば共有は完了。

後は、その共有したフォルダ名のアドレス(sig.droppages.comならhttp://sig.droppages.com/)にアクセスできるようになるまで待つだけ(結構かかります。一日とか)

Droppagesの構造

FolderLayout | DropPages.com

sig.droppages.com
├Content[DIR]
│  └記事となるmarkdownファイル
├Public[DIR]
│  └css, js ,画像などのテンプレートから呼び出すリソース
└Templates[DIR]
   └テンプレート.html

自分のサイトはazu/4-Code-Reading – GitHubでコンテンツ共々テンプレートも公開しているので、適当に見てください。(アクセス解析のコードとは固有になっちゃってるけど)

Droppagesのコンテンツ(記事)はtxtファイルに、以下のような感じで書いていって保存すると、Dropboxで同期されて自動でWebサイト側が更新される仕組みなってます。

@Title タイトル
@Body
記事内容書ける
Markdown記法を使える
これ以外にも変数は定義できるけど

• Markdown – 閾ペディアことのは
• Kawaz – Markdownの使用方法

などを見るとよいと思います。

MarkdownならiPadのTextasticなど対応してるアプリもいろいろある。

コードリーディング

Droppagesを使えば、markdownファイルに書いて保存するだけど自動的にWebに公開するという手順が簡単に行えます。
で、なんでコードリーディングサイトにしようと思ったのかは、元々Markdownなどでコードリーディング記録を書きたいなーと思っててGithub pages + Sphinxなどいろいろ試してたんですが面倒な手順が多くて、そこに自動的にMarkdownを変換して公開できるサービスとしてDropPagesがきたわけです。

コードリーディングの環境にはWebStormを使っています。
WebStormならMarkdownプラグイン(EAPだと動かなかったりするのでWebstormは正式版を使う)があるのと、WebStormには構文解析をおこなってコードの構造がつかみやすいのでコードリーディング自体に最適だと思います。
(ブックマークや変数、関数、参照先へのジャンプ、アウトラインなどなど)

WebStormはファイルの分割表示を持ってるので、左でコードを読んで、右でMarkdown形式でコードリーディングの記録を書いていくという事もできます(EmacsとかVimとかでも似たような環境作れると思う)

Markdownのプレビューもその場でできる。

少し戻って、テンプレートはいろいろいじって、記事毎にいろいろメタ情報の変数を定義させるようにすれば、普通のブログと遜色ないぐらいの記事が簡単に作れます。
毎回その変数定義を手入力だと面倒なので、WebStormのテンプレートからファイルを作るFile Templeteの機能を使って以下のような感じにしています

• DroppagesのFile Templete — Gist

実際に入力して出てくる感じは下のようなもの。後はBody以下を書いていくだけ。

@Title Underscore.js
@description 便利関数の詰め合わせライブラリUnderscore.jsのコードリーディング
@keywords Underscore.js
@Dates 2011年05月03日
@Body
[Underscore.js] 1.1.6のソースコードを見ていく

Table of Contentsによるとそれぞれジャンル分けされているので、それに沿って読む。

1. コードはブロックぐらいで適当に区切って読んでいく
2. ## ブロックタイトル とMarkdownにブロックのタイトルをつける(テンプレートで自動的に目次生成をしているため)
3. コードを読みながらコード本体にコメントとして、コードの解説やアノテーションなどを書いていく
4. コードブロックを読みながら、気になったことや使い方や例などはMarkdownに書いていく
5. コードブロックを読み終わったら、そのコードブロックをMarkdownにコピペする(先ほどのように字下げしてpreにする)
6. 1から繰り返し
7. 全部読み終わったらDoccoでコンパイルして、コード全体とコメントを見比べしやすいHTMLを生成する。(コード本体にコメントを書いていくのはこれも目的にしているため)

## でサブタイトルをつけて区切っていくのは英語が読めない人向け、英語技術書の読み方 | Web scratchでやっていたような章ごとに本を読んでいくのと同じ感覚でやっています。
またFunctions of undersocore.js – 4 Code Readingなど適当なページを見てもらうと分かると思いますが、h2,h3などのタグには自動的に内部リンクを振って目次を作るためにもサブタイトルをつけています。

また、コンテンツは先ほどから言っているようにmarkdownで書けるので、githubとも相性がいいです。(githubはmdファイルを変換して表示してくれる)
どこまで読んだかをgitで管理できたり、githubなどを使って複数人で共有したりもできるのでいろいろな使い道があると思います。また仮にDropPagesが消滅しても手元にはコンテンツファイルが残るので、markdownならそこそこメジャーなので逃げ道もいろいろあると思います(htmlに変換もできるし)

Dropbox+DropPages+Markdown+GitHub+WebStorm(任意のエディタ)

= 素敵なコードリーディング生活

ここからDropboxに登録すれば250MBのボーナスがうんぬんです。

• azu/4-Code-Reading – GitHub (自分のサイトのテンプレートなど)
• Home | DropPages.com

Firefoxのデバッグ拡張ことFirebugですが、Firefox4よりFirebugとは別にWeb Consoleという機能が入りました。
しかし、Firebug自体もさらに便利になっているので、少し紹介します。(Firebug1.7 –1.8 の範囲で)

現在のFirefox4に正式対応しているのはFirebug1.7xで、Firebug1.8xはAlpha版として公開されているのでまだ不安定な部分もあることに注意して下さい。
特に注意書きしてない部分はFirebug1.7の項目だと思って大丈夫だと思います

Read the rest of this entry »

普段、jQuery(本体)のコードを見たりする時にウェブだと見づらいので、ローカルにダウンロードして見ているのですが、jquery/jquery – GitHubからpullしたものにはビルドしたjQuery.jsが含まれていないので、ビルドできる環境を整えてみました。

以前はDownloading jQuery – jQuery JavaScript Libraryに書いてあるようにAntを使ってどのOSでもビルドできたようですが、現在はuglifyやJSLintを使う都合上かも知れませんがNode.jsがビルド環境に必要となっています。
jQueryの開発コードをビルドして使う (Win & Mac) – Rewish の後半がNode必須になった感じ。

環境はWindows7 6bitで、cygwinでもNode使う事ができるのでやればできるみたいですが、VM上のUbuntuをつかって作業しました。
参考

• WindowsからVM上のLinuxをSSH経由で利用する開発環境の構築 | Web scratch

必要なもの

• git
• node.js環境

jQueryのコードはgithubからcloneして持ってきます。
git clone –recursive https://github.com/jquery/jquery.git するのが楽ですが、他の方法もjquery/jquery – GitHubに書いてあります。

$# git clone --recursive https://github.com/jquery/jquery.git
# githubからサブモジュールも含めて再帰的にclone
Initialized empty Git repository in /media/sf_D_DRIVE/MyDocuments/Dropbox/workspace/toybox/lib/jquery/.git/
remote: Counting objects: 18336, done.        
remote: Compressing objects: 100% (5977/5977), done.        
remote: Total 18336 (delta 13065), reused 17001 (delta 11817)        
Receiving objects: 100% (18336/18336), 12.53 MiB | 1.04 MiB/s, done.
Resolving deltas: 100% (13065/13065), done.
Submodule 'src/sizzle' (git://github.com/jquery/sizzle.git) registered for path 'src/sizzle'
Submodule 'test/qunit' (git://github.com/jquery/qunit.git) registered for path 'test/qunit'
Initialized empty Git repository in /media/sf_D_DRIVE/MyDocuments/Dropbox/workspace/toybox/lib/jquery/src/sizzle/.git/
remote: Counting objects: 1422, done.        
remote: Compressing objects: 100% (622/622), done.        
remote: Total 1422 (delta 903), reused 1169 (delta 734)        
Receiving objects: 100% (1422/1422), 526.34 KiB | 243 KiB/s, done.
Resolving deltas: 100% (903/903), done.
Submodule path 'src/sizzle': checked out '4bcc09702d6dadfd0b90c7de3c8b206e97ff97f4'
Initialized empty Git repository in /media/sf_D_DRIVE/MyDocuments/Dropbox/workspace/toybox/lib/jquery/test/qunit/.git/
remote: Counting objects: 995, done.        
remote: Compressing objects: 100% (751/751), done.        
remote: Total 995 (delta 415), reused 661 (delta 241)        
Receiving objects: 100% (995/995), 158.30 KiB | 98 KiB/s, done.
Resolving deltas: 100% (415/415), done.
Submodule path 'test/qunit': checked out '9887663380693009874e8c76f0bf77a921931766'
$# cd jquery/
$# ls
GPL-LICENSE.txt  MIT-LICENSE.txt  Makefile  README.md  build  speed  src  test  version.txt
$# make
# makeコマンドでjQuery.jsとjQuery.min.jsを生成
Building selector code from Sizzle
Building ./dist/jquery.js
Minifying jQuery ./dist/jquery.min.js
Checking jQuery against JSLint...
JSLint check passed.
jQuery build complete.
$# ls dist/
# jquery/distディレクトリに生成される
jquery.js  jquery.min.js

makeコマンドでJSLintや圧縮がかかったものが生成されますが、make jqueryとすることでそれらをかけないで生成することもできます。
細かい事はjquery/jquery – GitHubに載っています。

WebStorm & PhpStorm Blog » Blog Archive » jQuery API documentation at your fingertipsで紹介されていますが、WebStorm上でjQueryのオンラインヘルプをローカルにダウンロードしたものを表示できるようになっていました。(WebStorm/PHPStrom 2.1 以降が対象)

まずはJavaScript librariesの設定(Settings> JavaScript Library)で、Addボタンを押してローカルにおいたjQuery.jsをFileに指定します。
Documentation URLsのSpecifyボタンを押して、http://api.jquery.com を指定してからダウンロードボタンを押すとローカルにjQueryのドキュメントがダウンロードされます。(実際にダウンロードされるのはRaw XML API Dumpですがhttp://api.jquery.comの方を指定する)

これでライブラリの追加は終わったので、次は実際にjQueryを使うプロジェクトを開きます。(プロジェクトを開いていない状態で設定すれば常に適応されるグローバルとして設定できると思う、その辺はWebStormのコード補完に新しく候補を追加する方法 | Web scratchと同じかな）
また同じく設定に行き、JavaScript Library>Scopeを見るとそのプロジェクトで適応されているライブラリが分かると思います。jQuery(Addボタン追加したライブラリ名の事）にチェックを入れれば準備は終わりです。(逆をいれば、プロジェクト毎に補完候補に現れるライブラリを指定できるようになっている)

後はjQueryのメソッドにカーソルを合わせて、Quick Documentation Look-up(デフォルトCtrl+Q)をすれば、APIドキュメントがパネルに表示されます。

Shift+F1か、ポップアップしたドキュメントの矢印ボタンからドキュメントのWebページのジャンプもできる。

今回はjQueryだけみたいですが、ちゃんとオフライン向けのドキュメントを発行してくれるライブラリなら対応されるかも知れません。ドキュメントのヘルプページへのジャンプ機能はjQuery以外にも対応しているライブラリがあります。
WebStorm & PhpStorm Blog » Blog Archive » External API Docs Support for Popular JavaScript Frameworks

jQueryの補完もちゃんとできるし、APIドキュメントもすぐに見られるようになったのでjQuery使うのがかなり楽になったと思います。後、自分で追加するJavaScript librariesを設定できるので、ライブラリバージョン別に分けるといった事もできたりすると思います。

参考

• WebStorm & PhpStorm Blog » Blog Archive » External API Docs Support for Popular JavaScript Frameworks
• WebStormのコード補完に新しく候補を追加する方法 | Web scratch

おまけ

WebStormが今春のキャンペーンがまだ続いているので半額で購入できるみたいです。
JetBrains公式のNodeJSプラグイン(Node.jsもそのうち公式対応されると思う)の公開が始まったりして、まだ進化のスピードは落ちてない印象なので、安いうちに買っておくのもいいかと思います。

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を使ってパスを通しています。

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

自分が書いた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にも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つらい。
途中でキーボードがトラブった。
カスタムイベントは何か冗長だけど、今後よく使う方向になりそうな予感がするのでいろんな使い方がでてきそう。
また機会があったら参加したいですね。

今、Webは変化してる時だと思います。現状、その変化を見るためには日本だけでは不十分だと思います。

オススメのJavaScriptなどについてのブログ
What to Read to Get Up to Speed in JavaScript – Rey Bango

に書いてあるBlogsはかなりレベル高い人たちがまとまってる。
上と重複するけど、JSMentorsのMentorsにそれぞれの紹介ページがあるので、その人たちのサイトを見ておいて損はないと思う。

追記: Ecmazing JavaScript Blogsも見ると著名な方のサイトが分かって便利

JavaScript情報配信サイトなど

• JavaScript Weekly: A Free, Weekly JavaScript E-mail Newsletter
  週間JavaScript。メールマガジンで毎週ハイライト的にまとめた情報を送ってくれる。
  メールマガジン形式だがとても質がよい感じがする
• Badass JavaScript
  不定期でToday In JS Episodeという形式で、JavaScriptの情報を配信している。(Tumblrをブログとして使用)
  多分この手のサイトでは有名だと思うので、見ておくべき。
• JsMag – the magazine for JavaScript developers
  月刊JavaScript。こちらは有料のJavaScript専門電子雑誌を発行してる。
  ブログでも結構まとめ的なことを書いてくれる。
• A Minute With Brendan – The Latest JS News in One Minute Or Its Free!
  ポットキャスト+リンク集。5-10分ぐらいで最近のJavaScript(ECMA)について触れている。
  取り上げた話のリンクも一緒に公開されているので、聞き取れなくても参考になる
• The Changelog – Open Source moves fast. Keep up.
  上と同じくポットキャスト+リンク形式でオープンソースなものついて紹介してる。(JavaScript多めだけど)
  かなり広い範囲を扱ってくれるので、話題になったものはたいてい含まれていることが多い。
• Nundefined ::
  韓国の@nundefinedさんが一週間で集めたリンクという感じでJavaScriptの情報を紹介しています。
  韓国語さっぱりですがGoogle翻訳と相性いい(日本↔韓国)ので機械翻訳でも何とかなります。
  日本のサイトについての情報もなぜか多いです。

これらの情報配信サイトと併せて、今からRSS購読すべきタグと検索結果で紹介したSBMなどを購読するとよりいろいろな情報が視野に入るようになると思います。

追記: これらの情報を元に発表を行いました
ついでに、日本でもこういうサイトが欲しいとのことでJSer.infoを立ち上げました。

Mozilla勉強会@東京 5thで「世界のJavaScript情報を読もう」という発表をしました | Web scratch

http://efcl.info/2011/0117/res2229/