ウェブ、ショウジン

外部のページに読み込んだアメブロの記事一覧から文字列PRを含む広告をなくす

2012-1-18
Category
jQuery Web技術

アメブロに限りませんが、feedをパースして外部のサイトで表示したりする場合、そのfeed内に広告も入ってきてしまい、記事一覧を表示したときにこの広告も記事のひとつとして表示されてしまうことがあります。

お客さんでこの広告部分は記事一覧に表示させたくないというわがままな(そもそも無料でそれを使う時点でそれは了承済のはずで)依頼があったので残しておきます。またどっかでありそうなんで。

自分でパッと思いつくやり方だと、jQueryを使う方法とYahoo! Pipesがあります。

jQueryを使う場合

jQueryを使うので、jQuery本体を先にhead内に読み込んでおきます。(この例ではGoogle APIを利用)

<script language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js" type="text/javascript"></script>

特定の文字列(PR:)を含む要素を操作するのでjQueryの:containsフィルタを使って要素を選択し、この要素の内容をemptyメソッドで空(非表示)にしてみようと思います。(他にもtextメソッドやhtmlメソッドでも同様のことはできるはず)

emptyメソッドは指定した要素の内容を空にするメソッドで、たとえばdiv#hogeの内容をemptyメソッドで操作するとdiv#hogeの内容が空になり、このdiv#hoge自体は中身が空のまま残っています。

アメブロの記事をパースして読み込んでいる部分のxhtmlソースは#feedで、一件一件の記事タイトルをこの中のli要素に内包しているのでセレクタを#feed liとして、これにフィルタ:containsを適用して以下のように記述します。

<script type="text/javascript">
$(function() {
	// #feedの子要素liに文字列「PR:」を含むものは、そのli要素の中身を空にする
	$("#feed li:contains('PR:')").empty();
});
</script>

最近やっとjQueryをいじりはじめて、その一環でブラウザのコンソール(FirefoxのFirebugとかChromeのDeveloper Toolsとかの)にも慣れはじめてきたので、ここは実ファイルではなく、先にChromeのConsole上で確認してみることにします。

console1

Chromeでターゲットとなるページを開き、command+option+i(OSXの場合)でDeveloper Toolsを起動させてConsoleパネルに前述のコードを入力して実行。

console2

望む結果が得られました。(最近この操作を覚えたので、じつは今回もこれがやりたかったことの半分くらいだったりしますが)

確認もできたということで、実ファイルのほうでも同様にやってみます。

がしかーし!!!

なぜか実際にファイルを編集してそれをサイトの該当ページに反映させても、Consoleで得られた結果のようにはならず、なぜ、ほわい?

#feedに対しては操作が届くのですが、この子要素に対しての操作が効きません。

このアメブロの記事をパースして表示というのは知らない前任の方がやっていて、自分がよく知らない(GoogleのAPIかなんか)ものだったのですが、もしかしてこのあたりが関係しているのかも。10分くらい格闘しましたが、そんなに時間をかけてもいられないので、なんか悔しいですが今回はjQueryを使ったやり方は見送ります。

Yahoo! Pipesを使ったやり方

http://pipes.yahoo.com/

Yahoo! Pipesは、いろんなWebサービスを組み合わせてマッシュアップというやつをする、これまたWebサービスです。組み合わせて得られたものをRSSやJSON、KMLとか、いろいろな形式で出力して利用できます。

この「組み合わせる」ときにいろいろ工夫ができて、今回はフィルタを使って文字列「PR:」を含む記事をブロックした上で記事一覧を取得することにします。

*Yahoo! Pipesを使って過去にしたことはYahoo! pipesとMagpieRSSを使って複数Feedをまとめて表示なんかもあります。

アカウントを取得してログイン〜Pipeを作成するあたりの詳細は前述の記事を参照することにして、特定の文字列を含む記事をブロックするには左側にあるOperatorsメニューからFilterを画面にドラッグして利用します。キャプチャ画像にあるように、Fetch Feedに取得したいアメブロのFeed URLを入力して、これとFilterモジュールをつなげます。

Filterモジュールは「Block items that match all of the following」にして、下のRulesでは「item.title Contains PR:」とします。

最後にPipe Outputモジュールに繋いで完了。

pipes1

この段階でもウィンドウ下部で出力の結果をDebuggerで確認できます。

設定の完了したこのPipeをウィンドウ上部のSaveボタンで名前をつけて保存したら、Back to My Pipesというリンク文字列をクリックして自分が作成したPipe一覧画面に行き、今保存したPipe名をクリック。

遷移先画面に並んでいる各ボタン(MY YAHOO!やGoogleやRSSやJSON等々)の中からGet as RSSをクリックすると、作成したPipeで得られたRSSのFeedがブラウザで開くので、このRSSのFeed URLをコピーして、前述のパーサーのファイル内にあるRSS FeedのURLを記述する部分にペースト。

今度はクライアント側ではなくて、パースするFeedのほうですでにフィルタリングされているので問題なく望む結果(文字列PR:を含む記事は省く)が得られました。

以上です。

Categories

Tag Cloud

AdMob Android Apache centos CodeIgniter EC-CUBE facebookアプリ facebookページ feed Firefox Flash google googleanalytics htaccess iPad iPhone JavaScript lamp mobile nginx ogp pear php plugin rollover rss sendmail setting smarty ssh Titanium Mobile Titanium Studio tutorial ubuntu vim VirtualBox vmware vps Windows WordPress xampp youtube さくらインターネット アクセス解析 カスタム投稿