メイン

「bookmarklet」のアーカイブ

2008年5月 9日

Twitterのページを自動更新するGreasemonkey

Twitterクライアントに今ひとつなじめない僕は、未だにwebからTwitterをやってるんですが、そこで欲しくなったのが標題のスクリプト

たぶんだれか作ってるんだろうけど、ちょっと探してなかったから作っちゃいました。

Auto-reload Twitter

2008年5月 3日

Twitter翻訳Greasemonkey & bookmarkletをupdate

Twitterのデザイン変更に伴い、Twitter翻訳Greasemonkeyとbookmarkletをアップデートしました。

Greasemonkey:Translate Twitter

bookmarklet:Translate Twitter

Twitterのデザインは結構頻繁に更新されてるんですが、今回は、発言部分のspanタグのクラス名が変わってしまい、クラス名でspanタグを特定していた部分が動作しなくなってしまってました。

そのクラス名の変更ですが、"entry-content"から"entry_content"に変わるという修正で、始めどこが変わったのかまったく気づきませんでした。まいったね。

で、このスクリプトですが、日本よりも海外の人の方が反応してくれていて、いくつかのブログで紹介していただきました。

紹介していただいたブログは、はてぶでまとめています。

はてなブックマーク - Chrisのブックマーク/ feedback/ TranslateTwitter

こちらのページの、

Considering how big Twitter is in Japan, we just might need these!

という部分が、面白いですね。僕は「他言語」→「日本語」を想定していたんですが、海外の人から見たら「日本語」→「自国語」という方が需要があるのかも。

2008年4月27日

はてなブックマークのページではてなスター順にソートするbookmarklet

はてブのページで、コメントに付けられたはてなスターの数順にソートするブックマークレットを書いてみました。

sort by hatena star

ソースはこちらで確認できます。

for文がまわりまくっているので、ちょっと遅い感じかなぁ。

もっとこうしたら早くできるよってのがあったら教えてください。

2008年3月28日

twitterのページにGoogle AJAX Language APIを使った翻訳機能を付け加えるGreasemonkey & bookmarklet

先日リリースされたGoogle AJAX Language API が仕事で使えるんじゃないかと思い、仕様を見ているときにふと思いつきました。

日本人ばっかりをFollow(だっけか)しているとあまり気になりませんが、twitterのpublic_timelineを見ると、世界規模のサービスだけあって色んな言語が飛び交っています。で、その人がどんな発言してるんだろうかと気になるわけですが(僕だけ?)、いちいち翻訳ページにコピペするのも面倒だし、そもそも何語か分からない言語もたまに見かけます。

で、今回作ったGreasemonkeyとbookmarklet。

Greasemonkey:Translate Twitter

bookmarklet:Translate Twitter

これは何?

このGreasemonkeyを登録してtwitterのページに行くと(或いはtwitterのページでbookmarkletを実行すると)、↓こんな感じで、タイムライン上に「Translate!」リンクが表示され、

 

20080328_01.png
↓右上には、翻訳先の言語プルダウンが表示されます。

 

20080328_02.png
翻訳先の言語を「English」にしている状態で「Translate!」をクリックすると、↓こんな風に下に翻訳結果が表示されます。

 

20080328_03.png
GoogleのAPIがサポートしていない言語間の翻訳は、一旦英語に翻訳して、それを更に翻訳するという風にしています。

 

20080328_04.png
なので、正確さがさらに欠けてしまいます。

ちょっとした思いつきで作った割には面白いツールになったかなと。これで他国語に恐れず色んな人をFollowしまくりましょう(って言うてる僕がまずやれって話ですが)!

Greasemonkeyおよびbookmarkletへの機能追加・改善・不具合報告は本コメント欄へお願いします。 

2008年1月23日

iGoogleテーマエディタのコード解説 --- その2

今日は「Gmailの使い方」メールマガジンでもiGoogle Theme Editor を紹介していただきました。ありがとうございます。

というわけで昨日のコード解説の続きです。

 

150~202行目:エディタ自身のHTMLです。

多言語対応させるメッセージ部分はmessage(key,lang)で返ってきたメッセージを結合させています。なんか眺めれば眺めるほどリファクタリングできそうだなぁと思ってきましたよ。

 

203~245行目:スタイルオブジェクトの定義とスタイル指定。

エディタのCSSをJSONで定義しています。jQueryは、$.css(key,value)や$.css(styleObj)で簡単にスタイルを指定できるので、外部にCSSファイルを持たないようにしています。

また、226~230行目では、各ブロックの開け閉めを$.toggle(fn,fn)で設定しています。これまた簡単ですわ。

var deco = {"cursor":"pointer","text-decoration":"underline"};
$('#str_1').css(deco).toggle(function(){$(this).text('[-]'+message('m1',lang));$('#tbl_1').show();},function(){$(this).text('[+]'+message('m1',lang));$('#tbl_1').hide();});

 

246~284行目:テキストエリアやセレクトボックスで値を入力/選択したときに、即座にiGoogleの画面に繁栄させるようにしているところです。

Class名とかはFireFoxのfirebugでちまちま調べながら作りました。

$('#header_bgcolor').keyup(function(){try{$('#nhdrwrap').css('backgroundColor',$('#header_bgcolor').val())}catch(e){}}).val('#FFFFFF').keyup();

あと、上記のように、テキストエリアにkeyupイベントで実行される関数を割り当て、それをkeyup()で実行できることを知りました。超便利。上記部分は、jQueryオブジェクト取得→keyupイベントに関数割り当て→初期値設定→keyupイベントに割り当てた関数を実行という流れになっています。これがつらつらとメソッドチェーンで書けちゃうのが気持ちよいです。さすがjQuery。

 

こうやって解説を書きながら、かなり無駄に書いている部分が多いなぁと思ったので、リファクタリングしていこうと思います。

なんか2日に分けて書くと言いつつさらっと終わっちゃいました。

2008年1月22日

iGoogleテーマエディタのコード解説 --- その1

先日公開した「iGoogleテーマエディタbookmarklet」をWebOS Goodiesさんで取り上げていただきました。ありがとうございます。

で、今日はbookmarkletのコード解説をしたいと思います。といっても、たいしたソースじゃないですが。

(※行数はversion 0.1.0 でカウントしているので、後から見るとずれるかもしれませんが雰囲気で追ってください)

1~11行目:コメントです。

12~18行目:

var jq=document.createElement('script');
jq.id="jqery";
jq.type="text/javascript";
jq.src="http://igoogle-theme-editor.googlecode.com/svn/trunk/iGoogleThemeEditor/dist/jquery-1.2.2.min.js?"+new Date().getTime();
document.getElementsByTagName('head')[0].appendChild(jq);

いきなりjQueryのjsファイルをheadにappendしています。今回はデザインを色々といじるってことで、ライブラリを読み込んだ方が都合が良かったのでそうしました。jQueryを選んだ理由は、ファイルサイズが小さく、グローバルなオブジェクトを汚染せず、かつスタイルの操作がやりやすいからです。

19~22行目:

var jqueryStartTimer;
if(!jqueryStartTimer) jqueryStartTimer = setInterval(themeEditorload,500);

続いて、iGoogleテーマエディタを表示するために、setIntervalで定期的にthemeEditorload()を実行します。即実行できないのは、scriptタグで後からappendしたjsファイルが、ロードが終了し、ページ上でコンパイルされるまでタイムラグがあるからです。

23~31行目:

function themeEditorload(){
try{
if($){
 clearInterval(jqueryStartTimer);
}else{
 throw new Exception();
}

メインメソッドです。$をチェックし、定義されていれば(if($)でtrueが返れば)、setIntervalで定義したタイマーをclearIntervalでクリアしています。もしこの関数が実行されたとき、まだjQueryがロードされていなければ、Exceptionをthrowしてスルーします。

32~46行目:URLを操作する現在開発中のjQueryプラグインです。まだアルファ版にもならない完成度ですが、試しに使ってみることにしました。

47~61行目:iGoogle Theme 用のXMLの元データです。文字列の最後に\を付ければ改行できることを知ったので、そういう風に書いています。

62~65行目:

function createAttr(id,attr){
 if($('#'+id).val()) return '<Attribute name="'+attr+'">'+$('#'+id).val()+'</Attribute>\r\n';
 return '';
}

この後のcreateXML()の中で使っている関数です。iGoogle Theme 用のXMLを作る際、ユーザが値をテキストフィールドに入力していれば、引数のデータを利用してXMLデータの一部を返します。

66~102行目:XMLを生成している部分です。思いっきりベタ書きです。

103~104行目:

var lang = $.urlParams('lang',$('#igteid')[0]);

ここで、先ほど紹介したURLを操作するプラグインを利用しています。このブックマークレットをappendしているscriptタグのsrc属性のURLから、GETパラメータに指定されているlang属性を取得しています。

105~141行目:ここで多言語のメッセージオブジェクトを保持しています。そう、このbookmarkletは無駄に多言語対応させているのです。

142~149行目:

function message(key,lang){
 try{
  var t = words[key];
  return (t[lang])?t[lang]:t['en'];
 }catch(e){
  return '';
 }
}

メッセージオブジェクトから、言語名とキー値を元に、メッセージを取得します。デフォルトは"en"の値です。

 

長くなったので、今日はここまで。続きはまた明日。

2008年1月20日

iGoogleのテーマXMLを作成するbookmarklet

先日公開されたiGoogle Theme API を便利に使うためのbookmarkletを作ってみました。

iGoogle のページで実行すると、テーマ変更用のエディタが表示されます。

iGoogle Theme Editor (←右クリックからお気に入りに追加できます)

javascript:var s = document.createElement('script');s.id="igteid";s.type="text/javascript";s.src="http://igoogle-theme-editor.googlecode.com/svn/trunk/iGoogleThemeEditor/dist/ige.js?lang=ja&"+new Date().getTime();document.body.appendChild(s);void(0);

例えば、↓こういうデザインにしているiGoogleの画面でbookmarkletを実行します。

igte_0001.png

すると、適用されているデザインがクリアされて(そう言う風に見せかけているだけですが)、↓こんな画面になります。

 

igte_0002.pngガジェットのエリアの左側に、iGoogleのテーマを編集するエリアが表示されます。それぞれのリンクをクリックすると、編集エリアが表示されます。

 

igte_0003.png
「ヘッダ部分」をクリックすると、ヘッダエリアのデザインを変更することができます。画像のURLを指定するところには、サーバにアップロード済みの画像のアドレスを入力してください。画像を使用しない場合は空欄でかまいません。

 

igte_0004.png

以下、同様に「タブ部分」「ガジェット部分」「フッタ部分」を変更できます。

 

igte_0005.png

 

igte_0006.png

 

igte_0007.png
入力した後、「XML生成 >>」をクリックすると、テキストエリアに現在適用されているテーマのためのXMLが表示されます。

 

igte_0008.pngこの内容を、テキストファイルにコピペして、適当な名前を付けてxmlとして保存してください。

保存したxmlをサーバにUP(サーバを持っていない人は、Google Codeにホスティングすることができます)して、↓以下のようにURLを指定すると、xmlのデザインを確認することができます。

ちなみに、超簡単ですが、↓僕が試しに作った白黒のデザインのxmlです。

http://www.google.com/ig?skin=http://www.chrisryu.com/data/igoogle_theme/blackandwhite.xml

作ったXMLを公開したり、コンテンツディレクトリに登録する際は、XMLの以下の部分を編集してください。

<ConfigMap type="Skin">
<Meta name="title">theme title</Meta>
<Meta name="description">theme description</Meta>
<Meta name="author">author</Meta>
<Meta name="author_email">email</Meta>
<Meta name="thumbnail">thumbnail url</Meta>
<Meta name="screenshot">screenshot url+</Meta>
</ConfigMap>

こんなツールは、もっと使い勝手が良くて便利なものをGoogleが提供してくれそうですが、jQueryの練習のために(jQuery読み込んでます)作ってみました。

内容の解説は、また別のエントリで。

2008.1.21 12:15追記 動作確認しているブラウザは、IE7 & FF2です。IE6だとデザイン崩れちゃいます。ごめんなさい。

アーカイブ