前回作ったパイプ (Pipes: Filter backtweets by twitter username) の作り方。
全体の構成
全体のパイプの大雑把な構成は以下の通り。6 つの小さなパイプをつないでいる。
※ 点線は概念的なイメージ
backtweets.com から RSS を取得しフィルタリング
パイプ : Filter backtweets by twitter user name (No Image)
フィードの取得
使用するモジュール
- User inputs > URL Input : 入力
- URL > URL Builder : URL の生成
- Sources > Fetch Feed : フィードの取得
まず、BackTweets においてブログの URL で検索 ( http://jutememo.blogspot.com — BackTweets )し、RSS のアドレスを表示させる。
http://backtweets.com/search.rss?q=http://jutememo.blogspot.com
これより、この RSS を Fetch Feed モジュールで取得したい。
URL Builder モジュールにおいて、
- Base : http://backtweets.com
- Path elements : search.rss
- Query parameters :
- q
- text : User inputs > URL Input モジュールより流しこむ
Debug : にはテスト用に試したいアドレスを入れておく。
実は最初 Fetch Feed 使うの忘れていて、Fetch Data > Sub Element > Create RSS のモジュールをつなげるという遠回りなことをしていた。 ^^;
フィードのアイテムをブロック
使用するモジュール
- User Inputs > Text Input : 入力
- コンマ区切りの文字列を正規表現へ
- String > String Replace : , を $|^ へ変換
- String > String Regexp : 先頭と末尾に ^ $ をつける。
- Operators > Filter : 上記の正規表現を元にアイテムをブロック
取得したフィードの item.auther によりつぶやいたユーザ名がわかる。特定のユーザを取り除きたいので、ここでユーザ名を指定してブロックする。ただし、例えば `jutememo,hoge,piyo’ と複数指定されたら、各々のユーザ名に完全に一致するフィードのアイテムをブロック。そのためには次のような手順を踏む。
- 入力された文字列の中の `,’ を `$|^’ へ変換
- 先頭と末尾に `^’ `$’ をつける
- Filter モジュールにおいて、上記で作成した正規表現で一致するアイテムをブロック
ここまでで、特定のユーザのつぶやきをブロックしてフィードを表示させることができた。しかし、つぶやいている人の画像は表示されない。できれば フィードのアイテムにある auther 情報を元に、Twitter のプロフィール画像を取得したい。上記で作成したパイプに機能を付け加えていくと、ごちゃごちゃして内容を把握しにくくなるので、関数を定義するようにパイプの内容をできるだけ独立性が高く、長さを短く一画面でおさめる方針で作成していくことにした。
Twitter のユーザ情報を取得
パイプ : Twitter.getUser
最初に Twitter のユーザ名を指定したら、プロフィールの画像を表示することを考える。
ユーザ情報を取得するには、Twitter API Wiki / Twitter REST API Method: users show によると、
id. The ID or screen name of a user.
- Example: http://twitter.com/users/show/12345.json or http://twitter.com/users/show/bob.xml
よって、
http://twitter.com/users/show/ユーザ名.json
によって JSON形式でユーザ情報を取得できる。
ユーザ名を与えると、上記の情報を取得するモジュールを作成。
XML や JSON を取得するには Sources > Fetch Data を利用。
There's more data on the web than just RSS and Atom feeds. This module can access and extract data from XML and JSON (Javascript Object Notation) data sources on the web.
(Fetch Data Module より)
JSON の情報からプロフィールの画像を生成
パイプ : Twitter.getUser.profileImg.toHtml
次に Twitter.getUser パイプからプロフィールの画像を表示するためにHTML の img タグを生成する。
JSON 形式で取得したユーザ情報の内 `profile_image_url’ が画像の URL を表わしている。先ほど作成した Twitter.getUser モジュールを My pipes より D&D。Sub-element モジュールを使って JSON の情報を取得する。
IMG タグでラップするには、Regex モジュールを使い、正規表現 (.*) で全体をグループ化。String Builder モジュールで後方参照し、動的に正規表現を生成する。
IMG タグを DIV タグでラップしてスタイルを適用
パイプ : Twitter profile image with float left
先ほどのモジュールと同様な方法で、Twitter.getUser.profileImg.toHtml の結果をラップする。
できれば、パイプ名からパイプを生成するモジュールがあれば、二つを共通化できるのだけれど。。
つぶやきとプロフィール画像を合わせる
パイプ : createTwitterPostWithUserImg
後は、最初に Filter backtweets by twitter user name (No Image) パイプで取得したフィードのアイテム (つぶやき) と、プロフィールの画像を合わせるパイプを作成する。
あれ？ここも前とほぼ同じだ。
最後に
パイプ : Filter backtweets by twitter username
Filter backtweets by twitter user name (No Image) と createTwitterPostWithUserImg のパイプをつなぐ。
Loop モジュール内で、createTwitterPostWithUserImg パイプを呼出している。この呼出しにおいて、item.description を渡しているが、最終的なフィードのアイテムの description は、呼出したパイプの結果と置き換えたいので、Loop モジュールの最後の assgin において、item.description を指定。これで上書きされたことになるようだ。
