tumblr編集用bookmarklet

JavaScript 自作プログラム

概要

自分が管理しているtumblrの各記事に "編集画面へのリンク" を表示するブックマークレットを作成

動機

  • "同じタグが付いた記事" を一括で編集したかった
    • tumblrダッシュボードが致命的に使いづらい
      • ダッシュボード内で ”同一タグの記事を抽出して一覧表示” が簡単には出来ない
      • メガエディタってのも、各記事にどのタグが付いているのかは一目ではわからない
    • 実際のページ(http://xxxxx.tumblr.com) からであれば、”同一タグの記事を抽出して一覧表示” は簡単 (xxxxx:アカウント名)
      • "http://xxxxx.tumblr.com/tagged/yyyyy" で表示可能（ただし、yyyyyはタグ名）
      • 一覧表示して、各記事の所に、"編集画面へのリンク" が表示できれば楽そう

事前調査

"編集画面" のURL調査
"各記事のURL" の調査

やったこと

bookmarklet作成（下書き。改行を含む）

後に使うスクリプトの都合上、半角スペースは"%20"と書いた。

javascript:(
	function(){
		l=document.getElementsByTagName('a');
		for(i=0;i<l.length;++i)
		{			
			var%20account="";
			var%20post_id="";
			if(l[i].href.match(/(\w+)\.tumblr\.com\/post\/(\w+)\/(\w+)/))
			{
				account=RegExp.$1;
				post_id=RegExp.$2;
				
			}
			else%20if(l[i].href.match(/(\w+)\.tumblr\.com\/post\/(\w+)/))
			{
				account=RegExp.$1;
				post_id=RegExp.$2;
			}
			
			if(account!=""&&post_id!="")
			{
				c=document.createElement('a');
				c.setAttribute('href','http://'+account + '.tumblr.com/edit/' + post_id + '?redirect_to=%2Fdashboard' );
				c.setAttribute('target','_blank');
				c.appendChild(document.createTextNode('[edit]'));
				l[i].parentNode.insertBefore(c,l[i].nextSibling);
			}
		}
	}
)
()
  • やってることの概要
    • ページのHTMLソースから、記事URLを検索する
    • 記事URLから、アカウント名、記事idを抜き出す
    • アカウント名、記事idを塚て、記事編集用URLを作る
    • 記事編集用リンクを生成し、記事へのリンクの横に表示する
bookmarkletから、改行文字とスペース、タブ文字を削除
#スクリプト実行(実行権限は付与してある、という前提で)
$ ./RemoveCtrlCharacter.py tumblr_edit_bookmarklet.js

#実行結果の確認
$ cat out.txt 
javascript:(function(){ 　・・・(中略)・・・　(c,l[i].nextSibling);}}})()
ブラウザにbookmarkletを登録
  • 上↑のcatコマンドで表示された文字列をコピーして、ブラウザのお気に入りに登録する
    • ブラウザでの登録方法は略、、、（ブラウザによる差異もあるので、っていう言い訳）
tumblrにログイン
  • 略
tumblrのページを表示して、ブックマークレット実行

　　※http://xxxxx.tumblr.com/tagged/yyyyyを開いて（yyyyy:タグ名）から実行すると、
　　　ぼくがやりたかったこと（"同じタグが付いた記事" を一括で編集）ができる

その他

  • if/elseのくだり、正規表現をもっとうまく使えば、if文のみでどうにかなる？？
  • ページのレイアウトによっては、リンクが複数回表示される模様、、

参考