Trek and Flickr 自作プログラムによる絞込みとhtml作成の詳細

  • Diary

Trackfeedでなんかひっかかったので見に行ったらやたら吹いたw

ちなみにTrackfeedというのは、どこかのサイトから自分のサイトにリンクがはられて、その後誰かがそこを踏んでやってくるとそれを通知してくれるというとてもとてもとても便利な仕組みであります。
まぁRSSリーダを使ってるということが条件になりますが...

参考までこんな感じに通知されます。(これはRSSリーダとしてfreshreaderを使ってる場合)



ぽちっと


兄さん学歴こんぷれっくすってそれナニwww


というわけで頑張って画像を使って書いてみようと思ったのであった。
でも別に誰にも何にも参考にもならないわけでw
まぁヒマな人だけ読んでくだされ。なお、超絶長いです。



(はじめに注)
画像の色がマチマチなのは256色gifで保存してるせいで、深い意味はありませんw 手抜きです


1. Web型RSSリーダーの出力をテキストに落としておきます
例えばflickrの、とあるグループの未読を読むようにしておいて、それを未読
1000くらいずつ保存します。
簡単にいうと、1000個のflickr URLが入っているとお考えください。

まずこっからです。
ちょうどFlickrCentralの未読が1200超になっていたので、保存しとくかなーと。
ただその前に、画像表示をオフにしておきます。そうしないと1200とか画像ロードが始まって発狂しますw


左下のところがflickrcentralのフォルダですね(このフォルダにはflickrcentralの1RSSのみ)



画像表示がオフになったので押すよ押すよ~ ぽちっ.........なんか完全にロード終わるまで数分かかったw (注:ここの部分はマクドナルドで書いていますw)
で、こんな感じ。



右側のウインドウにずぎゃーっと1200以上つながってるわけっすね。
左の Flickr というところは読んだので未読は 0 になりました。

そしたらここで右側に表示されてるhtmlを保存します。
Operaでは右クリしてこんな感じ。まずソースを表示して、



そして保存すると。



名前は適当につけてぽちっ



中身については出してもしょうがないけど、こんなデータがどぎゃーっと並んでいます。

<div class="itemtitle"><a href="http://www.flickr.com/photos/laugis_photo/2518443845/in/pool-34427469792@N01">Ausstellung im Garten Bruglingen</a><a name="item-105"></a></div><div class="addbutton"><a href="#" onclick="javascript:Bookmark.add(this);return false;"><img src="img/comment-add.gif" align="absmiddle" hspace="1" vspace="1">[追加]</a></div>
<div class="itembody"><p><a href="http://www.flickr.com/people/laugis_photo/">photo-maker</a> has added a photo to the pool:</p>
<p><a href="http://www.flickr.com/photos/laugis_photo/2518443845/" title="Ausstellung im Garten Bruglingen"><img src="http://farm3.static.flickr.com/2290/2518443845_88858fc194_m.jpg" width="161" height="240" alt="Ausstellung im Garten Bruglingen"/></a></p><div style="clear:both;"></div></div>
<div class="postdate">on <script type="text/javascript"><!--
showdate(1211657725,"ja","l",false);
//--></script></div>

<div class="itemtitle"><a href="http://www.flickr.com/photos/thelastsong/2529267902/in/pool-34427469792@N01">Dancing In The Streets</a><a name="item-106"></a></div><div class="addbutton"><a href="#" onclick="javascript:Bookmark.add(this);return false;"><img src="img/comment-add.gif" align="absmiddle" hspace="1" vspace="1">[追加]</a></div>
<div class="itembody"><p><a href="http://www.flickr.com/people/thelastsong/">adrizufe</a> has added a photo to the pool:</p>
<p><a href="http://www.flickr.com/photos/thelastsong/2529267902/" title="Dancing In The Streets"><img src="http://farm4.static.flickr.com/3231/2529267902_1cd76471c3_m.jpg" width="157" height="240" alt="Dancing In The Streets"/></a></p><div style="clear:both;"></div></div>
<div class="postdate">on <script type="text/javascript"><!--
showdate(1211925906,"ja","l",false);
//--></script></div>



2. それを自作プログラムにかけると、各画像の view数・favorite数・コメント
数 を読み出します。その結果を別のデータファイルとして保存します。
(実際にプログラムでflickrのページを読みにいって、html解析してその数字を
持ってきます)

次にこれなのですが、このプログラムを動かすのは寝る前なのよね...

その理由は、
1. 時間がかかる(この場合だとflickrを1200ページ読みにいくので1時間以上かかる)
2. phpをブラウザでキックして動かしているので、これを動かしてる間は別のphpを動かすことができない
  (=RSSリーダを私は使えない)


それと、今日取ったデータは寝かせなければなりません。
uploadされてすぐの状態だと、view数とかお気に入り数とか取っても意味がないですよね。
まぁ半月くらい寝かせると、いい画像はview数・お気に入り数が多くなるだろうということで、そのくらいしてからデータ取りをします。

まぁどんな感じかサンプル的に。

(実際にやってること)
1. さきほどの Flickr080528_1200.htm を自宅サーバのあるフォルダに置いて、input.html にリネームしますwww
2. そこにあるFlickr用データ取得phpをキックします
3. 寝ますw
4. 起きると、ブラウザ上にデータががっぽりあります
5. Flickr080528_1200.dat という名前で保存します


あああああああああああ なんてしょぼい仕様wwwww
入力ファイル名すら固定かよwwwww


で、こんなデータが取れます。これは2枚分。まぁこれが1200とか続いてるわけっすね。
なお、pointsというのはコメント数です。dateはflickrは取ってないんだな...Trekは取ってたような。

url: http://www.flickr.com/photos/16933514@N07/2450464916/
title: F430
thumbnail: http://farm4.static.flickr.com/3215/2450464916_d7dd0615bb_m.jpg
date:
viewed: 37
favorites: 3
points: 3
<br>
url: http://www.flickr.com/photos/27017162@N00/2450840229/
title: life
thumbnail: http://farm4.static.flickr.com/3085/2450840229_bc53b06df1_m.jpg
date:
viewed: 8
favorites: 0
points: 0
<br>


ちなみに、このデータ取りプログラムは Trek用 Flickr用 と2本あります。
ブラウザのブックマークに、こんな感じで入ってますが、


この getstatus - Trek と getstatus - flickr というのがそうですね。
これは両サイトのhtmlの内容を直接解析してるので、中身の記述スタイルが変わるといきなりデータ抜けなくなりますw
まぁそうそうあることではないのですが、変更はある日突然サイレントに行われて困りますw

で、この2本のプログラムが吐き出すフォーマットは同じになっています。
なので、次の段階でこのアウトプットの .dat を解析して、よさげなのを抽出するのはTrek/Flickr共通のプログラムです。



3. エントリーを書くときに、そのデータファイルをまた別の自作プログラムに
かけると、view・favorite・コメント数を、あるロジックで評価して、高評価な
ものだけに絞り込んでサムネイル表示します。
よく私が「2276→54枚から」みたいに書いているのはこのためです。
プログラムには2276枚のデータを渡しているのですが、そこからプログラムで54
枚に絞り込んでサムネイルを表示しています。その54枚を開いていって、目で見
て選んでいます。

さっきと違うデータファイルですが、実際にやってみましょう。
Flickr080429_1400.dat というデータファイルが、今あります。
4/29にRSSリーダでhtmlを落としたもので、タイムスタンプを見ると5/25となっているので、5/25にdatを作成したものです。

さきほどのブクマから、Analyze Trek&Flickr 1% というのを開きます。



こんな画面w
で、自宅サーバのしかるべきところにdatファイルを転送してw、ファイル名いれてぽちっとします



そうするとこんな感じ。


途中は省略して、スクロールして最後のところ。


datファイル内に1398あって、そこから30枚選ばれてます。
この30枚を開いていって選ぶというわけですな。


ところで、「1%」なのにそれよりも明らかに多い(1398枚の1%は約14枚)というのは仕様で、

・View数でソートして上位1%
・favorite(おきにいり登録)数でソートして上位1%
・コメント数でソートして上位1%
・上3つでフラグ立ったものを、View数の多いものでソートして表示

こんなロジックです。


同様に2.5%, 5%, 10% とあるので、元画像の数で適当に選んだり、今回のケースだと30枚はちょっと少ないので後で2.5%も見るとか、そんな感じです。まぁ30から選んでみるか。
flickrをいっぱい開くときはとても重いので、javascriptを切ると楽だったりします(最近覚えた)。



さて、30枚を開いていって....(ねぃさん写真や明らかに好みに合わないのは開かない)


1枚1枚見ながら、タブを移動して 1,2,3軍 に分けていきます。(ドラッグ&ドロップでタブの場所を入れ替えます)


1軍:3枚、2軍:5枚、3軍:4枚、になりました。ちょっと少ない感じがするので、2.5%にしてみます。

number of pics: 68 / 1398

さっきは30枚だったのが、68枚になりました。さっき開いてなかったのを見ていきます。



増えたところから16枚開いてみました。やめて>< タブはもう限界よ>< (縮小してませんよw)


最終的にこうなりました。選び終わったあとにいろいろ入れ替えたりもしてます。
1軍:6枚、2軍:9枚、3軍:6枚



4. 目で見て選んだあとに、エントリーのhtmlを作るのに、また別の自作プログ
ラムを用意しています。
入力画面で、
---
<a href="http://www.flickr.com/photos/nnistar/2466972221/">葛西臨海公園</a><br />
<a href="http://www.flickr.com/photos/nnistar/2466971529/">DSC01459(1)</a><br />
---
こんな感じに入れて、ボタンを押すと
 a. サムネイルをflickrからnnistar.comにコピー
 b. htmlを自動生成
ここまで一発でやってくれます。できたhtmlをブログのエントリ画面に手動でコ
ピペすれば完了です。
なお、1列表示用、2列表示用が選択できて、サムネイルの大きさやhtmlの書き方
が変わるようにしています。

さあようやくラストです。ついてきてる人いますか?w

自作の Flickr html generator を開きます。


ぽち


みんな見た目が似てるのは気のせいですwwwww
いやほら自分しか使わないしUIなんて使いまわしというかド素人コーダーですから....


まず1軍から、こんな感じで入力します。



ぽちっ


いつもの感じですね:)
全部見えてないですが、6枚分できています。

このphpでは、
1. flickrのページにhtmlを取りに行く
2. html解析する
3. サムネイルを nnistar.com にコピーする(ファイル名は若干ユニークに付け足す)
4. 表示用のhtmlを生成する (もし一般ユーザーでも Large 画像にアクセスできるならばそのリンクも付ける)
こんなことをやっています。


さて、ブログにエントリーするには、このhtmlを表示します。

右クリでソース表示と



ctrl+a → ctrl+c でコピーと


ちなみにこんなのが生成されてます。

<p>
<a href="http://www.flickr.com/photos/playing-with-light/2399114248/"><img src="http://www.nnistar.com/flickr4/0805292399114248_4216ecffb0_m.jpg" align="left" alt="FlickrPhoto" /> Foggy Dubai</a>
<br clear="all" /></p>

<p>
<a href="http://www.flickr.com/photos/steinliland/2438499623/"><img src="http://www.nnistar.com/flickr4/0805292438499623_81deb3e52f_m.jpg" align="left" alt="FlickrPhoto" /> Kvalvika</a>
 (<a href="http://www.flickr.com/photos/steinliland/2438499623/sizes/l/">Large</a>)<br clear="all" /></p>

<p>
<a href="http://www.flickr.com/photos/photographieskousha/2446161310/"><img src="http://www.nnistar.com/flickr4/0805292446161310_9de58720f2_m.jpg" align="left" alt="FlickrPhoto" /> Te gusta la fotografia ?</a>
 (<a href="http://www.flickr.com/photos/photographieskousha/2446161310/sizes/o/">Large</a>)<br clear="all" /></p>

<p>
<a href="http://www.flickr.com/photos/straightfinder/2440487497/"><img src="http://www.nnistar.com/flickr4/0805292440487497_45419cb995_m.jpg" align="left" alt="FlickrPhoto" /> rainy colors</a>
 (<a href="http://www.flickr.com/photos/straightfinder/2440487497/sizes/l/">Large</a>)<br clear="all" /></p>

<p>
<a href="http://www.flickr.com/photos/millzero/2445243694/"><img src="http://www.nnistar.com/flickr4/0805292445243694_0532907f6e_m.jpg" align="left" alt="FlickrPhoto" /> Endless love: Got Married</a>
 (<a href="http://www.flickr.com/photos/millzero/2445243694/sizes/o/">Large</a>)<br clear="all" /></p>

<p>
<a href="http://www.flickr.com/photos/dogus37/2446679036/"><img src="http://www.nnistar.com/flickr4/0805292446679036_f867215f95_m.jpg" align="left" alt="FlickrPhoto" /> reflections on life</a>
<br clear="all" /></p>


そして、MovableTypeのエントリー画面にペーストします。
最初の部分とかはもちろん手打ちです。



続いて2軍


こう入力してぽち



同じようにソース表示して、MTのエントリー画面の「追記」のところにはります。



最後に3軍

generatorの画面で、実は2列表示というのが選べます。


2を選んでからぽち


こんな感じで、小さいサムネイル + 2列表示 になります。
このソースは以下。tableタグでやってます。

<table summary="FlickrPhotosTable">
<tr><td><a href="http://www.flickr.com/photos/moaan/2410673552/"><img src="http://www.nnistar.com/flickr4/0805292410673552_7c1cf0c180_t.jpg" align="left" alt="FlickrPhoto" /> so long</a>
<br clear="all" /></td>
<td><a href="http://www.flickr.com/photos/raphael_dupertuis/2443094839/"><img src="http://www.nnistar.com/flickr4/0805292443094839_592ea8bb07_t.jpg" align="left" alt="FlickrPhoto" /> 20 km de Lausanne</a>
<br clear="all" /></td></tr>

<tr><td><a href="http://www.flickr.com/photos/johann-pix/2446963074/"><img src="http://www.nnistar.com/flickr4/0805292446963074_1a86f6385f_t.jpg" align="left" alt="FlickrPhoto" /> Yellow day</a>
<br clear="all" /></td>
<td><a href="http://www.flickr.com/photos/rueb/2451372242/"><img src="http://www.nnistar.com/flickr4/0805292451372242_1c2b34932c_t.jpg" align="left" alt="FlickrPhoto" /> Navajo Falls</a>
<br clear="all" /></td></tr>

<tr><td><a href="http://www.flickr.com/photos/flacombat/2445709218/"><img src="http://www.nnistar.com/flickr4/0805292445709218_6b46bc1d1c_t.jpg" align="left" alt="FlickrPhoto" /> DSC09954 Windsurfing</a>
<br clear="all" /></td>
<td><a href="http://www.flickr.com/photos/jeremy-g/2449261684/"><img src="http://www.nnistar.com/flickr4/0805292449261684_493d63a6c3_t.jpg" align="left" alt="FlickrPhoto" /> Symphony of Lights</a>
<br clear="all" /></td></tr></table>

これをMTエントリー画面の追記のところにさらに追加して、おしまいです:)


以上ッッ

効率化を推進していくうちにこんなスタイルになったということで。
まだ手を入れれるところもあるとは思うのですが、まぁ...
あと、http関連でタイムアウトしたりなんやかんやがあるので、何でもボタン一個でばんばん流れるようにするのも良し悪しかなーという気はします。(これ以上作る気力がないという言い訳かもw)


(追記 2:50)
書き忘れた。
これと同じようなことをやるには、レンタルサーバー(MovableType or WordPress or so on...)が必須ですし、元データを集めるには高級なレンタルサーバーか自宅サーバが必要だと思います....
そんな人ふつーいないですね。そうですね;;

Track Back

Track Back URL

Comments [3]

おもすろかったです。
手間かかってるんですねー(見るのは数秒ですが。。。)
Operaさすがのタブ力!

ラストはいちいちhtmlソース表示してコピーして…じゃなくて
Googleみたく
・テキストエリアにソースコードを表示
・テキストエリアにフォーカスが入った時点でクリップボード
 にコピー
とかすると、5秒くらいは稼げるんじゃなかろうか…。

>こういとさん
ありがとうございますー。
こまごま書くといろいろあるように見えるのですが、それでも全件処理することに比べるととても楽になってます。
まぁ完全に自分専用システムなのですがw

タブについてはOpera以外使い込んだことないのですが、他のでもがーっと開け...ないのでしょうかね???
Operaというより最近のPCの性能向上によるところが大きい気もします:)


>ほぷ兄さん
...書き方がわからねぇw ざばすくりぷとっすよね
つうか気持ち悪いので却下しますwww フォーカスするとコピー入るとかキモイキモイw
とかいってちゃイカンのかもしれないなぁ むーん

コメントする

公開されません

(いくつかのHTMLタグ(a, strong, ul, ol, liなど)が使えます)