Web scratch

Posts Tagged ‘javascript’

JavaScriptの書き方はJavaScript自体がある程度自由なためいろいろな書き方ができますが、一貫性を持って書いた方がバグなども発生しにくくなるため、コーディングルールを定めておくのはよいことだと思います(特に複数人の開発の場合)

有名な企業やライブラリはコーディングルールも公開している事が多いので適当にまとめてみました

JavaScript style guide – MDC Docs

Mozilla/Firefox向けのものなので、一部ECMAScriptの範囲を超えたものも含まれています。
多くの人が見ていると思うので、見たことない人は一度読んでみるといいです。

Google JavaScript Style Guide

Google JavaScript Style Guide 和訳 — Google JavaScript Style Guide 和訳(日本語版)
Googleのコーディングルールですが、ルールを並べるだけではなくなぜ悪いのかについても触れているので、一読をお勧めします。
Closure Linterというチェックツールもあるため、採用しやすいかもしれない。

JQuery Core Style Guidelines – jQuery JavaScript Library

jQuery Coreのもの。
Typeチェックの仕方についても触れている。

Dojo Style Guide – The Dojo Toolkit

Dojoのコーディングルール。
コード例が豊富で、命名規則やホワイトスペースの扱いなど細かいところまで入ってる。

Felix’s Node.js Style Guide

Felix’s Node.js Style Guide(和訳)(日本語版)
Node.jsにおけるコーディングルール。(公式なものではない。no official document)
Node.jsに限らず、クライアントサイドJavaScriptに置いても参考になる部分は多い。

Code Conventions for the JavaScript Programming Language

Douglas Crockfordによるもの。
コーディングルールというよりは慣習的なもの。
同作者によるJSLintも併用しましょう。(JSLint or JSHintは他のコーディングルールであっても採用してよいもの)

Code Guidelines for Rich Internet Application Development

コーディングルールではなくてガイドライン的なものです、HTMLやCSS、JavaScriptについてのガイドラインを書かれている。

Introduction to Apple JavaScript Coding Guidelines

JavaScript Coding Guidelines for Mac OS X(日本語版)
Appleによるコーディングのガイドライン。
“JavaScriptのベストプラクティス”でコーディングで気をつける事について触れている。

The WebKit Open Source Project – WebKit Coding Style Guidelines

JavaScriptではありませんが、Webkitにおけるコーディングルール。
ホワイトスペースやLine breakingの所はJavaScriptの場合でも参考になる。
uupaaさんがこれをベースに一部分を変更した感じで使ってるそうです。

• CodingStyle – uupaa-js – JavaScript Coding Style Guide – JavaScript Library for Casual Creator – Google Project Hosting

サイボウズで学んだこと – IT戦記

amachangによるもの。
大規模 JavaScript 開発におけるルールや命名規則、デバッグ、パフォーマンスについて触れています。
コーディングルールを整えてどのように実践したかについて参考になります。

JavaScriptパターン (オライリー本)

JavaScriptパターン ―優れたアプリケーションのための作法

posted with AZlink at 2011.5.27

Stoyan Stefanov,豊福 剛
オライリージャパン
売り上げランキング: 8213

Amazon.co.jp で詳細を見る

この書籍のChapter 2. Essentialsにおいて、JavaScriptのコーディングルールが紹介されています。
また避けるべき事やどう書くべきなのかについてもかなり深く書かれています。

コーディングルールは”どう書けばいいのか分からない”という人向けのものではないと思います。どう書いたらいいのか分からない人は、まずなぜそのように書いたらダメなのかを知るのがよいと思います。
そのため、書き方に不安を持ってる人はなぜダメなのかについても触れているGoogle JavaScript Style Guide 和訳を読むのがよいと思います。(読みやすい日本語版もあるしね)
コーディングルールはコードに一貫性を持つためにあると思います。頻繁にルールを変える必要はないと思いますが、必ずしもそのルールが、その時の(実行環境|JavaScript)において最適な書き方ではない場合もあります。そういうときはルールの更新をしましょう。

おまけ

自分の場合はWebStormの自動整形に任せている(といっても膨大なルール設定があるため、上記で紹介したコーディングルールを自動化できる)ので、基本的にはIDE任せという書き方にしています。
セミコロン忘れなどについてはcomplete current statement機能( [WebStorm]Complete Current Statementがとても便利な件(・∀・))を使ったり、WebStormのシンタックスチェックはかなり優秀なのでエラーも書いてる途中で発見しやすいです。(シンタックスチェックも細かく制御できる)
そのため、やっぱり道具任せといった感じではありますが、WebStormを使用していない場合も同じコードが書けるようにある程度のルールは持っています。
Google JavaScript Style Guide + WebKit Coding Style Guidelines に近いですが、ホワイトスペースなど見た目的なちょっとした違いにはそこまで厳しくしない感じで書いています。
if, for, while, doなどの{}は省略しない(WebStormの自動整形で中括弧を強制的につける)、誰が見てもある程度読める感じにする、ブレークポイントを打ちやすい空間を作るように配慮するなどなどで、他のコーディングルールに書いてある事と同じようなものだと思います。

危険な広告を除去するのにAdblock++を使用していましたが、Firefox5では動かないようなので(ネイティブなものはバージョン毎にコンパイルする必要があるとかないとか)代替として、adblock#.uc.jsを使ってみることにしてみました。

adblock#.uc.jsにはadblock系リスト変換君.htmlというadblock++形式などから変換できるものが入ってますが、さすがニッチなadblock++からadblock#への変換はないようなので書いてみました。
(今思えばadblock系リスト変換君.htmlを拡張すればよかったかも…)

必要なもの

• Firebug

以下のコードをFirebugのコンソール上で実行

adblockDataの部分は自分のabout:configからextensions.adblock++.filter_array の値に差し替えてください。
最後のcopy関数以外は別にFirebugに依存しているわけじゃないので、他の環境でも少し書き換えれば動作すると思います(MITライセンスなのでご自由に)
変換したものはクリップボードに入るので、後はadblock#.uc.js Filter Managerを開いて、入力欄にペーストして”追加”のボタンを押せばフィルターを移行できると思います。

Adblock++はフィルタにコンテンツの種類を設定できるのですが、adblock#.uc.jsは対応していないのでそれ系のフィルターは自動で外されます。また既にdisableなフィルターも外されます。
正規表現周りは元々使ってないので、ちゃんと動作するかは微妙です。
一応、Readmeに従って下記の処理には対応させたつもりです。

ただし,「/ads/」のように前後に「/」が付く物は正規表現フィルタと誤認識されるのを防ぐため,「*/ads/*」と表記する.

• adblock++ から adblock# 形式へ変換する(Firebug上で実行) — Gist

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 »

CoffeeScriptをJavaScriptのコードに変換するコンパイラ(coffee-script.jsをラップしただけ)をNILScriptを使って書いてみました。NILScriptはSpiderMonkeyが実行環境に利用されているので、ブラウザで実行できるようために配布されてるcoffee-script.jsをそのまま利用しています。

• CoffeeScript Compiler at master from azu/NILScript – GitHub

使い方

NILScriptが必要なので、ダウンロードしておいてください。
CS-Compiler.ng と coffee-script.js(自分で最新のものを持ってきた方がいいです)を適当な同じディレクトリに置きます。

$ng.exe CS-Compiler.ngへパス "FilePath" or "DirectoryPath"

という感じでコマンドプロンプト(自分はConsole2+nyaos)から実行して使用します。(D&Dでも使えるかも)
コンパイルはファイル、ディレクトリどちらに対しても利用できます。
ng.exe CS-Compiler.ngへパスをまとめたリンクファイルを作っておくと楽かも知れません。

コマンドラインの例はutilityTools/CoffeeScript at master from azu/NILScript – GitHubにも書いてあるので参考にしてください。

ファイルの更新に反応して自動的にコンパイルし直すwatchオプションがあるので次のように

$ng CS-Compiler.ng code.coffee --watch

という感じで起動すれば、code.coffeeを書き換えるたびにコマンドプロンプトにコンパイル結果が表示されます。
watchオプション(–watch or -w)はディレクトリにも使えるようになっていて、起動してからその監視対象のディレクトリに新しくファイルを入れた場合もそのファイルが監視対象に加わるようになっています。

watchオプションを入れた様子

コンパイルの実行速度ですが20Kbほどあるunderscore.coffeeが1-2秒ぐらいでコンパイルできるので、まあまあ使ってられるものだと思います。WindowsでCoffeeScriptをコマンドラインでコンパイルできて、ファイルの変更監視ができるものが見つからなかったのでkennyjのブログ(仮): CoffeeScriptをWindowsで使うを見て何となく書きました。
(Rubyのやつの使い方分からなかったCoffeeScript インストール – sappari wiki)

• utilityTools/CoffeeScript at master from azu/NILScript – GitHub
• CoffeeScriptの勉強(写経)をした – prog*sig

ParamCleanerというURLからutm_*など不要なパラメーターを除去するGreasemonkeyを書きました。
すでに同じ目的のGreasemonkeyやアドオンなどがありますが、

• UrlCleaner for Greasemonkey
• FeedBurnerのトラッキングパラメータらしきものを削るGreasemonkey – ariyasacca(2009-11-18)
• URLのトラッキング用パラメータを無視するFirefox拡張 Through utm_ – SWDYH

history.replaceStateを使う事で他のものに比べて簡潔な処理でURLからトラッキングパラメーターなどを消せます。
またhistory.replaceStateを使ってるのでFirefox4以上向けで(一応Firefox3でも動くようにしてある)、Scriptish向けに最適化してあるので、できればScriptishで使った方がいいです(Greasemonkeyでも動きます)

• GreasemonkeyからScriptishへ環境設定を移行する | Web scratch

history.replaceState(data, title [, url])の使い方

historyオブジェクトについてはgithubなどで話題になったので知ってる人も多いと思いますが、pushStateはブラウザの履歴に新規エントリを追加するAPIで、replaceStateは現在のエントリを入れ替えるAPIです。
引数はpushState()と同じで、

history.replaceState(stateプロパティに入る値, 状態識別用のタイトル, [現在の状態に対応するURL]);

という引数をとります。
第三引数を指定してSame OriginならURLバーの表示を書き換える事ができるので、以下のように実際に移動しなくても表示が書き換わります。

// http://example.com/ で実行
history.replaceState(null, "", "/hey");
// => http://example.com/hey とURLバーの表示が変わる

• history.pushState、history.replaceState – 素人がプログラミングを勉強するブログ
• Firefox 4 での History API の変更 « Mozilla Developer Street (modest)

これを使って、今回はトラッキングパラメーターが存在するURL(アイテム – データベース: UrlCleaner – wedataで管理)にアクセスしたとき、トラッキングパラメーターを除去したURLへhistory.replaceStateを使って書き換えているので他のGreasemonkeyのようなリロードがなかったり、アドオンのように通信を監視する手間が省けます。(以前同じ名前でアドオンを作ってたけど重すぎた)

UrlCleanerと同じWedataで管理されたものを勝手に使ってるので、処理自体は互換性があるようにしています(一部拡張してるけど) 気になったものがあったらSITEINFOを書いて、UrlCleaner – wedataに登録するとよいです。

ParamCleaner for Greasemonkeyi

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

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/