Web

Cookie使用の同意を求めるポップアップを表示する (Cookie Consent by Osano)

投稿日：2019年11月14日 更新日：

1. 一般データ保護規則 (GDPR)

2018年5月25日から EU 一般データ保護規則（GDPR） が適用され、EU向けに提供しているウェブサイトでクッキーを使用している場合、「クッキーの使用について利用者に同意を得る必要がある」ということになりました。

2. Cookie Consent by Osano

クッキー使用の同意を求めるポップアップを表示するには、いろいろなやり方があると思いますが、Osano という組織が提供している Cookie Consent というツールを使うと比較的簡単に実現可能です。

Cookie Consent (Open Source 版) の利用方法

この Cookie Consent には「Osano Hosted Edition」と「Open Source Edition」があり、ここでは後者を利用する方法について説明します。

(1) Download Cookie Consent | Osano にアクセスします。

(2) [Start Coding] ボタンを押します。

すると、以下が表示されます。

(3) [Position] を選択します。

(4) [Layout] を選択します。

(5) [Palette] を選択、もしくは好みの色を入力します。

(6) Cookie の使用に関する詳細ページを選択、または URL を入力します。

ウェブサイト内に「プライバシーポリシー」ページがある場合は、そのページの URL でよいでしょう。

(7) [Compliance type] を選択します。

各選択しの右にある「+」をクリックして展開すると、以下のような説明文が表示されます。

各項目の意味を以下にまとめました。

Compliance type 説明
1 Informational
(Just tell users that we use cookies)
  • 「このウェブサイトではクッキーを使っています。このままウェブサイトに留まると、クッキーの利用に同意したとみなしますよ」と伝えるだけ。
  • Osano のサイトを読むと、普通はこれでよいことが多いらしい。
2 Opt-out
(Let users opt out of cookies (Advanced))
  • オプト・アウト の考え方を採用する。つまり、ウェブサイト提供者側が主導権を持つ。
  • デフォルトでクッキーは有効にしておき、ユーザーが拒否してはじめて無効にする。
3 Opt-in
(Ask users to opt into cookies (Advanced))
  • オプト・イン の考え方を採用する。つまり、ユーザー側が主導権を持つ。
  • デフォルトでクッキーは無効にしておき、ユーザーが許可してはじめて有効にする。

1 (Informational) を選んだ場合のポップアップはこんな感じになり、

2 (Opt-out) もしくは 3 (Opt-in) を選んだ場合はこんな感じになります。

また、後で出てきますが 2 もしくは 3 を選んだ場合は、JavaScript コードを追加する必要があります。これは、クッキーの有効／無効をコントロールする必要があるためです。ウェブサイトによっては、サーバー側のプログラムも変更する必要があるかも知れません。

(8) [Custom text] を（必要なら）入力します。

ちなみに、この Osano のウェブサイトでは以下のポップアップが表示されます。ここで記述されている文章が参考になるのではと思います。ただ「クッキーを使っている」と伝えているだけではなく、「このウェブサイトに留まることで、同意したものとみなされます。」と書いていますね。

(9) [Copy HTML] ボタンを押すと、<link> タグがコピーされるので、自分のウェブサイトの <head> タグ内に貼り付けます。

(10) [Copy Code] ボタンを押すと、必要な JavaScript コードがコピーされるので、自分のウェブサイトの <body> タグ内の最後に貼り付けます。

(11) [Compliance type] で、Opt-out か Opt-in を選択した場合は、JavaScript コードを追加します。

追加するコードのベースとなる部分は、Disabling Cookies | Osano に載っています。

これは「ポップアップが表示されたとき」や「ポップアップ内の各ボタンを押されたとき」に実行される処理を登録するコードであり、 (10) で追加したコード内の window.cookieconsent.initialise メソッドに渡しているオブジェクトに「プロパティを追加する」形で貼り付けます。そして、コード内のコメントにある「enable cookies」や「disable cookies」の部分には、自分のウェブサイト用の「クッキーを有効にする処理」と「クッキーを無効にする処理」を記述します。

オプト・アウト を選んだ場合は、デフォルトでクッキーが有効になっている状態にし、ポップアップ上のボタンにより ユーザーが「拒否」したら無効にする処理が必要です。後から有効にする処理も必要になります（ポップアップは後からでも表示できます）。

オプト・イン を選んだ場合は、デフォルトでクッキーが無効になっている状態にし、ポップアップ上のボタンにより ユーザーが「受け入れ」たら有効にする処理が必要です。後から無効にする処理も必要になります（ポップアップは後からでも表示できます）。

「最初からクッキーを無効にしておく」となるとサーバー側のプログラムも関係してくるでしょうし結構面倒だと思います。参考になるか分かりませんが、この後のデモページのところに、テストに使ったコードを載せておきます。

(12) 以上で終了です。ウェブサイトにアクセスしてポップアップが表示されるか試してみましょう。

ポップアップ上のボタンを押した際の処理

ポップアップ上に表示されたボタンを押すと、Cookie Consent 独自のクッキーがセットされます。

  • [Decline] ボタンを押すと、cookieconsent_status という名前のクッキーが ‘deny‘ という値でセットされます。
  • [Allow cookies] ボタンを押すと、cookieconsent_status という名前のクッキーが ‘allow‘ という値でセットされます。

クッキーを有効にしたり無効にしたりするコードを記述する際には、このクッキーの値を利用するとよいでしょう。この後紹介するデモページでも使いました。

3. デモページと使用したコードサンプル

デモページ

? Osano の Cookie Consent Test

デモページ上には、テストに使用したコードも載せていますが、ここにも載せておきます。

(1) Compliance type が「クッキーの使用を伝えるだけ」の場合

JavaScript コード

window.cookieconsent.initialise({
  "palette": {
    "popup": {
      "background": "#000"
    },
    "button": {
      "background": "#f1d600"
    }
  }
});

(2) Compliance type が「オプト・アウト」の場合

PHP コード

if(!isset($_COOKIE['cookieconsent_status']) ||
   strcmp(strtolower($_COOKIE['cookieconsent_status']), 'allow') === 0) {
  // セッションをスタートさせる（セッションクッキーを発行する）
  session_start();
} else if (strcmp(strtolower($_COOKIE['cookieconsent_status']), 'deny') === 0) {
  // セッションを終了させる（セッションクッキーを期限切れにする）
  setcookie (session_id(), "", time() - 3600);
  session_destroy();
  session_write_close();
}

(省略)

// <head> 内で Google Analytics のコードを出力するところ
if (!isset($_COOKIE['cookieconsent_status']) ||
    strcmp(strtolower($_COOKIE['cookieconsent_status']), 'allow') === 0) {
  // ここでコードを出力する
}

JavaScript コード

window.cookieconsent.initialise({
  "palette": {
    "popup": {
      "background": "#000"
    },
    "button": {
      "background": "#f1d600"
    }
  },
  "type": "opt-out",
  onInitialise: function (status) {
    const type = this.options.type,
           didConsent = this.hasConsented();
    if (type == 'opt-out' && !didConsent) {
      // disable cookies
      document.cookie = "PHPSESSID=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
      document.cookie = "_ga=; expires=Thu, 01 Jan 1970 00:00:00 UTC; domain=laboradian.com; path=/;";
      document.cookie = "_gid=; expires=Thu, 01 Jan 1970 00:00:00 UTC; domain=laboradian.com; path=/;";
      document.cookie = "_gat_gtag_UA_XXXXXXXX_YY=; expires=Thu, 01 Jan 1970 00:00:00 UTC; domain=laboradian.com; path=/;";
    }
  },
  onStatusChange: function (status, chosenBefore) {
    const type = this.options.type,
           didConsent = this.hasConsented();
    if (type == 'opt-out' && !didConsent) {
      // disable cookies
      //window['ga-disable-UA-XXXXXXXX_YY'] = true;
      document.cookie = "PHPSESSID=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
      document.cookie = "_ga=; expires=Thu, 01 Jan 1970 00:00:00 UTC; domain=laboradian.com; path=/;";
      document.cookie = "_gid=; expires=Thu, 01 Jan 1970 00:00:00 UTC; domain=laboradian.com; path=/;";
      document.cookie = "_gat_gtag_UA_XXXXXXXX_YY=; expires=Thu, 01 Jan 1970 00:00:00 UTC; domain=laboradian.com; path=/;";
    }
  },
  // 再度、ポップアップを表示させたとき
  onRevokeChoice: async function () {
    const type = this.options.type;
    if (type == 'opt-out') {
      // enable cookies
      //await fetch('')
    }
  }
});

(3) Compliance type が「オプト・イン」の場合

PHP コード

if(!isset($_COOKIE['cookieconsent_status']) ||
   strcmp(strtolower($_COOKIE['cookieconsent_status']), 'deny') === 0) {
  // セッションを終了させる（セッションクッキーを期限切れにする）
  setcookie (session_id(), "", time() - 3600);
  session_destroy();
  session_write_close();
} else if (strcmp(strtolower($_COOKIE['cookieconsent_status']), 'allow') === 0) {
  // セッションをスタートさせる（セッションクッキーを発行する）
  session_start();
}

(省略)

// <head> 内で Google Analytics のコードを出力するところ
if (isset($_COOKIE['cookieconsent_status']) &&
    strcmp(strtolower($_COOKIE['cookieconsent_status']), 'allow') === 0) {
  // ここでコードを出力する
}

JavaScript コード

window.cookieconsent.initialise({
  "palette": {
    "popup": {
      "background": "#000"
    },
    "button": {
      "background": "#f1d600"
    }
  },
  "type": "opt-in",
  onInitialise: async function (status) {
    const type = this.options.type;
    const didConsent = this.hasConsented();
    if (type == 'opt-in' && didConsent) {
      // enable cookies
      await fetch('');
    }
  },
  onStatusChange: async function (status, chosenBefore) {
    const type = this.options.type;
    const didConsent = this.hasConsented();
    if (type == 'opt-in' && didConsent) {
      // enable cookies
      await fetch('');
    }
  },
  // 再度、ポップアップを表示させたとき
  onRevokeChoice: function () {
    const type = this.options.type;
    if (type == 'opt-in') {
      // disable cookies
      document.cookie = "PHPSESSID=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
      document.cookie = "_ga=; expires=Thu, 01 Jan 1970 00:00:00 UTC; domain=laboradian.com; path=/;";
      document.cookie = "_gid=; expires=Thu, 01 Jan 1970 00:00:00 UTC; domain=laboradian.com; path=/;";
      document.cookie = "_gat_gtag_UA_XXXXXXXX-YY=; expires=Thu, 01 Jan 1970 00:00:00 UTC; domain=laboradian.com; path=/;";
      //window['ga-disable-UA-XXXXXXXX-YY'] = true;
    }
  }
});

Google Analytics スクリプトの読み込みについて

Google Analytics のスクリプトを読み込む前であれば、以下を実行して Google Analytics を無効にできるようです（Google Analytics 用のクッキーを使わないということです）。

window['ga-disable-UA-XXXXXXXX_YY'] = true;

デモサイトでも Google Analytics を使っていますが、「Google Analytics のスクリプトを読み込むかどうか」をサーバー側で対応したためこのコードは使っていません。

参考

4. おわりに

Compliance type に何を選ぶかによって、対応するために必要な作業量が大きく変わります。オプト・アウトやオプト・インに対応するには、ウェブサイトにとって割と根本的な修正作業が必要になるでしょう（ウェブサイトにも依りますが）。

Cookie Compliance | Osano を読む限りでは、ほとんどのウェブサイトが Informational（クッキーの使用を伝えるだけ）な対応で済ませているようです（UK ではこれで十分だそうです）。実際には、どの国向けにサービスを提供するのか？ クッキー以外にもどんなデータを利用するのか？ などを精査した上で十分な調査が必要になると思います。

参考

📂-Web

執筆者：labo

comment

メールアドレスが公開されることはありません。

関連記事

Chrome

Chrome 78 デベロッパーツールの新機能

Chrome 78 のデベロッパーツールにおいて、主な新機能を紹介します。

Web

インターネット上の情報とテレビ・新聞の情報

「ワイドナ」ネタツイートを宮崎駿監督発言と紹介？ （日刊スポーツ） – Yahoo!ニュース(https://headlines.yahoo.co.jp/hl?a=20170529-018 …

Google

Google マップの地図をウェブページに埋め込む手順

Google マップの地図を、ウェブページに埋め込む手順について説明します。 手順自体は簡単なのですが、Google マップの仕様が時々変わり、操作手順もその影響を受けることがあるため、現時点(201 …

Web

Intersection Observer API を使った画像の遅延読み込み

目次1. 画像の遅延読み込み（遅延ローディング）2. Intersection Observer API3. Intersection Observer API を使って画像を遅延読み込みする例1. …

ICTリテラシー

無料レンタルサーバーとDokuWiki で作る自分用情報サイト

本サイトに パソコン内に自分専用の情報データベースをつくる というページがあります。詳細はリンク先を見て頂くとして、本ページではこれに関連して、「自分専用の情報サイトを作る」ためのオススメの方法につい …

PREV
【Windows 10】ネットワーク設定画面の関係図
NEXT
Windows 10 Home で「ローカル グループ ポリシー エディター」を使う方法
↑