Web scratch

Archive for the ‘javascript’ Category

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ファイルが関連づけされ、クリックで実行できるようになります。
(多分レジストリを使うのはここだけ)
これで、実行する準備はできたので試しに何かスクリプトを実行してみましょう。
自分が作った適当なスクリプトで試してみる。

• displayInputKeys.ng

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

• Twitter_friend_search.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。

• gist: 401178 – NILScript用のスクリプト- GitHub
  コピーする深さを決められるtreeコマンドみたいなもの。
  一番最初に書いたものなので何かおかしいところがあったり。(フォルダ判定はsizeより、dir.attributes.directoryがフォルダならtrueを返してくれるのでそっちを使いましょう)
• gist: 425452 – 30分ごとにLDRの未読数を表示するNilScript- GitHub
  アイコンとタイマーとHTTP.getText
• gist: 526275 – 押したキーを表示するNILScript- GitHub
  上で紹介していたもの。
  ウィンドウの表示方法とKeyboard。
• gist: 453042 – クリップボードのJavaScriptコードを整形してクリップボードに返すNILScript – GitHub
  JavaScriptで実装されたJS Beautifierをそのまま使えるって話
• gist: 453264 – プロセスを起動して落ちるのを待つだけ- GitHub
  サンプルにも似たようなものがあるのでそっちの方が参考になる
  exeの起動方法
• gist: 526351 – プロセスの起動 – GitHub
  上と殆ど同じ。プロセスのフルパスはエスケープする必要がある。
• gist: 454863 – NILScriptでXMLHttpRequest的なものを書くテスト- GitHub
  GM_xmlhttpRequestてきな感覚でXHRを書くのをテスト
  同じインスタンスのリクエストは上から順に実行される?
• gist: 456001 – ファイルの作成して書き込み #NILScript- GitHub
  そのまま。
• gist: 467939 – #NILScript にデフォルト値を入れたものを新規作成- GitHub
  上のを土台にした作ったもの。
  Greasemonkeyの新規作成ダイアログみたいなもので、// ==NILScript==のようなメタ情報を書いたngファイルを生成する。
  AutoHotKeyでもそうだったけど、スクリプト単体で配布されることが多いので、後でこれどこで拾ったけ?って事があると思うので、メタ情報はできるだけ入れておいた方がよいと思う。
• gist: 463430 – D&Dしたディレクトリ以下をフラットにする #NILScript- GitHub
  フォルダ(1)内のフォルダ(2)の中身をフォルダ(1)に移動させて、フォルダ(2)を削除

      フォルダ
      ├fileA
      ├fileB
      └フォルダ[DIR]
       ├fileC
       └fileD
  が
      フォルダ
      ├fileA
      ├fileB
      ├fileC
      └fileD

  のようにするスクリプト。複数のフォルダを同時にD&Dしてもできるようにしている。
  treeコマンドの時よりフォルダの扱いがちゃんとしてるはず。

• gist: 485691 – #NILScript からTwitterへ投稿- GitHub
  Greasemonkey向けにOAuthラッパを書いてあったので、NILScriptでも動くようにしてみたサンプル。
  NILscriptでのOAuthについては後ろの方でまた書くのでこれは見る程度で。
  azu’s OAuth-for-Greasemonkey at master – GitHub
• gist: 487432 – 自分のフォローしてる人からユーザー(スクリーン)名を検索する #NILScript- GitHub
  これもOAuth使ったサンプル。
  OAuth.jsとかも一緒くたにしてるので、分離する方法はまた後ろ

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

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

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

• gist: 526378 – OAuth for NILScriptのサンプル- GitHub

本当はユニットスクリプトやプラグインにした方が良いんだけどやり方がイマイチ分からなかったので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ブログ

特徴や使用例の紹介記事

自分の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

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

必要なもの

• 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

タイトルままですが、ブックマークレットが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);
})();

Twitterは日本でも一部では人気のあるウェブサービスですが、発言の中ではURLを貼ってサイトについて言及している発言も多く見かけます。
そのような発言を言及されたページから見られると便利だと思いませんか？
最近類似するものが多くなってきたのでまとめてみた。

twitterer anywhere

http://twitterer.moongift.jp/

MOONGIFT製のもので、検索結果をキャッシュして置いたものを使用しているので負荷が少なくて済む。
また通常のURLから検索を行ってもTinyURL化したものを披露ので効率がよい。
Javascriptを埋め込んで使うが、JSONPを直接取得する形でも利用してよいとのこと。
これを利用したGreasemonkeyとして
twitteranywhereview.user.jsがある

Tweetbacks for WordPress

http://yoast.com/tweetbacks-wordpress/

WordPressのプラグイン。
こちらもデータをキャッシュした結果を使用している。

TweetBacks Beta

http://danzarrella.com/tweetbacks-beta.html

javascript埋め込み型。
毎回検索を行う。

Tweet Me!

http://code.google.com/p/tweetme/

こちらもTweetBacks Betaと同様に埋め込み型で毎回検索を行う。
表示をカスタマイズできる

• tweet_me_style = falseを設定するとCSSでスタイルの指定が可能になる
• tweet_me_limit = 表示件数
• tweet_me_url = 表示するURL 未指定の場合、このページ

使い勝手や日本製ということを含めるとtwitterer anywhereが一番使い勝手がよいものになる。

Javascriptでポップアップを表示する時(Lightboxとかページ内でポップするやつ)にflashの上に表示しようとすると なぜかflashの背面に表示されてしまうことがあるので解決方法のメモ。 (Greasemonkeyスクリプト書いてるときに少し詰まった。)
一つ目の方法 Flushの前面にページの領域を表示する – Ulmhaftで紹介されているように cssでポップアップする領域(divとか)を

position:fixed;
overflow:auto;

とすればflashより前面に表示されるみたいです。
二つ目の方法 こちらはflashの表示タグに変更を加える方法 参考web-conte.com | blue | Lightbox JS v2.0 と Flash

<!-- object要素内に下記を追加 -->
<param name="wmode" value="transparent" />
<!-- embed要素に下記の属性を追加 -->
wmode="transparent"

のようにembedタグに要素を加えるとflashより上に表示できる。 javascriptなら addParam(“wmode”, “transparent”); しかし、この方法はflash内のテキストフィールドに日本語を打てなくなるとういう欠点があります。

wmode を transparent に設定した際の注意点 他にいい方法はあるのかな？
後は考えられるのはflashをdivなどのコンテナで囲んで、表示非表示を切り替える方法。
この方法は毎回flashの再生がスタート地点に戻るので使いづらいかも。