Web scratch

Posts Tagged ‘javascript’

自分の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);
})();

Spket IDEをインストールしてみるメモ。

Spket IDEはJavaScriptのコーディングやXMLなど向けのIDEでAptanaと同様にEclipseのプラグインとしても動作します。
また、Firefox Extension Projectを作成できたりアドオン作成向け機能もある。
今回は単体で動作するスタンドアロンとしてインストールする。

Spket IDEとは何かを詳しく知りたい人は下を読んでみるといいかも。

[Think IT] 第1回：Spket IDEとは何か？ (1/3)

http://www.thinkit.co.jp/free/article/0709/1/1/

Spketを使う | OpenLaszlo JP

http://www.openlaszlo.jp/?q=node/13

ExtJSの開発はSpket IDEがイイ感じ。Eclipseのプラグインでも動く。 – 蜘蛛の糸をつむぐには…

http://djodjo.jp/archives/149

Firefoxアドオン（拡張機能）の作り方

http://masahal.web.fc2.com/addon_lecture/

Eclipse plugin Spket IDE を試してみる – hogehoge

http://d.hatena.ne.jp/teramako/20070409/p1

インストール

上のサイトにインストール手順も書いてあるので重複するけど簡単な流れ

1. Downloads からSpket IDEをダウンロード
2. jarファイルなので、java -jar spket-1.6.8.jar みたいな感じでjarファイルを実行してインストーラーを起動
3. インストーラーでIDEを選びインストール場所とかを決めてインストール
4. 起動するとWorkspaceを聞かれるので適当に決めて動くか確認。

基本的にはEclipseなので、あんまり問題ないと思います。

日本語化

こちらもEclipseと同じやり方が通用するので簡単な流れ

1. Pleiades (今回は安定版)をダウンロード
2. 中身のfeatures、pluginsをSpket IDEに上書き
3. 起動して日本語になってなければ、Spket IDEフォルダのspket.iniの最後に以下を書き加える

   -javaagent:plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar=default.splash

4. 変な動作するなら-cleanオプションを付けて見るといいかも。

日本語化した画面

設定

まず最初に設定から文字コードをUTF-8にしておく

感想

• Aptanaに比べるとかなり軽い
• コード補完にXPCOMもでてくるのが少しウザイ(拡張機能開発には便利そう)
• JSDocに対応している
• アウトラインがわかりやすい

サイトに新たに機能を付け加えるのではなくて、元々サイトに存在してる関数を少しだけいじってやった方が簡単な場合があります。
そういうときにGreasemonkeyからサイトに元々ある既存関数を上書きする方法です。

SmartLDR更新 – 素人がプログラミングを勉強するブログ

http://d.hatena.ne.jp/javascripter/20090324/1237903880

ここで紹介されているlocation.hrefとjavascript:プロトコルを使ったハックを使うと比較的簡単に関数の上書きができます。
例えばmyFuncという関数を上書きしたい場合は以下のようにjavascript:プロトコルからmyFuncを再定義すると上書きができます。

function evalInPage(fun) {
  location.href = "javascript:void (" + fun + ")()";
}

evalInPage(function () {
myFunc = function(){
	上書きする内容
}
});

location.hrefとjavascript:プロトコルを使って実行するとXPCNativeWrapperの外側でスクリプトを評価できる(Greasemonkey内の評価ではなくなる)ので、unsafeWindowを使わなくても既存の関数に触ることができます。
逆にGreasemonkey内の評価ではなくなるので、GM_関数は使えなくなります。(感覚的にはブックマークレットを実行するのと同じ)
これを同期的に扱いたいならJSDeferredを使って下のように組み込むといいらしい。

unsafeExec on JSDeferred – 枕を欹てて聴く

http://d.hatena.ne.jp/Constellation/20090326/1238073714

9washのRTフォーマットを一般的なものに変更するのにこの方法を使ってみた。
9washはブラウザから利用できるWeb twitterクライアントです。
軽くて使い易いので、いいクライアントだと思いますが、RTのフォーマットが[RT:数字id @ユーザー名]みたいになっていて、使いにくかったのでその部分の関数を上書きして、よく使われているようなRT @ユーザー名:の書式に変えるようにしてみました。

• 9wash RT format.user.js

9wash twitter clientについて

http://tw.9wash.com/about

ニコニコ動画の再生ページに埋め込まれている情報 | Web scratch のマイリストページ版みたいなものです。
マイリストにもAPIがありますが(ニコニコ動画のAPIまとめ | Web scratch )マイリストページにいるならば、わざわざAPI叩かなくてもいろんな情報が取得できます。
なんでわざわざDOMから情報を取ってるかというと、変更の影響を受けにくかったりするからです。
ここでのマイリストは人が公開してるマイリストのこと。

my
	Mylist.groupList
		id (number): マイリストID
		user_id (number): マイリストのユーザーID
		name (string): マイリストのタイトル
		description (string): マイリスト説明文
		public (boolean): true // 公開状況
		default_sort (number): 1 (1-17)
		create_time (number): UNIX時間(util.unix2で戻せる)
		update_time (number): UNIX時間
		icon_id (number): 0
		sort_order (number): 0
	my.currentItems
		[0]...配列
			item_type (number): 0
			item_id (string): 接頭辞がない動画番号(常時)
			description (string): マイリスト登録者による説明文
			item_data
				video_id (string): 接頭辞がある動画番号(sm数字)
				title (string):  動画タイトル
				thumbnail_url (string): サムネイルURL
				first_retrieve (number): 投稿日時(UNIX時間)
				update_time (number): 更新日時(UNIX時間)
				view_counter (string): 再生数
				mylist_counter (string): マイリスト数
				num_res (string): コメント数
				group_type (string): default
				length_seconds (string): 再生時間(秒)
				deleted (string): 0 (削除状態0-3?)
				last_res_body (string): 最近のコメント(文字列)
				watch_id (string): 接頭辞なしの動画番号(コミュ、マイメモリー以外だと接頭辞がある)
			watch (number): 0
			create_time (number): マイリスト登録日時(UNIX時間)
			update_time (number): マイリスト更新日時(UNIX時間)

Firebugなどから、console.dir(my)などして構造を確認しておくといいです。
DOMから動画情報を取得するのを少しだけ手助けする関数群を置いておきます。(思ったより役に立たない)

(function () {
	var w = unsafeWindow;
	Mylist = {
		// マイリストの属性
		/*
		Mylist.groupListのツリー
			id (number): マイリストID
			user_id (number): マイリストのユーザーID
			name (string): マイリストのタイトル
			description (string): マイリスト説明文
			public (boolean): true // 公開状況
			default_sort (number): 1 (1-17)
			create_time (number): UNIX時間(util.unix2で戻せる)
			update_time (number): UNIX時間
			icon_id (number): 0
			sort_order (number): 0
		*/
		// Mylist.groupList - my.CurrentGroupのコピー
		groupList: function () {
			return w.my.currentGroup;
		},
		/*
		my.currentItemsのツリー
			item_type (number): 0
			item_id (string): 接頭辞がない動画番号(常時)
			description (string): マイリスト登録者による説明文
			item_data
				video_id (string): 接頭辞がある動画番号(sm数字)
				title (string):  動画タイトル
				thumbnail_url (string): サムネイルURL
				first_retrieve (number): 投稿日時(UNIX時間)
				update_time (number): 更新日時(UNIX時間)
				view_counter (string): 再生数
				mylist_counter (string): マイリスト数
				num_res (string): コメント数
				group_type (string): default
				length_seconds (string): 再生時間(秒)
				deleted (string): 0 (削除状態0-3?)
				last_res_body (string): 最近のコメント(文字列)
				watch_id (string): 接頭辞なしの動画番号(コミュ、マイメモリー以外だと接頭辞がある)
			watch (number): 0
			create_time (number): マイリスト登録日時(UNIX時間)
			update_time (number): マイリスト更新日時(UNIX時間)
		*/
		// Mylist.itemList - my.currentItemsのコピー
		itemList : function(){
			return w.my.currentItems;
		},
	}

	// utility関数群
	utils = {
	  playlength : transPlaylength,
	  unix2 : unixTodate,
	  clone : clone,
	}

	// 再生時間を分秒に変換
	function transPlaylength(length){
		return (length / 60).toFixed(2).toString().split(".").join("分") + "秒";
	}
	// 10桁の数字(UNIXTIME)から2009/10/1 00:00形式で返す
	function unixTodate(x){
		var t=new Date(x*1000);
		return t.getFullYear() + "/" + fillZero(t.getMonth() + 1) + "/" + fillZero(t.getDate()) + " " + fillZero(t.getHours()) + ":" + fillZero(t.getMinutes()) + ":" + fillZero(t.getSeconds());
	}
	// http://d.hatena.ne.jp/javascripter/20080514/1210791575
	// 先頭を0で埋める デフォルト2桁
	function fillZero(num , digit){
		var n = (digit) ? digit : 2;// デフォルト値
		var zero=new Array(n).join('0');//0をn-1文字分つなげた文字列を作る。n==4だと'000'
		var str=zero+num;//zeroとthisをくっつけた文字列を作る。
		var result=str.substr(-n);//strの後ろから、n文字分の文字列を取ってくる。
		return result;
	}
	// オブジェクトのコピーのコピーを作成
	function clone(obj){
		return (typeof uneval == "function") ? eval(uneval(obj)) : false;
	}

})();

gist: 239541 – GitHub

どんな風に使うかというと、上の関数群を読み込んで使用します。
DOMへのアクセスをするものと少しのutility関数群から構成されています。
再生時間を分秒に直したり、UNIX時間で格納されている時間を2009/10/1 00:00形式に直したりするだけです。

// ==UserScript==
// @name           Nico mylist Test
// @namespace      http://efcl.info/
// @include        http://www.nicovideo.jp/mylist/*
// @require        http://gist.github.com/raw/239541/1dab27439133948bd6309f4ba959921a8ce938b9/NicoMylistDom.js
// ==/UserScript==
var t = Mylist.itemList();// DOM my.currentItemsにアクセス
var cpObj = utils.clone(t);// オブジェクトのコピー作成(元の値を残す)
console.log(cpObj.length)
for(var i =0,l =cpObj.length;i<l;i++){
  console.log(i + " : " + cpObj[i].item_data.title + "投稿日 : "+ utils.unix2(cpObj[i].item_data.first_retrieve))
}
cpObj[i-1].item_data.title = "buzz";//コピーしたものを書き換える
console.log(t[i-1].item_data.title)// 元のDOMには影響ない

• Nico mylist Test.user.js

上の関数群のテスト例です。インストールしてマイリストページに行くとコンソールに例が表示されるので参考にどうぞ

最近になってFirebugのDOMタブで要素をクリックしてもその下の要素が展開されなくなったので、何かのアドオンと競合してるのかを調べてみたら、FxIFというEXIFを見るためのアドオンが原因だと分かった。
FxIFを外すか、過去のバージョンにするかで回避できた。

もう一つ、こっちは競合というわけではないけど、ニコニコ動画がリニューアルしてからマイリストにアクセスするとFirefoxが固まってフリーズするようになってしまった。
こちらの原因はIt’s All Text!というテキストエリアをエディタで編集するアドオンを外す事で解消された。
多分Javascriptで動的に表示させるようになったのが要因になって、変な動作をするようになったのかな。

XML-RPCを使ってWordpressやMovable Typeなどのブログに投稿するGreasemonkeyの書き方みたいなものです。
XMLRPCに対応したブログにどういうものがあるかは下のサイトによくまとまってます。(ちょっと古いですが)

BlogWrite – Atom API, XML-RPC

http://www.witha.jp/BlogWrite/bloglist.html

WordpressでしかテストしてませんがXMLRPCに対応してるブログなら動作すると思います。
今回は投稿機構みたいなものを書いただけなので、このスクリプトだけではあんまり意味はないと思います。

// ==UserScript==
// @name           XMLRPC poster
// @namespace      http://efcl.info/
// @include        http://*
// ==/UserScript==

/* 投稿先のメタ情報 */
var metaBlog = {
	"endPoint" : "ブログのエンドポイントURL",
	"blogid"   : "ブログのログインID",
	"username" : "投稿者名", //空だとblogidを使用
	"password" : "パスワード"
}

var XMLRPC = (function() { this.initialize.apply(this, arguments); });
XMLRPC.prototype = {
	/*
	 * @arg
		{
				"endPoint": "endPoint",
				"blogid"   : "blogid",
				"username" : "username",//空だとblogidを使用
				"password" : "password"
		}
	*/
	initialize : function(arg) { //引数は{}オブジェクト
		this.endPoint = arg.endPoint;
		this.blogid   = arg.blogid;
		this.username = (arg.username) ? arg.username : arg.blogid;
		this.password = arg.password;
	},
	/* *
	 * @title 記事タイトル
	 * @desc 記事内容
	 * @tags タグ(カンマ区切り)
	 * @callback 更新成功時のコールバック関数
	 */
	post : function (title, desc, tags, callback){
		var postURI = this.endPoint;
		this.tags = (tags.length == 0) ? "" : tags.join(",");
		var XMLbody = '<?xml version="1.0"?>\n';
		XMLbody += this.template(title, desc , this.tags);
		console.info(XMLbody);
		GM_xmlhttpRequest({
			method : "POST",
			headers : {
				'Content-type' : 'text/xml'
			},
			url : postURI,
			data : this.template(title, desc , tags),
			onload : callback,
		})
	},
  template : function (title, desc , tags){
    var repuest =  <methodCall>
                      <methodName>metaWeblog.newPost</methodName>
                      <params>
                        <param>
                          <value>
                            <string>{this.blogid}</string>
                          </value>
                        </param>
                        <param>
                          <value>
                            <string>{this.username}</string>
                          </value>
                        </param>
                        <param>
                          <value>
                            <string>{this.password}</string>
                          </value>
                        </param>
                        <param>
                          <value>
                            <struct>
                              <member>
                                <name>title</name>
                                <value>
                                  <string>{title}</string>
                                </value>
                              </member>
                              <member>
                                <name>description</name>
                                <value>
                                  <string>{desc}</string>
                                </value>
                              </member>
                              <member>
                                <name>mt_keywords</name>
                                <value>
                                  <string>{tags}</string>
                                </value>
                              </member>
                              <member>
                                <name>mt_allow_comments</name>
                                <value>
                                  <boolean>1</boolean>
                                </value>
                              </member>
                            </struct>
                          </value>
                        </param>
                        <param>
                          <value>
                            <boolean>1</boolean>
                          </value>
                        </param>
                      </params>
                    </methodCall>;
		return repuest.toString();
	}
}
/* init メタ情報を使って投稿先決める*/
var t = new XMLRPC(metaBlog);
t.post(
	"title",
	"description",
	["tag1","tag2"],
	function(res){//callback
		console.log(res);
	}
);

ブログのエンドポイントURLは各ブログによってまちまちですが、Wordpressだとhttp://Wordpressトップ/xmlrpc.php
になります。

E4Xを使ってポストするXMLを作成していますが、先頭に<?xml version=”1.0″?>を入れるとなぜかエラーになったので、後で結合するようにしました。
後、XMLRPCを使ってWordpressにタグを指定できるのかを検索した時、下のようにできないというのが出てきましたが、mt_keywordsにタグを指定できます。
なので下の情報は古いか間違っています。

WordPressでXML-RPCを使った投稿で、記事にタグの指定はできるのでしょうか。できるようでしたらやり方を書いたページを教えてください。.. – 人力検索はてな

Wordpressでは,で区切る事でタグを複数指定できます。
カテゴリーは面倒だったので放置してます(誰か…)

記載したソースは自由に使用してください。
gist: 224968 – GitHub

参考

肉少なめ | Item – Greasemonkeyでブログを更新

http://niku.suku.name/item/591

MovableType で使える XML-RPC API

http://www.na.rim.or.jp/~tsupo/program/blogTool/mt_xmlRpc.html#w01

XML-RPC経由の投稿 でタグを登録したい « Selflow WordPress

http://www.selflow.com/?p=6

LDRの未読件数をステータスバーに表示して定期的に更新するuserChrome.jsスクリプトです。
中身のユーザー名を自分のものに書き換えてから使用してください。

const userName = ""; // ユーザー名

デフォルトでは30分ごとに更新するようになっています。

const reMinute = 30; // 何分毎に更新する

数値だけでシンプルです

• LDRUnreadCounter.uc.js

環境によって描画がおかしくなってるかもしれないので、下のあたりといじると解決するかも。

    clearRect(0, 0, 24, 16);//透明土台 x, y, w, h
    mozTextStyle = 24 + (unread.toString().length) * -3 + "px sans-serif";//サイズ
    textAlign = "center"; // 横位置
    textBaseline = "middle";// 縦位置
    translate(0, 14);// 移動位置x,y

参考

LDRの未読件数をステータスバーに表示するプラグイン – hogehoge

http://d.hatena.ne.jp/teramako/20080730/p1

LDRの未読数をfaviconに表示するGreasemonkeyスクリプト – 素人がプログラミングを勉強するブログ

http://d.hatena.ne.jp/javascripter/20080609/1212968037

Emeditorネタを他のところに書いた。

• Emeditorのjavascript自動補完を強化する
• EmeditorでCtagsを使ったjavascript構文解析
• Emeditorのアウトライン設定

prog*sig

http://efcl.info/adiary/

上のサイトは主にプログラミングのメモで使うので、そっち系の内容は上のサイトに書くことにする。