でぃべろっぱーず・さいど

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

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

Auto-reload Twitter

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!

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

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

sort by hatena star

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

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

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

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

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

で、今回作ったGreasemonkeyとbookmarklet。

Greasemonkey:Translate Twitter

bookmarklet:Translate Twitter

これは何？

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

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

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

今日は「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日に分けて書くと言いつつさらっと終わっちゃいました。

先日公開した「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"の値です。

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

先日公開された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を実行します。

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

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

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

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

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