【Javascript】情報技術者試験過去問道場で解説が表示されない原因

応用情報技術者試験の勉強で応用情報技術者過去問道場｜応用情報技術者試験.comを利用していますが、問題を解いた後、解説が表示されない（厳密にはうっすら見えてる）状態になります。
f:id:thenewsinpu:20180428224423p:plain

原因

ページに「※解説へのアクセスはアプリやプラグインなどの拡張機能によって制限されています。」と書かれているので解るのですが、一応ヘルプページを見ます。

過去問道場の使い方・各機能について｜応用情報技術者試験.comによると、

過去問道場(PC版、スマホ版)では、広告ブロックのプラグイン等を使用している場合に解説部分が広告と一緒に非表示になる仕組みを取り入れているため、それが影響している可能性があります。

広告をブロックすると解説を表示させない仕組みのようです。

確かに、私はコンテンツブロッカー「μBlock Origin」を使用していおり、サイトをホワイトリストに追加することで解説が表示されました。

コンテンツブロッカー使用で解説が非表示になる仕組み

「応用情報技術者」を目指すものとしては、コンテンツブロッカー使用で解説が非表示になる仕組みがどのようなっているのか気になるので、調べることにしました。

サイトのJavascriptを確認

解説を消し、「※解説へのアクセスはアプリやプラグインなどの拡張機能によって制限されています。」という一文を表示させる処理を行っているのはサーバ（PHP等）でしょうか？ブラウザ（Javascript）でしょうか？

コンテンツブロックはブラウザ側の処理なので、解説を消す/消さないの判断もブラウザ（Javascript）で行う必要があるはずです。

さっそく、サイトのソースを表示し、Javascriptを確認します。
私の環境がFirefoxなので、Firefoxで説明します。
ブラウザでF12を押し、開発ツールを表示します。
f:id:thenewsinpu:20180428233123p:plain
デバッガーのタブを選び、Ctrl(⌘)+Shift+F　で「解説へのアクセス」を検索します。すると、以下のように、該当箇所がヒットします。
f:id:thenewsinpu:20180428233942p:plain なぜか二つ表示されますが、両方同じです。

該当箇所を抜粋しました。

if ($('.ansbg').length == 2 && Math.random() > 0.2){
    setTimeout(function(){
        var ad = $('ins.adsbygoogle')[0];
        if (ad && ad.innerHTML.replace(/\s/g , "").length === 0) {
            $('.ansbg').last().attr('style', 'opacity:.05 !important').before("<p>※解説へのアクセスはアプリやプラグインなどの拡張機能によって制限されています。</p>");
        }
    }, 2000);
}

HTMLを確認すると、ansbgは問題文と解説タグのクラスで、広告はinsタグadsbygoogleクラスの要素です。
抜粋したソースの上から4行目を見ると、'ins.adsbygoogle'要素の子要素の文字数が0の場合、解説を消す処理を行っています。(不透明度0.5に設定)

確かに、広告をブロックすると、'ins.adsbygoogle'要素の子要素がなくなります。
子要素が無い（文字数が0）ことを検知して、解説を消していたわけです。

・コンテンツブロック無し f:id:thenewsinpu:20180428235700p:plain
・コンテンツブロック有り f:id:thenewsinpu:20180428235724p:plain

【2018/05/16　追記】
過去問道場の半透明化処理の条件式が変更されていました。
詳細は以下ページを参照してください。
thenewsinpu.hatenablog.jp 【追記　ここまで】

まとめ

情報技術者試験過去問道場で解説が表示されない原因（解説を消す処理の仕組み）を知ることができました。
もし、コンテンツブロッカーを使用したまま解説を表示させたいと考えた時、仕組みがわかれば方法を思いつくことができます。
例えば、解説を消す処理は、ifで複数の条件を満たす必要があります。
この条件に必ず当てはまらなくなるようにすれば、解説が消されることはありません。

今回は以上です。