Maraigue風。:JavaScript

2010年02月20日

[twitter] ふぁぼり（お気に入り）集計サービスにジャンプするためのブックマークレット集

●2010.9.26更新：Twitterの新UIに対応。また、今まで対応してなかったmobile.twitter.comにも対応。

Maraigue風。:[Twitter][ふぁぼったー] 現在開いているユーザのふぁぼられを見るブックマークレット
Maraigue風。:[Twitter] 現在開いているユーザのふぁぼられをFavstar.fmで見るブックマークレット

以前「ふぁぼったー」「favstar」という、Twitterのお気に入りを集計するサービスへジャンプするためのブックマークレットを作ったのだが、同様のサービス「ふぁぼるっく」「Twistar」への対応版も作ってみた。

●[ふぁぼったー]
●[favstar]
●[ふぁぼるっく]
●[Twistar]
上記リンクのうちお好きなものを、ブックマーク領域にドラッグ＆ドロップするか、右クリックしてブックマークに追加するメニュー（「お気に入りに追加」など）を選択するなどして、ブックマークとして使えるようにして下さい。
そしてブックマーク領域に作成されたこのリンクを、Twitterのユーザページあるいは発言のページを開いた状態でクリックして下さい。

タグ：: Twitter; ブックマークレット; JavaScript

maraigue at 10:23│コメント(0)│トラックバック(0)

2009年08月18日

[Twitter] 現在開いているユーザのふぁぼられをFavstar.fmで見るブックマークレット

【2010.9.26追記】

この記事は今後更新しません（Twitterの仕様変更があっても、下記ブックマークレットの更新はこの記事では行いません）。「ふぁぼり（お気に入り）集計サービスにジャンプするためのブックマークレット集」の記事をご覧下さい。

ふぁぼったー（TwitterでユーザがFavoritesに加えた発言を収集するサービス）と同様な国外発のサービスに、Favstar.fmがある。私は最近、ふぁぼったーが不安定なときによく利用している。

以前私が作成した、現在開いているユーザのふぁぼられを見るブックマークレットのFavstar.fm版を作ってみた。

仕様

Twitterのユーザのページでこのリンクをクリックすると、そのユーザのFavstar.fmでのふぁぼられが別窓（別タブ）で表示される。
Twitterの1発言を表示するページでこのリンクをクリックすると、その発言のFavstar.fmでのふぁぼられが別窓（別タブ）で表示される。

[Favstar]
↑上記リンクをブックマーク領域にドラッグ＆ドロップするか、右クリックしてブックマークに追加するメニュー（「お気に入りに追加」など）を選択するなどして、ブックマークとして使えるようにして下さい。そしてブックマーク領域に作成されたこのリンクを、Twitterのユーザページあるいは発言のページでクリックして下さい。

ソースコードはこちら。

javascript:(function(){if(location.href.match(/^https?:\/\/twitter\.com\/([0-9A-Z_a-z]+)\/status(?:es)?\/(\d+)/)){window.open('http://favstar.fm/users/'+RegExp.$1+'/status/'+RegExp.$2);}else%20if(location.href.match(/^https?:\/\/twitter\.com\/([0-9A-Z_a-z]+)/)){window.open('http://favstar.fm/users/'+RegExp.$1+'/recent');}else{alert('%E3%81%93%E3%81%AE%E3%83%96%E3%83%83%E3%82%AF%E3%83%9E%E3%83%BC%E3%82%AF%E3%83%AC%E3%83%83%E3%83%88%E3%81%AF%E3%80%81Twitter%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E4%B8%AD%E3%81%A7%E3%81%94%E5%88%A9%E7%94%A8%E4%B8%8B%E3%81%95%E3%81%84%E3%80%82');}})();

改行・インデントを付けたものはこちら。

javascript:
(function(){
  if(location.href.match
  (/^https?:\/\/twitter\.com\/([0-9A-Z_a-z]+)\/status(?:es)?\/(\d+)/)){
    window.open('http://favstar.fm/users/'+RegExp.$1+'/status/'+RegExp.$2);
  }else if(location.href.match
  (/^https?:\/\/twitter\.com\/([0-9A-Z_a-z]+)/)){
    window.open('http://favstar.fm/users/'+RegExp.$1+'/recent');
  }else{
    alert('このブックマークレットは、Twitterのページ中でご利用下さい。');
  }
})();

タグ：: Twitter; JavaScript; ブックマークレット

maraigue at 01:44│コメント(0)│トラックバック(0)

2009年05月24日

[Twitter] ReTweetするためのブックマークレット

Twitterでは最近、他者の発言を紹介する「ReTweet」が多く利用されている。これは主要なTwitterクライアントがReTweet機能に対応していることが大きい。しかしWebブラウザ上のTwitterの機能だけでは自動でReTweetを行うことが出来ない。

そこで、Twitterで個々の発言を表示しているページでクリックすることでReTweetを行えるようにするブックマークレットを作ってみた。

（2009.9.15追記）
TwitterのHTMLの変更に伴い、正常に機能しなくなっている状態です。
mofigan氏制作のブックマークレットが現在でも正常に動いているようなので、そちらをご利用下さい。

[ReTweet]
↑上記リンクをブックマーク領域にドラッグ＆ドロップするか、右クリックしてブックマークに追加するメニュー（「お気に入りに追加」など）を選択するなどして、ブックマークとして使えるようにして下さい。そしてブックマーク領域に作成されたこのリンクを、Twitterで個々の発言を表示しているページ（http://twitter.com/ユーザ名/status/数値のページ）でクリックして下さい。

ソースコードはこちら。gist: 116915 - GitHub

使用例。

この状態でブックマークレットをクリックすると

ブックマークレット使用後のスクリーンショット

となる。

※注意：このブックマークレットはTwitterのページのHTMLに依存します（Webスクレイピングの一種です）。そのため、TwitterのHTML構造が変化した場合は利用できなくなる可能性がありますので、あらかじめその点をご理解の上ご利用下さい。

2009.6.14 コードを若干修正
2009.8.1 コードを大幅修正（ハッシュタグに対応、「#」などの記号を含む発言がRT出来ない問題に対処）
2009.8.17 本文を若干加筆

タグ：: Twitter; JavaScript; ブックマークレット

maraigue at 11:39│コメント(4)│トラックバック(0)

[JavaScript][メモ] ブラウザによるinnerHTMLの挙動の違い

JavaScriptの「innerHTML」は、HTMLにおいて特定の要素の内部に含まれる成分を、HTML形式の文字列として取得するものだが、必ずしもHTMLソースの内容をそのまま返してくれるわけではない模様。これで30分はまった。

参考リンク。

ということで、主要なブラウザでinnerHTMLの挙動の違いを調べるためちょっとした実験を実施。

以下のHTMLファイルを各ブラウザで開き、結果を確認する。

<html>
<body onload="alert(document.body.innerHTML)">
<p class="hoge">piyo</P>
</body>
</html>

Firefox(3.0.10)・Chrome(1.0.154)・Safari(3.2.2)は、タグ名を全て小文字に統一して返した。一方IE(8.0)とOpera(9.51)は、タグ名を全て大文字に統一して返した。さらにIEについては、引用符も除去してclass="hoge"をclass=hogeにしている。

これは、ブラウザでの内部表現を返しているのだろうか。とりあえず、ソースそのままが返ってくるわけではないことには気をつけないと。

結果は以下の通り。

タグ：: JavaScript

maraigue at 00:53│コメント(0)│トラックバック(0)

2009年03月22日

Webページ中の画像だけを表示するブックマークレット

某イラストサイトにてイラストだけを抜き出して表示したかったので、やっつけで作った。
HTML的に不正なものへの対処などは不十分です。

画像だけを表示
↑上記リンクをブックマーク領域にドラッグ＆ドロップするか、右クリックしてブックマークに追加するメニュー（「お気に入りに追加」など）を選択するなどして、ブックマークとして使えるようにして下さい。そしてブックマーク領域に作成されたこのリンクを、画像のみ表示したいページでクリックして下さい。

あまり例が良くないが、このブログのトップで使うとこんな感じになる。

Before

After

タグ：: JavaScript; ブックマークレット

maraigue at 23:56│コメント(0)│トラックバック(0)

2009年02月04日

[Twitter][ブラックふぁぼったー] 現在開いているユーザの黒ふぁぼられを見るブックマークレット

【2010.2.20追記】
ブラックふぁぼったーにおける、新規の黒ふぁぼの追加は、2010.2.17を以て終了しております。

昨年7月の記事「現在開いているユーザのふぁぼられを見るブックマークレット」の続編。そのユーザに付けられた黒ふぁぼ（ブラックふぁぼったー）を表示するためのブックマークレットを作ってみた。

黒ふぁぼられを見る
↑上記リンクをブックマーク領域にドラッグ＆ドロップするか、右クリックしてブックマークに追加するメニュー（「お気に入りに追加」など）を選択するなどして、ブックマークとして使えるようにして下さい。そしてブックマーク領域に作成されたこのリンクを、Twitterのユーザを表示しているページでクリックして下さい。

これはTwitter検索（公式）を利用して、@blavotterが投稿した発言から「by @[ユーザ名]」を抽出するものである。Twitter検索では発言の取得漏れがしばしば発生しているので、この方法で黒ふぁぼを完全には捕捉出来ていないことをご了承のうえご利用下さい。

タグ：: Twitter; JavaScript; ブックマークレット

maraigue at 11:42│コメント(0)│トラックバック(0)

2008年12月28日

第6回北海道開発オフに参加しました

第6回北海道開発オフに参加してきた。

私はこれまでネタ不足だったり環境の準備に手間取って、今まで開発オフではまともに開発を進められたためしがなかったのだが、今回はちゃんとネタがあったので、それの実装に取り組んでいた。

テーマは「ブラウザで動く時刻表管理ソフト」。今回出来たのはカーソル操作、キー入力のベースの部分である。またjQuery（JavaScriptでよく行う処理などを容易に行うためのライブラリ）の基本を知ることが出来たのは大きな収穫だった。

YouTubeで見る

終了後はTwitter道民部の忘年会。初めてお目にかかった方も多くいて、来年も多くの方と交流していきたいと感じた。

道民部の皆様、来年もよろしくお願いします。

タグ：: 北海道; 北海道開発オフ; JavaScript

maraigue at 12:37│コメント(0)│トラックバック(0)

2008年07月21日

[Twitter][ふぁぼったー] 現在開いているユーザのふぁぼられを見るブックマークレット

【2010.9.26追記】

この記事は今後更新しません（Twitterの仕様変更があっても、下記ブックマークレットの更新はこの記事では行いません）。「ふぁぼり（お気に入り）集計サービスにジャンプするためのブックマークレット集」の記事をご覧下さい。

この手のブックマークレットは他にもたくさんあると思うが、自分が便利なものが欲しかったので作ってみた。

仕様

Twitterのユーザのページでこのリンクをクリックすると、そのユーザのふぁぼったーでのふぁぼられが別窓（別タブ）で表示される。
Twitterの1発言を表示するページでこのリンクをクリックすると、その発言のふぁぼったーでのふぁぼられが別窓（別タブ）で表示される。

ふぁぼられを見る
↑上記リンクをブックマーク領域にドラッグ＆ドロップするか、右クリックしてブックマークに追加するメニュー（「お気に入りに追加」など）を選択するなどして、ブックマークとして使えるようにして下さい。そしてブックマーク領域に作成されたこのリンクを、Twitterのユーザページあるいは発言のページでクリックして下さい。

ソースコードはこちら。

javascript:(function(){if(location.href.match(/^https?:\/\/twitter\.com\/[0-9A-Z_a-z]+\/status(?:es)?\/(\d+)/)){window.open('http://favotter.matope.com/status.php?id='+RegExp.$1);}else%20if(location.href.match(/^https?:\/\/twitter\.com\/([0-9A-Z_a-z]+)/)){window.open('http://favotter.matope.com/user.php?user='+RegExp.$1);}else{alert('%E3%81%93%E3%81%AE%E3%83%96%E3%83%83%E3%82%AF%E3%83%9E%E3%83%BC%E3%82%AF%E3%83%AC%E3%83%83%E3%83%88%E3%81%AF%E3%80%81Twitter%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E4%B8%AD%E3%81%A7%E3%81%94%E5%88%A9%E7%94%A8%E4%B8%8B%E3%81%95%E3%81%84%E3%80%82');}})();

改行・インデントを付けたものはこちら。

javascript:
(function(){
  if(location.href.match
  (/^https?:\/\/twitter\.com\/[0-9A-Z_a-z]+\/status(?:es)?\/(\d+)/)){
    window.open('http://favotter.matope.com/status.php?id='+RegExp.$1);
  }else if(location.href.match
  (/^https?:\/\/twitter\.com\/([0-9A-Z_a-z]+)/)){
    window.open('http://favotter.matope.com/user.php?user='+RegExp.$1);
  }else{
    alert('このブックマークレットは、Twitterのページ中でご利用下さい。');
  }
})();

※2007.10.27追記

Twitterの1発言を表示するページのURLが2通り指定可能になったため、それに対応したコードに修正しました。