2012年6月30日土曜日

Yahoo! Pipes の XPath Fetch Page でフィードを出力してないサイトからRSS を配信する (2)

Yahoo! Pipes の XPath Fetch Page でフィードを出力してないサイトからRSS を配信する のつづき

1. パイプをどのサイトでも使えるように変更する

前回、フィードを配信していない「特定のサイト」から RSS を配信した。

今回は、上記のパイプを、どのサイトでも使えるように変更した。

SnapCrab_NoName_2012-6-30_12-7-56_No-00

例えば、Yahoo!モバゲー の場合、「○○○○ さんの日記」のページを対象としてパイプを実行する。パイプのフィールドに入力する値は以下の通り。

ブログの各記事へリンクを含むページの URL http://yahoo-mbga.jp/XXXXXX/diary
ブログのタイトル一覧を取得するXPath //li[@class="lv2-lay"]/a
ブログの内容を取得するXPath //li[@class="blk4-lay"]

GREE の場合、「日記」のページを対象としてパイプを実行する。

ブログの各記事へリンクを含むページの URL http://gree.jp/XXXXXX/blog
ブログのタイトル一覧を取得するXPath //h1[@class="title"]/a
ブログの内容を取得するXPath //*[@class="maincol"]//*[@class="content"]
記事から削除する内容(正規表現) <div class="footlink">.*?</div>

Amebaなう の場合は、以下の通り。

ブログの各記事へリンクを含むページの URL http://now.ameba.jp/XXXXXX/
ブログのタイトル一覧を取得するXPath //span[@class="status"]/a
ブログの内容を取得するXPath //li[@class="now"]//p[@class="content"]
記事から削除する内容(正規表現) <span class="status">.*?</span>

以下、作成手順を述べる。

 

2. モジュールを独立させる

SnapCrab_NoName_2012-6-29_12-1-22_No-00最初に、ウェブページから、各記事のタイトルと URL を含むパイプを独立させる。

前回作成したパイプのソースを開き、Save a copy により、新しいパイプを作成する。

Loop モジュールを削除し、Rename モジュールから Pipe Output へパイプを繋ぐ。

 

ユーザからの入力を受け付ける Input モジュール

対象となるブログの URL と、各記事の URL とタイトルを指定するための XPath をユーザが指定できるように変更する。

  • User Input >
    • URL Input モジュール
    • Text Input モジュール

を配置する。

Input 系のモジュールの

  • Name フィールドは、作成したパイプのフォームのパラメータ名となる。
  • Prompt は、フォームにおけるフィールドのラベル名となる。
  • Position は、フォームにおけるフィールドが表示される順番を表す。

次に、Input モジュールから、XPath Fetch Page モジュールのフィールドにパイプを繋げる。

SnapCrab_NoName_2012-6-30_1-17-12_No-00

独立させたパイプは、以下のもの。

 

3. 作成したモジュールを配置する

先ほどと同じく、前回作成したパイプのソースを開き、Save a copy により、新しいパイプを作成する。

  • XPath Fetch Page モジュール
  • Rename モジュール

を削除し、上記で作成したモジュールと置きかえる。

自分で作成したパイプは、

  • My pipes > ブログ記事のタイトルと URL の一覧を取得する

より配置する。

このとき、ユーザからの入力を受け入れるために、User Input より、URL Input, Text Input モジュールを置く。

SnapCrab_NoName_2012-6-30_1-34-46_No-00

Loop モジュールで使う、XPath もユーザの入力を受け取るようにする。

SnapCrab_NoName_2012-6-30_1-52-53_No-00

 

4. Regex モジュールで不必要な文字を削除する

上記に加えて、各記事の内容から、特定の文字列を削除するために Regex モジュールを追加する。この際、正規表現で削除対象を指定する。

Operator > Regex を配置し、Loop モジュールの出力を Regex モジュールに入力する。 User Inputs より、Text Input を配置し、Regex モジュールの replace に繋ぐ。

SnapCrab_NoName_2012-6-30_1-57-11_No-00

これで出来上がり。

SnapCrab_NoName_2012-6-30_23-55-56_No-00

2012年6月29日金曜日

メガネの鼻あてを「3D鼻パッド」に交換してもらったら、痛みがなくなった

1. 鼻あてのフレームが曲がり、跡がついた

http://www.jins-jp.com/

JINS via kwout

メガネは JINS で購入している。

先日、メガネをぶつけ、鼻あて部分のフレームが曲がってしまった。そのまま放置していたら、鼻の横にくっきりと跡がつき、触れるだけで痛みを感じる。自分で、曲がったフレームを調整したけれど、どうしても上手く元に戻せない。

自分で直すのは諦め、販売店で直してもらうことにした。

 

2. 3D鼻パッドへの交換は無料だった

久しぶりに店に展示してあるメガネを手にとって見ると、どのメガネも鼻あての形が変わっていた。

自分が使っている鼻あては、以下と同じ形のもの。

新しい鼻あては、「3D鼻パッド」と呼ばれる。

Titan frame|JINS - 眼鏡(メガネ・めがね) によると、

日本人の鼻の形を研究して設計した鼻パッド。端が沿った形は、跡が付きにくくなるように計算されたもの。

http://www.jins-jp.com/titanframe/

Titan frame|JINS - 眼鏡(メガネ・めがね) via kwout

「3D鼻パッド」がついているメガネをかけてみると、鼻あてが当たる部分の圧迫感が少ない。パッドを触ると、柔らかくて、むにょっと少し曲がる。

お店の人に「3D鼻パッド」のかけ心地について尋ねたら、

男性の鼻の場合、大体この鼻あてでフィットします。ただし、鼻の形によっては、このパッドでも、面ではなく点で当たってしまうこともあります。

女性でこの鼻あてが合わない場合、以前の鼻あてと同じ形で、シリコンのものを使います。

とのことだった。

試しに、3D鼻パッドとシリコンのパッドを試したら、どちらも今使っているものより圧迫感が少なかった。ただ、慣れていなかったせいか、鼻あてが当たる部分がベタッとした感触がして気になった。ただし、この感触には翌日までに慣れた。

うれしいことに、鼻あての交換は無料だった。 ^^

 

3. 丁寧な対応をしてくれる店員さんを探す

今回、鼻あてを支えるフレームの曲がりも直してもらった。難しいのは、どの店員さんが丁寧にやってくれるか見極めること。

昔、個人店でメガネを購入していたとき、店主のおじさんは「そこまでしてもらわなくてもいいのに。。」というくらい、完璧にフィットするまで何度もフレームを調整してくれた。お陰でかけ心地に不満を抱いたことはない。

これに対し、JINS で購入したとき、鼻あての部分を調整するアバウトな扱いに驚いた。なぜなら、自分の目の前で、フレームをギュッと押して調整していたからだ。今のメガネは、フレームが金属疲労しにくい素材を使っているのだろうか?

今回は、お願いした店員さんが良かったのか、時間をかけて丁寧に直してくれた。

田舎にある店舗であるためか、接客も店員によってバラつきがある。人を見て、修理をお願いするのが良さげ。

 

4. 青色の光を遮るレンズ

ところで、最近、JINS の宣伝でよく見るのは、PC で作業するときにかける JINS PC。青色の光をカットしてくれるメガネ。

確かに JINS PC で周囲を見渡してみると、眩しさが和らぐ。

同じように、青色の光をカットしているメガネを販売している、別の眼鏡店で JINS PC について尋ねてみた。この店は、価格帯がより高い遮光レンズを扱っている。店員さんの話を総合すると、やはり JINS PC は値段相応のものらしい。

高い性能の遮光レンズは、コントラストを保ちながら、青色だけをしっかりと遮る。健康の人の目なら、JINS PC で十分のような気がした。しかし、羞明などの眼の障害を持っている人には、あまり効果は期待できないようだ。

Yahoo! Pipes の XPath Fetch Page でフィードを出力してないサイトからRSS を配信する

1. Fetch Page から XPATH Fetch Page モジュールへ

http://pipes.yahoo.com/pipes/

Pipes via kwout

Yahoo! Pipes で、フィードを出力してないサイトから RSS を配信するために、Fetch Page モジュールを利用してきた。Fetch Page モジュールは、指定した URL のウェブページを取得するためのモジュール。

現在では、Fetch Page モジュールは、非推奨 (deprecated) となり、代わりに

が登場した。

Fetch Page モジュールは、文字列によりフィードにしたいウェブページの対象を指定した。これに対して、XPATH Fetch Page モジュールは、XPath を利用して指定する。

New Module: XPATH Fetch Page | Yahoo! Pipes Blog によると、

To use the XPATH Fetch Page module, first enter the URL of the site you want. By default, the module will output the DOM elements as items in the preview pane. You can optionally use the “Emit items as string” checkbox if you need the html as a string.

 

2. XPath について

XPathの使い方は、以下を参照

 

3. パイプの例

例えば、Yahoo!モバゲーの日記一覧から、RSS を配信させたいとする。

SnapCrab_NoName_2012-6-27_23-31-48_No-00

作成したパイプは、

全体の構成は下図のとおり。

SnapCrab_NoName_2012-6-29_12-1-22_No-00

以下、作成手順を述べる。

 

4. XPath Fetch Page モジュール

Pipes: Rewire the web にアクセして、Create Pipe ボタンを押す。

最初に、Source > XPath Fetch Page モジュールを配置する。

  1. URL フィールドには、対象となるウェブページの URL を入力する。
  2. Extract using XPath フィールドには、各記事の URL を含んだ記事タイトルを指定する XPath を入力する。
    • //li[@class="lv2-lay"]/a

SnapCrab_NoName_2012-6-27_23-34-25_No-00

 

5. Rename モジュール

作成した XPath Fetch Page モジュールをクリックして選択すると、以下のような出力がされる。

SnapCrab_NoName_2012-6-28_14-45-9_No-00

href は、記事の URL を表す。 content は、記事のタイトルを表す。

この出力を RSS に変換するには、

  • href ⇒ link
  • content ⇒ title

のように変更したい。

RSS(RDF Site Summary)によるサイト情報の要約と公開 によると、

SS 1.0はサイトの情報を簡便に伝えられるよう、次のような簡単な基本構造を持ちます。

http://www.kanzaki.com/docs/sw/rss.html#construct

RSS(RDF Site Summary)によるサイト情報の要約と公開 via kwout

出力を変換するために、Operator > Rename モジュールを配置し、XPath Fetch Page の出力を入力とする。

Rename モジュールのフィールドには、以下のように設定する。

  • item.href ⇒ Rename, link
  • item.content ⇒ Rename, title

SnapCrab_NoName_2012-6-29_1-56-4_No-00

item.href, item.content という値は、Rename モジュールへ入力する前の XPath Fetch Page の出力を見て判断する。(フィールドには、href, content を入力すると、自動的に item. が付けられる。)

Rename モジュールを通すことにより、以下のような出力となる。

SnapCrab_NoName_2012-6-29_2-4-23_No-00

 

6. Loop モジュール

ここまでの操作により、各記事の URL が取得できた。次に、この情報を利用して、記事の内容を取得する。

方法は、Oprator > Loop モジュールを使い、取得した各 URL ごとに、再び Source > XPath Fetch Page モジュールで内容を取得する。

パイプの配置は、Loop モジュールの中に XPath Fetch Page モジュールを置く。

XPath Fetch Page モジュールに設定する値は、

  • URL: item.link
  • Extract using XPath: //li[@class="blk4-lay"]
  • Emit item as String にチェックをつける。

Loop モジュールの出力は、RSS の構造に沿うために、

  • assgin all results to item.description

と設定した。

SnapCrab_NoName_2012-6-29_2-6-57_No-00

これにより、Loop モジュールの出力が以下のようになる。

SnapCrab_NoName_2012-6-29_2-19-18_No-00

後は、このパイプを保存し、実行する。

Yahoo! Pipes の XPath Fetch Page でフィードを出力してないサイトからRSS を配信する (2) つづく…

2012年6月28日木曜日

XPath による要素の指定

1. XPath とは

XML Path Language – Wikipedia とは、

XML Path LanguageXPath; XMLパス言語) は、マークアップ言語 XML に準拠した文書の特定の部分を指定する言語構文である。

例えば、簡単な XPath の指定方法は、

//a

これにより、ウェブページ中の全てのアンカー要素を指定できる。

New Module: XPATH Fetch Page | Yahoo! Pipes Blog によると、

For example, if I want all the links in the page I can simply use “//a” to grab all links. If I want all the images in the html I can do “//img”.

XPath の要素の指定を確認には、Firefox のアドオンを用いると良い。

 

2. XPath でよく使う要素の指定方法

上記の例における XPath の

//

は、子孫要素を示す。要素間の直接の親子関係を超えて、要素を指定するために利用する。

指定する要素を絞り込むためには「述語」を使う。例えば、class 属性が hoge である要素を取得するには、

//*[@class=”hoge”]

John Resig - XPath and CSS Selectors には、XPath と CSS による要素を指定する簡単な例が挙げられている。

Goal CSS 3 XPath
All Elements * //*
All P Elements p //p
All Child Elements p > * //p/*
Element By ID #foo //*[@id='foo']
Element By Class .foo //*[contains(@class,'foo')] 1
Element With Attribute *[title] //*[@title]
First Child of All P p > *:first-child //p/*[0]
All P with an A child Not possible //p[a]
Next Element p + * //p/following-sibling::*[0]

(via New Module: XPATH Fetch Page | Yahoo! Pipes Blog

とりえあず、上記を把握しておけば、ある程度 XPath で指定できるようになる。

 

関連記事

Firefox で XPath により要素を指定する - Firebug と FirePath を使って

1. アドオン Firebug と FirePath をインストールする

Firefox で XPath により要素を指定したい。

XML Path Language – Wikipedia とは、

XML Path LanguageXPath; XMLパス言語) は、マークアップ言語 XML に準拠した文書の特定の部分を指定する言語構文である。

SnapCrab_No-0692予め Firefox に、以下2つのアドオンをインストールしておく。
  1. Firebug
  2. FirePath

 

2. Firebug で対象要素を指定する

例えば、 Yahoo!モバゲーの日記一覧 において、記事タイトルのアンカー要素を XPath で指定する。

マウスポインタを、対象要素の上に置き、

  • 右クリック > Firebug で要素を調査

を選択する。

より効率的に対象を選択するには、

  1. マウスポインタを対象要素の上に置き、
  2. Ctrl + Shift + C を押し、
  3. マウスをクリックするか、Enter キーを押す。

このとき、Ctrl + Shift を、左小指で2つのキーを押さえると効率的に作業を行える。

(ショートカットキーは、Firefox ボタン > Web 開発 > Firebug > ショートカットのカスタマイズ を参照。はてなブックマーク のアドオンをインストールしている場合、コメントを表示するショートカットキーを解除し、Firefox を再起動する。)

SnapCrab_NoName_2012-6-27_23-45-11_No-00

Firebug の HTML タブを確認すると、この例の場合、対象要素を、親要素の class 属性を利用して指定できそうなことを推測できる。

SnapCrab_NoName_2012-6-28_1-31-31_No-00

 

3. FirePath で XPath を指定する

次に、対象の要素を XPath で指定する。

  1. Firebug の FirePath タブをクリックし
  2. XPath フィールドに、以下の XPath を入力して、Enter キーを押す。

//*[@class="lv2-lay"]/a

これにより、XPath の指定した要素が点線で囲まれる。

SnapCrab_NoName_2012-6-28_0-25-12_No-00

目的の対象要素以外の要素が点線で囲まれていなので、上記の XPath で良さそうなことが分かる。