超他力本願Webサイトクリップ集をTumblrに構築してみた

【2013/03/06追記】

  • CSSManiaはQuoteで確定。ただしAds画像のおかげで画像のズレが生じてしまうので、取得があるたびにソースの修正が必要になる。
  • 取得直後でも一応見えてるから放置でもいいんだけどね。
  • TumblrのQuote投稿はBlockquoteタグが付いているため、テーマによってはCSSをいじる必要あり。

【2013/03/05追記】

  • Dribbbleの投稿数が多すぎて他サイトの確認ができないため一時的に停止。
  • I/O 3000については今のところPhotoで取得できてます。
  • CSSManiaは依然として不安定。XMLを見ると本画像の前に「buysellads」というAds画像が存在していて、それをIFTTTが拾ってる可能性がありそう。だとするとPhotoで取得させるとAds画像が優先されてしまうので、Quoteで取得してテーマ編集で対応するしかないかと。

【2013/03/04追記】

  • CSSManiaはPhotoレシピは取得できず、Quotレシピにすると取得できました。が、無駄な引用符がついてたり、イメージをそのまま取得してしまい、タイル内に収まりきらない状態に。テーマのCSSをいじった方がいいかも。
  • I/O 3000はPhotoでもQuotでも取得状況がばらばら。straitlineに並び国内サイトを多く紹介してくれるので貴重なサイトではあるのですが・・・
  • Dribbbleは新規サイトへ案内すると言うよりひたすら紹介するだけのサービスなので、そのうち削るかもしれません。アイデア収集としてはいいんですけど。 

実験は成功かな、と思ったのでメモ。

数年前にWebサイトのクリップ集をつくるよ!と思い、「cosyroom on tumblr / awesite tiles」というサイトを立ち上げました。
色んなWeb紹介サイトを参照して集めるという目的は今回のと一緒なのですが、このときの管理方法がFirefoxでTomblooというアドオンを使い、一つ一つスクリーンショットを撮りTumblrに投稿するという形を取っていました。

当然ながらいつまでもそんなことしてると飽きる訳でして。別件で時間がとれなくなったのを機に数年放置の状態に。

数日前にふと思い立って、自動投稿ってできるんかなと探したところ、IFTTTというサービスを見つけ、現在に至るという感じです。

IFTTTは「If this then that(もしこれをしたらあれをやる)」というサービスで、Facebookで投稿があったらTumblrに投稿するというように、指定したWebサービスのトリガーが働くと別のサービスへアクションを起こすということのできる機能を持っています。メールを送信したり、時間が来たら投稿したりもできるようです。

IFTTTのレシピをつくる

今回やったのは、「特定Webサイトの投稿(Feedの更新)があればTumblrへ引用投稿する」という方法です。

IFTTTの登録(そこではレシピと定義してます)は実にユニークで、シンプルで大きな文字をクリックするだけでレシピを作成することができます。

※ 既にTumblr、IFTTTのユーザ登録は既に済んでいるものとします。
※ あらかじめ取得したいFeedのURLは探しておいてください。

  1. IFTTTにログインし、「Create a Recipe」をクリック。
  2. 「this」をクリックし、トリガーとなるチャンネルを選択。ここでは「Feed」を選択。 
  3. 「New feed item」をクリック。
  4. Feed URLを入力。ここではDribbbleのpopularフィード「http://dribbble.com/shots/popular.rss」を入力。
  5. 「Create Trigger」をクリック。この時点でフィードのチェックが入るので、問題がなければ次に行く。
  6. 「that」をクリックし、アクションを起こすチャンネルを選択。ここでは「Tumblr」を選択。
  7. Webサイトのクリップ画像を取得したいので、「Create a photo post」をクリック。
  8. 取得する情報の詳細指定ができるが、何もせず「Create Action」をクリック。
  9. 「Create Recipe」をクリック。

これでレシピが作成され、登録したサイトのフィード更新があればTumblrへ自動投稿されるようになります。

サイト毎の傾向

サイトによっては写真投稿が通用しない場合があり、そのときは引用投稿で対応することになります。
現時点で登録したサイト毎の傾向は以下のようになっています(「http://」を省いてます)。

  • straitline bookmark : Photo post
    Feed URL : bm.straightline.jp/rss 
  • Style Inspiration : Photo post
    Feed URL : feeds.feedburner.com/stylesinspiration/feed
  • Dribbble(tags:website) : Photo post ※停止中
    Feed URL : dribbble.com/tags/website.rss
  • CSSMania : Quote post ※要ソース編集
    Feed URL : http://www.cssmania.com/feed/
  • Mobiledesign Archive : Photo post ※検証中
    Feed URL : mobiledesignarchive.jp/rss.xml 
  • 4db : Photo post
    Feed URL : 4db.cc/feed.xml
  • I/O 3000 : Photo post
    Feed URL : io3000.com/feed

 基本的に、いったんPhoto postで様子を見て、だめだったらQuote postに登録し直すという手順になるでしょう。
一番収集したいCSSManiaが依然挙動不審なのですが、だいたいのサイトはこの方法で取得できてます。 

そのうちサイト管理者から「おいやめろ」と言われそうな気もするのですが、Tumblrはまぁ引用サイトだし、警告が来たらそのサイトの登録をやめておこうかぐらいに考えています。

好きな廃墟ブログの写真を収集したり、ひたすら猫画像を集めて公開するといった方法にIFTTTは威力を発揮しそうですね。でもこの写真は自分が撮ったんだーみたいな、あたかも自分のコンテンツであるかのようなスタンスでやらないようにしましょうね。

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中