posted by bon at 2012.11.05 22:00:00
Comment(0) | プログラミング | このブログの読者になる | 更新情報をチェックする

この間、Instagramを利用したWebサービスである「followgram」なるサイトの詳細を知る為にググり、
その内容が書かれた個人ブログを閲覧していたとき、
右側メニュー部にTumblrの画像スライドショーがあるのを発見しました。
よく見ると、下部に powered by Yahoo!pipes と書かれているリンクがありました。
(この方のブログです。http://iphonecameraapp.org/ これのTumblr画像がスライドショー化してます)

Yahoo! pipesとは何??


英語サイトでよく分からないYahoo! pipesですけど、一体なんなのでしょう。
簡単にYahoo!pipesを説明すると、HTMLでの通信情報を色々と加工したり繋げたりすることで、自分の好きな形のデータにすることができます。
まあ、よくわかりませんよね。私も最初はぜんぜん理解できませんでした。
でも、使ってみると意外なほど理解できてくるんです。未だわからないパラメータやパーツもありますけどw
ココ(↓)のサイトが参考になります。
http://www.kotono8.com/wiki/Yahoo!_Pipes

便利に使う方法としては、Twitterやその他SNSのタイムラインをすべて1つのフィードにまとめたい!とかいう時に使えるかもしれません。
(もちろん、前提条件としてタイムラインがHTTPのPOST・GET通信で取得できることが挙げられます)
その他自分専用のRSSフィードを作ったり、Evernoteに投稿する前に加工したりとか色々です。
アイデア次第ってことですね。

私はAndroidアプリ開発ツールのApp Inventorも含め、こういうツールはナノブロックないしレゴのようなイメージで捉えてます。
組み合わせ方はたくさんあるので、触らないよりも実際触って楽しもう!という気持ちのほうが大事じゃないかと。
よくわかんないからいいや、ポーイ!じゃ勿体無いですヨ、と。


Yahoo!pipesに画像データを渡すだけでスライドショー!?


で、やっと本題ですが、このYahoo!pipesの仕組みについて簡単に調べてみました。
するとなんと、Yahoo!pipesに画像データを渡すだけで、ツール側で勝手にスライドショーを生成してくれるようなんですよということがわかりました!
いつのまに!!(もしかして最初からあった??)


とりあえず上記で発見したTumblrの画像を表示するスライドショーのPipesを見てみましょう。
(勝手にパブリックドメインだと思ってるので、Pipesのコードをこちらに掲載します。ダメなら申し立てお願いします><)

pipes_20121026.JPG

番号順に説明します。

1.ユーザ名を指定
promptとなっている部分と、2の「text[wired]」が関連してます。
Debugとは、値が指定されなかった際に使われる値です。
1の詳細は2で説明します。

2.文字列生成
String buliderはそのまま「文字列生成」です。
ここでは、http:// + [1の値] + .tumblr.com/rss という文字列を生成します。
この[1の値]というのが、先ほどの「1.ユーザ名の指定」で指定した値です。
1はユーザが指定した値が入るため、実際のところ自分専用のpipesであれば、
わざわざ1を用意する必要は無く、2でユーザ名を固定値にしてもかまわないのです。

ちなみに、「1.ユーザ名の指定」は、pipesの設定画面から入力できます。

3.URLの生成
2でURL文字列を生成したら、今度はそのURLをURLとして生成します。
(な、なにいってるかわからねぇが(ポルナレフry)
文字列を作っただけでは、URLリクエストになりません。URLBuilderを間に挟んで初めて、
URLリクエストとしてサーバへリクエストが飛びます。

4.RSS フィードを取得する
フィードってなんぞや!と思われるでしょうが、RSSのデータだと思ってください。
そのフィードを取得するよーというコンポーネントです。
つまり、Fetch Feedに繋がるものは、RSSフィードでなければなりません。
(3のURL生成で、URLリクエストとしてRSSフィードを生成してますよね)

5.フィルターを生成
RSSデータのフィルターをします。ここではRSSの item.descriptionに「<img」というタグが含まれているもの「のみ」抽出します。
つまり、RSS内の画像データのみを抽出しているようなものです。
ということは、3のURL生成でTumblrのRSSではなくその他のRSSであっても、このpipesは流用可能ということになります。


6.名前を変更する
今回は名前を変換するというよりは、「Copy As」となっておりますゆえ、
つまりはRSSの「item.description」要素を「media:content.url」にコピーしちゃうよ!という内容になります。
media:content.urlってどこに使うのかというと、多分Badges for Yahoo! Pipesに流す画像データのURLといったところでしょうね。


7.Regexします
Regexとは「正規表現」と日本語訳されます。
正規表現は、Linuxを触ったことのある人や、ある程度プログラミングしたことのある人なら聞き覚えのある方もいらっしゃるでしょう。
普段意識せず正規表現を目に出来るのは、テキストエディタを開いて保存するときの「拡張子」くらいですね。
「*.txt」とか「*.xlsx」とか書かれているのを見たことがあるでしょう。この「*」が正規表現です。
(知らなかった方&気づかなかった方は、今度文書情報を保存するときに見てみてくださいw)

右側の g とか m とかの文字は、オプションだそうです。

gオプション:繰り返してマッチを行う

sオプション:ワイルドカードのドット( . )が改行にもマッチするようにする

mオプション:対象のパターンに改行が含まれていても、その改行にまたがってパターンを検索する

iオプション:大文字と小文字を区別しないでマッチングする



今回の場合、
上の .*(<img src=") が、img srcで指定されたURLを抜き出す命令。でもこれだけだと後ろの文字列がくっついてきて正しいURLになりません。
そのため、2行目の「".*」で、「img src= " ここだけ抽出 " 〜〜〜<img src =...」することができます。
正規表現は私も説明できるほど詳しくないので、割愛しますw
とりあえず .* が、前方1文字をヒットさせるという正規表現であるという点は確実です。
(2行目の場合は「"」が検索文字列ということです)


最後に、自分の(あるいはスライドショーしたい)ユーザ名を、設定画面から入力し、「Run pipe」すればOKです。

pipes_configure_20121027.JPG



以上でYahoo! Pipesを使ったTumblrの画像スライドショー生成の流れについての説明を終わります。
そもそも自分で作成したコードではないので、誤認や間違いが多々あると思いますがご容赦くだせぇ……。
(指摘してもらえるともっと助かります!)
なお、このPipesだとある一定の記事数しかデータを取得できないようなので、
たくさん画像を投稿したとしても、一部しかスライドショーされないようです。(私の場合たった3枚)

これを解決しつつより作りがしっかりしているPipesも見つけたので貼っておきます。
ブログ:http://creazy.net/2008/02/photumblr_pipes.html
Pipes:http://pipes.yahoo.com/yager/photumblr

で、私のIDでは上記のPipesをちょっとだけカスタマイズし、
画像スライドショーに対応させたものを公開してますのでお好きに使ってください。
(これもまたライセンス的に問題があったらご連絡お願いします。。)
http://pipes.yahoo.com/pipes/pipe.info?_id=64830c089732897cbaf328847fa6c922


[その他参考]
・Yahoo! pipes のコンポーネントについては下記サイトが詳しく(日本語で)説明されております。
http://d.hatena.ne.jp/dacs/20080422/1208868051
http://d.hatena.ne.jp/dacs/20080423/1207478962

・趣旨は違いますが、こちらはYahoo! Pipesを使ってAmazonの画像リンクをスライドショーにされた方のブログです。
http://blog.ikubon.com/?eid=833078

・Yahoo! Pipesをブログのサイドバーに「Badges for Yahoo! Pipes」
http://openservice.jp/2008/03/badges_for_yahoo_pipes/


スポンサードリンク:
Comments
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

TOP
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。