Creazy!

WEBエンジニア・ヤガーのテック・ガジェットブログ

Bookmarklet 開発実績

Tumblr複数アカウント対応:ログインするアカウントを指定できるtumblrブックマークレット

投稿日:


この頃、tumblrの有効な活用方法を見つけるべくゴニョゴニョしているわけだけど、複数のアカウントを持っていると、今どのアカウントでログインしているか分からないし、別のアカウントでreblogしてしまったりしていた。
そこで、特定のアカウントで tumblr. するための Bookmarklet を作ってみた。

Tumblr.ログインの仕組み

Tumblrはログイン系、ポスト系のAPIが見当たらないのでHTMLを見てみました。
ログインは(http://www.tumblr.com/login)にemailとpasswordを渡してやれば良いんだけど、HTTP_METHODがPOSTじゃないといけないので、リンクだけでは実現できない。以下のようなフォームをポストしないといけない。

<form name="f" action="http://www.tumblr.com/login" method="post">
<input type="hidden" name="email" value="YOUR_TUMBLR_ACCOUNT" />
<input type="hidden" name="password" value="YOUR_TUMBLR_PASSWORD" />
<input type="submit" value="login" />
</form>

ただ、ローカルにHTMLをいっぱい作っとくのも面倒なのでこの辺をBokmarkletで動的に作れれば良さそうだ。

ログインするアカウントを指定できるtumblrブックマークレット

上記ふまえて、ブックマークレットを作りました。
今回ブックマークレット中にemail、passwordを埋め込んでもらう必要があるので以下書き換えてからブックマークして下さい。

javascript:(function(){tid='YOUR_TUMBLR_ACCOUNT';tpw='YOUR_TUMBLR_PASSWORD';var d=document,w=window,e=w.getSelection,k=d.getSelection,x=d.selection,s=(e?e():(k)?k():(x?x.createRange().text:0));tbq=encodeURIComponent(s);var js=document.createElement('script');js.src='http://labs.creazy.net/bookmarklet/tumblr.js';document.body.appendChild(js);})();

YOUR_TUMBLR_ACCOUNTをログイン用のemailアドレスに、YOUR_TUMBLR_PASSWORDをログインパスワードにそれぞれ書き換えてからブックマークしてください。
たぶん、IE、Firefox、Safari、Operaでも動く。
ブックマークレットの内容としては、ID、PW、引用テキストを読み込んでから強制ログイン用のiframeやformを作っています。外部JSを取り込む形式にしているので、中身が怖い(w)という人は下記を除いてみて下さい。
http://labs.creazy.net/bookmarklet/tumblr.js
使い方は下記の通り。
1)いつも通り、引用部分を選択したりしてから、上記ブックマークレットを実行します
01
2)ログイン用のフレームが現れ、指定されたアカウントのログインが始まります
02
3)インラインフレームがログイン完了し、指定したアカウントになってたらOK
03
4)「Reblog」ボタンをクリックすると、いつものTumblrブックマークレットが開きます
ログインを挟む分、1 Step 多いですが格段に便利になりました。
これで、複数アカウントそれぞれのブックマークレットを設置しておけば、それぞれのアカウントでタンプレます。
今回使った手法はAjaxとかではなくて、iframeを使った割と古典的なハック方法。
でも、まだまだ使えるね。こりゃ。
あとあと、ブラウザによってURLencodeの動きが違ったので、分岐処理やらが入っていてコードが汚いけど、その辺はご愛嬌。
ツッコミ大歓迎でございます。
(2007/11/14 追記)
FIrefoxで「unterminated string literal」エラーがでてうまくいってませんでした。
JS中にHTMLをinnerHTMLで流し込むところがあるんだけど閉じタグとかを
“</span>” → “</sp”+”an>” みたいにしとくと良い。
Firefoxユーザのみなさんスミマセンでした。登録したブックマークレットはそのままでOKっす。

「Photumblr」Tumblrの画像だけ抜き出してRSSにするPipes
「Gyazo」と「Gyamblr」を更にブロガー最適化する方法
優れたソーシャルメディアは多様な使われ方をするもの
Twitter,Jaiku,Tumblr で RSS を無限ループさせてみた
ミニブログ (Twitter,Tumblr,Jaiku)をRSSアグリゲータとして使い倒す
twitter とか tumblr. とか Vox とかを試してみた

-Bookmarklet, 開発実績

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

no image

YoutubeのHD動画正式対応で、改めて動画形式をまとめてみる

【2009/11/13:追記】 動画フォーマットにフルHDが追加されましたので、表に追加しました。 YouTubeがついにフルHD(1080p)に対応を発表 [C!] 先日、速報でお伝えした通りYou …

YouTube HD Suite が 10万 インストール達成

【2010/08/02:追記】 YouTube HD Suite 公式ページができました。 先日アップデートのお知らせをしたばかりのYouTube HD Suiteですが、userscripts.or …

YouTube HD Suite v3.5.4(YouTube仕様変更対応)Google Chromeへのインストール方法

YouTubeの内部仕様変更により動作不良になっていましたので、YouTube HD Suiteのアップデートを行いました。対応が遅れまして申し訳ありません…。 インストールは下記URLか …

YouTube HD Suite更新(HTML5対応)

また、YouTube HD Suiteが動かなくなったという連絡をもらったので修正しました。調べていると、前に中途半端に対応していたHTML5版のソースにすごく似ている気がするのですよね。というか、H …

動画を楽しもう!(Youtubeでダウンロード可能なファイル形式が一目瞭然になるGreasemonkey)

[2009/05/26:追記] YouTube Downloader を 高画質FLV(fmt=35)に対応した最新版にupdateしています。 インストールはこのエントリーで紹介しているURLと同じ …

スポンサードリンク

スポンサードリンク