Web scratch

firebugの縦置きタブバー(要アドオン)とサイバーを統合するUnified Sidebarというアドオンがリリースされました。

Latest topics > 縦置きタブバーの下にサイドバーを統合するUnified Sidebarをリリースしたよ – outsider reflex

http://piro.sakura.ne.jp/latest/blosxom/mozilla/extension/unifiedsidebar/2010-02-05_released.htm

対応してる縦置きタブバーの拡張は下の3種類みたいですが、知らせれば他のも対応してくれるかもしれないとのことです。

• ツリー型タブ
• VertTabbar
• Tab Kit

実際に統合するとしたような感じになります。

Tab kitと統合

画面の大きさと一度に開くタブの数によっては結構いい感じに扱えます。
少しでも画面を広くするため、Hide Captionを使ってタイトルバーを非表示にして、userChrome.cssでサイドバーのタイトル部分を非表示にしています。

/* サイドバーのタイトル部分非表示*/
#sidebar-box > sidebarheader{
    display: none !important;
}

Unified Sidebar

https://addons.mozilla.org/ja/firefox/addon/72200/

Hide Caption

https://addons.mozilla.org/ja/firefox/addon/9256

最近Jetpackをいじり始めたので、何かを作りながら作り方を学んでみる。

作ったものなど

1. Copy shorten URL with is.gd
   クリックするとクリップボードに今のURLを短縮したものがコピーされる。
   いわゆるクリップボード機能&ステータスバーに挿入を使ってみたかった。
2. LDR_StatusBar_Notify
   LDRの未読件数をステータスバーに表示
   LivedoorReader StatusBar Notify
   http://d.hatena.ne.jp/zuzu_sion/20090520/1242900564
   を現在のバージョンで動くように修正しただけです。
   昔のバージョンではimportがなかったり、Jetpackが大文字でも動いてたらしい。
3. clipboard_display
   クリップボードの内容をステータスバーに表示。

   いわゆるクリップボード機能を使ってm(ry
   クリップボードが変更した際に知らせてくれるようなAPIはなかったのでintervalで回してるだけ。

4. Nico_make_volume_corrections
   ニコニコ動画で再生開始時にSettingで決めたボリュームにする。

   manifestで設定画面が簡単に作れるのはいい感じ。
   いわゆるGreasemonkey的なものなJetpack
   サイトの範囲を指定するのにはpageModsを使用する
   Labs/Jetpack/JEP/17 – MozillaWiki
   unsafeWindowはwrappedJSObjectを使っちゃってるが、javascript:プロトコルでブックマークレット的にやる方がよいです。
   これがXPCNativeWrapperとunsafeWindowの間でデータを送受信する | へびにっき 参考になります。

JetpackのAPIは
プロファイルフォルダ\extensions\jetpack@labs.mozilla.com\content\js
のjsを読むと何があるか分かる。
解説はLabs/Jetpack/JEPs – MozillaWikiを見て、検索をかける(たいていの場合まめ畑がかかります)

azu さんのjetpackに関するメモに返信 に自分がメモったことに対してteramakoさんからの指摘が書いてあります。
今Jetpackでどんなことがどのようにできるのかが何となく書いてあります。

Jetpack – MDC

https://developer.mozilla.org/ja/Jetpack
簡素だがAPI解説がまとまってる

Jetpack APIリファレンス | Screw-Axis

http://screw-axis.com/jetpack/jetpack-api-referencejetpack-api-reference/
ちょこっと古いけどわかりやすい

[Jetpack] – Cli@

http://d.hatena.ne.jp/efcl/searchdiary?word=%2a%5bJetpack%5d

なんかリンクいろいろ

30分で作るJetpack Feature (1) 概要 – JavaScriptとかPerlとかPHPとかさくらとか勉強する

http://d.hatena.ne.jp/lesamoureuses/20090715/1247637734
チュートリアル

JetpackにはSlideBarという機能もあるが今回全く触れてない。
All-in-One  Sidebarみたいなものを使えるらしい。

Greasemonkeyで使ってないスクリプトを削除したい。

gm_scriptsディレクトリにあるconfig.xmlを編集

^(?!.*enabled="true").*$

を空に置換して有効になっているものだけを取り出す

^\n

も空に置換して空の改行をなくす

^.*?filename="(.*?)".*?basedir="(.*?)".*?$
を下のように置換して使っているファイルのパスを出す。
\2/\1

なんかゴミが残ったりするので上の正規表現が適当なせい。

ここまでの手順で、使っているスクリプトの.jsまでのファイルパスが抽出できる。
で、こっからどうやってそれらのファイルだけを取り出せばいいのかがよくわからない。
こんな感じででる。(なんかいろいろおかしい)

./googlenotebookcustomizer.user.js
pastedscripinstaller3.user.js.
simplestylegoogle_mania.user.js
hb_display_comment/hb_display_comment.user.js
.....

リストに載っているものを移動するときに(その方法すら浮かんでない)Requireしたものが含まれないとそんな問題もある。

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

ニコニコ動画の検索ページに共起タグクラウドを表示するChrome用ユーザスクリプト作ってみた – あたご型護衛艦日記

http://d.hatena.ne.jp/aTaGo/20100112/1263285275

という便利なものがあったので公開マイリストページにもタグクラウドを表示するGreasemonkeyを書いてみた。

• Mylist TagCloud

// ==UserScript==
// @name           Mylist TagCloud
// @namespace      http://efcl.info/
// @include        http://www.nicovideo.jp/mylist/*
// ==/UserScript==
evalInPage(function(){

	var as = my.currentItems
	var ids = "";
	if(as.length > 1){
		insertcallback();
		for(var i = 0; i < as.length; i++){
			var smid = as[i].item_data.video_id;
			ids += smid + "+";
		}
		//console.log(ids);
		var uri = "http://nicotag.sakura.ne.jp/getcollocationtag.php?smid=" + ids + "&rand=" + Math.floor(Math.random()*1000);;
		calljsonp(uri);
	}

function calljsonp(uri){
	var scr = document.createElement('script');
	scr.type = "text/javascript";
	scr.src = uri;
	document.body.appendChild(scr);
}

function insertcallback(){
	var callscr = document.createElement('script');
	callscr.type = "text/javascript";
	callscr.text = ''
			+ 'function callback(val){'
			+ 'var footer = document.querySelectorAll("div#SYS_box_mylist_body");'
			+ 'var foot = footer[0];'
			+ 'var div = document.createElement("div");'
			+ 'div.innerHTML = val;'
			+ 'foot.parentNode.insertBefore(div, foot);'
			+ '}';
	document.body.appendChild(callscr);
}
})
function evalInPage(fun) {
  location.href = "javascript:void (" + fun + ")()";
}

JSONPでしか取得できないような気がしたので、ほぼそのままな感じ。
確かめてないけどChromeでも動くかも。

Googleの検索結果画面にTwitter検索の結果も表示するGreasemonkeyスクリプトです。

以前、Twitter Search Results on Google for Greasemonkey [ http://userscripts.org/scripts/show/43451 ]を元に書いたものの焼き直しです。

Googleの検索結果にtwitter検索の結果を同時に表示するGreasemonkey | Web scratch

http://efcl.info/2009/0826/res1266/

また一から書き直してみた。
機能はほとんど変わってません。

少し似た目が変わったのと、その場でTwitter検索の結果を継ぎ足せるようにしたぐらいです。
インストールはこちらから

Twitter search(ja) result on Google for Greasemonkey

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

なんとなくメモ

• DropboxPortable
  DropboxをUSBなどから使えるようにするソフト
• Dropbox Screen Grabber
  Gyazoのようなソフト。ウィンドウのスクリーンショットを取ってpublicフォルダに入れる。
• Dropboxen
  複数のアカウントとパスを使ってそれぞれ共有させるソフト
• Conflict Manager
  共有して競合が起きた際に、元のデータとConflictしたデータのdiffを見てどちらを残すかを選ぶソフト

他にもサーバで動かすようなPHPなものなどいろいろある。

DropboxAddons – Dropbox Wiki

http://wiki.dropbox.com/DropboxAddons

これからDropboxアカウント登録をお考えの方は、下のリンクから(紹介者と申込者に250MBの容量がおまけにつくそうです。)
Sync your files online and across computers with @Dropbox. 2GB account is free!

Twitter API proxyをGoogle App Engine上で動かす方法

プロキシの必要性

プロキシを経由してAPIにアクセスすると何がいいのか

• TwitterのAPIはアカウント&IPアドレスでカウントされているので、APIの使用回数を増やせる。
  グローバルIPアドレスをPCごとに変えられない環境で2台のPCから見るときに便利
• Twitterへのアクセスが制限されている環境でも使用できる。
  元々GFW（グレート・ファイアー・ウォール）を超えるために作られたっぽい
• ちゃんと確認してないけど、GAEはホワイトリストに入ってる気がするので、API回数が20000になったりする事もある。

要はAPI使用回数を増やせるよって話。

必要なもの

• Google App Engineのアカウント
• Google App Engine SDK とPython実行環境
• birdnest 一式のファイル(Python)

まずはGoogle App Engineのアカウントを作成します。(すでに持ってる人は、新しいアプリケーションを作成するだけ)
Google App Engineのアカウント登録とアプリ作成 – 130単位 を参考にアカウントとアプリケーションを作成します。
このときのアプリケーションのIDは後で必要になるので控えといて下さい(Google App Engineのページにアクセスすればいつでも見られるけど)

次に開発環境 – Google App Engine – Google Codeを参考にPythonの実行環境とSDKをダウンロード&インストールします。(ここも既にやってる人はスルー)
Pythonは2.5が推奨されているのでできればそちらをダウンロードした方がいいです。(一応2.6でも動きました)

次に今回、Google App Engine上で動かすプロキシのスクリプトである、birdnestをダウンロードします。
http://birdnest.googlecode.com/svn/branches/gae/ 以下のファイルを全部ダウンロードするのですが、そのままだと面倒なので、
【第１７回】EclipseでSubversion – Tech [Friday] プロモバイルエンジニアブログ などを参考にEclipseを使ってSVNをチェックアウトしてまとめてダウンロードしました。

ダウンロードしたファイル

これらのファイルを先ほど作成したアプリケーションID名のフォルダを作りその中に入れておきます。(これは説明を統一するためなので絶対必要な操作ではないかも)
アプリケーションのIDがtwitproxyならtwitproxyというフォルダを作りその中に入れる。

ファイルの編集

ダウンロードしたapp.yamlを編集する必要があります。
一行目のアプリケーション名を先ほど控えてた自分が作成したGoogle App EngineのアプリケーションIDに変更します。

application: アプリケーションのID

テスト&アップロード

Pythonが入っていれば、コマンドプロンプトでPythonと打ち込むとバージョンが表示されます。(エラーになる場合はPython周りがおかしい)
まずは動くかどうかをテストします。
GAEではローカルでテストするためにSDKにサーバがあるのでそのスクリプトを起動して確認します。
同じくコマンドプロンプト上で、

Python "C:\Program Files\Google\google_appengine\dev_appserver.py" 先ほど作成したフォルダへのパス

と打ち込んだ状態(コマンドプロンプトは閉じない)でhttp://localhost:8080/にアクセスとページが表示されると思います。
この上でTwitterクライアントのAPIURLをhttp://localhost:8080/api/ にして使えるか確認できるといいです。
Google App Engineを使ったTwitterBotの作り方 – 星屑日記 を詳しく読むといいかも。

アップロード

次に編集したファイルをGAEにアップロードします。
先ほど同様にコマンドプロンプト上から

Python "C:\Program Files\Google\google_appengine\appcfg.py update 先ほど作成したフォルダへのパス

と打ち込むとアップロードが始まります。

そしてhttp://アプリケーション名.appspot.com/にアクセスしてテストの時と同じページが表示されればアップロードは成功です。

実際にプロキシとして使用する

• Echofon for Twitter (Formerly TwitterFox)

Echofonをインストールしてextensionフォルダに行きます

vista

C:\Users\ユーザー名\AppData\Roaming\Mozilla\Firefox\Profiles\eプロファイル名\extensions\twitternotifier@naan.net\components

XP

C:\Documents and Settings\ユーザー名\Application Data\Mozilla\Firefox\Profiles\プロファイル名\extensions\twitternotifier@naan.net\components

ここにあるnsTwitterFox.jsを編集します。

var TWITTER_API_URL = “http://アプリケーション名.appspot.com/api/”;

と変更すると、GAE上で動いているプロキシを通してAPIにアクセスすることができます。
基本的にAPIのURL指定を変更できるソフトなら同じ方法でプロキシを通してアクセスできる。

海外のクライアントだとAPIを指定できるソフトも多いです。

Spazの場合だと設定画面にBase API URLを指定できるので、同じようにhttp://アプリケーション名.appspot.com/api/を入れればプロキシ経由で使用できます。

設置が凄い面倒でセキュリティを気にしない人は

birdnest – a twitter api proxyを同じように使えるかもね。

以下参考

birdnest – Project Hosting on Google Code

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

How to set up Twitter API Proxy with Google App Engine | Bruce Yo’s Blog

http://www.bruceyo.info/archives/402

Google App Engineを使ったTwitterBotの作り方 – 星屑日記

http://d.hatena.ne.jp/intheflight/20090611/p1

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に対応している
• アウトラインがわかりやすい

Twitterのウェブサイトをクライアントとして使うのに役立つGreasemonkeyとCSS | Web scratch

http://efcl.info/2009/0317/res613/

以前書いたような記事と似たような記事を書きましたが、今回はシンプルにサイドバーでTwitterのWebページを表示する方法です。
Greasemonkeyがサイドバーでも動作するようになったので、かなり快適になり、またWebページを表示するだけなのでAPIを使わないのが特徴です。

最終的な似た目

まずはCSSでサイドバーに合わせた形にする必要があります。

nukumori wiki – Firefoxのサイドバーでtwitter.comするCSS

http://nukumori.org/hiki/?TwitterSidebarCSS

にあるCSSを使ってサイドバーに合わせたものにしていきます。
使い方は書いてあるのでそれをよく読んでCSSを反映させます。
(ブックマークするのはhttp://twitter.com/?sidebar という適当なクリエを付けたURLです。
http://twitter.com/だと通常見るときと混ざってしまうため。)

ブックマークではなくCustom Buttonsを使ってtwitterをサイドバーに表示するボタンを作成する方法もあります。
Twitterをサイドバーに表示するボタンを作成しておきました。

• Twitter sidebar

• userChrome.css
  少し自分向けに修正したCSS(通常のTwitterページ向けも混ざってる)

次により使い易くするためのGreasemonkeyを入れていく。

• Twitter Enhancements: Press Ctrl + Enter to Send Update.user.js

Ctrl+Enterでポストする。

• Twitter Change Style.user.js

自分の投稿や、特定のワードが入ってる投稿を色分けする
tyoro.exe: 投稿内容からマッチングしてスタイル変えるグリモン書いたよ！

• TwitterAutoReloader.user.js

自動更新の差分を自動で取得
Twitter webの自動差分更新Greasemonkeyスクリプトを書いてみた « H.LOG

自分は入れてませんが基本的にはTwitterのWebページと同じなので、

• PBTweet+
• troynt’s Twitter Script

など入れるのもありかもしれない。