React で GDPR対応する
今回はTypescriptにも対応しているとのことで react-cookie-consent を用いました。
react-cookie-consentについて
Reactアプリケーションで使用できる、小さくてシンプルでカスタマイズ可能なクッキー同意バーです。 by 公式
こちらで今回はGDPR対応したいと思います。ちなみにですが、GDPRの中で「個人データを利用するためには同意が必要」という記述があるのでサイト訪問時にCookie利用の同意を求めるポップアップを出す必要があるみたいですね。
導入
インストールします。
npm install react-cookie-consent
or
yarn add react-cookie-consent
以下のようにコンポーネントファイル内でimportして使用可能です。
import CookieConsent from "react-cookie-consent";
Stylingについて
react-cookie-consentを使う場合は バーの中に「テキストスペースのコンテンツ」と「ボタン」が存在し、それぞれをstylingできるようにPropsが用意されています。バーはデフォルトでdisplay: flexプロパティを持ち、子の コンテンツと ボタンの親であるので、その点は注意が必要です。スタイリングはデフォルトでレスポンシブに対応してくれています。コンテンツの最小幅は、300pxに設定されています。もちろんflex boxなのでコンテンツ幅が指定値を超えると折り返されます。style、buttonStyle、contentStyleというpropを使うことで、各コンポーネントにスタイルを与えます。これらはコンポーネントのデフォルトスタイルを追加/置換 という形でstyleを適用。containerClasses、buttonClasses、contentClassesというCSSクラス名を指定して、定義済みのCSSクラスを適用することも可能みたいです。
- style
=> バーのためのReactのスタイリングオブジェクト。
- contentStyle
=> コンテンツ（テキストスペース）のスタイリングオブジェクト。
- buttonStyle
=> ボタンのスタイリングオブジェクト。
また、disableStyles={true}を使えば、組み込みのスタイルを無効にすることができ、自分で一からcssを指定することもできます。
辞退ボタンについて
辞退ボタンを有効にした場合、"flipButtons "プロパティを渡して、ボタンを反転させることができます。
<CookieConsent enableDeclineButton flipButtons>
ボタン反転
</CookieConsent>
デバックについて
ちなみにデバックについてもpropsは提供されていて、debug={true}を刺すことで一度ブラウザ上で許可していたとしてもreloadすれば再度表示してくれます。
<CookieConsent debug={true}></CookieConsent>
オーバレイの設置について
オーバーレイを生成して、クッキー同意ボタンとの対話以外の操作を防ぐこともできます。以下参考コード。
<CookieConsent location="bottom" cookieName="myAwesomeCookieName3" expires={999} overlay>
This website uses cookies to enhance the user experience.
</CookieConsent>
サンプルコード
functional componentでの記述。
import React from 'react';
import CookieConsent from 'react-cookie-consent';
export const CookieConsent: React.VFC = () => {
return (
<CookieConsent
debug={true} // debug用
buttonText="OK"
cookieName="myAwesomeCookieName"
disableStyles={true}
style={{
// バーのためのReactのスタイリング
}}
contentStyle={{
// コンテンツ（テキストスペース）のスタイリング
}}
buttonStyle={{
// ボタンのスタイリング
}}
expires={150}
>
{`当サイトはクッキー使ってるよ的なテキストはここに書く`}
</CookieConsent>
);
};
Discussion