チュートリアル
さっそく始めましょう！
お使いのデバイスに合わせて以下のストアから EmoGuard をインストールしてください。
キーワードをブロックする
試しにキーワードを隠してみましょう。
次のフルーツリストを見てください。
- 🍎 Apples are red
- 🍌 Bananas are yellow
- 🍇 Grapes are purple
- 🍊 Oranges are orange
このページで EmoGuard を開き、キーワードを追加 テキストフィールドに Apples と入力し、キーワードを追加してください。
おめでとうございます！ Apples を含む一番上の項目が絵文字で隠されたはずです。
基本的な使い方はこれだけです。ほとんど全てのサイトで追加の設定なしに見たくないテキストや要素を隠すことができます。
隠し方をカスタマイズする
ここからはCSSセレクターを扱います。CSSセレクターについて知らなくてもチュートリアルを進めることはできますが、もしわからないところがあればこちら で学習したり、用語をWebで調べてみてください。
先ほどキーワードリストに追加した Apples を削除してください。
隠されていたテキストが表示され、元の状態に戻っているはずです。
ここで前回のフルーツリストをもう一度見てみましょう。
- 🍎 Apples are red
- 🍌 Bananas are yellow
- 🍇 Grapes are purple
- 🍊 Oranges are orange
指定したキーワードは Apples だけでしたが、指定していない are red まで隠されてしまっていました。
これは、ターゲットの隠し方が「要素を隠す」というモードになっているためです。（この隠し方のことを 隠蔽モード と呼びます。）
人によっては Apples だけを隠したいと思うかもしれません。
そんなときでも大丈夫、EmoGuard は隠し方をカスタマイズすることができます！
- EmoGuard を開きます。
- 画面右上の「⋮」ボタンをクリックし、
カスタマイズを有効にします。 - キーワードタブに移動し、今度は
Bananasをキーワードリストに追加します。 - ターゲットタブに戻ってから
ターゲット欄の URL をクリックし、全てのサイトを選択します。 liという CSS セレクターの項目を見つけ、クリックします。- 一番左のアイコンをクリックし、
キーワードと一致したテキストを隠すを選択します。
これで隠蔽モードを「要素を隠す」から「テキストを隠す」に変更することができました！
フルーツリストに戻ってみると、今度は指定したキーワードの部分だけ隠されていることがわかります。
このように隠し方を柔軟に調整することができます。
CSS セレクターを追加する
キーワードを追加しても要素が上手く隠されないことがあります。
EmoGuard を開き、キーワードリストに Grapes を追加してください。
おそらく、なんの反応もなかったはずです。
なぜでしょう？
<span>
<foo>🍇 Grapes are purple</foo>
</span>
HTML を見てみれば一目瞭然、ここでは <foo> という一般的ではない HTML タグが使われていました。
EmoGuard ではデフォルトで「デフォルト CSS セレクター」と呼ばれる CSS セレクターをサポートしています。
デフォルト CSS セレクターでは <span> タグをサポートしていますが、 <foo> という特殊なタグはサポートしていません。
解決策
- 新しい CSS セレクターを追加する。
- 既存の CSS セレクターのキーワードの検索範囲を変更する。
解決策はいくつか存在しますが、まずは前者の方法を試してみましょう。
- EmoGuard を開きます。
- ターゲットタブの
CSSセレクターを追加テキストフィールドにfooと入力し、新しい CSS セレクターを追加してください。
おめでとうございます！今度は上手く隠されました。
世の中には多種多様な Web サイトが存在します。
中には EmoGuard のデフォルト設定では対応できないようなページに遭遇することもあるでしょう。
大丈夫、焦らないで。CSS セレクターを追加することで対処できます。
ターゲットタブでは「全てのサイト」または個別のサイトいずれかにCSSセレクターを追加することができます。 「全てのサイト」に追加したCSSセレクターはあらゆるWebサイトで使用されます。 個別のサイトに追加した場合、そのサイト内でのみ有効となります。
「全てのサイト」と個別のサイトのCSSセレクターの値が重複している場合、個別のサイト側の設定値が使用されます。 これは「全てのサイト」の設定値を別のサイトで上書きしたいときに便利です。
キーワードの検索範囲をカスタマイズする
先ほどの解決策を思い出してください。
- 新しい CSS セレクターを追加する。
- 既存の CSS セレクターのキーワードの検索範囲を変更する。
今度は後者の方法で対処してみましょう。
次に隠したい相手は Oranges です。
チュートリアルのために <bar> という特殊なタグを用意しました。
EmoGuard を開き、キーワードリストに Oranges を追加してください。
<span>
<bar>🍊 Oranges are orange</bar>
</span>
相変わらず上手く隠されません。（それを意図しています）
先ほどは新しい CSS セレクターを追加して対処しましたが、これはシンプルでわかりやすいものでした。
なぜ別の方法が必要なのでしょう。
HTML は信じられないほど要素をネストする構造になっています。
もしあなたが前回と同様に CSS セレクターリストに bar を追加したとしても、新たに次のような HTML が出現した場合はどうでしょうか？
<span>
<bar>
<baz>🍈 Melons are green</baz>
</bar>
</span>
なんということでしょう！
せっかく bar を追加したのに今度は baz も追加しなければなりません。
その直後、この戦いには終わりがないことに気づくでしょう。
望むようにキーワードをブロックできるようになるためには、この HTML のネスト構造に立ち向かう必要があります。
安心してください、方法は用意してあります。
EmoGuard ではキーワードの検索に シャローサーチ と ディープサーチ という 2 つのモードを用意しています。
- シャローサーチ: CSS セレクターに一致した要素の直下のテキストからキーワードを検索
- ディープサーチ: CSS セレクターに一致した要素とその子孫要素のテキストからキーワードを検索
ディープサーチは隠蔽モードが キーワードと一致したテキストを隠す に設定されているときのみ選択することができます。
先ほど Oranges が隠されなかったのは、該当の CSS セレクターの設定値が シャローサーチ になっていたためでした。
シャローサーチでは要素の直下のテキストからキーワードを検索しますが、 <span> タグの直下にあるのは <bar> タグであり、 🍊 Oranges are orange というテキストではありません。
すべての子孫要素から検索するディープサーチなら、うまく Oranges を見つけてくれそうですね。
- EmoGuard を開きます。
- ターゲットタブの
ターゲット欄の URL をクリックし、全てのサイトを選択します。 spanという CSS セレクターの項目を見つけ、クリックします。- 中央の検索アイコンをクリックし、
ディープサーチを選択します。
おめでとうございます！今度は上手くいきました。
このようにネストされた要素に対しても、キーワードの検索範囲を変更することで柔軟に対応することができます。
初期設定ではほとんどのCSSセレクターが シャローサーチ を割り当てられています。 ディープサーチ のほうが便利に見えるかもしれませんが、
ディープサーチ を多用するとWebページの表示が壊れやすくなります。 ディープサーチ の採用は必要なときのみに留めるようにしてください。
Webページの表示がおかしくなってしまったときは、オプションページからデフォルト CSS セレクターをリセットすることができます。
お疲れさまでした！
これでチュートリアルは終了です。
オプションページからデフォルト CSS セレクターをリセットし、今回のチュートリアルで変更した設定を元に戻すことをおすすめします。
🎉Happy internet life!🎉