樂印

twitpicでバックアップした写真を見やすくしてみた

twitpic、やっぱりやめるみたいですね。続くかな?と油断させたところで襲い掛かってくる。悪い野郎です。ケダモノですね。公式のバックアップはダウンロードできるようになるまで少し時間がかかるので、まだの場合は急ぎましょう。

25日でサービスが終了するTwitpicが、画像のバックアップ機能提供を開始。 | satoweb_log


さて、そのバックアップ。ファイル名・投稿日・ツイート内容を日付順に整理してある tweets.txt というファイルが同梱されています。これを見ればどの写真がいつのもので、何をツイートしたかが分かるという訳です。素敵!

…なんですが、いちいち参照して見るとかありえません。ので、そのファイルをちょっといじりました。やっぱり写真とツイートは一緒に見たいですし。これならちょっと見やすいはずです。素敵!サンプルはこちら!

サンプルを表示

見やすくするための手順

  1. まず、正規表現での一括置換ができるテキストエディタを手に入れましょう。私は Sublime text を使いました。mi でもOKです。Windows の場合はなんとか探し出してください。
  2. 念のため tweets.txt をコピーしてバックアップしておきましょう。ここで紹介する方法で何事かが起こっても、私には一切責任持てませんので…
  3. 先述のテキストエディタで tweets.txt を開き、まずは日付があるかどうかを確認します。一行目が xxxxxx.jpg で終わっているか、xxxxxx.jpg on: 09/02/2014 となっているかを確認しましょう。なぜか日付がないケースがあるようなので…
  4. 先述のテキストエディタで tweets.txt を開き、一括検索&置換をします。この時、正規表現を有効にするのを忘れずに!
    • 日付がある場合
      検索する文字列
      (.+?)(\.jpg|\.jpeg|\.png|\.gif)\son:\s(.+)
      置換する文字列
      <div class="img"><a href="$1$2" target="_blank"><img src="$1$2" id="$1"></a><span class="date">$3</span></div>
    • 日付がない場合
      検索する文字列
      (.+?)(\.jpg|\.jpeg|\.png|\.gif)
      置換する文字列
      <div class="img"><a href="$1$2" target="_blank"><img src="$1$2" id="$1"></a></div>
  5. 無事に置換が済んだら、ファイルの先頭と末尾に以下のコードを貼り付けます。
    先頭に貼り付けるコード
    <!DOCTYPE HTML>
    <html lang="ja">
    <head>
    	<meta charset="UTF-8">
    	<title>Twitpic ログ</title>
    	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    	<script>
    	/*! Lazy Load 1.9.3 - MIT license - Copyright 2010-2013 Mika Tuupola */
    	!function(a,b,c,d){var e=a(b);a.fn.lazyload=function(f){function g(){var b=0;i.each(function(){var c=a(this);if(!j.skip_invisible||c.is(":visible"))if(a.abovethetop(this,j)||a.leftofbegin(this,j));else if(a.belowthefold(this,j)||a.rightoffold(this,j)){if(++b>j.failure_limit)return!1}else c.trigger("appear"),b=0})}var h,i=this,j={threshold:0,failure_limit:0,event:"scroll",effect:"show",container:b,data_attribute:"original",skip_invisible:!0,appear:null,load:null,placeholder:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"};return f&&(d!==f.failurelimit&&(f.failure_limit=f.failurelimit,delete f.failurelimit),d!==f.effectspeed&&(f.effect_speed=f.effectspeed,delete f.effectspeed),a.extend(j,f)),h=j.container===d||j.container===b?e:a(j.container),0===j.event.indexOf("scroll")&&h.bind(j.event,function(){return g()}),this.each(function(){var b=this,c=a(b);b.loaded=!1,(c.attr("src")===d||c.attr("src")===!1)&&c.is("img")&&c.attr("src",j.placeholder),c.one("appear",function(){if(!this.loaded){if(j.appear){var d=i.length;j.appear.call(b,d,j)}a("<img />").bind("load",function(){var d=c.attr("data-"+j.data_attribute);c.hide(),c.is("img")?c.attr("src",d):c.css("background-image","url('"+d+"')"),c[j.effect](j.effect_speed),b.loaded=!0;var e=a.grep(i,function(a){return!a.loaded});if(i=a(e),j.load){var f=i.length;j.load.call(b,f,j)}}).attr("src",c.attr("data-"+j.data_attribute))}}),0!==j.event.indexOf("scroll")&&c.bind(j.event,function(){b.loaded||c.trigger("appear")})}),e.bind("resize",function(){g()}),/(?:iphone|ipod|ipad).*os 5/gi.test(navigator.appVersion)&&e.bind("pageshow",function(b){b.originalEvent&&b.originalEvent.persisted&&i.each(function(){a(this).trigger("appear")})}),a(c).ready(function(){g()}),this},a.belowthefold=function(c,f){var g;return g=f.container===d||f.container===b?(b.innerHeight?b.innerHeight:e.height())+e.scrollTop():a(f.container).offset().top+a(f.container).height(),g<=a(c).offset().top-f.threshold},a.rightoffold=function(c,f){var g;return g=f.container===d||f.container===b?e.width()+e.scrollLeft():a(f.container).offset().left+a(f.container).width(),g<=a(c).offset().left-f.threshold},a.abovethetop=function(c,f){var g;return g=f.container===d||f.container===b?e.scrollTop():a(f.container).offset().top,g>=a(c).offset().top+f.threshold+a(c).height()},a.leftofbegin=function(c,f){var g;return g=f.container===d||f.container===b?e.scrollLeft():a(f.container).offset().left,g>=a(c).offset().left+f.threshold+a(c).width()},a.inviewport=function(b,c){return!(a.rightoffold(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.abovethetop(b,c))},a.extend(a.expr[":"],{"below-the-fold":function(b){return a.belowthefold(b,{threshold:0})},"above-the-top":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-screen":function(b){return a.rightoffold(b,{threshold:0})},"left-of-screen":function(b){return!a.rightoffold(b,{threshold:0})},"in-viewport":function(b){return a.inviewport(b,{threshold:0})},"above-the-fold":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-fold":function(b){return a.rightoffold(b,{threshold:0})},"left-of-fold":function(b){return!a.rightoffold(b,{threshold:0})}})}(jQuery,window,document);
    	</script>
    	<script>
    	$(document).ready(function(){
    		$("img").lazyload({
    			effect : "fadeIn"
    		});
    	});
    	</script>
    	<style type="text/css">
    	body {
    		width: 300px;
    		margin: 0 auto 40px;
    	}
    	h1 {
    		color: #0271bf;
    		font-size: 18px;
    		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
    		background: #dbebf6;
    		margin: 0;
    		padding: 20px;
    		position: fixed;
    		top: 0;
    		left: 0;
    		width: 100%;
    		z-index: -1;
    	}
    	div.img {
    		margin-top: 30px;
    		position: relative;
    		width: 300px;
    	}
    	img {
    		width: 300px;
    		height: auto;
    		border: 6px solid #fff;
    		box-shadow: 0px 0px 10px #ccc;
    	}
    	span.date {
    		color: #fff;
    		font-size: 12px;
    		font-family: monospace;
    		text-shadow: 0px 0px 3px #000;
    		display: block;
    		position: absolute;
    		bottom: 14px;
    		right: 0;
    	}
    	</style>
    </head>
    <body>
    
    <h1>Twitpic ログ</h1>
    
    末尾に貼り付けるコード
    </body>
    </html>
    
  6. そのファイルを上書き保存して閉じたら、最後に拡張子を .txt から .html に変えてできあがり。お好みのブラウザで表示してみましょう。

おわりに

  • HTML や CSS が分かる人は自分好みにカスタマイズしてみてください。
  • 画像にファイル名のIDを付けておきました。twitpic のリンクが切れた場合でも、末尾のファイル名らしきものを利用すればその画像がどれか分かります。
    【例】
    twitpic.com/e88sen の場合、http://www.rakuin.com/content/files/twitpic/#e88sen のようにすればOK。#e88sen より前は、自分のアドレスに置き換えましょう。
  • あと正規表現はあまりちゃんと検証してないので、ミスってたらごめんなさい。Sublime text と mi では大丈夫だったので、それで許してください。2つとも素晴らしいエディタなんです。
  • 写真の数が大量になるので対策として Lazy Load Plugin を埋め込ませてもらいました。ありがとうございました。

しかし昔撮った写真って面白いなー

このカテゴリの他の記事