Firefox リーダービューで作る広告フィルター
最近ウェブサイトの広告ギミックが増えていると思いませんか。例えばページを開いた時や記事を読み進んでスクロールした時などいきなり視界を遮る広告が立ち上がってきたりサイドペインで動き続けるアニメーションなど。
表示された広告はいちいち閉じなければならないしアニメーションに至っては視界の端っこでチラチラ動いているので気が散って肝心の記事本文がとても読み辛いです。
ウェブブラウザにこういった類の広告をブロックするアドオンをインストールしても完全には対処できません。
その結果どうしても読みたい記事がある場合は我慢するかあるいはウェブブラウザの「スタイルシートを使わない」を使って下の画像のように装飾と広告を読込まないようにするしかありません。
上の画像は Firefoxのスクリーンショットですが Vivaldi , Chromium , Midoriのメニューの中に「スタイルシートを使わない」が見あたりません。とうやらWebKit系のブラウザには用意されていないようですね。
そして今回これらの広告ギミックやアニメーションに対処すべく Firefox 49に実装されているリーダービューとアドオンを組合わせた広告フィルターを設定してみました。(2016/10)
リーダービューとアドオン導入
リーダービューとは
リーダービューとはホームページの装飾と広告を消して読み込む機能で、上述の「スタイルシートを使わない」との大きな違いは記事や画像のレイアウトを整えて表示することです。
このリーダービューはデフォルトでバージョン49以降の Firefoxに組込まれています(fig1)メニューバーからリーダービューをクリックするかアドレスバー右端のアイコン(赤丸)をクリックします。
付帯機能として文字のサイズやスタイル、文字と背景のハイライト、文章の改行位置を変更する等の書体コントロールとスクリーンリーダー(音声読上げ)があります(fig2,3)
ただし、リーダービューは全てのサイトで使えるわけではなくFirefoxがソースコードなどから判断して適用するようです。Firefoxのアドレスバー右端にアイコン(fig1赤丸)が表示されるページがその対象になります。
当サイトにおいてもページによってリーダービューが適用されたりされなかったりでその判定基準はよく分かりませんが広告の多いサイトで適用されるのは間違いないようです。
アドオンを導入する
が、しかし任意のサイトで自由に使いたいのが人情ですよね。そういう時はFirefoxアドオンの「Open in Reader View」を導入する事で解決します。
Firefoxのアドオンマネージャから Open in Reader View をインストール(fig4)した後、任意のページ上でマウス右クリックしてコンテキストメニューからリーダービューを実行できるようになります。(fig5,6)
リーダービューの付帯機能
リーダービューでページを読み込むとウィンドウ左側に付帯機能の設定ボタンが表示されます(fig7)
書体コントロール - fig8
- フォントタイプ|ゴシック体・明朝体
- 拡大縮小ズーム
- 行幅伸縮|文章の改行位置が変化する
- 行間距離伸縮
- フォント色と背景色のハイライト|ライト・ダーク・セピアの3色
スクリーンリーダー(音声読上げ)- fig9
スクリーンリーダーで読上げられる言語は既定の英語のみです。日本語のページでは数字と英単語、ローマ字のみ読上げられます。
スクリーンリーダーの日本語対応|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が遮られたままログインレイヤーは閉じられることはありません。
このような場合、ページ上でマウス右クリックしてコンテキストメニューから次のいずれかのリーダービューを選択します。
Open in Reader View | 新しいウインドウで開く |
---|---|
Switch to Reader View | 現在のウインドウで開く |
これでフィルターが適用されインタースティシャルがキャンセルされます。
「インタースティシャル」で検索してみて下さい。いかに Googleに嫌われているかがよく分かると思います。
フィルターの使用例 2
このページはユーザーエージェント(ウェブブラウザ)の種類を限定し特定のブラウザ以外に本文を表示させないようになっています。このようなことをする目的は何なのでしょうか?
このような場合でも例1と同様にページ上でマウス右クリックしてコンテキストメニューから次のいずれかのリーダービューを選択します。
Open in Reader View | 新しいウインドウで開く |
---|---|
Switch to Reader View | 現在のウインドウで開く |
これでフィルターが適用されページ本文が表示されます。
☺ 補足
Firefoxにはユーザーエージェントを偽装するアドオンがあるので、Edgeでも IEでも、はたまた Chrome、Safari、Opera、iOS、Android 等々どうにでもなりますよ。
例えば「User-Agent Switche」というアドオンは 26種類のユーザーエージェントを選択(偽装)できます。
通常アクセス制限をかけるのであればサーバーサイドプログラム(例えばダイジェスト認証など)で制限するのですが...。
2019年11月 追記
上記のサイトの目的が分かりました。単に Adblock Plus や uBlock Origin などの広告ブロッカー アドオンをブロックしているだけでした。
なのでリーダビューを使わずとも広告ブロッカー アドオンをオフにすれば Edge, IE11でなくても開けます。
フィルターの使用例 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と自サイトのメニューリンクだけマウスが機能するようになっていました。
このパートの冒頭に目的不明と書きましたが、訪れたユーザーに広告を誤クリックさせんがための所業なのでしょう。いや、金儲けを否定するつもりは毛頭ないのですが記事の内容がよいだけに残念だなと。
自らサイトの評価を貶めるような事をしなくても... と思った次第です。
2017年5月追記
Windows 7
Firefoxでスクリーンリーダーがサポートされていない事を確認しました。
Windows 10
Firefoxでスクリーンリーダー日本語読上げ↑がサポートされている事を確認しました。
2017年12月追記
当ページに掲載しているアドオン「Open in Reader View」は下の画像(fig1)のように Firefox Quantum 58.0 以降に対応しています。57.0 には対応していません(fig2)のでご注意を。