Yahoo! Pipes講座の7回目。過去の講座はこちら。今日は宿題もあります。
- [Pipes] Yahoo! Pipesを勉強したい方へ
- [Pipes] 講座01（FetchFeed、Sort）
- [Pipes] 講座02（Text/URLInput、Yahoo!Search、Filter、Regex）
- [Pipes] 講座03（String/URLBuilder、FetchData、Rename）
- [Pipes] 講座04（MyPipe、Union、Unique）
- [Pipes] 講座05（ItemBuilder）
- [Pipes] 講座06（Loop）
講座01から06により、検索結果からiTunesリンクを取得するところまでPipeで実現できました。いよいよiTunesのWeb情報から必要情報を抜いてくるところです。
実はこの作業、Yahoo! Pipesで実用しようとすると複雑であり、更に取ってきた情報は文字化けしてします。複雑なのは置いておいても、文字化けは頂けない…。この課題を両方回避する為にAppHtmlでは「Dapper」というWebサービスを使ってます。
今回は、Yahoo! Pipesで使う為のDapper講座。Dapperの使い方を説明します。
Dapperとは何か？
「Dapper」は「Yahoo! Pipes」のようなマッシュアップツールです。「Webサイトのデータから必要な部分だけを抽出して利用する」そんな作業を支援する機能を備えています。Yahoo! Pipesと決定的に違うのは、抽出したい部分をマウスで指定できるところ。Yahoo! Pipesで同じことをしようとすると、複雑な正規表現の知識が必要になります。
Dapperで作成した結果は、様々な出力形式で出すことができます。XML、RSS、HTML、JSON等々。このあたりもYahoo! Pipesと似ています。
AppHtmlでは、全体の骨格（というか流れ）はYahoo! Pipesが制御し、適宜、HTML形式で出力されるDapperの結果を取り込み、取得したデータを使っていきます。実際にやってみるとYahoo! Pipesの難解さをカバーする位置付けとして、大変便利なサービスです。
Dapperアカウントの作成
DapperのWebサービスを使う為にはアカウントを作成する必要があります。DapperってYahoo!のサービスなんですね…。今、気付いた（；^ω^）
分かりにくいんですが、上記にアクセスすると右上に「Log In」があるんでクリック。
展開されるページの右側に「Create Acctount」があるんでクリック。
必要情報を入れて「Submit」する。
ログインできると上記のような表示になるはず。「Create a Dapp」でDapper
ベースとなるWebサイトの指定
Dapperの定義情報は、ステップbyステップで作成していきます。最初のステップは、ベースとなるWebサイトの指定です。今回は、iTunesのリンクを指定します。
http://itunes.apple.com/jp/app/textforce-dropbox-text-editing/id396444947/?mt=8
中央のボックスにベースとなるURLを入力、出力形式は最後に指定するのでデフォのまま。終わったら「Next Step」へと進みます。
Dapperのキャンバスの中に該当ページが表示されるはず。実はDapperは複数ページに跨り、遷移する情報もかき集めてくることができるんですが、今回は、見てるページの情報で十分なので1画面だけ使います。
「Add as Sample」を押すと「Page Added」となりページが登録されます。終わったら「Next Step」へ進みます。この時、以下ような警告メッセージが出てきます。
構わず「OK」で良いです。
抜き出したい情報の名前付け
次に、該当ページの中で、どのような情報を抽出したいのか、設定していきます。
キャンバスの中をマウスで移動すると背景オレンジで追従してくると思います。今回は、上記の「Textforce -Dropbox text editing」の部分をクリック。
すると下段に情報が落ちてきます。落ちてきた情報に、名前付けをするのが「Save Field」ボタン。好きな名称を付けることができます。
「title」と命名しました。「Save」を押します。
下段の右側（Content fields）の部分に「title」が加わりました。このようにして、必要情報をどんどん定義していきます。もう1回、別のデータで試してみましょう。
マウスで「Yutaka Yagiura」をクリック。必要情報以外が、オレンジになってしましました…。この時、取得したい場所以外のオレンジ部分をクリックすると情報が絞り込まれていきます。ひとつになるまで絞り込みます。何度でも試せます。
ひとつに絞り込みができました。
下段を見ると確かにデータがひとつです。「Save Field」します。
今度は「seller」と命名しました。
以上でふたつの情報が命名されたことになります。このようにして、必要情報をどんどん抜いていきます。但し、注意点がひとつ。実はこの作業をしてる時に結構、Dapper自体が固まるんです。固まったら最初からやり直し…。こればかりは仕方無し（；^ω^）
「seller」の項目で「Edit」を押すとメニューがでてきます。定義した情報の場所を再確認したり、名称変更、項目削除などができます。
少しだけ補足すると値を絞り込む時に、マウス操作だとどうもうまくいかない…。そんな時があるかもしれません。そういった時には、下段の「Clear」で情報を取り除いていくことも可能です。こちらもお試しあれ。
とりあえず、ふたつ項目が定義できたら「Next Step」へ。
結果の確認とDapperの保存
ここでプレビューがでてきます。確かに情報が取れてきていることを確認して下さい。
今回は項目がふたつだけなんで、すぐに確認できるはず。
確認を終えたら「Next Step」へ。
定義したDapper情報全体に名前を付けます。この名前は他ユーザーも含めてDapper内で一意じゃないとダメっぽいので注意です。私は「hiro45jp-test」と命名しました。終わったら、他の部分はデフォのまんまで良いので「Save」します。
そして最終の「Next Step」へ。
出力形式の指定
Dapper情報をどのように出力するのかを選びます。
「Choose a format…」から「HTML」を選択して「Go」を押す。
すると上記の情報が現れます。「HTML」とオレンジで記載されてる部分。この部分が、Yahoo! Pipesで使うURLになります。控えておきましょう。ちなみに、ブラウザ上でこのURLを入れると、シンプルなページが表示されるはず。
尚、出力形式は、RSSにしたり、JSONにしたり、色々とできますが、Yahoo! Pipesで最も抜きやすい形式は「HTML」だと思います。正規表現が単純で済むので（；^ω^）
以上、ここまでできたら閉じてOKです。
AppHtml用のDapperページ
これまで説明してきた手順と同じようにして、AppHtmlでは、iTunesの情報を取得する為のDapper定義を作っています。定義名は「iTunesInformation」です。
URLはこちら。生を見てもらった方が分かりやすいと思います。
項目名、値の順で綺麗なHTMLになってます。
DapperのURLをちょっと解析してみます。赤線の部分は、よく見るとiTunesリンクです。前にLinkshareリンクを作る為に変換（例えば「: → %3A」等）を噛ませましたが、同じような変換が、今回のケースにおいても掛かってることに気付きます。
AppHtmlでは、Yahoo! Pipesで、このURLを作りだし、Dapperで作られたページを呼び出す。で、シンプルなHTMLからデータを抜き出して使っているのです。
HTMLのソースを見るとシンプルさが伝わるかも…。
例えば「price」を取ってきたい場合、priceとtdタグに囲まれた部分を抽出してくれば、「￥230」という部分が抜き出せる。元々のiTunesのWebサイトから情報を抜くよりも、驚くほど楽に情報が取得できちゃいます。
講座08に向けた宿題
Yahoo! PipesでのDappter情報取得に関しては「講座08」で詳しくご紹介します。ということで、受講者の方々には初の宿題を出してみます。私が作ったDapper定義「iTunesInformation」と同じ情報をDapperで定義して下さい。
尚、最後の定義名ですが「iTunesInformation」だとエラーになるはず。Dapperで定義する定義名は、他ユーザーを含めて一意にする必要がありますので、別名保存でお願いします。以下、定義する項目です。15項目あります。
- 「appname」アプリ名が入る。
- 「desc」アプリ説明が入る。
- 「sellersite」販売元のサイトが入る。
- 「devsite」サポートサイトが入る。
- 「descnew」アプリ説明の下にあるバージョンUPの説明が入る。
- 「applink」アプリのiTunesリンクが入る。
- 「univ」ユニバーサルの文言が入る。
- 「pirce」アプリの値段が入る。
- 「category」アプリのカテゴリが入る。
- 「pubdate」アプリの更新日が入る。
- 「version」アプリのバージョンが入る。
- 「appsize」アプリの容量（サイズ）が入る。
- 「lang」アプリの対応言語が入る。
- 「seller」アプリの販売元が入る。
- 「mobeos」アプリの動作条件が入る。
作った後は、Dapperの出力形式を色々といじって遊んでみて下さい(´∀｀)
尚、気付かれた方がいるかもしれませんが、実はDapperではアイコンやスクショは扱ってません。わざと取得してません。アイコンやスクショは別手段で取得してます。このあたりは、課題があってそうしているのですが、今後、後述の講座で説明していきます。
あとがき…
やってみて感じるかもしれませんが、実はDapperはYahoo! Pipesよりも直感的で分かりやすいサービスです。但し、複雑なことはあんまりできないんで、Yahoo! Pipesをベースに作り込み、適宜、適材適所でDapperを使う方法が、個人的にはオススメです。
次回は、Dapper情報を取得する為の「URL作成」そして「取得したDapper情報のitemへの変換」を説明する予定です。いよいよ核心に迫ってきました。
こうやって欲しいとか要望があればTwitterやコメントにてご指摘下さい。今後のカリキュラムですが、またまた構成を入れ替えて以下のようになってます。
講座01（FetchFeed、Sort）講座02（Text/URLInput、Yahoo!Search、Filter、Regex）講座03（String/URLBuilder、FetchData、Rename）講座04（MyPipe、Union、Unique）講座05（ItemBuilder）講座06（Loop）講座07（Dapperの使い方）←今ココ- 講座08（Dapper情報の取得、FetchPage）
- 講座09（NumberInput、SimpleMath）
- 講座10（良く使う正規表現まとめ）
- 講座11（MyPipeの可読性の向上）
- 講座12（Javascriptとの連携）
講座08以降は、更に更に難度が上がります…。あしからず。
-
タグ: Bookmarklet, Dapper, Google, hiroスタイル, Yahoo!Pipes
[...] [Pipes] Yahoo! Pipes講座07（Dapperの使い方） | 普通のサラリーマンのiPhone日記 iTunesInformation [...]
[...] iPhoneに関する、はてなブックマーク新着情報です。 [Pipes] Yahoo! Pipes講座07（Dapperの使い方） | 普通のサラリーマンのiPhone日記 [...]
[...] Turn it on in Settings › Safari to view this website. [Pipes] Yahoo! Pipes講座07（Dapperの使い方） | 普通のサラリーマンのiPhone日記 1月 5th, 2011 @ 12:12 am › tyudon ↓ Leave a comment [Pipes] Yahoo [...]
[...] [Pipes] 講座07（Dapperの使い方） [...]
[...] [Pipes] 講座07（Dapperの使い方） [...]
[...] ◆ 普通のサラリーマンのiPhone日記 [Pipes] Yahoo! Pipes講座07（Dapperの使い方） [...]