残り3回。気合いでいきますよー。
今回は10回目。良く使う正規表現をまとめると共に講座09のようにiTunesから画像（＝アイコン）を取ってくるPipeを作ります。過去の講座は以下を参考にして下さい。
- [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）
- [Pipes] 講座07（Dapperの使い方）
- [Pipes] 講座08（Dapper情報の取得、FetchPage）
- [Pipes] 講座09（NumberInput、SimpleMath）
講座09までがしっかりと理解できていれば残り3回は復習のようなもんです。仕上がっていく楽しみと共に、これまでの講座を思い出しながら進めていきましょう。
講座10のテーマ
講座10では、これまでの講座、そして残りの講座の中で使う正規表現を振り返ってみることで、良く使う正規表現と使い道をまとめておこうと思ってます。まだ紹介してないPipeも含め、講座で作成する全Pipeは以下の通り。我ながら良く作ったもんだ…。
- Pipes: 講座01（Marge Feed）
- Pipes: 講座02（Yahoo! Search）
- Pipes: 講座03（Google API）
- Pipes: 講座04（iTunes Link）
- Pipes: 講座05（Linkshare Link）
- Pipes: 講座06（Loop）
- Pipes: 講座08（Dappter）
- Pipes: 講座09-sub（ScreenShots）
- Pipes: 講座09（ScreenShots）
- Pipes: 講座10（AppIcon）
- Pipes: 講座11（AppCheckPull）
- Pipes: 講座12（AppHtml）
上記のPipe群で使ってる「Regex」モジュールの表現を洗い出してまとめます。
そしてもう1点。
講座09でスクショをiTunes情報から直接取得したように、講座10ではアイコンをiTunes情報から直接取得してみます。スクショと比較すると1画像しか無いし、これまでのノウハウを活かせば、そう時間を掛けずにいけるはずです。
良く使う正規表現のまとめ
以下、これまで使ってきた「Regex」のReplace部分の正規表現です。他にも良く使うだろう正規表現もいくつか追記しておきます。
| Replace | 意味 |
|---|---|
| 「.」 | 任意の文字を表す |
| 「+」 | 1文字以上の連続を表す |
| 「*」 | 0文字以上の連続を表す |
| 「.*」 | 任意の文字の0文字以上の連続を表す |
| 「.+」 | 任意の文字の1文字以上の連続を表す |
| 「\*」 | 正規表現の予約語（例：*）を文字で扱う時に予約語の前に置く |
| 「^」 | 文字列の先頭を表す |
| 「$」 | 文字列の最後を表す |
| 「.*?”」 | 最短一致（次に最初に出てくる「”」まで）を表す |
たったこれだけ。最後の最短一致が若干難しいかな…。正規表現「.*」を使うと限りなく連続した文字をヒットしてくれて便利なんですけど、予想以上にマッチしちゃうのが困りどころ。そういったケースで「?」を使います。
例えば「alt=”iPhoneスクショ” class=”landscape”」という文字列があったとする。「alt=”.*”」とした場合、ヒットするのは「alt=”iPhoneスクショ” class=”landscape”」になります。理由は最長一致で探してるから。これを「alt=”.*?”」とすると最短一致で探すことになり「alt=”iPhoneスクショ”」のみヒットします。使い分けると便利です。
次に「Regex」のwithの後に出てくる「g s m i」の意味。これも重要です。
| Option | 意味 |
|---|---|
| 「g」 | 置換を繰り返し行う場合にチェック |
| 「s」 | 改行コード「\n」があろうと無視して1行として扱う |
| 「m」 | 改行コード「\n」があった場合は複数行として扱う |
| 「i」 | 英字の大文字、小文字を区別しない |
本講座では「g」と「s」を良く使います。
というのも、HTMLのソースには改行コード「\n」が含まれていることが多く「s」を付けないと最初の改行までしか置換してくれないから。改行コードを無視してHTMLソースの全体に対して置換をしたい場合は「s」と覚えておくと良いです。
またヒット件数が複数あった場合、ヒットした全てを置換する場合は「g」と入れます。あえて最初のヒットだけを置換することもあると思うので使い分けると良いです。
「m」は使ったことないです…。複数行扱いで置換することなんて今まで無かったし…。それと「i」も使ったことないです…。入れると大文字小文字を区別しなくなり、時に意図しないヒットをしちゃうこともあるんで蛇足かなと（；^ω^）
「m」と「i」を使うようなシーンに出会ってないというのが本音です。
以上で良く使う正規表現の話題は終わり。
iTunes情報からアイコンを抜き出す
ここからは違うトピック。講座09のようにiTunesのアイコンのHTMLを分析して法則を見極め、アイコン画像だけ抜くというPipeを作ってみます。
引っこ抜く対象であるiTunesの情報（HTMLソース）を見てみます。アイコン画像の位置ですが、講座09で説明したChromeの「要素の検証」やFirefoxのFirebugを使った「要素の調査」を使うと楽に見つけられるはず。分かった点は以下の点。
- 決まったタグ構成でアイコン部分は表現されてる
- DIVタグ「id=”left-stack”」属性が近くにある
- 上記DIVタグからAタグの終了までの間にアイコン画像のURLが入ってる
以上を踏まえてPipeを作っていきますヽ(´ー`)ﾉ
手順1（URLInput、ItemBuilder）
講座09と流れは一緒です。まずはiTunesのURLをitemに変換します。
ライブラリから「URL Input」「Item Builder」を選択し、配置します。
手順2（Loop、FetchPage）
この流れも講座09と一緒。但し、複数件ヒットすることが無いのでdelimiterやassignのall設定はしていません。シンプルにアイコン画像を1発で抜いてきます。
ライブラリから「Loop」「Fetch Page」を選択し、配置します。
Cut content fromは、法則に従い「<div id=”left-stack”>」を指定。toも法則に従い「</a>」を指定します。結果は1件しか返ってこないのでassignは「first」を選択。結果は「item.loop」に入るようにします。
手順3（Rename、TextInput、Regex）
抜いてきたHTMLの不要な部分を消してIMGタグに入ってるアイコンのURLを取得します。尚、iTunesのアイコン画像のファイル名ですが「175×175-75」になってるんですけど、画像が大きすぎるので「75×75-65」のサイズにファイル名を置換してます。
ライブラリから「Rename」「Text Input」「Regex」を選択し、配置します。
最初のRenameは、実は必要ないんです。descriptionに何か入れておけば「Run Pipe」時に結果が見れるってだけで書いてます。必要なければ抜いても問題無しです。
TextInputにはアイコン画像のファイル名を置換する際の名前を指定しておきます。
Regexでは最初にIMGタグ内のアイコンのURLだけを抜き、ファイル名を置換。そして「item.iconurl」に「item.loop.content」の値をコピーし、「item.loop」そのものは消す。そんなことをしてます。HTMLソースをいじる時には改行が含まれているリスクもあるので「s」チェックを忘れずに。
全般的に説明すっ飛ばしですみません。講座09までやってきた方々ならば分かるはず…と思い、省略して説明してます（；^ω^）以上でアイコンを抜くPipeが完成しました。
あとがき…
今回はこれまでの復習的な内容でした。ゆえに説明も省略気味…。すみません。
次回の講座11は、いよいよAppHtmlの心臓部の作成です。これまで作ってきたPipeを活用して一連の流れが完成します。尚、講座11を通じてYahoo! Pipesのバグというか文字化けの法則についても述べたいと思ってます。
全般を通じて、こうやって欲しいとか要望があれば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との連携）
次の講座11がもっともボリュームのあるPipeになります。お楽しみにヽ(´ー`)ﾉ
-
タグ: Bookmarklet, Dapper, Google, hiroスタイル, Yahoo!Pipes
