<p><a href="https://qiita.com/advent-calendar/2019/plaid">PLAID Advent Calendar 2019</a> 3日目担当の <a href="https://twitter.com/algas">@algas</a> です。今年は量子コンピュータを個人的に勉強しています。最近では量子スプレマシーが話題になりましたね。会社の業務では量子コンピュータを直接使っているわけではないので今のところは完全に個人の趣味です。ソフトエンジニアとして生きていれば遠くない将来に業務で量子コンピュータを使うこともあると思っています。</p>
<h2>概要</h2>
<p>本記事では Google の論文 <a href="https://www.nature.com/articles/s41534-019-0141-3.pdf">“Universal Quantum Control through Deep Reinforcement Learning”</a> の中で使われている技術とそれが必要な背景を解説したいと思います。論文自体の内容に関する考察までは本記事では扱いません。論文の概要は <a href="https://ai.googleblog.com/2019/10/improving-quantum-computation-with.html">Google AI Blog &quot;Improving Quantum Computation with Classical Machine Learning&quot;</a> でも紹介されています。</p>
<h2>対象読者</h2>
<p>量子コンピュータや機械学習に多少の知見がある読者を対象とします。アドベントカレンダーのネタなのにそんなに軽くないです。それぞれの技術の専門家の方はぜひ元論文を読んでみてください。</p>
<h2>背景</h2>
<p>現状の量子コンピュータを使って実用的な問題を解くための主な課題として以下の3つがあります。</p>
<ol>
<li>量子ビット数が少ない<br>
量子ビットの数が多いほど高い精度の計算や多くのパターンの組み合わせの計算ができるようになります。</li>
<li>量子状態を維持できる時間が短い<br>
量子コンピュータで問題を解いている間は量子状態を維持する必要があります。<br>
量子状態を長い間維持できる方がより複雑な問題を解くことができます。</li>
<li>ノイズやエラーのために信頼性が高くない<br>
古典コンピュータではノイズの除去やエラー訂正が実用上で十分なレベルに達しています。<br>
それに比べて量子計算でのエラー訂正は簡単ではありません。量子状態を維持する時間が短いので大規模計算で訂正処理をするのが困難です。量子ビットを測定すると量子状態が壊れるので測定せずに訂正する方法が必要です。</li>
</ol>
<p>この3つ目の課題を解くのが紹介する論文の手法です。</p>
<h2>論文の解説</h2>
<h3>量子コンピュータのノイズ</h3>
<p>量子コンピュータのノイズには主に以下の２つがあります。</p>
<ol>
<li>量子ビット自体への干渉
<ul>
<li>量子コンピュータでは量子ビットに情報が保持されます。光子や音量子が量子ビットの近くを通ることによって量子力学的に干渉することがあります。</li>
<li>量子ビットの値を確定するためには「測定」する必要があります。測定の精度によって量子ビットの値が間違っていることがあります。</li>
</ul>
</li>
<li>量子ビットを制御する道具によるノイズ
<ul>
<li>量子ビットが載ってる物理基板の電気信号や電磁場によってアナログのノイズが混じってしまうことがあります。</li>
<li>熱によるホワイトノイズ以外にも、外部の電波源、DAコンバータなどもノイズの発生源になります。</li>
</ul>
</li>
</ol>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/ba139dd5-672d-4e91-956e-9a5ec344c666/57f6b41cba3d6eafb00633637f064550-png.png" alt="ノイズの図"></p>
<h3>論文の概要</h3>
<p>量子コンピュータのノイズ問題を解決するために「深層強化学習を使った新しい量子制御フレームワーク」を作りました、という内容の論文です。<br>
フレームワークの応用用途には以下があります。</p>
<ul>
<li>量子シミュレーション</li>
<li>量子化学</li>
<li>量子スプレマシー</li>
</ul>
<p>量子計算中の情報の漏れがノイズの主な原因の1つです。理論的には情報の漏れを完全に予測できればノイズを改善できます。量子コンピュータ全部をシミュレーションできればこれが実現できます。しかし現実的には量子コンピュータ全部をシミュレーションするのは計算効率の問題や大規模な計算においては難しいので完全には予測できません。その代わりに物理モデルを改良することで量子計算のいくつかのパラメータを最適化してノイズを減らすことができます。</p>
<h3>論文の結論</h3>
<p>既存の手法の確率勾配降下法(SGD)よりも桁違いで良い結果が得られたそうです。<br>
<img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/a9dac92a-2c98-4f71-afd0-e51469b438b2/fcf78285bc840c1f345fd76fdaf599b9-png.png" alt="“Universal Quantum Control through Deep Reinforcement Learning” (Fig. 4)"></p>
<blockquote>
<p>“Universal Quantum Control through Deep Reinforcement Learning” (Fig. 4)</p>
</blockquote>
<h3>On-Policy Trusted-region Deep Reinforcement Learning</h3>
<p>深層強化学習の図です。<br>
<img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/13ee3c26-1495-4af7-8148-f4ff5f349d9e/571328050131bfec2920c9d5bb86e4e4-png.png" alt="“Universal Quantum Control through Deep Reinforcement Learning” (Fig. 1)"></p>
<blockquote>
<p>“Universal Quantum Control through Deep Reinforcement Learning” (Fig. 1)</p>
</blockquote>
<p>深層強化学習の技術については以下によくまとめられています。本記事と合わせてお読みください。<br>
<a href="https://qiita.com/shionhonda/items/ec05aade07b5bea78081">深層強化学習アルゴリズムまとめ</a></p>
<ul>
<li>深層学習(Deep Learning)<br>
<img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/df1bac60-9d83-4662-97f3-6d069eab6166/efc3e5c080b5b8fb30e96b5fbf22c1df-png.png" alt="DeepLearning"></li>
<li>強化学習(Reinforcement Learning)<br>
<img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/436aea15-bd98-45ad-be1e-f77e2966da05/a487c561028d9bf9783570645d39d350-png.png" alt="a487c561028d9bf9783570645d39d350-png"></li>
<li>深層強化学習(Deep Reinforcement Learning)<br>
= 深層学習(Deep Learning) + 強化学習(Reinforcement Learning)<br>
<img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/cc5e3a4d-9001-4d76-aa8c-31a145ad6c9d/f09e4543ebfe850c4b2daa220cb1b97b-png.png" alt="f09e4543ebfe850c4b2daa220cb1b97b-png"></li>
</ul>
<blockquote>
<p><a href="http://people.csail.mit.edu/hongzi/content/publications/DeepRM-HotNets16.pdf">http://people.csail.mit.edu/hongzi/content/publications/DeepRM-HotNets16.pdf</a></p>
</blockquote>
<ul>
<li>Trust Region Policy Optimization<br>
論文: <a href="https://arxiv.org/pdf/1502.05477.pdf">https://arxiv.org/pdf/1502.05477.pdf</a><br>
解説記事: <a href="https://medium.com/@jonathan_hui/rl-trust-region-policy-optimization-trpo-explained-a6ee04eeeee9">RL — Trust Region Policy Optimization (TRPO) Explained</a><br>
信頼できる領域内にステップを抑えることで状態の急激な悪化を防ぎます。急な勾配を崖に例えると、崖を飛び降りない手法といえます。<br>
<img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/605a19c8-0032-4b80-ba8f-e8092362973b/----------2019-12-02-17.15.43.png" alt="崖から飛び降りない図"></li>
</ul>
<blockquote>
<p><a href="https://medium.com/@jonathan_hui/rl-trust-region-policy-optimization-trpo-explained-a6ee04eeeee9">https://medium.com/@jonathan_hui/rl-trust-region-policy-optimization-trpo-explained-a6ee04eeeee9</a></p>
</blockquote>
<ul>
<li>On-Policy<br>
解説記事: <a href="https://qiita.com/ABmushi/items/83a639506fcbc4050ce8">強化学習のOn-PolicyとOff-Policy</a><br>
現在の方策(Policy)に則って(on)将来の行動が選択されることを前提に学習します。崖の近くの道が選ばれにくくなります。On-Policy とは逆に方策に依存しない Off-Policy もあります。</li>
<li>Policy Neural Network<br>
解説記事: <a href="https://towardsdatascience.com/policy-networks-vs-value-networks-in-reinforcement-learning-da2776056ad2">Policy Networks vs Value Networks in Reinforcement Learning</a><br>
現在の方策(Policy)を改善するのが目的です。行動空間が高次元でも連続でも使えます。確率論的な方策も学習できます。局所解に陥りやすく評価が非効率的であるというデメリットもあります。</li>
<li>Value Neural Network<br>
最適行動価値(Value)関数を推定するのが目的です。局所解には陥りにくいアルゴリズムもあります。行動空間が高次元の場合には計算負荷が大きくなります。</li>
<li>確率勾配降下法(Stochastic Gradient Descent Method)<br>
解説記事: <a href="https://postd.cc/optimizing-gradient-descent/">勾配降下法の最適化アルゴリズムを概観する</a><br>
目的関数を最小化する問題を解く方法の1つです。局所解に陥りにくいメリットと最適解をいつまでも得られない可能性があるデメリットを持ちます。</li>
</ul>
<h3>Quantum Unitary Gate</h3>
<p>量子回路図です。<br>
<img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/352383d0-03df-4b28-8d76-a93872a44ae8/b0028cd46b91048d89f779df10bfcdb8-png.png" alt="“Universal Quantum Control through Deep Reinforcement Learning” (Fig. 2)"></p>
<blockquote>
<p>“Universal Quantum Control through Deep Reinforcement Learning” (Fig. 2)</p>
</blockquote>
<p>量子コンピュータに知見がない方は以下も合わせてお読みください。<br>
<a href="https://www.slideshare.net/techblogyahoo/ss-138380151">ゲート方式量子コンピュータの概要</a><br>
<a href="https://en.wikipedia.org/wiki/Quantum_logic_gate">Quantum logic gate</a></p>
<ul>
<li>量子ビット(qubit)<br>
古典ビットは0か1の2つの状態しかありません。量子ビットは測定した時に初めて値が確定し、その状態によって確率的に0か1のどちらかの値になります。複数回測定するとその出現確率の状態に近づきます。
<ul>
<li>古典ビットの「0」: 0が100%測定される状態<br>
<img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/89e4b213-6b8e-4c21-b5a8-6f7d3459ff2c/ket0-2.png" alt="ket0"></li>
<li>古典ビットの「1」: 1が100%測定される状態<br>
<img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/9a7885ef-f000-4459-8eb8-a8ed076fe6e5/ket1-2.png" alt="ket1"></li>
<li>一般的な量子1ビット<br>
<img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/af71b94d-f1c5-4da3-ad69-0deefdf30da5/qubit1-2.png" alt="qubit1"></li>
<li>ブロッホ球:量子ビットの状態を仮想的に表した球<br>
<img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/e9594ab5-73d9-4f1d-9608-62543a689458/quantum_gates_bloch_sphere.png" alt="bloch-sphere"></li>
</ul>
</li>
<li>量子ゲート演算の基本
<ul>
<li>nビット量子ゲート演算<br>
2^n x 2^n の行列=ゲート( U )を 2^n 要素のベクトル = 量子nビットに作用させます。</li>
<li>1ビットの場合には以下の式で書けます。<br>
<img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/35eab83e-6b2c-42f7-a79b-79edc54648f1/quantum1_u_gate.png" alt="quantum1_u_gate"><br>
<img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/e7f633ef-3745-4a0e-99ac-7770757e24de/quantum1_u-1.png" alt="quantum1_u"></li>
</ul>
</li>
<li>1ビット量子ゲート
<ul>
<li>RYゲート: ブロッホ球のY軸の周りに位相をθだけ変化させます。<br>
<img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/ddc4adf9-d2b9-42cb-bc16-755dbf9dc023/ry-gate-1.png" alt="ry-gate"></li>
<li>RZゲート: ブロッホ球のZ軸の周りに位相をθだけ変化させます。<br>
<img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/c0bbdf6c-6650-41e0-8a10-4ad3fe7f45ce/rz-gate-1.png" alt="rz-gate"></li>
</ul>
</li>
<li>2ビット量子ゲート
<ul>
<li>CNOT(Controlled Not)ゲート: コントロールビット(下図の上側のビット)が1の時だけターゲットビット(下図の下側のビット)の値を反転させます。<br>
<img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/114d84fa-5c20-4ff6-b3dc-c5b02c4c6f27/cnot-gate-1.png" alt="cnot-gate"><br>
<img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/96cdff24-43c8-4f7e-bc5c-1d68d0cfea75/cnot-circuit.png" alt="cnot-circuit"></li>
<li>SWAPゲート: 2つのビットの値を交換します。<br>
<img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/bbd5349e-a253-429b-af9f-5791bf45754d/swap-gate-1.png" alt="swap-gate"><br>
<img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/ac550bb8-01b2-40be-a472-58deaf0a553f/swap-circuit.png" alt="swap-circuit"></li>
</ul>
</li>
<li>Quantum Unitary Gate
<ul>
<li>たとえば簡単のために α=π/4,γ=π/4 と仮定すると、U は以下のような演算になります。<br>
<img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/aa05c59b-70fc-405f-86ec-409a6acf6333/ui-simple.png" alt="ui-simple"><br>
<img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/7bfbc15b-d980-48c1-9e5a-d03e22ef0318/rz0.png" alt="rz0"><br>
<img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/2e4ec040-3d83-4165-a3c9-3118cb82094c/rz1.png" alt="rz1"><br>
<img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/14929f10-dc99-47ee-b8d9-02e7048c96ea/ui-result.png" alt="ui-result"><br>
SWAPゲートと一緒になります。ちょっと簡単にしすぎました。</li>
<li>論文による測定結果<br>
α を横軸にして γ=π/2,π/6,π/3 の場合の単位時間あたりのゲート実行時間を縦軸にした図です。<br>
<img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/f72780d3-32fd-4f72-bd30-0bebabd94ce8/5dacd6723662c60dec0d909e5a2f9c6a-png.png" alt="“Universal Quantum Control through Deep Reinforcement Learning” (Figure 3)"></li>
</ul>
<blockquote>
<p>“Universal Quantum Control through Deep Reinforcement Learning” (Figure 3)</p>
</blockquote>
</li>
</ul>
<h2>本記事のまとめ</h2>
<p>量子コンピュータの直近の主な課題の1つであるノイズ問題を改善する手法を提案する論文の背景と論文内に登場する技術を紹介しました。背景の状況や要素技術が理解できると論文の内容にも興味を持てるのではないでしょうか。</p>
<h2>参考文献</h2>
<ul>
<li><a href="https://www.nature.com/articles/s41534-019-0141-3.pdf">“Universal Quantum Control through Deep Reinforcement Learning”</a></li>
<li><a href="https://ai.googleblog.com/2019/10/improving-quantum-computation-with.html">&quot;Improving Quantum Computation with Classical Machine Learning&quot;</a></li>
<li><a href="https://www.shoeisha.co.jp/book/detail/9784798159928">現場で使える! Python深層強化学習入門 強化学習と深層学習による探索と制御</a></li>
<li><a href="https://book.mynavi.jp/ec/products/detail/id=90706">つくりながら学ぶ! 深層強化学習 PyTorchによる実践プログラミング</a></li>
<li><a href="https://www.shoeisha.co.jp/book/detail/9784798157467">絵で見てわかる量子コンピュータの仕組み</a></li>
</ul>
<p>CX（顧客体験）プラットフォーム「<a href="https://karte.io/">KARTE</a>」を運営するプレイドでは、KARTEを使ってこんなアプリケーションが作りたい！ KARTE自体の開発に興味がある！というエンジニア（インターンも！）を募集しています。<br>
詳しくは<a href="https://plaid.co.jp/recruit/engineer.html">弊社採用ページ</a>または<a href="https://www.wantedly.com/companies/plaid/projects">Wantedly</a>をご覧ください。 もしくはお気軽に、下記の「話を聞きに行きたい」ボタンを押してください！</p>
<div class="wantedly-visit-button" data-visit-button-id="lyE_IgY4VF5ukBo_EUKZLg" data-width="300" data-height="60"></div>
<script>
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "https://platform.wantedly.com/visit_buttons/script.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, "script", "wantedly-visit-buttons-wjs"));
</script>


PLAID Advent Calendar 2019 3日目 論文 “Universal Quantum Control through Deep Reinforcement Learning” の背景と要素技術の解説

深層強化学習は量子猫の夢を見るか？ | PLAID engineer blog

深層強化学習は量子猫の夢を見るか？

<html><head></head><body><p>@otolab です。</p>
<p>ITP 2.2, 2.3に関する調査を行いましたので、検証ツールの解説を行いたいと思います。</p>
<p>今回の検証では、ITP 2.2のリンク装飾（Link Decoration）されたランディングページによるcookieの保存期間短縮と、ITP 2.3で追加されたリファラへのリンク装飾に対する制限について調べています。</p>
<p>2つとも、広告流入時にIDを1st partyとして保存するようなケースを想定しており、流入元から対象サイトへの情報伝達・保存を制限するものです。</p>
<p>なお、localStorageに制限が掛かったことが2.3での変更の大きなポイントですが、制限の元となる条件は2.2のcookieと同様であるのと、localStorageの寿命を簡単に見る方法がないため今回はテストを行っていません。</p>
<p>この記事はITPについての基本的な知識がある前提で書いています。</p>
<h2 id="意外だったこと">意外だったこと</h2>
<ol>
<li>リンク装飾に対する制約は2PV目以降にも引き継がれる</li>
<li>trackerドメイン上でのインタラクションによる猶予の影響は受けない</li>
<li>レスポンスヘッダによる遷移はリンク装飾とみなされない（？）</li>
</ol>
<p>詳細は後述します。</p>
<h2 id="ツール">ツール</h2>
<p>実験しつつ書きつつだったので、コードやテスト内容は結構場当たり的ですが……。手元では再現性のあるテストを実行できるようになったので、公開します。</p>
<ul>
<li><a href="https://github.com/otolab/itp2.3-test" target="_blank" rel="noreferrer">検証ツール</a></li>
</ul>
<p>また、cookieの寿命(expire)をJavascriptから取得する手段がないので、適宜、Webインスペクタを開いてcookieの有効期限を確認してください。</p>
<p>mochaを使っていますが、上記の理由からタスクランナーとしてのみ使っている状態です。</p>
<h2 id="検証内容">検証内容</h2>
<p>検証に使ったのはSafari 13.0.1と、Safari Technology Preview Release 93です。</p>
<p>テストはコンソール(<code>localhost</code>), SiteA(対象サイト、<code>1stparty.localdomain</code>), SiteB(トラッカードメイン、<code>3rdpartytestwebkit.org</code>)の3つのホストにまたがって実行します。</p>
<p>コンソールはテスト実行の起点になるページで、遷移の関係をシンプルにするために導入しました。このページからのpopupはブロックしないように設定しておいてください。</p>
<p>SiteBはSafariがテスト用に最初からトラッカードメインとして判定しているドメインです。このドメインから対象サイトへの遷移が今回の検証のテーマになります。</p>
<p><code>3rdpartytestwebkit.org</code>, <code>1stparty.localdomain</code>は/etc/hostsなどにあらかじめ127.0.0.1として登録しておいてください。ローカルホストの別名として登録された状態になります。</p>
<p>テストは条件を変えてSiteB =&gt; SiteAの遷移を繰り返しながら、cookieを設定していきます。</p>
<h3 id="検証手順">検証手順</h3>
<ol>
<li>初期設定
<ol>
<li>SiteA, page1にアクセスして、Cookieを設定(key1, key2)</li>
</ol>
</li>
<li>リンク装飾付き遷移
<ol>
<li>SiteB, page1にアクセス<br>
metaタグによってSiteA, page2に装飾付きで遷移</li>
<li>SiteA, page2でCookieを設定(key3, key2)<br>
手動でリンクをクリックしてSiteA, page3に装飾なしで遷移</li>
<li>SiteA, page3でCookieを設定(key4, key1)</li>
</ol>
</li>
<li>リンク装飾なし、referrer装飾あり遷移
<ol>
<li>SiteB, page2にアクセス<br>
metaタグによってSiteB, page3に装飾付きで遷移</li>
<li>SiteB, page3にアクセス<br>
metaタグによってSiteA, page4に装飾なしで遷移</li>
<li>SiteA, page3でCookieを設定(key5)</li>
</ol>
</li>
<li>リンク装飾あり手動遷移
<ol>
<li>SiteB, page4にアクセス<br>
手動でリンクをクリックしてSiteA, page5に装飾付きで遷移</li>
<li>SiteA, page5でCookieを設定(key6)</li>
</ol>
</li>
</ol>
<p>Cookieはいずれも8日間で設定します。</p>
<h2 id="検証結果">検証結果</h2>
<h3 id="1. 初期設定">1. 初期設定</h3>
<p>1-1でCookie(key1, key2)を保存します。</p>
<p>document.cookieにjavascriptで値を保存しているので、8日間の有効期限を設けても7日間にまで制限されます。これはITP 2.1の効果ですね。</p>
<h3 id="2. リンク装飾付き遷移">2. リンク装飾付き遷移</h3>
<p>リンク装飾されたランディングページによる制限のテスト(2-2)。および2PV目での制限の継続をチェックするテスト(2-3)です。</p>
<p>2-2では新規のkey3の寿命が1dayまで短くなることが確認できます。また、1-1で設定したkey2を上書きすると同様に寿命が縮むのが確認できます。</p>
<p>ついでにリファラの短縮が起こらないことも確認しています。ここではSiteB, page1にリンク装飾がないため、このリファラ短縮の処理は起きていません。</p>
<p>2-3のテストを見てみましょう。ここで明文化されていない現象が観測できます。SiteA, page3はランディングページではなく、SiteA内で手動でリンクを踏んだ場合の遷移です。にもかかわらず、key4, key1の寿命は1dayに制限されます。</p>
<p>「意外だったことその1」です。</p>
<p>2PV目以降で再保存することで寿命が伸ばせてしまうと効果がない。ということなのでしょう。</p>
<h3 id="3. リンク装飾なし、referrer装飾あり遷移">3. リンク装飾なし、referrer装飾あり遷移</h3>
<p>ITP 2.3で追加されたリファラの短縮とリンク装飾の関係を調べます。</p>
<p>3-1, 3-2の遷移でSiteB, page3にリンク装飾を付け、そのままSiteA, page4にリンク装飾なしでランディングします。</p>
<p>すると、リファラの短縮が観測できます。また、Cookie(key5)の寿命が縮まないことも確認できました。2つは別のものとして扱われているようです。</p>
<p>また、詳細は不明なのですが、もう一度同じテストを流すとリファラの短縮が発生しないことがあります。毎回cacheを消すとリファラ短縮が安定して発生しするのですが……。バグなのか正しい挙動なのかは不明です。</p>
<h3 id="4. リンク装飾あり手動遷移">4. リンク装飾あり手動遷移</h3>
<p>トラッカードメイン上でのユーザインタラクションによってCookieの寿命を延長する処理があるので影響を調べましたが、リンクデコレーションの処理とは連携していないようです。</p>
<p>4-1でSiteB上でリンクをクリックした際に、ログを見るとインタラクションを検出したというログは出るようなのですが、4-2でCookieを保存すると1dayの制限がかかります。</p>
<p>今回はSiteB上でのインタラクションは影響してこないようです。広告のクリックの追跡を想定した制限のようなので、そういうものなのかもしれません。</p>
<p>「意外だったことその2」です。</p>
<h3 id="extra. レスポンスヘッダによるページ遷移">extra. レスポンスヘッダによるページ遷移</h3>
<p>「意外だったことその3」です。</p>
<p>テストツールのindex.jsの<a href="https://github.com/otolab/itp2.3-test/blob/e4cc3994a7e4fa74b2c40f5b8b3f5a1596e8b8e3/index.js#L16-L33" target="_blank" rel="noreferrer">16-33行のコメントアウト</a>を外します。そうすると、SiteBでのページ遷移がmetaタグではなく、レスポンスヘッダによるリダイレクトに置き換わります。</p>
<p>この状態でテストすると、じつはリンク装飾によるCookieの寿命短縮が発生しません。テスト方法が悪いのかブラウザのバグなのかはちょっとわからないのですが……。</p>
<p>どうも、現在のページのURLとリファラのURLの比較のみでリンク装飾の制約を掛けているのではないかなと言う印象を持ちました。レスポンスヘッダによる遷移だと、referrerの値がもう一つ前のページになるんですよね。今回のテストケースだとコンソール(<code>localhost</code>)がリファラになります。</p>
<h2 id="まとめと感想">まとめと感想</h2>
<p>ページ遷移の状態やキャッシュの影響を受けるらしく、挙動がなかなか安定しないため苦労しました……。</p>
<p>さて。</p>
<p>ITP 2.2, 2.3は、ランディングページにクエリ・フラグメントがつくケースすべてを対象としているために、「サイトの作り方」自体を制約して方向づけるような仕様変更であると言えます。たとえば、商品詳細ページに<code>?item=abc123</code>のようにクエリをつけて表現するサイトは、トラッカードメインとみなされたサイト上からのアクセスで、常時cookieやlocalStorageの保存に不安定さを抱えることになります。</p>
<p>今回の変更で不安定化するフェアユースの例としては、ログイン無しでのお気に入り機能などですね。実装方法を変えれば安定化は可能なので、Safariでの動作が必須ならばサイト自体に修正をいれることになるでしょう。</p>
<p>今後も機能の更新が想定されますので、注目していきたいと思います。</p>
<h2 id="参考">参考</h2>
<ul>
<li><a href="https://webkit.org/blog/8828/intelligent-tracking-prevention-2-2/" target="_blank" rel="noreferrer">Intelligent Tracking Prevention 2.2</a></li>
<li><a href="https://webkit.org/blog/9521/intelligent-tracking-prevention-2-3/" target="_blank" rel="noreferrer">Intelligent Tracking Prevention 2.3</a></li>
</ul>
<h2 id="いつもの">いつもの</h2>
<p>CX（顧客体験）プラットフォーム「<a href="https://karte.io/" target="_blank" rel="noreferrer">KARTE</a>」を運営するプレイドでは、顧客体験をよりよくするとはどういうことなのか、Webの未来はどう在るべきか、深く考えたいというエンジニア（インターンも）を募集しています。</p>
<p>詳しくは<a href="https://plaid.co.jp/recruit/engineer.html" target="_blank" rel="noreferrer">弊社採用ページ</a>または<a href="https://www.wantedly.com/companies/plaid/projects" target="_blank" rel="noreferrer">Wantedly</a>をご覧ください。 もしくはお気軽に、下記の「話を聞きに行きたい」ボタンを押してください。</p>
<div class="wantedly-visit-button" data-visit-button-id="lyE_IgY4VF5ukBo_EUKZLg" data-width="300" data-height="60"></div>
<script>
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "https://platform.wantedly.com/visit_buttons/script.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, "script", "wantedly-visit-buttons-wjs"));
</script>
</body></html>

ITP 2.2のリンク装飾に関する制限と、ITP 2.3のリファラへのリンク装飾に対する制限について検証を行いました。検証のためのツールを作ったので解説します


ITP 2.2, 2.3の検証ツールを作ってみた | PLAID engineer blog

ITP 2.2, 2.3の検証ツールを作ってみた

Vue.js の設計地図を作成しました。設計概念の依存関係の図式化して理解し、
フロントエンド設計をモデリング起点で考えたブログです。