|
|
今日、ほとんどのウェブサイトはあなたのデータを処理したいと考えており、クッキーバナーを使って同意を求めています。これらのバナーはあなたにコントロールを与えることを目的としていますが、実際には繰り返しの時間のかかるクリックをもたらすことが多く、特にブラウザが閉じたときにクッキーを消去する場合は顕著です。同じバナーが再び表示され、同じ選択を何度も繰り返すことになります。
Consent-O-Matic はこの問題を解決するために設計されたブラウザ拡張機能です。オーフス大学の Centre for Advanced Visualization and Interaction（CAVI）によって開発されたこのツールは、あなたに代わって同意バナーを自動的に処理します。インストール時に設定を指定すると、Consent-O-Matic は一般的な Consent Management Platform（CMP）のバナーの多くを認識し、あなたの選択を適用して、拡張機能アイコンの横に小さなチェックマークを表示して確認します。
Consent-O-Matic はオープンソースプロジェクトであるため、誰でも新しいルールの追加や既存のルールの更新、ドキュメントの更新を通じて改善に貢献できます。この協力的なアプローチにより、拡張機能はオンラインの同意バナーの絶えず変化する状況に対応し続け、誰もがより少ない手間でデータを保護しやすくなります。
Consent-O-Matic は現在、200以上のCMPに対応しています（完全なリストはこちら）。UserCentrics、CookieBot、OneTrust などの主要プラットフォームや、特定のウェブサイト向けのクッキーバナーにも対応しています。
Consent-O-Matic は、インストール時にブラウザで以下の一連の権限を使用します：
この拡張機能がウェブと通信するのは、次の2つの場合だけです：
拡張機能アイコンを通じて報告されたウェブサイトのURLは、URIエンコードされたクエリ文字列の形で、オーフス大学がホストするウェブサイトに送信されます（例：LinkedIn は https://gdprconsent.projects.cavi.au.dk/report.php?url=www.linkedin.com として報告されます）。
ブラウザの公式拡張機能ストアから直接インストールすることを強くお勧めします（冒頭で紹介）。公式チャネルからインストールすると、新しいバージョンがリリースされたときに自動的に最新版に更新されます。
他の方法で拡張機能を入手することも可能です。
拡張機能ストアの代替として、Github の Releases ページから公開されているバージョンのいずれかを手動でダウンロードして展開できます。
その場合、ブラウザの開発者機能を使用して Load Unpacked（Chrome）または Load Temporary Addon（Firefox）を実行し、展開した zip ディレクトリ内の manifest.json を指定する必要があります。
最後に、コードのレビューや変更を行う予定がある場合は、ソースコードから直接ビルドしてインストールできます：``` git clone https://github.com/cavi-au/Consent-O-Matic.git cd Consent-O-Matic npm install
and then run one of ```npm run build-firefox``` or ```npm run build-chromium``` or ```npm run build-safari```
Firefox または Chromium の場合、上記と同じ方法でリリースアーカイブをインストールできますが、ブラウザで `build` フォルダ、または build/dist/ から zip を展開したフォルダを指定してください。Safari では、アプリをさらにビルドするために XCode プロジェクトを読み込む必要があります。
ソースからのインストールは推奨しません。
## Consent-O-Matic を拡張する
お気に入りの CMP が現在のリストにない場合は、追加できるカスタムリストを作成してください（ブラウザの拡張機能アイコンをクリックし、「More add-on settings」をクリックし、「Rule lists」をクリックして、カスタムリストの URL を入力します）。**本当に**貢献したい場合は、そのついでに Pull Request を作成してください。
特定のウェブサイトのルールが機能しない場合、ユーザーはレポートを送信できます。報告された URL の完全なリストは[ここ](https://gdprconsent.projects.cavi.au.dk/reports.php)で確認できます。数字はその URL が報告された回数を示しています。このリストは現在、URL のルールがチェック・調整されたかどうか/いつされたかを表示しないため、作業を始める前に、ルールがまだ壊れているか欠落しているかを必ず確認してください。
### ルール要素
* [基本構造](#basic-structure)
* [検出器](#detectors)
* [メソッド](#methods)
* [DOM の選択](#dom-selection)
* [アクション](#actions)
* [クリック](#click)
* [リスト](#list)
* [同意](#consent)
* [スライド](#slide)
* [CSS の場合](#if-css)
* [CSS を待つ](#wait-for-css)
* [各要素に対して](#for-each)
* [待機](#wait)
* [非表示](#hide)
* [閉じる](#close)
* [マッチャー](#matchers)
* [CSS](#css)
* [チェックボックス](#checkbox)
* [同意](#consent-1)
* [同意カテゴリ](#consent-categories)
* [完全な例](#full-example)
### 基本構造
Consent-O-Matic のルールリストは、CMP（Consent Management Provider）を検出し、
検出されたときに CMP ポップアップを処理するためのルールを含む JSON 構造です。
各 CMP は名前付きエントリであり、`detectors` と `methods` の 2 つの部分を含みます。名前は理想的には、基になる CMP の実際の名前（大文字と空白を正しく付けたもの）、またはそのドメインに固有の場合はウェブサイトの名前であるべきです。この名前は拡張機能の設定の About セクションに表示されるため、ユーザーフレンドリーにしてください。```json
{
"MyCMP": {
"detectors": [ ... ],
"methods": [ ... ]
},
"AnotherCMP": {
"detectors": [ ... ],
"methods": [ ... ]
},
}
CMP に複数のディテクタが追加されている場合、いずれかのディテクタがトリガーすると、その CMP は検出されたとみなされます。
ディテクタは、特定のルールセットを適用すべきかどうかを検出する部分です。基本的に、ディテクタがトリガーすると、メソッドが適用されます。
ディテクタの構造：```json { "presentMatcher": [{ ... }], "showingMatcher": [{ ... }] }
present マッチャーは、CMP がページ上に存在するかどうかを検出するために使用されます。
一部の CMP は、以前に同意を与えたページを再訪問した場合でも、ポップアップの HTML を DOM に挿入し続けます。同意フォームが実際にページ上に表示されている場合にのみ処理したいと考えています。showing マッチャーはこの目的で使用されます。
present マッチャーと showing マッチャーはどちらも、[`Matchers`](#matchers) の共通構造に従います。
present マッチャーと showing マッチャーはどちらも複数のマッチャーにすることができ、すべてのマッチャー（それぞれ present 用と showing 用）が該当する場合にのみディテクターがトリガーされます。
#### メソッド
メソッドはアクションの集まりです。Consent-O-Matic がサポートするメソッドは 4 つあります。`OPEN_OPTIONS`、`DO_CONSENT`、`SAVE_CONSENT`、`HIDE_CMP`
すべてのメソッドはオプションであり、存在する場合、ディテクターがトリガーされたときに、メソッドは以下に示す順序で実行されます。```
HIDE_CMP
OPEN_OPTIONS
HIDE_CMP
DO_CONSENT
SAVE_CONSENT
メソッドは次の形式を取ります：```json { "name": " ... ", "action": { ... } }
ここで、name はサポートされている 4 つのメソッドのいずれかであり、action は実行する [action](#actions) です。
---
### DOM 選択
ほとんどのアクションとマッチャーには、適用対象となるターゲットがあります。このため、Consent-O-Matic には、正しい DOM 要素の選択を簡単に支援する DOM 選択メカニズムがあります。```json
"parent": {
"selector": ".some.css.selector",
"textFilter": "someTextFilter",
"styleFilter": {
"option": "someStyleOption",
"value": "someStyleValue",
"negated": false
},
"displayFilter": true,
"iframeFilter": false,
"childFilter": {}
},
"target": {
"selector": ".some.css.selector",
"textFilter": "someTextFilter",
"styleFilter": {
"option": "someStyleOption",
"value": "someStyleValue",
"negated": false
},
"displayFilter": true,
"iframeFilter": false,
"childFilter": {}
}
There are 2 parts, parent and target. The parent is optional but if it exists it will be resolved first, and used as the starting point for target. This allows you to construct very complicated selections of elements that wouldn't otherwise be possible with a single plain CSS selector. One example of such is selecting into shadow DOM - where using parent to target the element with the shadow allows querying its children with the selector.
parent と target のパラメータは、selector を除いてすべて省略可能です。
選択メソッドは、selector のCSSセレクタを使用し、利用可能なさまざまなフィルタを介して結果のDOMノードをフィルタリングします：
textFilter は、指定されたテキストを含まないすべてのノードをフィルタリングします。配列 "textFilter":["filter1", "filter2"] として指定することもでき、その場合は指定されたテキストフィルタのいずれかを含まないすべてのノードをフィルタリングします。
styleFilter は computedStyles に基づいてフィルタリングします。option は比較するスタイルオプションです（例：position）。value は比較対象の値で、negated はオプションの値が指定された値と一致すべきか、一致しないべきかを設定します。
displayFilter は、ノードが display hidden かどうかに基づいてフィルタリングするために使用できます。
iframeFilter は、ノードが iframe 内にあるかどうかに基づいてフィルタリングします。
childFilter は完全に新しいDOM選択で、childFilter によって選択が行われたかどうかに基づいて、元の選択をフィルタリングします。
以下はDOM選択の例です：```json "parent": { "selector": ".myParent", "iframeFilter": true, "childFilter": { "target": { "selector": ".myChild", "textFilter": "Gregor" } } }, "target": { "selector": ".myTarget" }
このセレクタはまず、iframe 内にあり、テキスト "Gregor" を含むクラス `myChild` を持つ子 DOM 要素を持つ、クラス `myParent` を持つ DOM 要素である `parent` を見つけようとします。
次に、この parent を "ルート" として使用し、クラス `myTarget` を持つ DOM 要素を見つけようとします。
これはその後、アクションまたはマッチャーのターゲットにすることができます。
---
### アクション
アクションは、Consent-O-Matic の中で実際に処理を行う部分です。一部のアクションはターゲットの選択に対して何らかの操作を行い、他のアクションは制御フローに関するものです。
#### Click
このアクションは、ターゲット上でのマウスクリックをシミュレートします。
例:```json
{
"type": "click",
"target": {
"selector": ".myButton",
"textFilter": "Save settings"
},
"openInTab": false
}
openInTab が true に設定されている場合、クリックの代わりに ctrl+shift+click をトリガーします。これにより、リンクがあれば新しいタブで開き、そのタブにフォーカスします。
この例では、単純な target と textFilter のみを使用していますが、完全な DOM 選択 もサポートされています。
このアクションは、アクションのリストを順番に実行します。
例:```json { "type": "list", "actions": [] }
`actions` は、すべて順番に実行されるアクションの配列です。
#### Consent
consent アクションは、同意の配列を受け取り、ユーザーの同意選択を適用しようとします。
例:```json
{
"type": "consent",
"consents": []
}
consents は Consent 型の配列です
一部の同意フォームでは、スライダーを使用して同意レベルを設定します。このアクションは、そのようなスライダーでのスライド操作のシミュレーションをサポートします。
例:```json { "type": "slide", "target": { "selector": ".mySliderKnob" }, "dragTarget": { "target": { "selector": ".myChoosenOption" } }, "axis": "y" }
`target` は、スライド動作をシミュレートする対象の DOM 要素です。
`dragTarget` は、スライド距離を決定するために使用する DOM 要素です。
`axis` は、スライダーが水平方向 "x" か垂直方向 "y" のどちらに動くかを選択します。
スライドイベントは、指定された `axis` に沿って、マウスが `target` を `target` から `dragTarget` までの距離だけドラッグしたことをシミュレートします。
#### If CSS
このアクションは制御フローとして使用され、DOM セレクションが要素を見つけるかどうかに応じて別のアクションを実行します。
例:```json
{
"type": "ifcss",
"target": {
"selector": "",
},
"trueAction": {
"type": "click",
"target": {
"selector": ".myTrueButton"
}
},
"falseAction": {
"type": "click",
"target": {
"selector": ".myFalseButton"
}
}
}
trueAction は、DOM セレクションが要素を検出した場合に実行されるアクションです。
falseAction は、DOM セレクションが要素を検出しなかった場合に実行されます。
このアクションは、DOM セレクタが一致する DOM 要素を検出するまで待機します。これは主に、同意フォームの一部がゆっくり読み込まれる場合や、待機が必要な場合に使用されます。
例:```json { "type": "waitcss", "target": { "selector": ".myWaitTarget" }, "retries": 10, "waitTime": 200, "negated": false }
`retries` は、対象のDOM要素をチェックする回数です。デフォルトは10です。
`waitTime` は、リトライ試行間の時間を決定します。デフォルトは250です。
`negated` は、"Wait For CSS" がターゲットが見つからなくなるまで待機するようにします。
#### For Each
ある一連のアクションを複数回実行する必要があるが、ルートとなるDOMノードを変えたい場合、for each アクションを使用できます。これは、DOMセレクションで選択された各DOM要素に対してアクションを1回実行します。for each ループ内で実行されるすべてのアクションは、現在選択されているノードを起点としてDOMを認識します。
例:```json
{
"type": "foreach",
"target": {
"selector": ".loopElement"
},
"action": {}
}
action は、見つかった各 DOM 要素に対して実行するアクションです。
このアクションは、続行する前に指定されたミリ秒の間待機します。
例:```json { "type": "wait", "waitTime": 250 }
#### 非表示
このアクションは、DOM の選択範囲に CSS クラス 'ConsentOMatic-CMP-Hider' を設定します。デフォルトの CSS ルールにより、その要素の opacity が 0 に設定されます。
例：```json
{
"type": "hide",
"target": {
"selector": ".myHiddenClass"
}
}
このアクションは現在のタブを閉じます。同意ダッシュボードを新しいタブで開くことを好む Evidon のような同意プロバイダーに役立ちます。
例:```json { "type": "close" }
### Matchers
マッチャーは、何らかのDOMセレクションの存在、または何らかのDOMセレクションの状態をチェックするために使用されます。
#### CSS
このマッチャーはDOMセレクションの存在をチェックし、存在する場合にマッチしたことを返します。
例：```json
{
"type": "css",
"target": {
"selector": ".myMatchingClass"
}
}
このマッチャーは <input type='checkbox' /> の状態をチェックし、チェックボックスがチェックされている場合に一致したと返します。
例:```json { "type": "checkbox", "target": { "selector": ".myInputCheckbox" } }
---
### 同意
これは [同意アクション](#consent) の中で使用され、ユーザーが与えるべきか否かの実際の同意を定義します。
各同意にはタイプがあり、Consent-O-Matic 内の同意カテゴリに対応します。したがって、ユーザーが最初の同意カテゴリを ON に切り替えた場合 (Type A)、その同意がタイプ "A" であれば、その同意は有効になります。
通常、同意はトグルまたはオン/オフのボタンセットとして与えられます。そのため、`consent` にはこれらの各ケースのためのメカニズムがあります。
例:```json
{
"type": "A",
"toggleAction": {},
"matcher": {},
"trueAction": {},
"falseAction": {}
}
type は、このルールが定義する同意カテゴリの種類であり、そのカテゴリの種類に対するユーザーの選択に応じて、この同意をオンにするかオフにするかを決定します。
toggleAction は、ポップアップがトグルまたはスイッチを使用して同意を伝える場合に、同意を選択するために使用されるアクションです。このアクションは、マッチャーが、同意がユーザーの要求した状態とは異なる状態にあると判断した場合に実行され、それ以外の場合は実行されません。
matcher は、同意がどの状態にあるかを確認するために使用されるマッチャーです。チェックボックスのマッチャー の場合、チェックボックスがチェックされていれば同意が与えられます。CSS マッチャー の場合、マッチャーが DOM 選択を検出すれば同意が与えられます。
trueAction と falseAction は、同意をオン/オフの切り替えではなく、2つのボタンのいずれかを押すことで与える必要がある場合に使用されるアクションです。これらは、ユーザーの同意の選択に応じて実行されます。ユーザーがこのカテゴリタイプに同意した場合は trueAction が実行され、ユーザーがこのカテゴリタイプに同意しなかった場合は falseAction が実行されます。
content config に toggleAction と matcher の両方が存在する場合は toggleAction が使用され、どちらか一方が欠けている場合は、代わりに trueAction/falseAction が使用されます。
アドオンの設定で表示されるのと同じ順序です：
すべてをまとめると、以下は、切り替え対象となる2つの同意カテゴリを持つ CMP「MyCMP」の完全な例です。```json { "MyCMP": { "detectors": [ { "presentMatcher": { "type": "css", "target": { "selector": "#theCMP" } }, "showingMatcher": { "target": { "selector": "#theCMP.isShowing" } } } ], "methods": [ { "name": "OPEN_OPTIONS", "action": { "type": "click", "target": { "selector": ".button", "textFilter": "Change settings" } } }, { "name": "DO_CONSENT", "action": { "type": "list", "actions": [ { "type": "click", "target": { "selector": ".menu-vendors" } }, { "type": "consent", "consents": [ { "type": "A", "matcher": { "type": "checkbox", "parent": { "selector": ".vendor-item", "textFilter": "Functional cookies" }, "target": { "selector": "input" } }, "toggleAction": { "type": "click", "parent": { "selector": ".vendor-item", "textFilter": "Functional cookies" }, "target": { "selector": "label" } } }, { "type": "F", "matcher": { "type": "checkbox", "parent": { "selector": ".vendor-item", "textFilter": "Advertisement cookies" }, "target": { "selector": "input" } }, "toggleAction": { "type": "click", "parent": { "selector": ".vendor-item", "textFilter": "Advertisement cookies" }, "target": { "selector": "label" } } } ] } ] } }, { "name": "SAVE_CONSENT", "action": { "type": "click", "target": { "selector": ".save-consent-btn" } } } ] } }