アメブロの「PR」投稿を非表示＠jQuery || mootools

アメブロ（Amebaブログ）のfeedを取得して別のサイトに表示しようとすると何件かに一件「PR」という広告記事が混在します。これを表示させたくないという依頼が多くはないまでも、なんだかんだで一年に何回かあるので備忘録として残しておきます。

これまではYahoo! Pipesを使って対応してましたが、Yahoo!といえどもいつ何時このサービスを終了するかわかりません。

ということでjQueryを使った対応です。

これならYahoo! Pipesのような外部APIサービスに頼らず、なおかつかなり手軽に使えます。指定した要素を要素ごと削除（remove）するので、SEO（Googleの検索エンジン）に対してはどうなのかという部分がありますが、ここではそれは無視します。（問題というほどの捉え方はされないのではないかと思います）

まずはjQuery本体を読み込みます。apiサービスのものでも、ソースファイルへのリンクでも、またバージョンもお好みというか必要なものを選択してください。

jQuery本体を読み込む

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

jQueryのremove()メソッドを使用する

アメブロの「PR:」文字列を含む投稿を要素ごと削除するためにjQueryのスクリプトを記述します。

<script type="text/javascript">
$(function() {
        // .newsEntryに文字列「PR:」を含むものは中身を空にする
        $(".newsEntry:contains('PR:')").remove();
});
</script>

これで完了です。htmlソース上には存在しますが、jQueryのremove()メソッドの実行でユーザ側（Webブラウザ上）では取り除かれています。

これで完了なんですが、この記事のタイトルになぜかついている「mootools」との併用についても一緒に書き残しておきます。mootoolsを使用していない場合は、ここから先は読む必要はありません。

たまたまこの対応をした際、既存サイトでmootoolsを使用されていて、そのコンフリクト対策も一緒にしたので、そのことについても一緒に残しておきます。

mootoolsとjQueryを一緒に使うためのライブラリの読み込み順序

mootoolsを自分は使ったことがないので、jQueryのreomove()のようなことが出来るのかわからず、調べる時間も許されていなかったので、mootoolsよりはちょっとでも扱ったことのあるjQueryでの対応となったのですが、どちらもJavaScriptライブラリで、ただ一緒に使うとコンフリクトを起こして望む結果が得られなくなります。（この時は既存のmootoolsを使用したスライドショーが動かなくなりました）

本来なら使用するライブラリをどちらかに決めるべきですが、今回は諸事情あったため、混在させるという妥協点に落ち着きました。コンフリクトの解消には、ライブラリの読み込みの順番に配慮すればいいようです。具体的には

jQuery
mootools
jQuery.noConflict();
jQueryのメソッド

という順番で以下のように記述しました。

<script language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
jQuery.noConflict();
-->
</script>
<script type="text/javascript" src="js/mootools.v1.11.js"></script>
<script type="text/javascript">
$(function() {
        // .newsEntryに文字列「PR:」を含むものは中身を空にする
        $(".newsEntry:contains('PR:')").remove();
});
</script>

そして最後にjQueryの省略記法の「$」の部分を「jQuery」に書き換えます。（これをしないとjQueryが機能しません）

<script language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
jQuery.noConflict();
-->
</script>
<script type="text/javascript" src="js/mootools.v1.11.js"></script>
<script type="text/javascript">
jQuery(function() {
        // .newsEntryに文字列「PR:」を含むものは中身を空にする
        jQuery(".newsEntry:contains('PR:')").remove();
});
</script>