縦置きタブバーとサイドバーを統合する拡張機能「Unified Sidebar」

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
タブバーを縦置きにする – Griever
http://d.hatena.ne.jp/Griever/20090705/1246788480

Jetpackで何かを作ってみる(作り方など

最近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使ってないスクリプトを削除するメモ

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

ニコニコ動画のマイリストページに共起タグクラウドを表示するGreasemonkey

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

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

// ==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(焼き直し)

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

Dropbox関係のソフトウェア

なんとなくメモ

  • 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の回数制限をGAE上のプロキシで回避する方法

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のアカウント登録とアプリ作成 – 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/ 以下のファイルを全部ダウンロードするのですが、そのままだと面倒なので、
【第17回】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をインストールして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/を入れればプロキシ経由で使用できます。
sshot-2009-12-12-2


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

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
GFW(グレート・ファイアー・ウォール)

Javascript向けIDE「Spket IDE」の導入

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にしておく

メニューより、Windows > Preferences… を選択し、 General > Workspace > Text file encoding において Other をチェックし、 「UTF-8」 を選択する。

Spket IDE, Firebug を使って JavaScript|すぐに忘れる脳みそのためのメモ

感想

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

TwitterのWebページをサイドバーで使うためのまとめ

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をサイドバーに表示するボタンを作成しておきました。

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

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

Ctrl+Enterでポストする。

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

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


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

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


プロフィール:azu
Firefoxの事やソフトウェアの紹介や使い道なんかを中心に活動。
Vistaを使っているのでVistaの事なんかも興味ある。
OS:Vista
ブラウザ:Firefox
Twitterのアカウントはこちら
Twitter Button from twitbuttons.com
メールアドレス(Twitterの方が確実) info@ドメイン名
あわせて読みたい