languageお久しぶりですnend担当@tosh01です。fingerprintingというユーザートラッキング手法に関する記事を目にする機会が多かったのですが、ご記憶にありますでしょうか?Cookieに替わるユーザー追跡技術で、世界中で利用が広がりつつあるとありましたので、広告の世界においては、トラッキングIDの持続性やプライバシーポリシー等の観点からまだまだリスクのある技術のようですが、個人的にも興味をもち調べておりました。それはHTML5のCanvasを軸とした技術であり、この場においてなかなか書き手のいないHTML関連の記事を書きたいと思っていた手前、今回のテーマとして軽くこのトラッキング手法に関し触れつつ、HTML5に新たに追加されたCanvas要素について見ていけたらと思います。fingerprintingですが、手短には、HTML5のCanvas要素を利用し各端末のブラウザに画像データを描かせ、そのデータをハッシュ化することにより、IDを生成する技術とのことです。同じテキストをレンダリングするため、同端末の同ブラウザでは等しいIDが取得できるようですが、端末のOS、グラフィックカード、グラフィックドライバ、フォントライブラリーやブラウザなどにより生成される画像に違いが生まれるため、固有のトラッキングデータとして取得し利用できるとあります。モバイル端末では現状フォントやプラグイン等が等しく、うまく動作しないとのことです。処理を追ってみると具体的には下記のような手順を経ているようです。1.ページの表示時、JavaScriptにより、指定したフォント、バックグラウンドカラー、サイズ等にて、テキストを描きます。APIのToDataURLメソッドにて、DataURL形式の画像データへとテキストを変換します。3.最後に、得られた画像データをブラウザのユーザーエージェント、フォントリストなどのデータとともにハッシュ化し、得られた固有のデータを取得するといった流れになります。詳しい仕組みを知りたい方は以下のfingerprinting.jsのスクリプトとともに、リファレンスを参考にしてください。APIのToDataURLメソッドですが、そもそもHTML5より追加された要素であるCanvasとは、どのようなものなのでしょうか?個人的にはJavaScriptにてCanvas要素内に描画ができる。いった程度の知識しかないため、今回のメインテーマとして、実際の使用例を今回追ってみたいと思います。例によって、wikipediaによると、Canvas要素とは、HTML5の一部で動的な2次元ビットマップ画像の描画のためのHTML要素。2次元ベクター画像はSVGで、3次元画像はWebGL。ありますが、その利用法にはJavaScriptを使用することにより、その領域内にAPIを通し、変形、合成、色とスタイル、ラインキャップと接合、影、パス、文字列、ピクセル操作、画像への変換など操作を扱い、HTMLベースのグラフィックデザインの幅が広がるのみならず、ゲームやアニメーション等の動的なコンテンツやを実現できるとのことです。以下のようなelementをHTMLページに用いることにより、Canvas要素を作成し、JavaScriptを使って内部に描画します。fingerprintingの処理を行えるコードがGithubで公開されているようですので、そちらのfingerprinting.jsの処理とともに見ていきます。APIの使用例を下記に記します。APIの処理がgetCanvasFingerprintメソッドの処理として以下のように書かれています。getCotextメソッドから2Dコンテキストを指定し、ctxに格納。Canvasのイメージに対するdata:URLをデフォルトではimage/pngにて返します。[/javascript]そして、上記で得られた画像データが、場合によっては他の端末固有情報とともにハッシュ化され、トラッキングIDとして利用することができます。APIにて固有データを作る流れになりますが、なんとなくイメージがつかめましたでしょうか。APIはFlashなどのプラグインを使わず、様々な画像処理を伴うインタラクティブなコンテンツを手軽に作成できる技術ですが、Cookieのように上記のようなトラッキングに使用することもでき、回避するためにはJavaScriptを無効にするなど、有用な対応策もまだ発展途上のようですので、このような技術に対し、どう対応していくのか業界の動向が気になるところです。Are青山のアドテク会社。アドネットワークやDSPを開発・運用。サーバを止めてみたよ。インターン:実業務体験編インターンでCTR予測をしましたSearchArchiveスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。