Posts Tagged ‘javascript’

« Older Entries

GoogleのJavaScriptコーディングスタイルチェッカー「Closure Linter」

9月 2nd, 2010

GoogleではJavaScriptは特定のコーディングスタイルで統一されるようにClosure Linterという専用のスクリプトを使用しているそうです。
Google JavaScript Style Guide(Google JavaScript Style Guide 和訳)という規則に従ってjsのコードは書かれていて、その規則に沿っているかを確認するgjslintとその規則に合うように修正するfixjsstyleからなるスクリプトです。

インストール方法

How to Use Closure Linter – Closure Linter – Google Code
pythonで書かれているのでeasy_installを使ってインストールします。
まずはPythonをインストールしてなかったらインストールして、次にeasy_installコマンドを使うためにsetuptoolsを自分のPythonにあったものをインストールします。
WindowsならC:\Python26\Scriptsに環境パスを通せば、コマンドプロンプトからeasy_installが使えるようになるので、

> easy_install http://closure-linter.googlecode.com/files/closure_linter-latest.tar.gz

と打ってたらインストールできます。(パス通してないならC:\Python26\Scriptseasy_install でも大丈夫)

*注意
現在配布されるやつはfixjsstyleがTypeError: ‘NoneType’ object is unsubscriptableのようになって動かないので、

> easy_install -Z http://closure-linter.googlecode.com/files/closure_linter-latest.tar.gz

という感じでファイルを展開するオプションをつけてインストールしてから、/python2.6/site-packages/closure_linter-2.2.1-py2.6.egg/
closure_linter/fixjsstyle.py の36行目にargfとなってるtypoiがあるのでそれをargvにすれば動きます。

使い方

使い方は単純でHow to Use Closure Linter – Closure Linter – Google Codeを見ると分かりますが、

gjslint path/to/my/file.js
fixjsstyle path/to/file1.js path/to/file2.js

のようにファイルやディレクトリを指定して実行するだけです。
–strictオプションやディレクトリに対してまとめてやる再帰オプションもあります。またGoogleのコーディングスタイルではJsDocを使う事になってるので、それを無視するオプションもあります。

fixjsstyleはE4Xとか特殊なものは認識してないっぽいので無理に書けると構文エラーを出すようになったりしますが、
Googleのコーディングスタイルはそこまで特殊ではないので、ちょっとした確認に使えたりして便利です。
JavaScriptの整形にはOnline javascript beautifier(これ自体がJavaScriptで書かれているのでEmeditorやNILScriptで動かせるgist: 453042 – クリップボードのJavaScriptコードを整形してクリップボードに返すNILScript – GitHub)とかと併用すると面白いかも。

Introducing Closure Linter – Closure Tools Blog
http://closuretools.blogspot.com/2010/08/introducing-closure-linter.html
Posted in software | Tags: , , , | No Comments »

ページ移動時などに音を鳴らすアドオン「KIRISAKE」

8月 21st, 2010

またJetpack SDKで1つアドオンを作成してみました。
リンクをクリックしてページ移動などの通信が始まった際に、風を切り裂くような音を出すアドオンです。

作った理由ですが、
移動する際に音を出すと、ちゃんとリンクをクリックできたかなどが聴覚的にも認識できるのと、上記のような音を使う事でブラウザが少し早くなったような感じがします(I shallplease)

という後付けの理由があったりしますが、HTML5のAudioタグを使って見たかったというのが第一の要因です。
そういう気分になったのは中国のJetpackerのLT資料を見つけて、pageWorkerでhtmlファイルを読み込んでその中でAudioタグを鳴らすというサンプルが載っていたので実践してみました。
見つけたLTの資料はこれJetpack SDK: The new possibility of the extensions on browser

処理的にはたいしたことはやっていませんが、Jetpack SDKにはページ移動(ページを読み込みじゃなくて、通信が始まった瞬間)に反応するAPIはまだないような感じなので、nsIWebProgressを使った普通のFirefox拡張機能と同じように直に書きました。
Components.interfacesとか使う必要性が出てくるわけですが、Jetpack SDK0.6からはCiやCcというエイリアスがデフォルトではなくなったので、以下のようにrequireしてから使う必要があります。
Jetpack SDK 0.6 がリリースされました « Mozilla Developer Street (modest)

var {Cc, Ci} = require("chrome");

ちなみにこのvar {a,b} = obj;みたいな表記は分割代入というJavaScript 1.7からの機能を使ったもので、

var Cc = require("chrome").Cc , Ci = require("chrome").Ci;

というのと同様の意味になります。一部地域ではよく見かけるので覚えておくと便利です。

参考サイト

Components.interfaces
Posted in Jetpack | Tags: , , , , , | No Comments »

NILScriptの使い方と書き方

8月 16th, 2010

NILScriptとはSpiderMonkeyを使ったJavaScriptベースのスクリプト実行環境です。(Windows専用+Wine環境でもある程度)
直感的に言うと、WSH + AutoHotKeyみたいな感じというのが分かりやすいかな。
できることなど細かい事はNILScriptのページやDocを読んでもらうとして、SpiderMonkey(JavaScript 1.8.1ベース)を使った処理系なのでFirefoxと同じJavaScriptの文法で、エクスプローラでのバッチ処理やキーバインドの変更などWSHやAutoHotKeyで行っていたような事がJavaScriptで書けます。

使い方

NILScriptのページからnil.zipをダウンロードして、適当な場所に解凍します。
解凍して出てくるng.exe(コンソールあり)とngw.exe(コンソールなし)のどちらかに、NILScriptのスクリプトファイルである*.ngファイルを渡すと実行されます。(WSHだとng = Cscript ,ngw = Wscript みたいな感じ)
毎回ng.exeなどにD&Dや引数などでngファイルを渡すのは面倒なので、ngファイルをクリックで実行できるように関連づけを行うinstall.batというのが入っています。実行するとng.exeと*.ngファイルが関連づけされ、クリックで実行できるようになります。
(多分レジストリを使うのはここだけ)
これで、実行する準備はできたので試しに何かスクリプトを実行してみましょう。
自分が作った適当なスクリプトで試してみる。

上のngスクリプトはちっちゃいウィンドウが出てきて押したキー(組み合わせも大丈夫)を表示するだけのスクリプトです。

こっちのngスクリプトは、Twitterで自分がフォローしてる人からユーザー名を検索してコピーするスクリプトです。
初回の起動時はOAuth認証します。(NILScriptで立てた簡易サーバをリダイレクト先にしている)
2回目の起動で自分のフォローしてるユーザーのリストを取得してから、ユーザー名を検索するウィンドウを表示します。
ユーザー名を途中まで入力して↓キーなどを押せば、入力したユーザー名の所まで飛べます。Ctrl+Cでユーザー名をコピーできます。

このようにngスクリプトを書けば、ローカルで動くものがJavaScriptで書けるので簡単なものを書いたりするのに便利です。
特にエクスプローラなどのファイル操作周りはWSHより簡単に書けるので、簡易なバッチ処理を書きやすい。
次はngスクリプトの書き方を見ていきます。

書き方

ドキュメントはダウンロードしたnilフォルダにdocというフォルダがあり、その中にユニット(機能)毎のドキュメントが書いてあります。
いろいろあるので何から見れば良いか迷いますが、まずは_readme.txtを開いてみると、NILScriptには大きく分けて、
Base.ng内で定義されているNIL標準クラス・関数 と require()関数で読み込んで使うユニットスクリプトがあることが分かります。
簡単言うと、前者はngスクリプトにそのまま書いて使える関数などで、後者はrequire(‘Clipboard’)のようにユニットスクリプトを読み込んでから使えるようになる関数などが存在するという事です。
まずはNIL標準クラス・関数にどんなものがあるかをbase_*.txtなどを軽く見て把握しましょう。
眺めているとprintlnなどのよくあるような感じのものからsleepやスレッドやポインタなどのJavaScriptでは扱えないものもあることが分かります。(base_main.txtはよく使う関数があるので必須)
正直、まだドキュメントは箇条書き程度で文例などが不足しているので、実際に動かしながら確認する必要がある。
(NILScriptブログで使い方などの解説も始まったので合わせて読む)
必要な機能は必要になったらgrepなどで検索して探すので効率的。

ドキュメントばかり見てもよく分からないので、サンプルファイルを見ながらどういう風に書いているのかを見てみましょう。
サンプルはnilフォルダのsampleというフォルダに入っています。
NIL標準クラス・関数はそのまま使えるので、ドキュメントや動作を見れば何となく分かってくると思います。
ユニットスクリプトを使うものはrequireしてから使う必要があるので、requireの仕方を見てみましょう。
例えばsampleのclipboard.ngを見ると、clipboardを扱うためのユニットスクリプトを読み込んでいるのが分かります。(詳細はClipboard.txtに)

/*
タスクトレイにアイコンを登録して常駐し、
クリップボードの内容が変更された時に、形式に応じた情報を表示します。
*/

Main.createNotifyIcon();// タスクバーにアイコン表示
var Clipboard=require('Clipboard').Clipboard;// ユニットスクリプトを読み込む

Clipboard.observe('change',function(obj){// クリップボードが変化したら動作するリスナー
	if(this.hasFormat('files')){// クリップボードの中身がファイル形式
		var a=this.files,r=[];
		for(var i=0,l=a.length;i<l;i++){
			r.push(a[i].name);
		}
		Main.notifyIcon.showInfo(r.join("\n"),this.isMove?"move":"copy");// タスクトレイのアイコンにバルーンメッセージを表示する
	}else if(this.hasFormat('html')){// html形式
		var h=this.html;
		Main.notifyIcon.showInfo(h.fragment,h.url);
	}else if(this.hasFormat('text')){// テキスト形式
		Main.notifyIcon.showInfo(this.text,'text');
	}
});

上ではvar Clipboard=require(‘Clipboard’).Clipboard;というようにクリップボードのユニットスクリプトを読み込んで、
読み込んだクリップボードスクリプトのClipboardというクラスをClipboardという変数に渡しています。
_readme.txtの●ユニットスクリプト機能にも書いてありますが、ユニットスクリプトrequire(“SomeUnit”).SomeClass という感じで、
多くのものはSomeUnitとSomeClassは同じ名前を持っているので上のような読み込み方法がよく出てきます。
他にもユニットスクリプトの使い方はあるので詳しくはNILScript: ユニット(拡張ライブラリスクリプト)の読み込み方法を見ると良いでしょう。(withでやるやり方はWindowでよく使います)

まずはHelloWorldを書いて実行するところから始めて、クリップボードが使いたくなったら関係するサンプルとClipboard.txtを見て作ってみる(それでもよく分からないときはlibフォルダにユニットスクリプトのソースがあるので中身を見てしまうと言うのもあります)

println("Hellow World");

サンプルを見ていくと大体雰囲気は使えめると思いますが、まだまだ文例が足りないのでハマる事があります。
くだらないものを書いてもどんどん公開して、いろんな書き方が見られるようになるともっと使いやすいものになると思います！

作例

というわけで自分が今までに自分が書いたNILScript。

 

最後の方で出てきたOAuthをNILScriptで使う方法。(上のサンプルは無視していいよ)

  • OAuth.ng (ライブラリみたいなものです)

をダウンロードして、OAuthを使うスクリプト内でinclude(“OAuth.ng”);して、後はOAuth for Greasemonkeyのラッパーライブラリ | Web scratchとメソッドの使い方は同じ。(xhrは実装してないです)
単純なサンプルで、OAuth.ngと同じフォルダに入れて実行するとOAuth認証ができます。

本当はユニットスクリプトやプラグインにした方が良いんだけどやり方がイマイチ分からなかったのでincludeにしてみた。

まとめ

良いところ

SpiderMonkeyベースなのでE4Xなども使えて文字列処理がやりやすいので、Firebugなどでマクロ的な文字列処理をしてる人とかJavaScriptで書くならこっちの方が便利かもよ。(JavaScript の新しめの機能(Array の拡張)とかも動くよ)
デフォルトでマルチストローク対応ホットキーやマウスジェスチャープラグインなどもあるので、AutoHotKeyでよくあるキーバインドを変更するとかもできるよ(自分の設定を公開とかやるといいかも)
WSHに比べてファイル操作をするものがかなり書きやすいよ。(base_io.txtを読む)
AutoHotKeyと違ってマルチバイト文字列に対応してるのでダメ文字とか日本語書けないとかに悩まされないよ。
標準関数やユニットスクリプトなどもNILScriptで書かれているので、ソースを直接読むことができる(この辺、情報不足感といいJetpackによく似てる。requireするとこも)

悪いところ

知名度が少ないので情報が少ない(→作ったものはどんどん公開して欲しい)
SpiderMonkeyにはDOM実装はないので、LooseXMLという独自のパーサーになっている。XPathに似た表記で使えたり悪いとは言い切れないけど、普段使うJavaScriptのDOMとはちょっと違うので手間取る。
GUIの表現が貧弱。Windowを使う事で基本的なウィンドウは簡単に作れるが、文字サイズなど装飾など細かい事ができない部分も多い。

NILScriptの用途として個人的に使うものを書く場合が多いと思いますが、書いたものをどんどん公開していこうぜ！という感じで〆

NILScript
NILScript配布場所
NILScriptブログ
特徴や使用例の紹介記事
Posted in NILScript, javascript, software | Tags: , , , , , | 2 Comments »

Greasemonkeyにデバッグ関数を追加するuserChrome.js

6月 12th, 2010

以前、GreasemonkeyにGrowlのような通知を呼ぶ機能を加える「Dbus Notify」 | Web scratchでGreasemonkeyから使える機能を増やせたら楽しそうと書いたと書きましたが、calloutのソースを参考にGreasemonkeyスクリプトから使える関数を追加するuseChrome.jsを書いてみました。

このuserChrome.jsを読み込むと、

fbug
Clipboard.get
Clipboard.set

などのメソッドがGreasemonkeyスクリプトから使えるようになります。
fbugはconsole.logと同じ動作ですが、Firebugのウィンドウを開いていない状態(Firebugがオフ)でもFirebugのウィンドウを開いてからlogを出してくれる関数です。(元ネタはxqjs)
Clipboardの方はjetpack prototypeからのコピペなのであんまり確認してません。

当たり前ですがこのuseChrome.jsをインストールしてない人の環境ではfbugなどの関数は使えないため、デバッグ目的か自分用のGreasemonkeyに使用する感じになると思います。
以下のようにデバッグ時のみ動く関数でラップしておけば、配布の際にDEBUG = false;とするだけでいいので楽かも知れません。

var DEBUG = true;

    log("なんとか");
    // DEBUG - http://gist.github.com/428596
    function log() {
        if ( typeof DEBUG != 'undefined' && DEBUG ) {
            fbug.apply(this, arguments);
        }
    }

何かもっと便利なデバッグ関数とか作れそうな気がします。
多分Greasemonkeyスクリプトからしか動かないようにできているので(あんまり自信ない)、そこまで危険な事は起こらないかと思いますが安全は保証できないので自己責任でというテンプレを入れておく。

gist: 428596 – Greasemonkeyから使える関数を追加するuserChrome.js- GitHub
http://gist.github.com/428596
Posted in userChome.js | Tags: , , , , | No Comments »

OAuth for Greasemonkeyのラッパーライブラリ

6月 10th, 2010

Post Now browsing to TwitterをOAuth認証に対応しました | Web scratchでGreasemonkeyスクリプトの「Post Now browsing to Twitter」をOAuth認証に対応したものを作りました。
OAuthのJavaScript実装はいくつかあるみたいですがGreasemonkeyで使う感じになってるものは無かったみたいなので、OAuth.jsを使ったtwitterでのOAuth認証を手助けするラッパーみたいなものを書きました。

xAuthを使えば楽な気もしますがブラウザベースのものはxAuthを使わずにOAuthを使ってねとの事です

大部分は

を参考に書きました。
何となく分かるかも知れませんが、今回扱うアプリはApplication Typeがclientタイプのものです。

Read the rest of this entry »

Posted in Greasemonkey | Tags: , , , | 4 Comments »

userChrome.jsでメニュー拡張を追加できる「userMenu.js」

5月 12th, 2010
userChrome.jsでJavascript Actionsのようなスクリプトの実行コマンドをサブメニューのネスト, タブメニューやメインメニュー、コンテキストメニューなどのメニューに追加する形のスクリプトを扱いやすくしたり、GreasemonkeyのAPIと似たような機能を持つライブラリが使える要にするuserMenu.jsの紹介
ダウンロードは以下の場所から
userChrome.js – Mozilla Firefox まとめサイト
http://firefox.geckodev.org/index.php?cmd=read&page=userChrome.js&word=user#g4f5f928

いろいろバージョンが置かれてますがuserMenu.js ver. 1.21mod 一式(Fx3以降)と最新のものをダウンロードして、ver1.21はあらかじめtabmenuなどのフォルダがあって分かりやすいので、それらを最新版で上書きすると良いでしょう。

こんな感じのファイルが入ってるので、とりあえず動作させるために、FirefoxプロファイルのChromeフォルダにそのまま中身を突っ込みます。

Chrome
│  0.UCJSToolkit.uc.js
│  GM_modoki.jsl
│  jsa.jsl
│  JSA_modoki.jsl
│  preload.sample.txt
│  scripting.txt
│  userMenu.js.readme.txt
│  userMenu.pl.js
│  userMenu.uc.js
│  ここにはuserChrome.jsなども存在
│
├─contextmenu
│      Add Copy.se.js
│      Element Killer.js
│      Google cache.nl.js
│      Google Translate.se.js
│      Open IE.nl.js
│      Open Selection.se.js
│      Reload Image.im.js
│      Use Javascript.auto.js
│      Wayback.nl.js
│
├─tabmenu
│  └─Order.ct
│          FrameOrder.ct.auto.js
│          ImageOrder.ct.auto.js
│          JSOrder.ct.auto.js
│          PluginOrder.ct.auto.js
│          RedirectOrder.ct.auto.js
│          userContentOrder.ct.auto.js
│
└─toolmenu
        0000.アドオンリストをタブに表示.L.js
        Inspection Here.js
        Rebuild User Menu.js
        Reload userContent.css.js
        Restart Firefox.r.js
        ~.---

移動させて再起動すると、コンテキストメニューやツールメニューにいろいろな項目が増えていれば成功です。

一つ一つのスクリプトの機能は数が多いので適当に見れば分かるので、開発したスクリプトをメニューに表示させる方法へ。scripting.txtやuserMenu.js.readme.txtを見ると詳しく書いてありますが、contextmenuやtoolmenuといったフォルダがそのままの構成でメニューと対応してるので、それらのフォルダに作ったスクリプトをjs拡張子にして入れるだけで簡単に登録できます。(スクリプトのファイル名ルールでショートカットなども設定できる)
例えば、右クリックに表示されるスクリプトで複数のものを一つのフォルダに入れれば、それが一つの階層になります。

contextmenu
└─JSAction
        Add Copy.se.js
        Element Killer.js

また先ほど紹介したようにGreasemonkeyのAPIと同様の機能を持ったものが一部使えます。
GM_setValueやGM_xmlhttpRequestなど。

デバッグ方法としてconsole.ほげ()というFirebugで使われるメソッドが使用できると書いてあるのですが、イマイチ動かなかったので、
GM_modoki.jsl (GreasemonkeyのAPIを定義してるファイル)の先頭部分に

// fbug(x)でFirebugのコンソールに出力
function main(){
  var windowManager = Components.classes['@mozilla.org/appshell/window-mediator;1']
                                .getService(Components.interfaces.nsIWindowMediator);
  return windowManager.getMostRecentWindow("navigator:browser");

}
function fbug(x){
   var {Firebug} = main();
   if(Firebug.Console.isEnabled() && Firebug.toggleBar(true, 'console'))
     Firebug.Console.logFormatted(Array.slice(arguments));
   return x;
}

と書き足して、fbug(x)でFirebugのコンソールに出力するようにしました。
Services.jsmが使えるなら以下のような感じで書けるようです。xqjs – ’ellaneous が元ネタです。

Cu.import('Services.jsm');// 読み込み先にresource:// かfile://
function main() Services.wm.getMostRecentWindow('navigator:browser');
function fbug(x){
   var {Firebug} = main();
   if(Firebug.Console.isEnabled() && Firebug.toggleBar(true, 'console'))
     Firebug.Console.logFormatted(Array.slice(arguments));
   return x;
}

上記のfirebugコンソールへの出力はxqjsのソースコードを見て知ったものです。
xqjsはExecute JSのようなその場でChromeやcontentに対してJavaScript実行できるアドオンです。
話題のCoffeeScriptやJavaScriptの単語補完、マクロ機能、便利なユーティティ関数などが使える優れたFirefoxアドオンなので、JavaScript ShellやFirebugのコンソールで入力するのが微妙だなーと思う人は一度使って見るといいかと思います。
fbugでFirebugのコンソールにもlogを吐けるので連携させるとなお便利。
Firebugで定義されているXpathやCSSセレクタもマクロで定義されており、copy関数なども存在します。

詳しくは作者さんのページとAMOとソースを読む。

xqjs – ’ellaneous
http://d.hatena.ne.jp/murky-satyr/20100504/xqjs

話が完全にすり替わりましたが、userMenu.jsはuserChrome.jsを書く上でかなり便利だと思うので、一度見てみることを進めます。

userMenu.js
http://firefox.geckodev.org/index.php?cmd=read&page=userChrome.js&word=user#g4f5f928
userChrome.js – Mozilla Firefox まとめサイト
http://firefox.geckodev.org/index.php?cmd=read&page=userChrome.js&word=user#g4f5f928
Posted in userChome.js | Tags: , , , , , | No Comments »

閲覧者が何をテキストコピーしていったか監視するスクリプト

4月 21st, 2010

サイトに訪れた人がどんな文章や単語をCtrl+Cや右クリックから選択してコピーしていったのかを調べるスクリプトです。

Webページ上のテキストコピーを監視し, 貼り付けにはリンクバックを付けるTyntが$8Mを調達
http://jp.techcrunch.com/archives/20100416tynt-gets-8-million-for-ctrl-c-action/

この記事を読んでどんなものをコピーしたのかを解析すれば面白いと思ったので、かなり適当にでっち上げてあります。
言語はJavaScript+PHPで結果をtxtファイルにするという適当な感じです。

上のファイルをダウンロードすると

copylogger
├──copylogger.js　　
└──dataStorage.php

となっているので、二つのファイルを同じ場所において(もしくはフォルダごとアップして)、

<script type="text/javascript" src="http://example.com/lab/copylogger.js"></script>

みたいにjsファイルを読み込んでおくと、テキストコピーに反応して、log.txtに

コピーページのタイトル<>コピーページのURL<>コピーした文章<>コピーした時間

という感じで出力されていきます。

正直、見やすくもなく実用的でもないですが、コピーされてる文章からどういう行動をとってるのかが分かって面白いです。
例えば

「RefControl」でリファラを偽装しておくべきサイト | Web scratch<>http://efcl.info/2009/0923/res1352/<>blogs.yahoo.co.jp<>2010/4/19 20:21
「RefControl」でリファラを偽装しておくべきサイト | Web scratch<>http://efcl.info/2009/0923/res1352/<>fc2.com<>2010/4/19 20:22
「RefControl」でリファラを偽装しておくべきサイト | Web scratch<>http://efcl.info/2009/0923/res1352/<>plusd.itmedia.co.jp<>2010/4/19 20:22

という感じのlogがあると、このページには登録すべきサイトをまとめたテキストとインポート方法も書いてあるのに一個一個コピーしてるところを見ると、気づかなかったのかもしくはすべてを登録する必要はないからコピペしてるのかなーとか想像できます。

まあ、copyloggerって名前にしてるように閲覧者は気持ちよいものではないと思うので、お遊び程度にしてみた方がいいかもしれないです。(PHPファイルの方も作りが適当なので安全か怪しいし)

JavaScript部分の参考資料

<script>タグから読み込んだjsのディレクトリを取得 – prog*sig
http://efcl.info/adiary/%3cscript%3e%e3%82%bf%e3%82%b0%e3%81%8b%e3%82%89%e8%aa%ad%e3%81%bf%e8%be%bc%e3%82%93%e3%81%a0js%e3%81%ae%e3%83%87%e3%82%a3%e3%83%ac%e3%82%af%e3%83%88%e3%83%aa%e3%82%92%e5%8f%96%e5%be%97
Posted in その他 | Tags: , , | No Comments »

TwitterとJavascriptな人々

3月 4th, 2010

自分のTLで見る感じのJavascriptな人々
勝手な印象、主観なのでコメントを気にしたら負け。
Firefoxはデフォルト要素なので特に書いてません。

t_trace

pbtweet、mbtweetの作者
CSS3が好きそうな人
実際にHTML5を使ったアプリケーションをつくったりしてる
m_satyr Ubiquity
何かJavascriptでも珍しい事をやってる気がする。
Griever2 Opera、Firefox
userChrome.jsとか弄ってる
miya2000 Opera
wnpの作者。
テクい事をやってたりするような
snj14 LDRizeとかMinibuffer
hell2u Emacs、CSSに詳しそう
teramako

vimperator(vimperatorとなげくと監視されます)
JScriptとかxpcshellとか
Firefoxのあんなことやこんなことを知ってる印象
monjudoh jQueryとかfirebugとかMercurial
プログラミング関係のツールが好きそう。
nanto_vi JavascriptやHTMLなど仕様に関して本当に詳しい
nantoメソッド:誰かが記事にしたことに対して既にDays on the Moonで記事になっていたことがよくある。
ku iPhoneアプリとかGoogleChromeとか
新しいことを見つけ出したりしてる印象
stillpedant KeySnailの作者。
勉強家、出てきたことに対してちゃんと学ぼうとしてる感じ。
javascripter nightlyを追ってる気がする。
あんまりTLじゃ見ないけど、一行コードを残していく。
amachang 最近はJavascriptな話題はあんまりみないけど。
高速化、新しいことには手が早い
昔のプレゼンの資料どこだろ？
ofk オレオレjQueryとか。
Javascriptの高速化について詳しい
そういえばこれ書こうと思ったきっかけ → 日本のJavaScript界隈のブログを適当かつ詳細にまとめてみようと思って挫折したけど、もうちょっと頑張ってみた – ?D of K
uupaa uupaa.js(uupaa.jsはフレームワークではなくてライブラリ)の人
Javascriptの高速化について詳しい。
黒魔術の使い手。
他とは互換が効かないような人な気がする。
azu_re 自分
Greasemonkeyとかニコニコ
edvakf Opera、Google Chrome
英語圏の記事を読んでたり、新しい機能を弄ってたり、それをアウトプットしたりいくつかあるブログの更新頻度は高め
勉強家
33 tombloo作者
kiva
swdyh AutoPagerize作者
os0x Opera、Google Chromeに深く関係
細かいところまで拾える人
cherenkov jetpack、Greasemonkey
hagino3000 サーバーサイドJSとかExt JS
anekos 猫、vimperator
xulapp まだつかみ切れてない。
結構お詳しそうな様子
Constellation Taberareloo作者、Greasemonkey
ホントよくコードを書いてる気がする。
最近はGoogle chromeでいろいろ
azu (azu_re) on Twitter
http://twitter.com/azu_re
Posted in javascript | Tags: , | No Comments »

twicliからRead It Laterへ登録するプラグイン

2月 23rd, 2010

twicliはブラウザで動くTwitterWebクライアントで、Javascriptでプラグインを書くことで拡張することができます。
今回はtwicliから特定のポストに貼られているリンクをRead It Laterへ登録するプラグインを書きました。

必要なもの

使用方法

http://efcl.info/lab/twicli/ReadItLator.js

をtwicliの+にあるPluginsに書き足す事で上のプラグインを読み込む。
プラグインを読み込むために一度ページをリロードしてら、+のPluginの下に▼Read It Latorというのができるので、
Read It Laterのユーザー名とパスワードを記入する。

そして各ポストの▼を押すとRead It Laterが追加されているので、登録したいリンクがあるポストで実行する。
(リンクがないポストを選択した時はそのポストのURLが登録されます。)

雑記

API KEYが必要なので自分のをいれていますが、回数制限とかあるらしい。
ソース自体もサーバが貧弱なので別のところに置きたい。
(Read It Later APIは簡単に取得できます。)

twicli – A Web Browser-Based Lightweight Twitter Client
http://www.geocities.jp/twicli/index.html
Posted in javascript | Tags: , , , | No Comments »

ブックマークレットの登録を手助けするブックマークレット

1月 15th, 2010

タイトルままですが、ブックマークレットがjavascript:~~~みたいにべた書きしてある場合、ブックマークレットとして登録するのが面倒なので、
それを登録するためのリンク(よくあるツールバーへD&Dするためのリンク)を作成するブックマークレット。

使い方

英語のニュースを読みやすくするブックマークレット – by edvakf in hatena
http://d.hatena.ne.jp/edvakf/20100115/1263539415

上を例にしてみると

ブックマークレットのテキストを選択

  1. べた書きされたブックマークレットのコード部分だけを選択する
  2. ブックマークレット登録補助ブックマークレットを実行
  3. プロンプトが出るので、登録するブックマークレットのタイトルをいれる(英語のニュースを読みやすくするとか)
  4. 選択範囲のすぐしたにいれたタイトルでリンクができるので、それをブックマークレットツールバーへD&Dする。

以上

(function(){
function insertAfter(newNode, node) {
        return node.parentNode.insertBefore(newNode, node.nextSibling);
}
var selection = getSelection();
if (!selection.rangeCount) return false;
var range = selection.getRangeAt(0);
var endNode = range.endContainer;
var a =document.createElement("a");
a.href = range;
var str = document.createTextNode(prompt("ブックマークレットタイトル"));
a.appendChild(str);
insertAfter(a,endNode);
})();
Posted in javascript | Tags: , | No Comments »
« Older Entries
プロフィール: azu(あず)
Firefoxの事やソフトウェアの紹介や使い道、Greasemonkeyの作成
  • OS:Vista
  • ブラウザ:Firefox
  • Twitterのアカウントはこちら
    • azu_re
  • メールアドレス(Twitterの方が確実)
    • info@ドメイン名
リンク

WebMoney ぷちカンパ

あわせて読みたい

^ ページトップへ | このサイトについて | サイト管理
Copyright © 2009 Web scratch. All Rights Reserved.

Powered by WordPress and WordPress Theme created with Artisteer.