PCで遊んだ日々の備忘録

Making PC and Customization PC

Firefox リーダービューで作る広告フィルター

最近ウェブサイトの広告ギミックが増えていると思いませんか。例えばページを開いた時や記事を読み進んでスクロールした時などいきなり視界を遮る広告が立ち上がってきたりサイドペインで動き続けるアニメーションなど。

表示された広告はいちいち閉じなければならないしアニメーションに至っては視界の端っこでチラチラ動いているので気が散って肝心の記事本文がとても読み辛いです。

ウェブブラウザにこういった類の広告をブロックするアドオンをインストールしても完全には対処できません。

その結果どうしても読みたい記事がある場合は我慢するかあるいはウェブブラウザの「スタイルシートを使わない」を使って下の画像のように装飾と広告を読込まないようにするしかありません。

 

上の画像は Firefoxのスクリーンショットですが Vivaldi , Chromium , Midoriのメニューの中に「スタイルシートを使わない」が見あたりません。とうやらWebKit系のブラウザには用意されていないようですね。

そして今回これらの広告ギミックやアニメーションに対処すべく Firefox 49に実装されているリーダービューとアドオンを組合わせた広告フィルターを設定してみました。(2016/10)

 

追記

2017年5月
  • Windows 7 - Firefox でスクリーンリーダーがサポートされていない事を確認しました。
  • Windows 10 - Firefox でスクリーンリーダー日本語読上げ↓がサポートされている事を確認しました。
2017年12月
  • 当ページに掲載しているアドオン「Open in Reader View」は下の画像(fig1)のように Firefox Quantum 58.0 以降に対応しています。57.0 には対応していません(fig2)のでご注意を。

Firefox Quantum 58.0b8(beta版)の画像

fig1. 58.0 に対応している

CPU負荷実行中のXSensors , Conky , 端末の画像

fig2. 57.0に対応していない

 

リーダービューとアドオン導入

リーダービューとは

リーダービューとはホームページの装飾と広告を消して読み込む機能で、上述の「スタイルシートを使わない」との大きな違いは記事や画像のレイアウトを整えて表示することです。

このリーダービューはデフォルトでバージョン49以降の Firefoxに組込まれています(fig1)メニューバーからリーダービューをクリックするかアドレスバー右端のアイコン(赤丸)をクリックします。

付帯機能として文字のサイズやスタイル、文字と背景のハイライト、文章の改行位置を変更する等の書体コントロールとスクリーンリーダー(音声読上げ)があります(fig2,3)

Firefoxのリーダービューの画像

fig.1 リーダービュー

Firefoxのリーダービューが適用された画像1

fig.2 リーダービューON

Firefoxのリーダービューが適用された画像2

fig.3 ハイライト

 

ただし、リーダービューは全てのサイトで使えるわけではなくFirefoxがソースコードなどから判断して適用するようです。Firefoxのアドレスバー右端にアイコン(fig1赤丸)が表示されるページがその対象になります。

当サイトにおいてもページによってリーダービューが適用されたりされなかったりでその判定基準はよく分かりませんが広告の多いサイトで適用されるのは間違いないようです。

アドオンを導入する

が、しかし任意のサイトで自由に使いたいのが人情ですよね。そういう時はFirefoxアドオンの「Open in Reader View」を導入する事で解決します。

Firefoxのアドオンマネージャから Open in Reader View をインストール(fig4)した後、任意のページ上でマウス右クリックしてコンテキストメニューからリーダービューを実行できるようになります。(fig5,6)

Firefoxアドオンインストールの画像

fig.4 アドオン

Firefoxのリーダービューが適用される前の画像

fig.5 コンテキストメニュー

Firefoxのリーダービューが適用された画像

fig.6 リーダービューON

 

リーダービューの付帯機能

リーダービューでページを読み込むとウィンドウ左側に付帯機能の設定ボタンが表示されます(fig7)

書体コントロール - fig8
  1. フォントタイプ|ゴシック体・明朝体
  2. 拡大縮小ズーム
  3. 行幅伸縮|文章の改行位置が変化する
  4. 行間距離伸縮
  5. フォント色と背景色のハイライト|ライト・ダーク・セピアの3色
スクリーンリーダー(音声読上げ)- fig9

スクリーンリーダーで読上げられる言語は既定の英語のみです。日本語のページでは数字と英単語、ローマ字のみ読上げられます。

リーダービュー付帯機能の画像

fig.7 付帯機能

書体コントロールの画像

fig.8 書体コントロール

スクリーンリーダーの画像

fig.9 スクリーンリーダー

スクリーンリーダーの日本語対応|2017年5月

スクリーンリーダーの日本語読上げが Windows 10 の下記バージョンでサポートされていました。

下の画像は Firefoxのスクリーンリーダーによる音声読上げ中のスクリーンショットです。

 
  • エディション|Windows 10 Insider Preview Pro 64-bit
  • バージョン|1703
  • OSビルド|15063.0
  • 音声合成エンジン|Microsoft Haruka
  • ウェブブラウザ|Firefox 53.02 64-bit
  • ノートPC|HP EliteBook 2560P

いかにも合成音声と言った感じですがちゃんと聞き取れます。パソコンによる差はあるかもしれませんが思ったより音質もよいと感じました。

ただし、語彙はそれほど多くないようです。例えば GBはギガバイトと読上げるが GiB(ギビバイト)をギブ、Ubuntu(ウブントゥ)をユーブントゥと読上げていました。

その他の設定

アドオンマネージャの拡張機能タブ Open in Reader View の詳細または設定をひらいて

Display ’Switch to reader view’ in the right click context menu ☑ 
 Current Tab(現在のタブで開く)

Display ’Open in reader view’ in the right click context menu ☑ 
 New Tab(新しいタブで開く)

Open new tab adjacent to current tab ☑ 
 When opening a new tab, use related to current attribute.

のように3か所にチェックが入っていればOKです。

以上でFirefox リーダービューとアドオンを組合わせた広告フィルターの設定完了です。今回導入したアドオン|Open in Reader View 0.1.3

リーダービューとアドオンを組合わせた広告フィルターの使用例

以下に記している使用例は管理人がウェブブラウジング中に偶然出くわしたページです。

フィルターの使用例 1

このページは、いわゆるインタースティシャルなウェブデザインになっています。

ページ全体が表示されてから 1~2秒後に画面全体がログインレイヤーで覆われ、「後で」をクリックしても画面の 1/3が遮られたままログインレイヤーは閉じられることはありません。

フィルター使用例 1のフィルター適用前の画像

インタースティシャルなページ

フィルター使用例 1のフィルター適用の画像

フィルターを適用する

フィルター使用例 1のフィルター適用後の画像

フィルター適用後

このような場合、ページ上でマウス右クリックしてコンテキストメニューから次のいずれかのリーダービューを選択します。

Open in Reader View 新しいウインドウで開く
Switch to Reader View 現在のウインドウで開く
 

これでフィルターが適用されインタースティシャルがキャンセルされます。

「インタースティシャル」で検索してみて下さい。いかに Googleに嫌われているかがよく分かると思います。

フィルターの使用例 2

このページはユーザーエージェント(ウェブブラウザ)の種類を限定し特定のブラウザ以外に本文を表示させないようになっています。このようなことをする目的は何なのでしょうか?

フィルター使用例 2のフィルター適用前の画像

インタースティシャルなページ

フィルター使用例 2のフィルター適用の画像

フィルターを適用する

フィルター使用例 2のフィルター適用後の画像

フィルター適用後

このような場合でも例1と同様にページ上でマウス右クリックしてコンテキストメニューから次のいずれかのリーダービューを選択します。

Open in Reader View 新しいウインドウで開く
Switch to Reader View 現在のウインドウで開く
 

これでフィルターが適用されページ本文が表示されます。

補足

Firefoxにはユーザーエージェントを偽装するアドオンがあるので、Edgeでも IEでも、はたまた Chrome、Safari、Opera、iOS、Android 等々どうにでもなりますよ。

例えば「User-Agent Switche」というアドオンは 26種類のユーザーエージェントを選択(偽装)できます。

通常アクセス制限をかけるのであればサーバーサイドプログラム(例えばダイジェスト認証など)で制限するのですが...。

フィルターの使用例 3(2018年7月加筆)

そのページはコンテンツ本文のテキストをマウス操作でコピー出来ないように仕込んでありました。これもまた何が目的なのか不明です。

どのような状況なのか分かりやすいように以下に再現してみたので試しにコピーしてみてください。

---- マウス機能無効化再現テストここから ----

この文章のテキストは試験的にマウス左クリックから選択出来ないようにしています

---- マウス機能無効化再現テストここまで ----

どうでしょう、テキストが選択出来ないと思います。そしてもう1つ、キーボードで Ctrl+A キーを押してみてください。

この行を除いたテキストやテキストリンクが下の画像のようにオレンジ色(Widowsは青色)にハイライトするはずです。スマートフォンの方はデスクトップパソコンで試してみてください。

 

これをやられると下の画像のようなマウス左クリックでテキストを選択して右クリックから Google検索が出来なくなります。この機能は主要なウェブラウザー全てに備わっています。

 

つまりこれはユーザーエクスペリエンス(ユーザーの利便性や使い勝手)を著しく損なうことになり、ブロガーならいざ知らずウェブマスターが行ったとすればかなり恥ずかしい行為です。

このようなページでもリンク以外にマウスが効くエリアがあるのでマウス右クリックしてコンテキストメニューから次のいずれかのリーダービューを選択します。

Open in Reader View 新しいウインドウで開く
Switch to Reader View 現在のウインドウで開く
 

これでフィルターが適用されマウス機能無効がキャンセルされるのでマウス機能無効化テスト内の文章が選択できるようになります。

補足

下に示すのがマウスの機能を無効にしてしまうコードです。

HTML
<div oncontextmenu="return false" onMouseDown="return false;" style="-moz-user-select: none; -khtml-user-select: none; user-select: none;-webkit-touch-callout:none; -webkit-user-select:none;"> 
  <p>マウスの機能を無効にしてしまうコード</p>
</div>
 

当ページ上で右クリックしてコンテキストメニューから ページのソースを表示 を選択すれば当ページのソースコードが見れます。

これをやっていたサイトは 1ページの記事本文全てをマウス機能無効にして、広告と SNSと自サイトのメニューリンクだけマウスが機能するようになっていました。

このパートの冒頭に目的不明と書きましたが、訪れたユーザーに広告を誤クリックさせんがための所業なのでしょう。いや、金儲けを否定するつもりは毛頭ないのですが記事の内容がよいだけに残念だなと。

自らサイトの評価を貶めるような事をしなくても... と思った次第です。

▲ 目次 へ

Top of Pageの画像
sidemenuの画像