Android、Java、Web系、Linux、マラソン等の備忘録

2011/10/05

tumblrのアカウントをブックマークで切り替える

4 件のコメント
■2012/03/22 Thu追記:このブックマークは利用できません。経緯はコメント欄に
■2012/03/20 Tue追記:最近アカウントを切り替えられなくなってきました。このやり方はもう使えないのかな。。




最近始めたにわかタンブラーですが、早くも複数のアカウントを取得しました。何故複数かというと、料理のレシピを公開する用と、プログラミングのメモ用です。まぁ見る層が違うだろうと思って分けたのですが、マルチアカウントでログイン状態を維持するために、今までブラウザでアカウントを分けてました。例えば、料理用はChromeで投稿し、プログラミング用はFirefoxで投稿といった感じです。投稿したくなったら、その為にわざわざブラウザを開いてました。

tumblrの特徴として、面白いWebを見つけた場合などに引用して投稿することが多く、メインブラウザのtumblrアカウントと違うアカウントで投稿したい場合は、

  1. 別のtumblrアカウント用のブラウザを起動

  2. メインブラウザからURLをコピー

  3. ①のブラウザへ貼り付け(引用したい箇所が表示されるまで待つ)

  4. tumblrブックマークレットをクリックして引用投稿


何度もやれば、結構わずらわしい手数になってきます。これが、メインブラウザでログインしているアカウントで良いなら、ブックマークレットクリック一発ですみますして、もしメインブラウザでアカウントを手軽に切り替える事ができるなら、切り替える手数が増えるだけです。FirefoxならMultifoxという拡張機能があるのですが、これも結局ブラウザが一個増えるようなものです。というわけで、以下の前提条件でアカウントを切り替えられる方法を考えてみました。

前提条件



  • メインブラウザ:Opera

  • ブックマークレットを使って引用投稿したい


Screenshot_4
ブックマークレットの画面

そもそも、アカウントを切り替えるとは?


メインブラウザがOperaというのが、使ってる本人としてもなかなかやっかいですが、メインブラウザはなかなか変更できないということで。。
Opera Extensionsも探してみましたが、tumblrのアカウントを切り替える拡張機能は今の所ないようです。

で、前述したように、tumblr公式が提供しているブックマークレットが何気に使いやすい。というか、これ以外に特に使えそうな投稿方法は無いように思います。なんかあったら教えてください(-人-)

このブックマークレットは何を基に、アカウントを判断しているのか?もちろん、そのブラウザでtumblrへログインしたときに、ブラウザ内でログインを維持している情報ですね。具体的に言えばcookie情報で、以下のドメイン書かれているcookie情報に記録されています。

  • tumblr.com

  • www.tumblr.com


詳しいどの項目までは調べてませんが、例えばOpera(料理用)とChrome(プログラミング用)で別々のアカウントでログインしている場合、ブラウザの機能を使ってChromeのcookieをOperaへ書き込めば、Operaはプログラミング用のアカウントとして認識されます。とりあえず、上述ドメインの全項目をコピーしたらアカウントを切り替える事を確認できました。

さて、これを瞬時にどうやるか?プログラミングでやるには、セキュリティ的に好ましくないということで、cookieを直接触るのは断念。。。

要はボタン一つでアカウントが切り替わってくれればいいので、ボタン一つで目的のアカウントへログインしてくれればtumblrが勝手にcookieを書き換えてくれる。そのログインを自動化すれば良い!ということで、こんなHTMLを見つけました。
<form name="f" action="http://www.tumblr.com/login" method="post">
<input type="hidden" name="email" value="YOUR MAIL ADDRESS" />
<input type="hidden" name="password" value="YOUR PASSWORD" />
<input type="submit" value="login" />
</form>

このフォームにsubmit()をかけると、指定したメールアドレスのアカウントへログインしてダッシュボードを開いてくれます。。なんとも簡単。。

JavaScriptで自動ログインさせる


先ほどのformへ入力したURLパラメータにメールアドレスとパスワードを渡してログインするJavaScriptを作って見ました。
<html>
<head>
<script type="text/javascript">
function init() {
var url = location.search;
var params = url.split("?");
var username = null,password = null;
if(params.length > 1) {
var items = params[1].split("&");
var arry = new Array();
for(var i=0;i<items.length;i++) {
var data = items[i].split("=");
arry[data[0]] = data[1];
}

username = arry["e"];
password = arry["p"];

document.getElementById('disp').innerHTML = username + " でログイン中...";

var html ="";
html += '<form name="tumblr_login" action="https://www.tumblr.com/login" method="post">';
html += '<input type="hidden" name="email" value="'+username+'" />';
html += '<input type="hidden" name="password" value="'+password+'" />';
html += '</form>';

document.getElementById('tumblr_form').innerHTML = html;

document.tumblr_login.submit();
}
}
</script>
</head>
<body onLoad="init();">

<div id="disp"></div>
<div id="tumblr_form"></div>
</body>
</html>

これをどっか、ローカルに保存しておいてURLを次のように記述します。
file://localhost/D:/tumblrlogin.html?e=YOUR MAIL ADDRESS&p=YOUR PASSWORD

この例(Windows)では、D:\tumblrlogin.htmlに先ほどのコードを保存しています。URLを叩くとページのロードと同時にログインを開始しますが、これをブックマークしておけば、そのブックマークのクリック一つでアカウントが切り替わります。もちろん、クリック後はtumblrのダッシュボードまで表示されますが。。

次に、このブックマークをコピーして、プロパティのメールアドレスとパスワードを書き換えれば別のアカウントへログインできるブックマークが作成できます。

もっとシンプルに。。


上記は流れを見やすくにと、改版しやすいようにということで掲載しましたが。ブックマークに追加して利用するならブックマークレットのようにプロパティに直接JavaScriptが書いてある方が良いだろうということで、こちらの方が良いかもしれません。
javascript:var d=document,u="YOUR MAIL ADDRESS",p="YOUR PASSWORD";d.open();d.write('<form name="tumblr_login" action="https://www.tumblr.com/login" method="post">');d.write('<input type="hidden" name="email" value="'+u+'" />');d.write('<input type="hidden" name="password" value="'+p+'" />');d.write('</form>');d.close();d.tumblr_login.submit();

上記のメールアドレスとパスワードを任意のものに書き換え、ブックマークのプロパティのアドレス欄に記述すればおk

WS000258

おわりに。。


ブラウザでアカウントを分けていたのは、ログイン情報を個別に保持させているメリット以外にも、誤って別のアカウントに投稿してしまう誤爆を防止するためですが、ブックマークとなるとその危険性は増します。Opera ExtensionsでtumblrのAPIとか使って、ポップアップに写真などを入れてビジュアル的にわかりやすくアカウントを切り替えられる拡張機能を作ろうと思いましたが、それより、こちらの方が遙かにシンプルで、どうせ切り替えた時にダッシュボードが表示されるので、断念しました。まぁ、どっちでログインしたか勘違いしてる時はアウトですね。。。

4 件のコメント :

  1. これは私が探している正確な情報、感謝です! Arron

    返信削除
  2. [...] 今週のピックアップ 1/27 15:32このブックマークレットは使える! とびこみ日記 『tumblrのアカウントをブックマークで切り替える』 その他の @gohan_set [...]

    返信削除
  3. Tomblooのパッチのソースを見ると、FormのURLと、ActionのURLが別になったようです。
    何かヒントになれば…
    ttp://polygon-planet.blogspot.com/2012/03/tumblrtombloo.html

    返信削除
  4. なるほど。
    できないということがわかるのも前進だと思います。
    解析おつかれさま&ありがとうございました。

    返信削除