もしかして: blog.iron's.jp

Twitpic 等の画像投稿サービスのサムネイル画像の URL

irons — Wed, 23 Dec 2009 14:08:32 +0000

ページ URL を書き換えるだけでサムネイル画像が表示できるもの

Twitpic （ドキュメント）
- ページ: http://twitpic.com/
- サムネイル画像: http://twitpic.com/show/
  /
  - : “mini” or “thumb”
携帯百景
- ページ: http://movapic.com/
- サムネイル画像: http://image.movapic.com/pic/
  _
  .jpeg
  - : “s” or “t”
はてなフォトライフ
- ページ: http://f.hatena.ne.jp//YYYYMMDD
- サムネイル画像:http://img.f.hatena.ne.jp/images/fotolife/
  /
  /YYYYMMDD/YYYYMMDD
  _.jpg
  
  : “120″ or “m”
Mobypicture （ドキュメント）
- ページ: http://moby.to/
- サムネイル画像: http://moby.to/
  :
  - : “thumbnail”, “small”, “square” or “medium”
yFrog （ドキュメント）
- ページ: http://yfrog.com/
- サムネイル画像: http://yfrog.com/.th.jpg
PhotoShare
- 短縮URL: http://bctiny.com/p
- ページ: http://www.bcphotoshare.com/photos//
- サムネイル画像: http://images.bcphotoshare.com/storages/
  /
  .jpg
  - : “thumbnail”, “large”, “thumb68″ or “thumb180″
img.ly （ドキュメント）
- ページ: http://img.ly/
- サムネイル画像: http://img.ly/show/
  /
  - : “thumb” or “mini”
Twitgoo （ドキュメント）
- ページ: http://twitgoo.com/
- サムネイル画像: http://twitgoo.com/show//
- サムネイル画像: http://twitgoo.com/
  /
  - : “thumb”, “mini” or “img”
pic.im （ドキュメント）
- ページ: http://pic.im/
- サムネイル画像: http://pic.im/website/thumbnail/
YouTube （ドキュメント）
- 短縮URL: http://youtu.be/
- ページ: http://www.youtube.com/watch?v=
- ページ: http://www.youtube.com/watch#!v=
- サムネイル画像: http://i.ytimg.com/vi//
  .jpg
  - : “default”, or “hqdefault”
imgur
- ページ: http://imgur.com/.jpg
- サムネイル画像: http://i.imgur.com/
  .jpg
  - : “s” or “l”
Lockerz（旧Plixi, その前は TweetPhoto）（ドキュメント、アナウンス）
- ページ: http://lockerz.com/s/
- ページ: http://plixi.com/p/
- ページ: http://tweetphoto.com/
- サムネイル: http://api.plixi.com/api/TPAPI.svc/imagefromurl?size=
  &url=<ページURL>
  - : “thumbnail”, “small”, “mobile”, “medium” or “big”
Ow.ly
- ページ: http://ow.ly/i/
- サムネイル画像: http://static.ow.ly/photos/thumb/.jpg
Instagram （ドキュメント）
- ページ: http://instagr.am/p//
- サムネイル: http://instagr.am/p/
  /media/?size=
  - : “t”, “m” or “l”

短縮 URL の展開や API の利用が必要なもの

flickr （ドキュメント）
- 短縮URL: http://flic.kr/p/
brightkite （ドキュメント）
- 短縮URL: http://bkite.com/XXXX
- ページ: http://brightkite.com/objects/
- サムネイル画像: http://cdn.brightkite.com/
  /
  /
  -.jpg
  
  : “feed” or “big”

PHP コード例

（flickr, brightkite の短縮 URL には未対応）
[code lang='php' light=true]
function getThumbnailHtml($status_text) {
$html = '';
$patterns = array(
// twitpic
array('/http:\/\/twitpic[.]com\/(\w+)/', ''),

// Mobypicture
array('/http:\/\/moby[.]to\/(\w+)/', ''),

// yFrog
array('/http:\/\/yfrog[.]com\/(\w+)/', ''),

// 携帯百景
array('/http:\/\/movapic[.]com\/pic\/(\w+)/', ''),

// はてなフォトライフ
array('/http:\/\/f[.]hatena[.]ne[.]jp\/(([\w\-])[\w\-]+)\/((\d{8})\d+)/', ''),

// PhotoShare
array('/http:\/\/(?:www[.])?bcphotoshare[.]com\/photos\/\d+\/(\d+)/', ''),

// PhotoShare の短縮 URL
array('/http:\/\/bctiny[.]com\/p(\w+)/e', '\'\''),

// img.ly
array('/http:\/\/img[.]ly\/(\w+)/', ''),

// brightkite
array('/http:\/\/brightkite[.]com\/objects\/((\w{2})(\w{2})\w+)/', ''),

// Twitgoo
array('/http:\/\/twitgoo[.]com\/(\w+)/', ''),

// pic.im
array('/http:\/\/pic[.]im\/(\w+)/', ''),

// youtube
array('/http:\/\/(?:www[.]youtube[.]com\/watch(?:\?|#!)v=|youtu[.]be\/)([\w\-]+)(?:[-_.!~*\'()a-zA-Z0-9;\/?:@&=+$,%#]*)/', ''),

// imgur
array('/http:\/\/imgur[.]com\/(\w+)[.]jpg/', ''),

// TweetPhoto, Plixi, Lockerz
array('/http:\/\/tweetphoto[.]com\/\d+|http:\/\/plixi[.]com\/p\/\d+|http:\/\/lockerz[.]com\/s\/\d+/', ''),

// Ow.ly
array('/http:\/\/ow[.]ly\/i\/(\w+)/', ''),

// Instagram
array('/http:\/\/instagr[.]am\/p\/([\w\-]+)\//', ''),
);

foreach ($patterns as $pattern) {
if (preg_match($pattern[0], $status_text, $matches)) {
$url = $matches[0];
$html = preg_replace($pattern[0], $pattern[1], $url);
$html = '' . $html . '';
break;
}
}

return $html;
}
[/code]

iPhone 用検索ページに検索エンジンの編集機能追加（DOM Storage使用）

irons — Mon, 16 Nov 2009 15:39:49 +0000

iPhone 用検索ページ
に検索エンジンの編集機能を付けました。

最近のブラウザ（Firefox 2+、Safari4、IE8）に搭載されている DOM Storage というデータ保存機能を使って、設定を保存しています。ブラウザを再起動しても設定は消えません。
DOM Storage は Cookie と違って、毎回にサーバに送ろうとしない、5MBとか比較的大きなデータを保持できるらしいです。

文字列でしか保存できないので、json2.js を使って JSON 形式に変換して保存しています。

ということで、並べ替えたり、好きな検索エンジンを追加できます。
URL 中の %s の部分にクエリが入ります。URL を空にすると、グループ分けの名前になります。
target（新規ページで開くかどうか）、method（GET or POST）、文字コードの設定機能も付ける予定です。

一度に複数ユーザを指定して twitter のリストを作成するフォーム

irons — Mon, 02 Nov 2009 16:50:58 +0000

twitter list maker

ユーザ名をカンマ区切りで指定してリストが作成できます。
入力するものは「自分のtwitter id」、「リストの名前」、「公開範囲」、「リストメンバーの twitter id （CSV形式、カンマ区切り）」です。
twitter 上だと、ユーザを一人ずつリストに追加して行くしかなさそうなので作成。同様のツールはありそうだけど。

twitter の List API を使ってます。ユーザ名とパスワードは twitter.com に直接送られるので、こちらのサーバには送られません。

良かったら使ってください。

注意点

API の返り値のチェックをしていません（iframe を作って、そこに向けて form を submit することで API を叩いているので、返り値のチェックができない）。そのため、うまくリストが作成できていないことがあります。途中で止まることもあります。。アルファ版ということでご了承ください。。

その他

リストにメンバーを追加する API は、数字のユーザ ID を使うので、screen_name からユーザ ID に変換する API を自前で用意して使っています。

出走馬の対戦成績表を表示するブックマークレット

irons — Sat, 29 Aug 2009 20:01:02 +0000

JRA の各レースの出馬表ページで使うブックマークレット。
対戦成績表を表示

使うと、ページの一番下にこんな感じの表が表示されます。

各馬の過去4走成績を時系列上に表示します。
馬番やレース名にマウスオーバーすると、馬名やレース詳細が表示されます。

こういう風に表示すると、出走馬同士の関連がわかりやすくていいと思います。

Yahoo!スポーツ競馬にも対戦成績表があるけど、対戦してない馬のレースは表示されないので、このブックマークレットとはちょっと違います。

まだとりあえず動く程度の出来です。
追記: うまく動いてなかったので修正しました。

Bookmarklets

irons — Fri, 14 Aug 2009 09:10:11 +0000

よく使うものやときどき使うものやほとんど使ってないものを列挙。

どこでも Shorten with bit.ly (via bit.ly Tools ページ) delicious を表示 (via delicious ヘルプページ) はてブを表示 はてブでブックマークする (via はてブ設定ページ) Google で関連ページを検索 HatebuSets で関連ページを検索 このページをはてなアンテナに追加 (via はてなブックマークレット) このページを含むはてなアンテナ tako3 パックマン（読み込み後にダブルクリックでスタート）
ブログ用 livedoor Reader に登録 (via livedoor Reader ブックマークレット) Google Reader に登録 (via Google Reader 設定ページ) LDRLens で関連フィードを検索 RSSバトラーで対戦
twitter 用 ふぁぼったーを表示 favstar.fm を表示 (参考: favstar.fm の bookmarklet ページ)

UI 改善

irons — Sun, 09 Aug 2009 05:27:07 +0000

HatebuFriends の棒グラフの UI を改善しました。

ビフォー

アフター

三角形のアイコンを棒グラフの横につけました。

アイコンかグラフをクリックすると、こうなります。

そして共通のブックマークの一覧が表示されます。

今までもグラフがクリック可能だったのですが、そう見えないのが問題でした（マウスカーソルを載せてやっと気づく感じ）。しかもグラフが短いとクリックしづらいのが難点でした。

三角形のアイコンを表示したことによって、クリック可能なのがわかりやすくなったと思います。またクリックできる領域も広がったので、グラフが短くてもクリックしやすくなりました。

以下、実装方法の話。

1 つの棒グラフの HTML と CSS はこのようになっています。
[html light=true]

[/html]
(width は共通のブックマークの割合によって変わる。長いのが水色部分、短いのが青い部分)
[code lang='css' light=true]
div.setlabel {
position: relative;
}
div.setlabel div.bar {
position: absolute;
height: 12px;
right: 0px;
top: 20%;

background: #0033cc;
cursor: pointer;
margin-top: 2px;
}
div.setlabel div.bar.bar_base {
background: #99b3ff;
margin-top: 0px;
border: 0px solid #fff;
border-width: 2px 0 2px 2px;
}
div.setlabel div.arrow {
position: absolute;
height: 16px;
width: 16px;
top: 20%;

margin-right: 2px;
cursor: pointer;
background: no-repeat transparent 0px 0px url(http://labs.irons.jp/img/arrow-right-down.png);
}

div.setlabel.expanded div.bar_base {
border-color: #ffe372;
}
div.setlabel.expanded div.arrow {
background: transparent -16px 0px url(http://labs.irons.jp/img/arrow-right-down.png);
}
[/code]
三角形のアイコン

JavaScript 部分は以下のようになっています。
div.setlabel の中の 3 つの div の onclick で以下の処理が走ります。
[javascript light=true]
var bar = document.getElementById(‘bar_’ + name);
bar.parentNode.className += ‘ expanded’;
[/javascript]
再度クリックしたり、別の場所をクリックすると以下の処理が走ります。
[javascript light=true]
var bar = document.getElementById(‘bar_’ + before_name);
bar.parentNode.className = bar.parentNode.className.replace(‘expanded’, ”);
[/javascript]
以上のように、親の div.setlabel に対して .expanded というクラスを追加・削除して、On/Off を切り替えるようにしました。

はてなブックマークのお気に入り ○users の RSS

irons — Tue, 21 Jul 2009 16:17:56 +0000

の pipes 作った。
http://pipes.yahoo.com/irons/hatebu_favorite

説明
はてなブックマークのお気に入り機能で、お気に入りユーザが3人以上ブックマークした記事に絞りたいときとかは、http://b.hatena.ne.jp/parkbench/favorite?threshold=3 にアクセスすれば表示できるのに、その RSS が欲しくて http://b.hatena.ne.jp/parkbench/favorite.rss?threshold=3 にアクセスしても、すべてのブックマークが出てきてしまう。RSS だと人数で絞る機能が有効になってないようだ（idea:22487）。その機能が有効になるまでのつなぎとしてこの pipes を作成。

注意
ページをスクレイピングしているのですが、「お気に入りの表示記事数」が 50 件とかだとページサイズが大きすぎて pipes がエラーとなってしまうようです。その場合は表示記事数を少なめに設定するとうまくいくかもしれません。

その他
はてなブックマークお気に入りの全コメント表示フィードパレット
というのもあったんですが、自分の ID で試してみたらなぜか 404 Not Found になってしまって残念。

iPhone用検索ページ

irons — Wed, 08 Jul 2009 15:39:36 +0000

を作った。

http://labs.irons.jp/search.html

このページを iPhone でブックマークして、ホーム画面に追加して使う（WebClip というらしい）。
検索エンジンを選んで、キーワードを入力して、検索。
単語の意味を調べたいときとかに便利！

ソースを見ると分かりますが、やってることは単純です。
検索エンジンの種類などをカスタマイズしたい人は、コピペして改造して自分のサイトに置くなどしてください。

MySync Biz を使って au の携帯から iPhone にアドレス帳を移した

irons — Tue, 30 Jun 2009 14:36:41 +0000

iPhone を購入しました。ヨドバシカメラで 16 GB ホワイト一括。
まだ操作に全然慣れず、3GS の性能を持て余しています。

au から MNP で iPhone に乗り換えたんですが、アドレス帳を引き継いでもらえませんでした。なんかソフトバンクショップに行けば、サーバを経由して iPhone に移せるらしいです。

Windows な人で au な人なら、MySync Biz を持っていれば、Outlook 経由で iPhone にアドレス帳を移行できます。

まず MySync Biz を使って、au の携帯と Outlook のアドレス帳を同期
次に iTunes を使って、Outlook と iPhone のアドレス帳を同期

以上の手順で iPhone にアドレス帳が移行できました。

[Twitter]他の人のフレンドタイムラインを表示する pipes

irons — Thu, 18 Jun 2009 15:37:53 +0000

作った。
Pipes: Twitter Timeline Viewer

Twitter、前は他の人がどんなタイムラインを読んでいるのか見ることが出来た。でもいつの日からか出来なくなった。

この pipes を使えば、指定したユーザのフレンドタイムラインを見ることが出来る。キーワード検索も可。
他の人の post を見ていて、話の流れがわからないときとかに使うと便利！

注: 単純にその人の following の RSS を全部取ってきているので、following が多い人は表示されるまでに時間がかかります。

注: ときどきエラーとなって何も表示されないことがあります。時間をおいてから再度試してみてください。

追記: ~~UserIcons というサービスを利用させてもらって、ユーザのアイコンが出るようにしました。~~
追記: rss じゃなくて atom を使えばアイコンのURLが取れることに気づいたので、修正（Fetch Data で取るようにした。Fetch Feed だとアイコンのURLが取れなかったので）。